<!-- -->
<template>
  <div class="display-group">
    <div
      class="display-item"
      v-for="(item, index) in dataList"
      :key="index"
      @click="handleClick(item)"
    >
      <img src="@/assets/imgs/relic.png" width="100%" :alt="item.title" />
      <div class="display-desc">
        <div class="desc-title">
          <h4>{{ item.title }}</h4>
        </div>
        <div class="desc-time">
          <span>{{ item.time }}</span>
        </div>
        <a class="desc-content" :alt="item.content">
          {{ item.content }}
        </a>
      </div>
      <div class="display-source">
        <span>遵义文物局</span>
        <el-button size="mini">进 入</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ThreeDimension",
  data() {
    return {
      dataList: [
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
        {
          imgUrl: "",
          title: "宋代鹭鸟纹彩色蜡染褶裙",
          time: "宋(960~1279)",
          content:
            "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质，白色，长31CM；裙身为棉质土布，长62.5CM，宽51.2CM。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleClick(item) {
      this.$emit("handleClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.display-group {
  margin-top: 24px;
  // padding: 0 16%;
  display: flex;
  flex-flow: row wrap;
  .display-item {
    width: 282px;
    margin-bottom: 32px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 32px 0;
    background-color: #fff;
    margin-right: 10px;
    cursor: pointer;
    img {
      border-radius: 16px 16px 0 0;
    }
    .display-desc {
      padding: 0 16px;
      .desc-content {
        text-indent: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
    }
    .display-source {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
    }
  }
}
</style>
