fix：更新一波

public/configExcel.js

@@ -545,6 +545,7 @@ var configExcel = {
       "标题（展示）": "竹禽图卷",
       "朝代": "宋",
       "作者": "赵佶",
+      "方向": '横向',
       "馆藏": "大都会艺术博物馆藏",
       "装裱\/材质\/笔类型": "轴 绢本 设色",
       "尺寸": "纵33.8厘米\n横55.4厘米",

src/views/MoreContent.vue

@@ -27,73 +27,73 @@
       >
         <img
           class="bamboo-4_01"
-          src="@/assets/images/fade-chapter-wood/4_01.png"
+          src="@/assets/images/fade-chapter-wood/4_01.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_02"
-          src="@/assets/images/fade-chapter-wood/4_02.png"
+          src="@/assets/images/fade-chapter-wood/4_02.webp"
           alt=""
           draggable="false"
         >
         <!-- <img
           class="bamboo-4_03"
-          src="@/assets/images/fade-chapter-wood/4_03.png"
+          src="@/assets/images/fade-chapter-wood/4_03.webp"
           alt=""
           draggable="false"
         > -->
         <!-- <img
           class="bamboo-4_04"
-          src="@/assets/images/fade-chapter-wood/4_04.png"
+          src="@/assets/images/fade-chapter-wood/4_04.webp"
           alt=""
           draggable="false"
         > -->
         <img
           class="bamboo-4_05"
-          src="@/assets/images/fade-chapter-wood/4_05.png"
+          src="@/assets/images/fade-chapter-wood/4_05.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_06"
-          src="@/assets/images/fade-chapter-wood/4_06.png"
+          src="@/assets/images/fade-chapter-wood/4_06.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_07"
-          src="@/assets/images/fade-chapter-wood/4_07.png"
+          src="@/assets/images/fade-chapter-wood/4_07.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_08"
-          src="@/assets/images/fade-chapter-wood/4_08.png"
+          src="@/assets/images/fade-chapter-wood/4_08.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_09"
-          src="@/assets/images/fade-chapter-wood/4_09.png"
+          src="@/assets/images/fade-chapter-wood/4_09.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_10"
-          src="@/assets/images/fade-chapter-wood/4_10.png"
+          src="@/assets/images/fade-chapter-wood/4_10.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_11"
-          src="@/assets/images/fade-chapter-wood/4_11.png"
+          src="@/assets/images/fade-chapter-wood/4_11.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-4_12"
-          src="@/assets/images/fade-chapter-wood/4_12.png"
+          src="@/assets/images/fade-chapter-wood/4_12.webp"
           alt=""
           draggable="false"
         >
@@ -107,25 +107,25 @@
       >
         <img
           class="bamboo-3_01"
-          src="@/assets/images/fade-chapter-wood/3_01.png"
+          src="@/assets/images/fade-chapter-wood/3_01.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-3_02"
-          src="@/assets/images/fade-chapter-wood/3_02.png"
+          src="@/assets/images/fade-chapter-wood/3_02.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-3_03"
-          src="@/assets/images/fade-chapter-wood/3_03.png"
+          src="@/assets/images/fade-chapter-wood/3_03.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-3_04"
-          src="@/assets/images/fade-chapter-wood/3_04.png"
+          src="@/assets/images/fade-chapter-wood/3_04.webp"
           alt=""
           draggable="false"
         >
@@ -139,19 +139,19 @@
       >
         <img
           class="bamboo-2_01"
-          src="@/assets/images/fade-chapter-wood/2_01.png"
+          src="@/assets/images/fade-chapter-wood/2_01.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-2_03"
-          src="@/assets/images/fade-chapter-wood/2_03.png"
+          src="@/assets/images/fade-chapter-wood/2_03.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-2_02"
-          src="@/assets/images/fade-chapter-wood/2_02.png"
+          src="@/assets/images/fade-chapter-wood/2_02.webp"
           alt=""
           draggable="false"
         >
@@ -163,19 +163,19 @@
         > -->
         <img
           class="bamboo-2_04"
-          src="@/assets/images/fade-chapter-wood/2_04.png"
+          src="@/assets/images/fade-chapter-wood/2_04.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-2_04-1"
-          src="@/assets/images/fade-chapter-wood/2_04-1.png"
+          src="@/assets/images/fade-chapter-wood/2_04-1.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-2_05"
-          src="@/assets/images/fade-chapter-wood/2_05.png"
+          src="@/assets/images/fade-chapter-wood/2_05.webp"
           alt=""
           draggable="false"
         >
@@ -189,7 +189,7 @@
       >
         <img
           class="bamboo-1_01"
-          src="@/assets/images/fade-chapter-wood/1_01.png"
+          src="@/assets/images/fade-chapter-wood/1_01.webp"
           alt=""
           draggable="false"
         >
@@ -218,7 +218,7 @@
         </div>
         <img
           class="bamboo-1_02"
-          src="@/assets/images/fade-chapter-wood/1_02.png"
+          src="@/assets/images/fade-chapter-wood/1_02.webp"
           alt=""
           draggable="false"
         >
@@ -255,13 +255,13 @@
         </div>
         <img
           class="bamboo-1_03"
-          src="@/assets/images/fade-chapter-wood/1_03.png"
+          src="@/assets/images/fade-chapter-wood/1_03.webp"
           alt=""
           draggable="false"
         >
         <img
           class="bamboo-1_04"
-          src="@/assets/images/fade-chapter-wood/1_04.png"
+          src="@/assets/images/fade-chapter-wood/1_04.webp"
           alt=""
           draggable="false"
         >
@@ -285,7 +285,7 @@
         </div>
         <img
           class="bamboo-1_05"
-          src="@/assets/images/fade-chapter-wood/1_05.png"
+          src="@/assets/images/fade-chapter-wood/1_05.webp"
           alt=""
           draggable="false"
         >
@@ -509,12 +509,9 @@ const maxTranslateLength = computed(() => {
 })
 
 
-
-const x = ref(0)
-
 const positionNumInit = computed(() => {
-  console.log('x=', x.value)
-  return x.value > 0.5 ? 236 : 216
+  console.log('x=', windowWidth.value / windowHeight.value)
+  return windowWidth.value / windowHeight.value >= 0.5 ? 236 : 206
 })
 
 
@@ -611,17 +608,7 @@ function onClickEntryAtMoZhu(pathName) {
 
 const videoFadeAtPage3El = ref(null)
 const isShowVideoFadeAtPage3 = ref(false)
-// function onClickEntryAtMoZhu(pathName) {
-//   isShowVideoFadeAtMoZhu.value = true
-//   nextTick(() => {
-//     videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
-//       router.push({
-//         name: pathName,
-//       })
-//     })
-//     videoFadeAtMoZhuEl.value.play()
-//   })
-// }
+
 watch(goingToAnchorIdx, (v) => {
   if (v === 2) {
     // 跳转到尾页
@@ -650,8 +637,6 @@ onBeforeMount(() => {
       if (dom && document.documentElement.clientWidth < 1000) {
         windowWidth.value = document.documentElement.clientWidth
         windowHeight.value = document.documentElement.clientHeight
-        x.value = windowWidth.value / windowHeight.value
-        console.log('x=', windowWidth.value / windowHeight.value)
       }
     }, 100)
   })
@@ -821,7 +806,7 @@ onMounted(() => {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(393px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(480px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
 
       >.bamboo-3_02 {
@@ -858,6 +843,7 @@ onMounted(() => {
       }
 
       >.bamboo-2_03 {
+        display: none;
         position: absolute;
         top: 0;
         height: 100%;
@@ -954,7 +940,7 @@ onMounted(() => {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(352px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(433px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
 
       >.mo-zhu-group {

src/views/ShuangGouSheSeDetail.vue

@@ -122,7 +122,7 @@ const text = [
   }
   .shuanggou-yezi{
     width: 100%;
-    animation: fade-in 5s forwards;
+    animation: fade-in 2s forwards;
     position: relative;
     z-index:2;
 
@@ -152,7 +152,7 @@ const text = [
   .text{
     display: flex;
     position: absolute;
-    right: 30%;
+    right: 30vw;
     top: 45vh;
     // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
     color: #707F48;

src/views/ShuanggouPaintingDetail copy.vue

@@ -0,0 +1,132 @@
+<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"
+          :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>

src/views/ShuanggouPaintingDetail.vue

@@ -25,6 +25,7 @@
           :author-desc="item['作者简介']"
           :big-painting="`${$env.BASE_URL}configMultiMedia/paintings/${item['标题']}.jpg`"
           :can-close="false"
+          :direction="item['方向']"
           :size="getPaintingSize(item['尺寸'])"
         >
           {{ item }}

src/views/StartupView.vue

@@ -3,14 +3,14 @@
     <span class="font-load-trigger">这是为了尽早触发字体文件加载</span>
 
     <!-- 背景序列帧 -->
-    <SerialFrames
+    <!-- <SerialFrames
       class="bg-serial-frames"
       :image-src="require(`@/assets/images/serial-frame-startup.png`)"
       :total-width="28800 / 900 * windowHeight"
       :height="windowHeight"
       :frame-number="48"
       :frame-duration="1000 / 12"
-    />
+    /> -->
 
     <img
       class="title"