Преглед на файлове

更新Tip字号 150%适配

aamin преди 1 година
родител
ревизия
52769a3f72
променени са 3 файла, в които са добавени 9 реда и са изтрити 8 реда
  1. 6 5
      src/components/OperationTip.vue
  2. 2 2
      src/views/HomeView.vue
  3. 1 1
      src/views/HotspotDetail3.vue

+ 6 - 5
src/components/OperationTip.vue

@@ -23,10 +23,11 @@
 </template>
 
 <script setup>
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { ref, computed, watch } from "vue"
+import { useWindowSize } from "@vueuse/core"
 
-const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const props = defineProps({
   type: {
@@ -83,12 +84,12 @@ watch(propIsShow, (v) => {
     margin-right: 5px;
     font-family: KaiTi;
     font-weight: 400;
-    font-size: 20px;
+    font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     white-space: pre;
   }
   > img {
-    width: 40px;
-    height: 41px;
+    width: calc(40px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(41px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
   }
 }
 </style>

+ 2 - 2
src/views/HomeView.vue

@@ -587,7 +587,7 @@ onMounted(() => {
 
   > .operation-tip {
     position: absolute;
-    right: 30px;
+    right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     transform: translateX(-50%);
     top: 50%;
     transform: translateY(-50%);
@@ -603,7 +603,7 @@ onMounted(() => {
   }
 
   > .text-box {
-    max-width: 450px;
+    max-width: calc(450px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

+ 1 - 1
src/views/HotspotDetail3.vue

@@ -262,7 +262,7 @@ const goState2 = () => {
 
   .operation-tip {
     position: absolute;
-    right: 30px;
+    right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     transform: translateX(-50%);
     top: 50%;
     transform: translateY(-50%);