Pārlūkot izejas kodu

fix:修改族谱叶子图像大小适配

aamin 1 gadu atpakaļ
vecāks
revīzija
e8305257c1
1 mainītis faili ar 14 papildinājumiem un 4 dzēšanām
  1. 14 4
      src/views/BambooBookScene2.vue

+ 14 - 4
src/views/BambooBookScene2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 
@@ -16,6 +16,15 @@ const curPart = ref(1)
 const emit = defineEmits(['next', 'close'])
 
 
+// 叶子图片适应
+
+const x = window.innerWidth / window.innerHeight
+
+onMounted(() => {
+  console.log('比例', x)
+})
+
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -31,6 +40,7 @@ const {
         </div>
         <img
           class="detail-img"
+          :style="{width: x > 0.5 ? '100%' :''}"
           :src="curPart == 1 ? ganImg : curPart == 2 ? zhiImg : yeImg"
           alt=""
         >
@@ -107,9 +117,9 @@ const {
       height: calc(506 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       object-fit: cover;
       object-position: left;
-      @media screen and (max-width: 350px) {
-        width: 100%;
-      }
+      // @media screen and (max-width: 350px) {
+      //   width: 100%;
+      // }
     }
 
     .options-box {