首页 发现 帮助
注册 登录
renyicun
/
WuxiCharityMuseum
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

傻逼华为平板浏览器的userAgent伪装得和pc端chrome一样，无法通过userAgent判断，所以软键盘弹出导致视口高度变小的问题只能对全部平台都采用同一种解决方案。

任一存 1 年之前
父节点
e28a4b9cba
当前提交
f8729f9a68
共有 8 个文件被更改，包括 250 次插入 和 11 次删除
合并视图 显示文件统计
  1. 3 1
      README.md
  2. 2 2
      public/index.html
  3. 3 2
      src/components/BtnClose.vue
  4. 3 1
      src/components/FeedBack.vue
  5. 4 1
      src/components/IframeWrap.vue
  6. 84 2
      src/components/LoginForm.vue
  7. 148 0
      src/components/PrizeRedeem.vue
  8. 3 2
      src/components/RelicSearch.vue

+ 3 - 1
README.md
查看文件 

@@ -15,4 +15,6 @@ https://open.weixin.qq.com/connect/qrconnect?appid=wx3d4f2e0cfc3b8e54&redirect_u
 
 * 1: 慈善堂
 
 * 1: 慈善堂
 
 * 2: 慈善广场
 
 * 2: 慈善广场
 
 * 3: 爱心林场 （需要登录）
 
 * 3: 爱心林场 （需要登录）
 
-* 4: 人物设置
 
+* 4: 人物设置
 
+
 
+## todo

+ 2 - 2
public/index.html
查看文件 

@@ -8,7 +8,7 @@
 
     <title>锡善云城</title>
 
     <title>锡善云城</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
-    <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
 
+    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
 
     <noscript>
 
     <noscript>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
     </noscript>
 
     </noscript>
 
@@ -16,7 +16,7 @@
 
     <!-- built files will be auto injected -->
 
     <!-- built files will be auto injected -->
 
 
 
     <script>
 
     <script>
 
-      // new VConsole()
 
+      new VConsole()
 
     </script>
 
     </script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 3 - 2
src/components/BtnClose.vue
查看文件 

@@ -2,7 +2,8 @@
 
   <button

   <button

     class="btn-close"

     class="btn-close"

     :class="{

     :class="{

-      android: $isAndroid,

+      // android: $isAndroid,

+      android: true,

     }"

     }"

   />

   />

 </template>

 </template>

@@ -28,7 +29,7 @@ const viewportHeightInDesign = inject('$viewportHeightInDesign')
 
   background-position: center center;

   background-position: center center;

 }

 }

 

 

-// 部分安卓浏览器里软键盘弹起会导致视口高度减小，不能采用把px自动转为vh的方案。

+// 部分安卓浏览器里软键盘弹起会导致视口高度减小，不能采用把px自动转为vh的方案。又因为傻逼华为平板浏览器的userAgent伪装得和pc端chrome一样，无法通过userAgent判断，所以只好对所有浏览器一律采用这个方案。

 .btn-close.android{

 .btn-close.android{

   width: calc(72Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

   width: calc(72Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

   height: calc(72Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

   height: calc(72Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+ 3 - 1
src/components/FeedBack.vue
查看文件 

@@ -2,7 +2,8 @@
 
   <div

   <div

     class="feed-back"

     class="feed-back"

     :class="{

     :class="{

-      android: $isAndroid,

+      // android: $isAndroid,

+      android: true,

     }"

     }"

   >

   >

     <BtnClose

     <BtnClose

@@ -309,6 +310,7 @@ const viewportHeightInDesign = inject('$viewportHeightInDesign')
 
   }

   }

 }

 }

 

 

+// 部分安卓浏览器里软键盘弹起会导致视口高度减小，不能采用把px自动转为vh的方案。又因为傻逼华为平板浏览器的userAgent伪装得和pc端chrome一样，无法通过userAgent判断，所以只好对所有浏览器一律采用这个方案。

 .feed-back.android{

 .feed-back.android{

   >div.paper-wrap{

   >div.paper-wrap{

     top: calc(60Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

     top: calc(60Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+ 4 - 1
src/components/IframeWrap.vue
查看文件 

@@ -40,7 +40,10 @@ onMounted(() => {
 
   iframeRef.value.contentWindow.openWindow = function(url) {

   iframeRef.value.contentWindow.openWindow = function(url) {

     console.log(`iframe: openWindow(${url})`)

     console.log(`iframe: openWindow(${url})`)

     if ($isSafari) {

     if ($isSafari) {

-      ElMessageBox.confirm(`即将打开网址：${url}`)

+      ElMessageBox.confirm(`即将打开网址：${url}`, '', {

+        confirmButtonText: '确定',

+        cancelButtonText: '取消',

+      })

         .then(() => {

         .then(() => {

           window.open(url, '_blank')

           window.open(url, '_blank')

         })

         })

+ 84 - 2
src/components/LoginForm.vue
查看文件 

@@ -1,5 +1,11 @@
 
 <template>

 <template>

-  <div class="login-form">

+  <div

+    class="login-form"

+    :class="{

+      // android: $isAndroid,

+      android: true,

+    }"

+  >

     <div class="papar">

     <div class="papar">

       <h1>邀&emsp;请&emsp;函</h1>

       <h1>邀&emsp;请&emsp;函</h1>

       <div class="p-wrapper">

       <div class="p-wrapper">

@@ -48,7 +54,7 @@
 
 </template>

 </template>

 

 

 <script setup>

 <script setup>

-import { ref, computed, watch, onMounted } from "vue"

+import { ref, computed, watch, onMounted, inject } from "vue"

 import { useRoute, useRouter } from "vue-router"

 import { useRoute, useRouter } from "vue-router"

 import { useStore } from "vuex"

 import { useStore } from "vuex"

 

 

@@ -73,6 +79,10 @@ function onClickAsVisitor() {
 
 function onClickLoginWx() {

 function onClickLoginWx() {

   location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx3d4f2e0cfc3b8e54&redirect_uri=https%3A%2F%2Fsit-wuxicishan.4dage.com%2F%23%2Flogin-temp&response_type=code&scope=snsapi_login&state=${encodeURIComponent(route.name)}#wechat_redirect`

   location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx3d4f2e0cfc3b8e54&redirect_uri=https%3A%2F%2Fsit-wuxicishan.4dage.com%2F%23%2Flogin-temp&response_type=code&scope=snsapi_login&state=${encodeURIComponent(route.name)}#wechat_redirect`

 }

 }

+

+const $isAndroid = inject('$isAndroid')

+const viewportHeight = window.innerHeight

+const viewportHeightInDesign = inject('$viewportHeightInDesign')

 </script>

 </script>

 

 

 <style lang="less" scoped>

 <style lang="less" scoped>

@@ -213,4 +223,76 @@ function onClickLoginWx() {
 
     }

     }

   }

   }

 }

 }

+

+.login-form.android{

+  >.papar{

+    width: calc(983Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+    height: calc(615Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+    h1{

+      top: calc(27Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      font-size: calc(30Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      line-height: calc(35Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+    }

+    >.p-wrapper{

+      top: calc(130Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      width: calc(723Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      >p:nth-of-type(1){

+        font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      }

+      >p:nth-of-type(2){

+        font-size: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        line-height: calc(32Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      }

+      >p:nth-of-type(3){

+        font-size: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        line-height: calc(32Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        margin-bottom: calc(40Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      }

+      >p:nth-of-type(4){

+        font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      }

+    }

+    >.bottom-wrap{

+      bottom: calc(59Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+      >input{

+        width: calc(160Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        height: calc(42Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        border-radius: calc(21Px / 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'));

+        padding-left: calc(13Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        margin-right: calc(8Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        &::placeholder {

+          font-size: calc(14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          line-height: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        }

+      }

+      >button.as-visitor{

+        width: calc(120Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        height: calc(42Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        border-radius: calc(21Px / 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'));

+        margin-right: calc(30Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        &[disabled] {

+        }

+      }

+      >button.as-wx-user{

+        width: calc(245Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        height: calc(42Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        border-radius: calc(21Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        border: calc(1Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight')) solid #E4D8A7;

+        font-size: calc(14Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        line-height: calc(16Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        >img{

+          width: calc(30Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          height: calc(30Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          margin-right: calc(1Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        }

+      }

+    }

+  }

+}

 </style>
 
 </style>

+ 148 - 0
src/components/PrizeRedeem.vue
查看文件 

@@ -2,6 +2,10 @@
 
   <div

   <div

     v-loading.fullscreen.lock="loading"

     v-loading.fullscreen.lock="loading"

     class="prize-redeem"

     class="prize-redeem"

+    :class="{

+      // android: $isAndroid,

+      android: true,

+    }"

   >

   >

     <BtnClose

     <BtnClose

       @click="emit('close')"

       @click="emit('close')"

@@ -185,6 +189,10 @@ async function onSubmit() {
 
     loading.value = false

     loading.value = false

   }

   }

 }

 }

+

+const $isAndroid = inject('$isAndroid')

+const viewportHeight = window.innerHeight

+const viewportHeightInDesign = inject('$viewportHeightInDesign')

 </script>

 </script>

 

 

 <style lang="less" scoped>

 <style lang="less" scoped>

@@ -429,4 +437,144 @@ async function onSubmit() {
 
     }

     }

   }

   }

 }

 }

+

+.prize-redeem.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.key-feedback{

+        }

+        >input, >textarea{

+          width: calc(506Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          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'));

+      }

+

+      >.row-score-current{

+        width: calc(660Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        margin-bottom: calc(10Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        >.key-score{

+          font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          letter-spacing: calc(8Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        }

+        >.value{

+          font-size: calc(24Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          line-height: calc(28Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        }

+      }

+      >.row-score-consume{

+        width: calc(660Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        margin-bottom: calc(10Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        >.key-score{

+          font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        }

+        >.value{

+          font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        }

+      }

+      >.row-score-remain{

+        width: calc(660Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        >.key-score{

+          font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+        }

+        >.value{

+          font-size: calc(20Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          line-height: calc(23Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+          &.minus{

+          }

+        }

+      }

+

+      >.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);

+    }

+  }

+  .cert-img {

+    &-wrap {

+      width: calc(506Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

+    }

+  }

+}

 </style>
 
 </style>

+ 3 - 2
src/components/RelicSearch.vue
查看文件 

@@ -2,7 +2,8 @@
 
   <div

   <div

     class="relic-search"

     class="relic-search"

     :class="{

     :class="{

-      android: $isAndroid,

+      // android: $isAndroid,

+      android: true,

     }"

     }"

   >

   >

     <BtnClose

     <BtnClose

@@ -248,7 +249,7 @@ const viewportHeightInDesign = inject('$viewportHeightInDesign')
 
   }

   }

 }

 }

 

 

-// 部分安卓浏览器里软键盘弹起会导致视口高度减小，不能采用把px自动转为vh的方案。

+// 部分安卓浏览器里软键盘弹起会导致视口高度减小，不能采用把px自动转为vh的方案。又因为傻逼华为平板浏览器的userAgent伪装得和pc端chrome一样，无法通过userAgent判断，所以只好对所有浏览器一律采用这个方案。

 .relic-search.android{

 .relic-search.android{

   >.search-bar{

   >.search-bar{

     margin-top: calc(77Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));

     margin-top: calc(77Px / v-bind('viewportHeightInDesign') * v-bind('viewportHeight'));