bug fix

src/components/BtnClose.vue

@@ -1,7 +1,19 @@
 <template>
-  <button class="btn-close" />
+  <button
+    class="btn-close"
+    :class="{
+      android: $isAndroid,
+    }"
+  />
 </template>
 
+<script setup>
+import { inject } from 'vue'
+
+const $isAndroid = inject('$isAndroid')
+const viewportHeight = window.innerHeight
+const viewportHeightInDesign = inject('$viewportHeightInDesign')
+</script>
 
 <style lang="less" scoped>
 .btn-close{
@@ -15,4 +27,12 @@
   background-repeat: no-repeat;
   background-position: center center;
 }
+
+// 部分安卓浏览器里软键盘弹起会导致视口高度减小，不能采用把px自动转为vh的方案。
+.btn-close.android{
+  width: calc(72Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+  height: calc(72Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+  top: calc(40Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+  right: calc(40Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+}
 </style>

src/components/FeedBack.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="feed-back">
+  <div
+    class="feed-back"
+    :class="{
+      android: $isAndroid,
+    }"
+  >
     <BtnClose
       @click="emit('close')"
     />
@@ -94,6 +99,7 @@ import { ElMessage } from 'element-plus'
 import { submitFeedback } from '@/api.js'
 
 const $env = inject('$env')
+const $isAndroid = inject('$isAndroid')
 
 const emit = defineEmits(['close'])
 
@@ -126,6 +132,9 @@ function onSubmit() {
     emit('close')
   })
 }
+
+const viewportHeight = window.innerHeight
+const viewportHeightInDesign = inject('$viewportHeightInDesign')
 </script>
 
 <style lang="less" scoped>
@@ -299,4 +308,103 @@ function onSubmit() {
     }
   }
 }
+
+.feed-back.android{
+  >div.paper-wrap{
+    top: calc(60Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    width: calc(925Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    height: calc(810Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    >article.paper{
+      padding-top: calc(73Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      padding-bottom: calc(64Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      >h1{
+        top: calc(-37Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        left: calc(36Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        font-size: calc(32Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        line-height: calc(38Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      }
+      >h2{
+        top: calc(6Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        left: calc(68Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        font-size: calc(14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        line-height: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      }
+      >.row{
+        margin-bottom: calc(37Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        >.key{
+          font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          letter-spacing: calc(7Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          margin-right: calc(34Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+        >.key.veri-code-key{
+          font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          line-height: 1Px;
+          letter-spacing: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          margin-right: calc(15Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+        >input, >textarea{
+          width: calc(506Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          box-shadow: 0Px 1Px 3Px 0Px rgba(255,255,255,0.25);
+          border-radius: calc(3Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          border: 1Px solid;
+          font-size: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          line-height: calc(19Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          padding-left: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          padding-right: calc(2Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          &::placeholder{
+          }
+        }
+        >input {
+          height: calc(51Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+        >textarea{
+          width: calc(506Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          height: calc(238Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          padding-top: calc(13Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          padding-bottom: calc(13Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+        >input.veri-code-input{
+          width: calc(338Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          margin-right: calc(15Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+        >button.get-veri-code{
+          width: calc(155Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          height: calc(51Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          border-radius: calc(3Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          >img{
+          }
+        }
+      }
+      >.splitter{
+        width: calc(830Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        border: 1Px solid #B5C2B9;
+        margin-bottom: calc(40Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      }
+      >.btn-group{
+        >button.cancel{
+          width: calc(194Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          height: calc(94Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          padding-bottom: calc(9Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+        >button.confirm{
+          width: calc(194Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          height: calc(94Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          padding-bottom: calc(9Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          &[disabled]{
+          }
+        }
+      }
+    }
+    >.deco{
+      left: calc(-14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      top: calc(14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      border: 1Px solid rgba(255, 255, 255, 0.5);
+    }
+  }
+}
 </style>

src/components/RelicSearch.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="relic-search">
+  <div
+    class="relic-search"
+    :class="{
+      android: $isAndroid,
+    }"
+  >
     <BtnClose
       @click="emit('close')"
     />
@@ -76,6 +81,7 @@ import BtnClose from '@/components/BtnClose.vue'
 import { getRelicList } from '@/api.js'
 
 const $env = inject('$env')
+const $isAndroid = inject('$isAndroid')
 
 const emit = defineEmits(['open'])
 
@@ -105,12 +111,14 @@ const loaded = ref(false)
 
 watchEffect(() => {
   getRelicList(keyword.value, activeAreaIdx.value > 0 ? areaList.value[activeAreaIdx.value] : null).then((res) => {
-    console.log('sdfsdf', res)
     relicList.value = res
     loaded.value = true
   })
 })
 
+const viewportHeight = window.innerHeight
+const viewportHeightInDesign = inject('$viewportHeightInDesign')
+
 </script>
 
 <style lang="less" scoped>
@@ -194,7 +202,7 @@ watchEffect(() => {
       align-items: center;
       margin-bottom: 40px;
       cursor: pointer;
-      >img{
+      >img.photo{
         flex-shrink: 0;
         width: 65px;
         height: 65px;
@@ -231,6 +239,83 @@ watchEffect(() => {
         width: 26px;
         height: 22px;
         margin-right: 1px;
+        >img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+// 部分安卓浏览器里软键盘弹起会导致视口高度减小，不能采用把px自动转为vh的方案。
+.relic-search.android{
+  >.search-bar{
+    margin-top: calc(77Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    width: calc(874Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    height: calc(70Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    padding-left: calc(65Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    padding-right: calc(32Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    box-shadow: 0Px 1Px 4Px 0Px rgba(255,255,255,0.25);
+    border-radius: calc(36Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    border: 1Px solid rgba(255, 255, 255, 0.5);
+    margin-bottom: calc(58Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    >input{
+      flex: 1 0 1Px;
+      font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      &::placeholder {
+        font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      }
+    }
+    >img{
+      width: calc(32Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      height: calc(32Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    }
+  }
+  >menu.tab-bar{
+    margin-bottom: calc(89Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    >button{
+      font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      &.active{
+        border-bottom: 1Px solid #fff;
+      }
+    }
+  }
+  >ul.relic-list{
+    flex: 1 0 1Px;
+    margin-bottom: calc(50Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+    >li.relic-item{
+      padding: 0 calc(40Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      height: calc(65Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      margin-bottom: calc(40Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+      >img.photo{
+        width: calc(65Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        height: calc(65Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        margin-right: calc(26Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        border: calc(3Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight')) solid #FFFFFF;
+      }
+      >.center{
+        width: calc(256Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        margin-right: calc(77Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        >.name{
+          font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          margin-bottom: calc(4Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+        >.desc{
+          font-size: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+          line-height: calc(19Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        }
+      }
+      >button.go{
+        width: calc(26Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        height: calc(22Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));
+        margin-right: 1Px;
+        >img{
+        }
       }
     }
   }

src/main.js

@@ -35,30 +35,15 @@ if (uaInfo.browser && uaInfo.browser.name === 'WeChat') {
 if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
   app.provide('$isSafari', true)
 }
+if (uaInfo.os && uaInfo.os.name === 'Android') {
+  app.provide('$isAndroid', true)
+}
 if (uaInfo.device.type === 'mobile') {
   app.provide('$isMobile', true)
 }
 
-// 处理resize事件
-let windowWidthLast = window.innerWidth
-let windowHeightLast = window.innerHeight
-function onResize() {
-  if (window.innerWidth === windowWidthLast) {
-    // 发生了高度变化，认为发生了软键盘显隐
-    if (uaInfo.os.name === 'Android') {
-      if (window.innerHeight < windowHeightLast) {
-        // ...
-      } else if (window.innerHeight > windowHeightLast) {
-        // ...
-      }
-    }
-  }
-  windowWidthLast = window.innerWidth
-  windowHeightLast = window.innerHeight
-}
-window.addEventListener('resize', () => {
-  onResize()
-})
+// 提供设计稿尺寸信息
+app.provide('$viewportHeightInDesign', 970)
 
 // // 禁用上下文菜单
 // document.oncontextmenu = function(e) {

src/views/BannerView.vue

@@ -7,10 +7,11 @@
   />
 
   <div
-    v-if="showVideo && videoUrl"
+    v-show="showVideo && videoUrl"
     class="banner-video"
   >
     <video
+      ref="startupVideoRef"
       :src="`/videos/${videoUrl}`"
       autoplay
       :muted="$isSafari"
@@ -33,15 +34,17 @@
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from "vue"
+import { ref, onMounted, inject, nextTick } from "vue"
 import { useRouter } from "vue-router"
 
-let checkedIdx = 0
 const router = useRouter()
+const $isSafari = inject('$isSafari')
+
+let checkedIdx = 0
 const videoUrl = ref('')
 const showVideo = ref(false)
+const startupVideoRef = ref(null)
 const bannerIframe = ref(null)
-const $isSafari = inject('$isSafari')
 
 const VIDEO_MAP = [
   'ysdt.mp4',
@@ -77,6 +80,9 @@ onMounted(() => {
   bannerIframe.value.contentWindow.OnClickScene = function(v) {
     videoUrl.value = VIDEO_MAP[v]
     showVideo.value = true
+    nextTick(() => {
+      startupVideoRef.value.play()
+    })
     checkedIdx = v
   }
 })