WuxiCharityMuseum/src/views/about/CollectionView.vue

<template>
  <div class="collection-view">
    <div class="wrapper">
      <div class="banner-area">
        <div class="search-wrapper">
          <input
            v-model.trim="keyword"
            type="text"
            placeholder="请输入要搜索的内容..."
          >
          <button class="search">
            <img
              class=""
              src="@/assets/images/icon_search-big.png"
              alt=""
              draggable="false"
            >
          </button>
        </div>
      </div>

      <div class="tab-bar">
        <button
          v-for="item in collectionTypeList"
          :key="item.id"
          class="tab-item"
          :class="{
            active: item.id === activeTabId
          }"
          @click="activeTabId = item.id"
        >
          {{ item.cn }}
        </button>
      </div>

      <div
        class="card-list"
      >
        <div
          v-for="item in collectionList"
          :key="item.name"
          class="card"
          @click="onClickCollection(item.bs)"
        >
          <img
            class="thumb"
            :src="`https://yuhuatai.4dage.com/YHT/goodsData/3D/${item.bs}.png`"
            alt=""
            draggable="false"
          >
          <div class="bottom">
            <span
              class="name"
              :title="item.name"
            >
              {{ item.name }}
            </span>
            <img
              class="icon"
              src="@/assets/images/icon_arrow-right-blue.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>
      </div>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="currentPage"
          class="pagination"
          :size="'large'"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="collectionListlengh"
          prev-text="上一页"
          next-text="下一页"
          :hide-on-single-page="true"
        />
      </div>
    </div>


    <router-view />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { fetchRelicList } from "@/api.js"

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const keyword = ref('')

const collectionTypeList = ref([{
  id: 'all',
  cn: '全部',
}, ...staticConfig.collectionTypeList])
const activeTabId = ref('all')

const currentPage = ref(1)
const pageSize = 8
const collectionListlengh = computed(() => {
  return fetchRelicList(activeTabId.value, keyword.value, currentPage.value - 1, pageSize).total
})
const collectionList = computed(() => {
  return fetchRelicList(activeTabId.value, keyword.value, currentPage.value - 1, pageSize).list
})

function onClickCollection(id) {
  router.push({
    name: 'CollectionDetail',
    query: {
      id,
    }
  })
}
</script>

<style lang="less" scoped>
.collection-view{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  >.wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    >.banner-area{
      width: 100%;
      height: calc(651 / 1920 * 100vw);
      background-image: url(@/assets/images/about/banner-collection.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      position: relative;
      >.search-wrapper{
        position: absolute;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        width: 790px;
        height: 70px;
        background: rgba(255,255,255,0.7);
        box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.25);
        border-radius: 35px;
        border: 2px solid #589498;
        display: flex;
        align-items: center;
        padding-left: 33px;
        padding-right: 29px;
        >input{
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #474747;
          width: 680px;
        }
        input::placeholder {
          color: #FFFFFF;
        }
        >button.search{
          pointer-events: none;
          width: 40px;
          height: 40px;
          padding: 5px;
          >img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    >.tab-bar{
      height: 138px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: calc(184 / 1920 * 100vw);
      >.tab-item {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        color: #474747;
        height: 38px;
      }
      >.tab-item.active{
        font-weight: bold;
        position: relative;
        z-index: 0;
        &::after{
          content: '';
          display: block;
          position: absolute;
          height: 14px;
          width: 100%;
          background: #FFE794;
          bottom: 0;
          z-index: -1;
        }
      }
    }
    >.card-list{
      height: calc(457px * 2 + 58px * 2);
      width: calc(355px * 4 + 36px * 4);
      margin-left: auto;
      margin-right: auto;
      transform: translate(calc(36px / 2), 0);
      >.card{
        display: inline-block;
        width: 355px;
        background: #FFFFFF;
        box-shadow: 0px 4px 62px 0px rgba(81,112,114,0.25);
        border-radius: 9px 9px 9px 9px;
        margin-right: 36px;
        margin-bottom: 58px;
        cursor: pointer;
        >img.thumb{
          width: 100%;
          height: 355px;
          object-fit: cover;
        }
        >.bottom{
          height: 102px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 42px;
          padding-right: 35px;
          >.name{
            font-family: Source Han Serif CN, Source Han Serif CN;
            font-weight: bold;
            font-size: 21px;
            color: #474747;
            width: 240px;
            overflow: hidden;
            white-space: pre;
            text-overflow: ellipsis;
          }
          >img.icon{
            height: 39px;
          }
        }
      }
      >.card:hover{

      }
    }
    >.pagination-wrap{
      display: flex;
      justify-content: center;
      padding-bottom: 52px;
      >.pagination{
        ::v-deep{
          button.btn-prev, button.btn-next{
            width: 126px;
            height: 45px;
            border-radius: 23px;
            border: 1px solid #474747;
            margin-left: 20px;
            margin-right: 20px;
            >span{
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 20px;
              color: #474747;
            }
          }
          ul.el-pager{
            >li.number{
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 20px;
              color: #474747;
            }
            >li.number.is-active{
              color: #47392C;
              background: #FFE794;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
</style>