YangZhouDaYunHeDaDu/src/views/RelicList.vue

<template>
  <div class="relic-list">
    <button
      class="return"
      @click="router.go(-1)"
    />
    <menu>
      <button class="scene-select">
        大汗之城
      </button>
      <button class="camera-select">
        雄伟帝都
      </button>
      <button class="all">
        全部
      </button>
    </menu>
    <div class="search-ui">
      <input
        v-model.trim="keyword"
        type="text"
        placeholder="请输入要搜索内容"
        @keydown.enter="onSearch"
      >
      <button
        class="search"
        @click="onSearch"
      />
    </div>
    <div
      class="the-list"
    >
      <div
        ref="listEl"
        class="content-wrap"
      >
        <div
          v-for="(item, idx) in relicData"
          :key="idx"
          class="relic-item"
          @click="onClickItem(idx)"
        >
          <img
            class=""
            :src="getRelicThumbUrl(idx)"
            alt=""
            draggable="false"
          >
          <div
            class="name"
            :title="item['名称']"
          >
            {{ item['名称'] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * todo: 自动恢复上次滚动位置
 */
import { ref, computed, watch, watchEffect, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
import { useElementSize } from '@vueuse/core'

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

const keyword = ref('')
function onSearch() {
}

const sceneIdx = computed(() => {
  return route.query.sceneIdx
})
const cameraIdx = computed(() => {
  return route.query.cameraIdx
})

const relicData = computed(() => {
  return store.getters.relicData
})

function getRelicThumbUrl(idx) {
  if (Array.isArray(relicData.value[idx]['图片名']) && relicData.value[idx]['图片名'][0]) {
    return `${process.env.BASE_URL}relic-data/small-photo/${relicData.value[idx]['图片名'][0]}`
  } else {
    return ''
  }
}

const listEl = ref(null)
const { width: listWidth, height: listHeight } = useElementSize(listEl)
const { hasOperatedThisTime } = useSmoothSwipe({
  scrollTargetRef: listEl,
  viewportWidth: listWidth,
})

function onClickItem(idx) {
  if (!hasOperatedThisTime.value) {
    router.push({
      name: 'RelicDetail',
      query: {
        sceneIdx: route.query.sceneIdx,
        cameraIdx: route.query.cameraIdx,
        relicIdx: idx,
      }
    })
  }
}
</script>

<style lang="less" scoped>
@page-height-design-px: 970;
.relic-list{
  height: 100%;
  background-image: url(@/assets/images/relic-list-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  >button.return{
    position: absolute;
    width: 58px;
    height: 58px;
    left: 42px;
    top: 68px;
    background-image: url(@/assets/images/btn-return.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  >menu{
    position: absolute;
    width: 524px;
    height: 66px;
    left: 150px;
    top: 64px;
    background-image: url(@/assets/images/relic-list-page-menu-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    >button.scene-select{
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      width: 220px;
      height: 50px;
      padding-left: 10px;
      font-size: 30px;
      font-family: Source Han Serif CN, Source Han Serif CN;
      font-weight: bold;
      color: #43310E;
      line-height: 46px;
      letter-spacing: 6px;
    }
    >button.camera-select{
      position: absolute;
      top: 50%;
      left: 230px;
      transform: translateY(-50%);
      width: 160px;
      height: 50px;
      font-size: 24px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #FFF7D9;
      line-height: 36px;
      letter-spacing: 5px;
    }
    >button.all{
      position: absolute;
      top: 50%;
      left: 400px;
      transform: translateY(-50%);
      width: 100px;
      height: 50px;
      font-size: 24px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: rgba(255,247,217,0.7);
      line-height: 36px;
      letter-spacing: 5px;
    }
  }
  >.search-ui{
    position: absolute;
    top: 65px;
    right: 27px;
    width: 406px;
    height: 62px;
    background-image: url(@/assets/images/search-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    >input{
      position: absolute;
      left: 50px;
      top: 50%;
      transform: translateY(-50%);
      height: 35px;
      width: 250PX;
      font-size: 24px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: rgba(255,255,255,0.7);
      line-height: 28px;
      &::placeholder{
        font-size: 24px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255,255,255,0.3);
        line-height: 28px;
      }
    }
    >button.search{
      position: absolute;
      width: 31px;
      height: 31px;
      position: absolute;
      top: 50%;
      right: 53px;
      transform: translateY(-50%);
      background-image: url(@/assets/images/icon-search.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  >.the-list{
    position: absolute;
    left: 0;
    top: 150px;
    width: 100%;
    height: calc(650 / @page-height-design-px * 100vh);
    background-image: url(@/assets/images/relic-list-bg-1.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: calc(56 / @page-height-design-px * 100vh);
    box-sizing: border-box;
    >.content-wrap{
      &::-webkit-scrollbar { height: 0; }
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      overflow: auto;
      user-select: none;
      display: flex;
      align-items: center;
      background-image: url(@/assets/images/relic-list-bg-2.png);
      background-size: auto 92%;
      background-repeat: repeat no-repeat;
      background-position: left 44%;
      background-attachment: local;
      padding-top: calc(50 / @page-height-design-px * 100vh);
      >.relic-item{
        flex: 0 0 auto;
        width: calc(290 / @page-height-design-px * 100vh);
        height: 80%;
        padding: calc(10 / @page-height-design-px * 100vh);
        margin-right: calc(100 / @page-height-design-px * 100vh);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        >img{
          flex: 0 0 auto;
          width: 100%;
          height: calc(150 / @page-height-design-px * 100vh);
          object-fit: contain;
          margin-bottom: calc(10 / @page-height-design-px * 100vh);
        }
        >.name{
          text-align: center;
          flex: 0 0 auto;
          height: 4em;
          width: 100%;
          font-size: calc(32 / @page-height-design-px * 100vh);
          font-family: Source Han Serif CN, Source Han Serif CN;
          font-weight: 500;
          color: #281D0C;
          line-height: calc(37 / @page-height-design-px * 100vh);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    }
  }
}
</style>