NanjingMuseumWuJinZang/src/views/ShuanggouPaintingDetail.vue

<template>
  <div class="painting-detail-list">
    <!-- <div class="bg-left" /> -->
    <Swiper
      class="painting-list"
      :initial-slide="Number(route.query.idx)"
      :slides-per-view="1"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <SwiperSlide
        v-for="item in showPaintingList"
        :key="item['标题']"
        class="swiper-slider"
      >
        <PaintingDetail
          class="painting-item"
          :thumb="`${$env.BASE_URL}configMultiMedia/paintings-small/${item['标题']}.jpg`"
          :title="item['标题（展示）']"
          :author="item['作者']"
          :age="item['朝代']"
          :subtitle="item['装裱\/材质\/笔类型']"
          :location="item['馆藏']"
          :painting-desc="item['简介']"
          :author-desc="item['作者简介']"
          :big-painting="`${$env.BASE_URL}configMultiMedia/paintings/${item['标题']}.jpg`"
          :can-close="false"
          :direction="item['方向']"
          :size="getPaintingSize(item['尺寸'])"
        >
          {{ item }}
        </PaintingDetail>
      </SwiperSlide>
    </Swiper>
    <OperationTip
      class="operation-tip"
      direction="h"
      :is-show="isShowOperationTip"
    />
    <BtnBack
      class="btn-back"
      @click="router.go(-1)"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import PaintingDetail from '@/views/PaintingDetail.vue'
import useSizeAdapt from "@/useFunctions/useSizeAdapt"

const getPaintingSize = utils.getPaintingSize

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

const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const paintingList = configExcel['画作']

const showPaintingList = computed(() => {
  return paintingList.filter(item => item['标题'] === '竹禽图卷' || item['标题'] === '桃竹双凫图')
})


/**
 * swiper
 */
let swiper = null
const onSwiper = (swiperP) => {
  swiper = swiperP
}
const onSlideChange = (e) => {
  if (isShowOperationTip.value && e.activeIndex !== Number(route.query.idx)) {
    isShowOperationTip.value = false
  }
}

const isShowOperationTip = ref(true)
</script>

<style lang="less" scoped>
.painting-detail-list{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  >.bg-left{
    background: linear-gradient(90deg, #7b916b 0%, #94a586 100%);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: -1;
  }
  >.painting-list{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
    // background: linear-gradient(rgba(123,145,107,0.62) 0%, rgba(0,0,0,0.3) 100%);
    background-image:url(@/assets/images/shuanggou-detail.jpg);
    background-size: 100% 100%;
    .swiper-slide{
      >.painting-item{
        position: relative !important;
      }
    }
  }
  >.operation-tip{
    position: absolute;
    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-50%);
    z-index: 10;
  }
  >.btn-back{
    z-index: 10;
  }
}
</style>