更新部分文物缩略图；文武列表页改版

src/useFunctions/useSizeAdapt.js

@@ -6,14 +6,16 @@ import { onBeforeUnmount, ref } from 'vue'
 export default function useSizeAdapt(windowWidthWhenDesign = 1920, windowHeightWhenDesign = 1080) {
   const windowSizeInCssForRef = ref('')
   const windowSizeWhenDesignForRef = ref('')
-
+  const scaleForRef = ref('')
   function compute() {
     if (window.innerWidth / window.innerHeight > windowWidthWhenDesign / windowHeightWhenDesign) {
       windowSizeWhenDesignForRef.value = windowHeightWhenDesign
       windowSizeInCssForRef.value = window.innerHeight + 'px' // 用100vh的话在移动端会有兼容性问题。
+      scaleForRef.value = String(window.innerHeight / windowHeightWhenDesign)
     } else {
       windowSizeWhenDesignForRef.value = windowWidthWhenDesign
       windowSizeInCssForRef.value = '100vw'
+      scaleForRef.value = String(window.innerWidth / windowWidthWhenDesign)
     }
   }
 
@@ -26,5 +28,6 @@ export default function useSizeAdapt(windowWidthWhenDesign = 1920, windowHeightW
   return {
     windowSizeInCssForRef,
     windowSizeWhenDesignForRef,
+    scaleForRef,
   }
 }

src/views/RelicList.vue

@@ -51,8 +51,8 @@
             isScene1: item.sceneIdx === 0,
             isScene2: item.sceneIdx === 1,
             isScene3: item.sceneIdx === 2,
-            isOdd: (idx + 1) % 2 === 0,
-            isEven: (idx + 1) % 2 === 1,
+            isOdd: (idx) % 2 === 0,
+            isEven: (idx) % 2 === 1,
           }"
           @click="onClickItem(item.idx)"
         >
@@ -85,12 +85,14 @@ import { ref, computed, watch, watchEffect, onMounted, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
-import { useElementSize } from '@vueuse/core'
+import { useElementSize, useWindowSize } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const { height: windowHeight } = useWindowSize()
+
 const cascaderValueInit = (route.query.sceneIdx && route.query.cameraIdx) ? [route.query.sceneIdx, route.query.cameraIdx] : ['0', '0']
 const cascaderValue = ref(cascaderValueInit)
 const cameraTree = ref([
@@ -419,10 +421,21 @@ function onClickItem(idx) {
         >img {
           position: absolute;
           left: 0;
-          bottom: calc(40 / @page-height-design-px * 100vh * 0.83);
-          width: 100%;
-          height: 40%;
+          left: 50%;
+          translate: -50% 0;
           object-fit: contain;
+          scale: calc(v-bind('windowHeight') / @page-height-design-px);
+          transform-origin: center bottom;
+        }
+      }
+      >.relic-item.isOdd{
+        >img{
+          bottom: calc(250 / @page-height-design-px * 100vh * 0.83);
+        }
+      }
+      >.relic-item.isEven{
+        >img{
+          bottom: calc(120 / @page-height-design-px * 100vh * 0.83);
         }
       }
       >.relic-item.isScene1.isOdd{