<!-- -->
<template>
  <div class="home-display">
    <div class="title">展览</div>
    <div class="wrapper">
      <div class="content">
        <div class="content-name">汉抚琴俑</div>
        <div class="content-intro">
          “琴、弦乐也，神农所作”。琴乃中国历代文人雅士所崇尚的传统乐器，至汉代更成为八音之首，并形成了一整套的演奏礼制。所谓“琴者，禁也”，即要求抚琴之人须于演奏之前淋浴净身、焚香礼拜，并且摒弃一切私欲杂念，做到琴人合一，以求天籁之音。可见古人对于琴何其器重！琴，作为极具张力的弹弦乐器，从娱神、娱人到自娱，要么以独奏形式出现，要么同竽、箫、鼓、钹等乐器组合演奏，成为中国古代音乐体系中，特别是汉代“弦歌”中既常见、且十分重要的一种演奏形式。这一点可以从同期汉画或汉墓陶俑中得以充分验证。抚琴俑作为汉俑名品，在海内外极负盛名，影响深远。
        </div>
      </div>
      <div class="img">
        <img src="@/assets/imgs/test/display1.png" alt="" />
        <div class="img-name">汉抚琴俑</div>
      </div>
      <div class="pagination">
        <ul>
          <li
            v-for="(item, index) in [1, 2, 3, 4]"
            :key="index"
            :class="currentPage == item ? 'active' : ''"
            @click="handleChangePage(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommendDisplay } from "@/api/display";
export default {
  data() {
    return {
      list: [],
      currentPage:1
    };
  },
  mounted() {
    this.loadList();
  },
  methods: {
    async loadList() {
      const params = {
        page: 1,
        limit: 6,
      };
      let res = await getRecommendDisplay();
    },
    handleChangePage(page){
      this.currentPage =page
    }
  },
};
</script>

<style lang="scss" scoped>
.home-display {
  background-image: url("@/assets/imgs/home/cr-bg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 13%;
  
  .title {
    color: #fff;
    margin-top: 70px;
    margin-bottom: 90px;
    font-family: "Alibaba PuHuiTi";
  }
  .wrapper {
    display: flex;
    width: 100%;
    .content {
      width: 800px;
      .content-name {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 40px;
        font-family: "Alibaba PuHuiTi";
      }
      .content-intro {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 40px;
        font-family: "Alibaba PuHuiTi";
      }
    }
    .img {
      position: absolute;
      top: 45%;
      // transform: translateY(-50%);
      right: 13%;
    }
    .img-name {
      display: flex;
      justify-content: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #88754d;
    }
    .pagination {
      position: absolute;
      bottom: 80px;
      right: 13%;
      ul {
        display: flex;
        li {
          width: 22px;
          height: 22px;
          margin-right: 25px;
          color: #999;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .active {
          background: #2069c4;
          color: #fff;
        }
      }
    }
  }
}
</style>
