소스 검색

优化微信浏览器

aamin 1 년 전
부모
커밋
3302931d81
3개의 변경된 파일32개의 추가작업 그리고 4개의 파일을 삭제
  1. 22 1
      src/App.vue
  2. 4 2
      src/components/ForeWord.vue
  3. 6 1
      src/views/EntryList.vue

+ 22 - 1
src/App.vue

@@ -44,7 +44,7 @@
 
 <script setup>
 import { useWindowSize } from '@vueuse/core'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, onMounted } from 'vue'
 import ToastComp from "@/components/ToastComp.vue"
 import { isShowToast } from "@/store/index.js"
 import { useRoute, useRouter } from "vue-router"
@@ -64,6 +64,27 @@ console.log(windowWidth)
 const windowOrientation = computed(() => {
   return windowWidth.value >= windowHeight.value ? 'landscape' : 'portrait'
 })
+
+const time = ref({
+  current: null
+})
+onMounted(() => {
+  // 移动端
+  window.addEventListener(
+    "resize",
+    () => {
+      // @ts-ignore
+      clearTimeout(time.value.current)
+      time.value.current = window.setTimeout(() => {
+        const dom = document.querySelector("#app")
+        if (dom && document.documentElement.clientWidth < 480) {
+          dom.style.height = document.documentElement.clientHeight + "px"
+        }
+      }, 100)
+    },
+    true
+  )
+})
 </script>
 
 <style lang="less">

+ 4 - 2
src/components/ForeWord.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue"
+import { onMounted, ref } from "vue"
 import { hasShownForword } from "@/store/index.js"
 
 const emit = defineEmits(['close'])
@@ -37,6 +37,8 @@ const {
 
 const isShowForeword = ref(true)
 
+
+
 </script>
 
 <style lang="less" scoped>
@@ -57,7 +59,7 @@ const isShowForeword = ref(true)
     height: 100%;
     z-index: 5;
     background-image: url(@/assets/images/foreword-bg-new.jpg);
-    background-size: cover;
+    background-size:  100% 100%;
     background-repeat: no-repeat;
     background-position: center center;
     >article{

+ 6 - 1
src/views/EntryList.vue

@@ -80,7 +80,8 @@ function onWheel(e) {
   align-items: center;
   background-image: url(@/assets/images/foreword-bg.jpg);
   >ul.entry-list{
-    height: 100%;
+    // height: 100%;
+    height: 95%;
     width: 100%;
     padding-left: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     display: flex;
@@ -102,6 +103,10 @@ function onWheel(e) {
         display: inline-block;
         text-align: center;
       }
+      >img {
+        // height: 100%;
+        height: 100%;
+      }
     }
   }
   >button.return{