YangZhouDaYunHe/src/views/UnitList.vue

<template>
  <div class="unit-list">
    <main>
      <h3 class="foreword">
        前言
      </h3>
      <p class="foreword">
        {{ data?.preface }}
      </p>
      <ul>
        <li
          v-for="(item, idx) in data?.list"
          :key="item.id"
          @click="$router.push({
            name: 'RelicList',
            query: {
              unitIdx: idx,
            },
          })"
        >
          <h3>{{ item.label }}</h3>
          <p>{{ item.info }}</p>
          <button class="detail-entry">
            藏品鉴赏
            <img
              class="arrow"
              src="@/assets/images/red-arrow-right.png"
              alt=""
              draggable="false"
            >
          </button>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  data() {
    return {
      isExpand: false,
    }
  },
  computed: {
    ...mapState([
      'data'
    ])
  },
  mounted() {
    console.log(this.data, 'dskfjslkfj')
  },
  methods: {
  },
}
</script>

<style lang="less" scoped>
.unit-list{
  height: 100%;
  position: relative;
  background-image: url(@/assets/images/unit-list-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: auto;
  &::-webkit-scrollbar { width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/

  h3{
    font-size: 30px;
    font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
    font-weight: 400;
    color: #404036;
  }
  p{
    font-size: 16px;
    font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
    font-weight: 400;
    color: #404036;
    line-height: 28px;
    width: 73.6vw;
    text-indent: 2em;
  }
  >main{
    display: flex;
    flex-direction: column;
    align-items: center;
    >h3.foreword{
      margin-top: 46px;
      margin-bottom: 32px;
    }
    >p.foreword{
      margin-bottom: 90px;
    }
    >ul{
      >li{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 76.4vw;
        cursor: pointer;
        margin-bottom: 10px;
        &:hover{
          box-shadow: 3px 6px 19px 0px rgba(61, 34, 3, 0.2);
          >h3{
            &::before{
              content: '';
              display: inline-block;
              position: absolute;
              left: -12px;
              top: 50%;
              transform: translate(-100%, -50%);
              width: 38px;
              height: 38px;
              background-image: url(@/assets/images/title-deco.png);
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center center;
            }
          }
          >p{
            margin-bottom: 33px;
          }
          >button.detail-entry{
            display: flex;
            justify-content: center;
            align-items: center;
            >img.arrow{
              margin-left: 9px;
            }
          }
        }
        >h3{
          position: relative;
          margin-top: 42px;
          margin-bottom: 32px;
        }
        >p{
          margin-bottom: 99px;
        }
        >button.detail-entry{
          display: none;
          width: 209px;
          height: 48px;
          background-image: url(@/assets/images/relic-list-page-entry-button-deco.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin-bottom: 18px;
          font-size: 20px;
          font-family: Source Han Serif CN-Bold, Source Han Serif CN;
          font-weight: bold;
          color: #7F0007;
          line-height: 28px;
        }
      }
    }
  }
}
</style>