傻逼玩意儿

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",

public/index.html

@@ -13,7 +13,6 @@
     <script src="./libs/isotope-layout.3.0.6.js"></script>
     <script src="./libs/packery-mode.2.0.1.js"></script>
 
-    
     <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

src/App.vue

@@ -487,11 +487,11 @@ html, body {
       background-position: center center;
       // background-color: #0c0d12;
       >button.tab-item {
-        font-size: calc(30 / 1080 * 100vh);
+        font-size: calc(30 / 1080 * 83vh);
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
-        margin-left: calc(200 / 1080 * 100vh);
+        margin-left: calc(200 / 1080 * 83vh);
         opacity: 0.5;
         position: relative;
         user-select: none;
@@ -505,31 +505,27 @@ html, body {
           opacity: initial;
           font-weight: bold;
           >img.decorator {
-            display: initial;
-            position: absolute;
-            left: 50%;
-            bottom: -calc(15 / 1080 * 100vh);
-            transform: translateX(-50%);
-            width: 150%;
+            display: none;
+            // display: initial;
+            // position: absolute;
+            // left: 50%;
+            // bottom: -calc(15 / 1080 * 83vh);
+            // transform: translateX(-50%);
+            // width: 150%;
           }
         }
       }
     }
     >button.show-hide {
       position: fixed;
-      right: calc(82 / 1080 * 100vh);
-      bottom: calc(28 / 1080 * 100vh);
-      width: calc(36 / 1080 * 100vh);
-      height: calc(36 / 1080 * 100vh);
+      right: calc(82 / 1080 * 83vh);
+      bottom: calc(28 / 1080 * 83vh);
+      width: calc(36 / 1080 * 83vh);
+      height: calc(36 / 1080 * 83vh);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
     }
-    @media only screen and (max-width: 1400px) {
-      >button.show-hide {
-        right: calc(10 / 1080 * 100vh);
-      }
-    }
   }
 }
 </style>

src/components/HistoryPersonCard.vue

@@ -186,12 +186,12 @@ export default {
     box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.3);
     &.tall{
       text-align: center;
-      width: calc(354 / 1080 * 100vh);
-      height: calc(509 / 1080 * 100vh);
+      width: calc(354 / 1080 * 120vh);
+      height: calc(509 / 1080 * 120vh);
     }
     &.fat{
-      width: calc(389 / 1080 * 100vh);
-      height: calc(268 / 1080 * 100vh);
+      width: calc(389 / 1080 * 120vh);
+      height: calc(268 / 1080 * 120vh);
     }
     >.inner-wrap{
       width: 100%;

src/components/HomeFadeIn.vue

@@ -103,13 +103,13 @@ export default {
       top: 50%;
       transform: translate(-50%, -50%);
       >span:nth-of-type(1) {
-        font-size: calc(32 / 1080 * 100vh);
+        font-size: calc(32 / 1080 * 83vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
       }
       >span:nth-of-type(2) {
-        font-size: calc(16 / 1080 * 100vh);
+        font-size: calc(16 / 1080 * 83vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
@@ -118,9 +118,9 @@ export default {
     >.organization {
       position: absolute;
       left: 50%;
-      bottom: calc(38 / 1080 * 100vh);
+      bottom: calc(38 / 1080 * 83vh);
       transform: translate(-50%, -50%);
-      font-size: calc(24 / 1080 * 100vh);
+      font-size: calc(24 / 1080 * 83vh);
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
       color: #FFFFFF;

src/components/TreasureShare.vue

@@ -259,23 +259,23 @@ export default {
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      width: calc(717 / 1080 * 100vh);
+      width: calc(717 / 1080 * 83vh);
       height: 83.7%;
       background-image: url(@/assets/images/general-article-bg.png);
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: left top;
-      padding: calc(32 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh);
+      padding: calc(32 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh);
       display: flex;
       flex-direction: column;
       background-color: rgba(40, 47, 58, 0.7);
-      backdrop-filter: blur(calc(50 / 1080 * 100vh));
+      backdrop-filter: blur(calc(50 / 1080 * 83vh));
       >button.close {
         position: absolute;
-        top: calc(30 / 1080 * 100vh);
-        right: calc(50 / 1080 * 100vh);
-        width: calc(32 / 1080 * 100vh);
-        height: calc(32 / 1080 * 100vh);
+        top: calc(30 / 1080 * 83vh);
+        right: calc(50 / 1080 * 83vh);
+        width: calc(32 / 1080 * 83vh);
+        height: calc(32 / 1080 * 83vh);
         background-image: url(@/assets/images/icon-close.png);
         background-size: cover;
         background-repeat: no-repeat;
@@ -283,11 +283,11 @@ export default {
       }
       >h2 {
         flex: 0 0 auto;
-        font-size: calc(30 / 1080 * 100vh);
+        font-size: calc(30 / 1080 * 83vh);
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
         color: #FFFFFF;
-        margin-bottom: calc(21 / 1080 * 100vh);
+        margin-bottom: calc(21 / 1080 * 83vh);
         overflow: hidden;
         white-space: pre;
         text-overflow: ellipsis;
@@ -295,61 +295,61 @@ export default {
       >img.splitter {
         flex: 0 0 auto;
         width: 100%;
-        margin-bottom: calc(37 / 1080 * 100vh);
+        margin-bottom: calc(37 / 1080 * 83vh);
       }
       >img.photo {
         flex: 0 0 auto;
         width: 100%;
         height: 43%;
         object-fit: contain;
-        margin-bottom: calc(32 / 1080 * 100vh);
+        margin-bottom: calc(32 / 1080 * 83vh);
       }
       >.txt {
         flex: 1 0 1px;
-        font-size: calc(20 / 1080 * 100vh);
+        font-size: calc(20 / 1080 * 83vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.8);
         line-height: 1.5;
         overflow: auto;
-        margin-right: calc(-10 / 1080 * 100vh);
-        padding-right: calc(10 / 1080 * 100vh);
-        margin-bottom: calc(32 / 1080 * 100vh);
+        margin-right: calc(-10 / 1080 * 83vh);
+        padding-right: calc(10 / 1080 * 83vh);
+        margin-bottom: calc(32 / 1080 * 83vh);
         text-indent: 2em;
-        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 83vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
         &::-webkit-scrollbar-thumb {
           background: rgba(220, 231, 240, 0.2);
           border-radius: 2px;
         }
       }
       >.QRCode {
-        height: calc(100 / 1080 * 100vh);
+        height: calc(100 / 1080 * 83vh);
         >img {
           float: right;
-          width: calc(100 / 1080 * 100vh);
+          width: calc(100 / 1080 * 83vh);
           height: 100%;
           object-fit: contain;
         }
       }
       >button.download {
         position: absolute;
-        bottom: calc(44 / 1080 * 100vh);
-        right: calc(-195 / 1080 * 100vh);
-        width: calc(149 / 1080 * 100vh);
-        height: calc(46 / 1080 * 100vh);
+        bottom: calc(44 / 1080 * 83vh);
+        right: calc(-195 / 1080 * 83vh);
+        width: calc(149 / 1080 * 83vh);
+        height: calc(46 / 1080 * 83vh);
         background: rgba(255,255,255,0.2);
         border: 1px solid #FFFFFF;
-        border-radius: calc(23 / 1080 * 100vh);
+        border-radius: calc(23 / 1080 * 83vh);
         display: flex;
         justify-content: center;
         align-items: center;
         >img.download {
-          width: calc(32 / 1080 * 100vh);
-          margin-right: calc(8 / 1080 * 100vh);
+          width: calc(32 / 1080 * 83vh);
+          margin-right: calc(8 / 1080 * 83vh);
           vertical-align: middle;
         }
         >span {
-          font-size: calc(16 / 1080 * 100vh);
+          font-size: calc(16 / 1080 * 83vh);
           color: #FFFFFF;
           vertical-align: middle;
         }
@@ -357,7 +357,7 @@ export default {
       @media only screen and (max-width: 1110px) {
         >button.download {
           right: initial;
-          left: calc(50 / 1080 * 100vh);
+          left: calc(50 / 1080 * 83vh);
         }
       }
     }

src/main.js

@@ -41,15 +41,14 @@ if (uaInfo.device.type === 'mobile') {
 }
 
 // 处理resize事件
-// let windowWidthLast = window.innerWidth
-// let windowHeightLast = window.innerHeight
-// function onResize() {
-//   windowWidthLast = window.innerWidth
-//   windowHeightLast = window.innerHeight
-// }
-// window.addEventListener('resize', () => {
-//   onResize()
-// })
+function onResize() {
+  if (app.config.globalProperties.$isMobile) {
+    location.reload()
+  }
+}
+window.addEventListener('resize', () => {
+  onResize()
+})
 
 // // 禁用上下文菜单
 // document.oncontextmenu = function(e) {

src/views/General.vue

@@ -585,36 +585,36 @@ export default {
     }
     >h1 {
       position: absolute;
-      top: calc(51 / 1080 * 100vh);
-      left: calc(81 / 1080 * 100vh);
+      top: calc(51 / 1080 * 83vh);
+      left: calc(81 / 1080 * 83vh);
       max-width: 50%;
       overflow: hidden;
       white-space: pre;
       text-overflow: ellipsis;
-      font-size: calc(48 / 1080 * 100vh);
+      font-size: calc(48 / 1080 * 83vh);
       font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
       font-weight: 800;
       color: #FFFFFF;
-      padding-top: calc(20 / 1080 * 100vh);
-      padding-bottom: calc(20 / 1080 * 100vh);
+      padding-top: calc(20 / 1080 * 83vh);
+      padding-bottom: calc(20 / 1080 * 83vh);
       border-top: 1px solid rgba(217, 217, 217, 0.2);
       border-bottom: 1px solid rgba(217, 217, 217, 0.2);
     }
     >form {
       position: absolute;
-      top: calc(196 / 1080 * 100vh);
-      left: calc(81 / 1080 * 100vh);
+      top: calc(196 / 1080 * 110vh);
+      left: calc(81 / 1080 * 110vh);
       display: flex;
       align-items: center;
       >input {
         background: rgba(255,255,255,0.1);
-        border-radius: calc(3 / 1080 * 100vh);
+        border-radius: calc(3 / 1080 * 110vh);
         border: 1px solid rgba(255, 255, 255, 0.5);
-        width: calc(220 / 1080 * 100vh);
-        height: calc(40 / 1080 * 100vh);
-        padding-left: calc(13 / 1080 * 100vh);
-        padding-right: calc(13 / 1080 * 100vh);
-        font-size: calc(16 / 1080 * 100vh);
+        width: calc(220 / 1080 * 110vh);
+        height: calc(40 / 1080 * 110vh);
+        padding-left: calc(13 / 1080 * 110vh);
+        padding-right: calc(13 / 1080 * 110vh);
+        font-size: calc(16 / 1080 * 110vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
@@ -622,16 +622,16 @@ export default {
           border: 1px solid rgba(255, 255, 255, 1);
         }
         &::placeholder {
-          font-size: calc(16 / 1080 * 100vh);
+          font-size: calc(16 / 1080 * 110vh);
           font-family: Source Han Sans CN-Light, Source Han Sans CN;
           font-weight: 400;
           color: rgba(255, 255, 255, 0.5);
         }
       }
       >button {
-        margin-left: calc(8 / 1080 * 100vh);
-        width: calc(40 / 1080 * 100vh);
-        height: calc(40 / 1080 * 100vh);
+        margin-left: calc(8 / 1080 * 110vh);
+        width: calc(40 / 1080 * 110vh);
+        height: calc(40 / 1080 * 110vh);
         background: rgba(255,255,255,0.3);
         border-radius: 3px 3px 3px 3px;
         opacity: 1;
@@ -647,20 +647,20 @@ export default {
     }
     >ul {
       position: absolute;
-      top: calc(272 / 1080 * 100vh);
-      left: calc(81 / 1080 * 100vh);
-      max-height: 60vh;
+      top: calc(272 / 1080 * 110vh);
+      left: calc(81 / 1080 * 110vh);
+      max-height: 50vh;
       overflow: auto;
       user-select: none;
       >li {
         display: block;
         color: #fff;
         >h2 {
-          width: calc(323 / 1080 * 100vh);
-          height: calc(47 / 1080 * 100vh);
+          width: calc(323 / 1080 * 110vh);
+          height: calc(47 / 1080 * 110vh);
           background: linear-gradient(92deg, rgba(176,161,121,0) 0%, rgba(176,161,121,0.3) 50%, rgba(176,161,121,0) 100%);
           // border-radius: 3px;
-          font-size: calc(16 / 1080 * 100vh);
+          font-size: calc(16 / 1080 * 110vh);
           font-family: Source Han Sans CN-Bold, Source Han Sans CN;
           font-weight: bold;
           color: #FFFFFF;
@@ -668,20 +668,20 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
-          margin-bottom: calc(17 / 1080 * 100vh);
+          margin-bottom: calc(17 / 1080 * 110vh);
           >span {
-            margin-left: calc(13 / 1080 * 100vh);
-            margin-right: calc(13 / 1080 * 100vh);
+            margin-left: calc(13 / 1080 * 110vh);
+            margin-right: calc(13 / 1080 * 110vh);
           }
           >img {
-            width: calc(60 / 1080 * 100vh);
-            height: calc(15 / 1080 * 100vh);
+            width: calc(60 / 1080 * 110vh);
+            height: calc(15 / 1080 * 110vh);
           }
         }
         >.corp-item {
           position: relative;
-          width: calc(363 / 1080 * 100vh);
-          height: calc(50 / 1080 * 100vh);
+          width: calc(363 / 1080 * 110vh);
+          height: calc(50 / 1080 * 110vh);
           background: linear-gradient(90deg, rgba(58, 69, 79, 0.5) 0%, rgba(22,28,33,0) 100%);
           // background: linear-gradient(90deg, #3A454F 0%, rgba(22,28,33,0) 100%);
           backdrop-filter: blur(3px);
@@ -690,21 +690,21 @@ export default {
           border: 1px solid;
           border-right: none;
           border-image: linear-gradient(98deg, rgba(78, 96, 112, 1), rgba(78, 96, 112, 0)) 1 1;
-          padding-left: calc(72 / 1080 * 100vh);
+          padding-left: calc(72 / 1080 * 110vh);
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: flex-start;
-          margin-bottom: calc(24 / 1080 * 100vh);
+          margin-bottom: calc(24 / 1080 * 110vh);
           cursor: pointer;
           >.item-icon {
             position: absolute;
             border-radius: 50%;
-            left: calc(35 / 1080 * 100vh);
+            left: calc(35 / 1080 * 110vh);
             top: 50%;
             transform: translateY(-50%);
-            width: calc(8 / 1080 * 100vh);
-            height: calc(8 / 1080 * 100vh);
+            width: calc(8 / 1080 * 110vh);
+            height: calc(8 / 1080 * 110vh);
             background: #9AA4AB;
             z-index: 2;
             box-shadow: 0px 0px 12px 0px #6D9DC6, 0px 0px 8px 0px #6D9DC6;
@@ -712,9 +712,9 @@ export default {
           >.verticle-line {
             position: absolute;
             top: -1px;
-            left: calc(38 / 1080 * 100vh);
-            width: calc(2 / 1080 * 100vh);
-            height: calc(75 / 1080 * 100vh);
+            left: calc(38 / 1080 * 110vh);
+            width: calc(2 / 1080 * 110vh);
+            height: calc(75 / 1080 * 110vh);
             background: #B0A179 50%;
             z-index: 1;
           }
@@ -725,7 +725,7 @@ export default {
           }
           &:last-of-type {
             >.verticle-line {
-              height: calc(25 / 1080 * 100vh);
+              height: calc(25 / 1080 * 110vh);
             }
           }
           &:first-of-type:last-of-type {
@@ -735,7 +735,7 @@ export default {
           }
           >span.corp-name {
             display: block;
-            font-size: calc(16 / 1080 * 100vh);
+            font-size: calc(16 / 1080 * 110vh);
             font-family: Source Han Sans CN-Bold, Source Han Sans CN;
             font-weight: bold;
             color: #FFFFFF;
@@ -746,15 +746,15 @@ export default {
           }
           &.active {
             >span.corp-name {
-              font-size: calc(20 / 1080 * 100vh);
+              font-size: calc(20 / 1080 * 110vh);
               font-family: Source Han Sans CN-Bold, Source Han Sans CN;
-              text-shadow: 0px 0px calc(16 / 1080 * 100vh) #BD9D48;
+              text-shadow: 0px 0px calc(16 / 1080 * 110vh) #BD9D48;
               opacity: initial;
             }
           }
           >span.corp-time {
             display: block;
-            font-size: calc(16 / 1080 * 100vh);
+            font-size: calc(16 / 1080 * 110vh);
             font-family: Source Han Sans CN-Light, Source Han Sans CN;
             font-weight: 400;
             color: #FFFFFF;
@@ -769,12 +769,12 @@ export default {
             border-image: linear-gradient(98deg, rgba(176, 161, 121, 1), rgba(176, 161, 121, 0)) 1 1;
             >.item-icon {
               background: #FFFFFF;
-              box-shadow: 0px 0px calc(12 / 1080 * 100vh) 0px #FFD15B, 0px 0px calc(8 / 1080 * 100vh) 0px #FFD15B, 0px 0px calc(10 / 1080 * 100vh) 0px #FFD15B, 0px 0px calc(5 / 1080 * 100vh) 0px #FFD15B;
+              box-shadow: 0px 0px calc(12 / 1080 * 110vh) 0px #FFD15B, 0px 0px calc(8 / 1080 * 110vh) 0px #FFD15B, 0px 0px calc(10 / 1080 * 83vh) 0px #FFD15B, 0px 0px calc(5 / 1080 * 83vh) 0px #FFD15B;
             }
           }
         }
       }
-      &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 110vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
       &::-webkit-scrollbar-thumb {
         background: transparent;
         border-radius: 2px;
@@ -787,16 +787,16 @@ export default {
     }
     >article {
       position: absolute;
-      top: calc(74 / 1080 * 100vh);
-      right: calc(102 / 1080 * 100vh);
-      width: calc(653 / 1080 * 100vh);
-      height: 70vh;
+      top: calc(74 / 1080 * 83vh);
+      right: calc(102 / 1080 * 83vh);
+      width: calc(653 / 1080 * 83vh);
+      height: 55vh;
       backdrop-filter: blur(10px);
       background-image: url(@/assets/images/general-article-bg.png);
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: left top;
-      padding: calc(32 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh);
+      padding: calc(32 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh);
       display: flex;
       flex-direction: column;
       @media only screen and (max-width: 1700px) {
@@ -804,10 +804,10 @@ export default {
       }
       >button.close {
         position: absolute;
-        top: calc(30 / 1080 * 100vh);
-        right: calc(50 / 1080 * 100vh);
-        width: calc(32 / 1080 * 100vh);
-        height: calc(32 / 1080 * 100vh);
+        top: calc(30 / 1080 * 83vh);
+        right: calc(50 / 1080 * 83vh);
+        width: calc(32 / 1080 * 83vh);
+        height: calc(32 / 1080 * 83vh);
         background-image: url(@/assets/images/icon-close.png);
         background-size: cover;
         background-repeat: no-repeat;
@@ -815,37 +815,37 @@ export default {
       }
       >h2 {
         flex: 0 0 auto;
-        font-size: calc(24 / 1080 * 100vh);
+        font-size: calc(24 / 1080 * 83vh);
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
         color: #FFFFFF;
-        margin-bottom: calc(21 / 1080 * 100vh);
+        margin-bottom: calc(21 / 1080 * 83vh);
       }
       >img.splitter {
         flex: 0 0 auto;
         width: 100%;
-        margin-bottom: calc(37 / 1080 * 100vh);
+        margin-bottom: calc(37 / 1080 * 83vh);
       }
       >img.banner {
         flex: 0 0 auto;
         width: 100%;
         height: 34.8%;
         object-fit: contain;
-        margin-bottom: calc(20 / 1080 * 100vh);
+        margin-bottom: calc(20 / 1080 * 83vh);
       }
       >.txt {
         flex: 1 0 1px;
-        font-size: calc(20 / 1080 * 100vh);
+        font-size: calc(20 / 1080 * 83vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.8);
         line-height: 1.5;
         overflow: auto;
-        padding-right: calc(10 / 1080 * 100vh);
-        margin-right: -calc(10 / 1080 * 100vh);
+        padding-right: calc(10 / 1080 * 83vh);
+        margin-right: -calc(10 / 1080 * 83vh);
         white-space: pre-wrap;
         // text-indent: 2em;
-        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 83vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
         &::-webkit-scrollbar-thumb {
           background: rgba(220, 231, 240, 0.2);
           border-radius: 2px;

src/views/HistoryNew.vue

@@ -318,7 +318,7 @@ export default {
         // 疯狂操作的极端情况下两个时间戳之间的时差会不合理，甚至为0
         if (lastMoveEventTimeStamp.value && (e.timeStamp - lastMoveEventTimeStamp.value > 1)) {
           // 更新speed
-          const currentMoveSpeed = - (e.changedTouches[0].clientX - lastCursorPos.value) / (e.timeStamp - lastMoveEventTimeStamp.value) * 1
+          const currentMoveSpeed = - (e.changedTouches[0].clientX - lastCursorPos.value) / (e.timeStamp - lastMoveEventTimeStamp.value) * (internalInstance.appContext.config.globalProperties.$isMobile ? 2 : 1)
           moveSpeed.value = moveSpeed.value * 0.9 + currentMoveSpeed * 0.1
           lastCursorPos.value = e.changedTouches[0].clientX
         }
@@ -475,12 +475,13 @@ export default {
         if (stageItem.personList) {
           for (const personItem of stageItem.personList) {
             const tallOrFat = (ret.length % 2 === 0 ? 'tall' : 'fat')
-            const top = Math.random() * 70 + (tallOrFat === 'tall' ? 250 : 350)
+            const topForPc = Math.random() * 70 + (tallOrFat === 'tall' ? 250 : 350)
+            const topForMobile = Math.random() * 10 + (tallOrFat === 'tall' ? 40 : 90)
             ret.push({
               ...personItem,
               initialLeft: (ret.length * spaceEachPerson + spaceEachPerson / (tallOrFat === 'tall' ? 2 : 1.3)) * (tallOrFat === 'tall' ? 2 : 1.5),
               left: (ret.length * spaceEachPerson + spaceEachPerson / (tallOrFat === 'tall' ? 2 : 1.3)) * (tallOrFat === 'tall' ? 2 : 1.5),
-              top: internalInstance.appContext.config.globalProperties.$isMobile ? top / 1080 * window.innerHeight : top,
+              top: internalInstance.appContext.config.globalProperties.$isMobile ? topForMobile : topForPc,
               tallOrFat,
               zIndex: tallOrFat === 'tall' ? 5 : 4,
               filter: `brightness(${tallOrFat === 'tall' ? '1' : '0.75'})`,
@@ -640,17 +641,17 @@ export default {
       left: 50%;
       top: 10.5vw;
       transform: translateX(-50%);
-      width: calc(250 / 1080 * 100vh);
+      width: calc(250 / 1080 * 83vh);
       text-align: center;
       >h1{
-        font-size: calc(36 / 1080 * 100vh);
+        font-size: calc(36 / 1080 * 83vh);
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
         color: #FFFFFF;
-        line-height: calc(42 / 1080 * 100vh);
+        line-height: calc(42 / 1080 * 83vh);
       }
       >img.underline{
-        margin-top: -calc(20 / 1080 * 100vh);
+        margin-top: -calc(20 / 1080 * 83vh);
         width: 100%;
       }
     }
@@ -659,21 +660,21 @@ export default {
       position: absolute;
       display: flex;
       >.scale-line{
-        height: calc(30 / 1080 * 100vh);
+        height: calc(30 / 1080 * 83vh);
         background-color: #91886b;
       }
     }
     >.stage-label{
       position: absolute;
       bottom: 15.7%;
-      font-size: calc(96 / 1080 * 100vh);
+      font-size: calc(96 / 1080 * 83vh);
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
       color: #FFFFFF;
-      line-height: calc(97 / 1080 * 100vh);
-      text-shadow: calc(10 / 1080 * 100vh) 0px 0 black;
+      line-height: calc(97 / 1080 * 83vh);
+      text-shadow: calc(10 / 1080 * 83vh) 0px 0 black;
       z-index: 10;
-      width: calc(407 / 1080 * 100vh);
+      width: calc(407 / 1080 * 83vh);
       text-align: left;
       >img.star{
         position: absolute;

src/views/Metaverse.vue

@@ -186,16 +186,16 @@ export default {
       position: absolute;
       top: calc(100% / 2);
       transform: translateY(-50%);
-      right: calc(102 / 1080 * 100vh);
-      width: calc(653 / 1080 * 100vh);
+      right: calc(102 / 1080 * 83vh);
+      width: calc(653 / 1080 * 83vh);
       height: calc(100% - 74px - 50px);
-      max-height: calc(740 / 1080 * 100vh);
+      max-height: calc(740 / 1080 * 83vh);
       backdrop-filter: blur(10px);
       background-image: url(@/assets/images/general-article-bg.png);
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: left top;
-      padding: calc(32 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh);
+      padding: calc(32 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh);
       display: flex;
       flex-direction: column;
       @media only screen and (max-width: 1700px) {
@@ -203,10 +203,10 @@ export default {
       }
       >button.close {
         position: absolute;
-        top: calc(30 / 1080 * 100vh);
-        right: calc(50 / 1080 * 100vh);
-        width: calc(32 / 1080 * 100vh);
-        height: calc(32 / 1080 * 100vh);
+        top: calc(30 / 1080 * 83vh);
+        right: calc(50 / 1080 * 83vh);
+        width: calc(32 / 1080 * 83vh);
+        height: calc(32 / 1080 * 83vh);
         background-image: url(@/assets/images/icon-close.png);
         background-size: cover;
         background-repeat: no-repeat;
@@ -214,35 +214,35 @@ export default {
       }
       >h2 {
         flex: 0 0 auto;
-        font-size: calc(24 / 1080 * 100vh);
+        font-size: calc(24 / 1080 * 83vh);
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
         color: #FFFFFF;
-        margin-bottom: calc(21 / 1080 * 100vh);
+        margin-bottom: calc(21 / 1080 * 83vh);
       }
       >img.splitter {
         flex: 0 0 auto;
         width: 100%;
-        margin-bottom: calc(37 / 1080 * 100vh);
+        margin-bottom: calc(37 / 1080 * 83vh);
       }
       >img.banner {
         flex: 0 0 auto;
         width: 100%;
         height: 34.8%;
         object-fit: contain;
-        margin-bottom: calc(20 / 1080 * 100vh);
+        margin-bottom: calc(20 / 1080 * 83vh);
       }
       >.txt {
         flex: 1 0 1px;
-        font-size: calc(20 / 1080 * 100vh);
+        font-size: calc(20 / 1080 * 83vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.8);
         line-height: 1.7;
         overflow: auto;
-        padding-right: calc(10 / 1080 * 100vh);
-        margin-right: calc(-10 / 1080 * 100vh);
-        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        padding-right: calc(10 / 1080 * 83vh);
+        margin-right: calc(-10 / 1080 * 83vh);
+        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 83vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
         &::-webkit-scrollbar-thumb {
           background: rgba(220, 231, 240, 0.2);
           border-radius: 2px;

src/views/Record.vue

@@ -154,14 +154,14 @@ export default {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      bottom: calc(130 / 1080 * 100vh);
+      bottom: calc(130 / 1080 * 83vh);
       background: #3b3d44;
       border: 1px solid #FFFFFF;
       font-family: Source Han Sans CN-Light, Source Han Sans CN;
       color: #FFFFFF;
-      font-size: calc(16 / 1080 * 100vh);
-      padding: calc(11 / 1080 * 100vh) calc(40 / 1080 * 100vh);
-      border-radius: calc(20 / 1080 * 100vh);
+      font-size: calc(16 / 1080 * 83vh);
+      padding: calc(11 / 1080 * 83vh) calc(40 / 1080 * 83vh);
+      border-radius: calc(20 / 1080 * 83vh);
     }
   }
 }

src/views/Treasure.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="gridWrapperElem"
-    class="history"
+    class="treasure"
   >
     <video
       src="@/assets/videos/bg-history.mp4"
@@ -25,7 +25,6 @@
           tall: item.thumbInfo <= 1,
           fat: !item.thumbInfo || item.thumbInfo > 1,
         }"
-        :test="item.thumbInfo"
         @click="!isDragged && $router.push({name: 'TreasureDetail', query: {id: item.id}})"
       >
         <img
@@ -62,9 +61,11 @@ import {
   ref,
   toRefs,
   watch,
+  getCurrentInstance,
 } from 'vue'
 import { ElLoading } from 'element-plus'
 import { useStore } from 'vuex'
+const internalInstance = getCurrentInstance()
 
 const prefix = process.env.VUE_APP_API_ORIGIN
 
@@ -96,10 +97,7 @@ function onMouseLeave(e) {
 let treasureList = reactive({ value: null })
 api.getTreasureList().then((res) => {
   treasureList.value = res
-})
-
-// 布局相关
-onMounted(() => {
+  // 布局相关
   setTimeout(() => {
     const isotopeInst = $('.grid').isotope({
       layoutMode: 'packery',
@@ -109,7 +107,7 @@ onMounted(() => {
         // gutter: 10,
       }
     })
-  }, 600)
+  }, internalInstance.appContext.config.globalProperties.$isMobile ? 1200 : 600)
   // 多排列几次，看看能不能修复偶发的排列成一列的bug
   setTimeout(() => {
     const isotopeInst = $('.grid').isotope({
@@ -120,7 +118,7 @@ onMounted(() => {
         // gutter: 10,
       }
     })
-  }, 1200)
+  }, internalInstance.appContext.config.globalProperties.$isMobile ? 2400 : 1200)
   setTimeout(() => {
     const isotopeInst = $('.grid').isotope({
       layoutMode: 'packery',
@@ -130,7 +128,7 @@ onMounted(() => {
         // gutter: 10,
       }
     })
-  }, 1800)
+  }, internalInstance.appContext.config.globalProperties.$isMobile ? 3000 : 1800)
 })
 
 /**
@@ -219,7 +217,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="less" scoped>
-.history {
+.treasure {
   width: 100%;
   height: 100%;
   overflow: auto;
@@ -291,7 +289,7 @@ onBeforeUnmount(() => {
 }
 
 .mobile {
-  .history {
+  .treasure {
     width: 100%;
     height: 100%;
     overflow: auto;
@@ -319,15 +317,15 @@ onBeforeUnmount(() => {
       >.grid-item {
         float: left;
         position: relative;
-        border: calc(5 / 1080 * 100vh) solid #000;
+        border: calc(5 / 1080 * 83vh) solid #000;
         font-size: 0; // 令strut高度为0
         cursor: pointer;
         &.tall {
-          height: calc(400 / 1080 * 100vh);
+          height: calc(700 / 1080 * 83vh);
           width: auto;
         }
         &.fat {
-          height: calc(200 / 1080 * 100vh);
+          height: calc(350 / 1080 * 83vh);
           width: auto;
         }
         > img {
@@ -338,19 +336,19 @@ onBeforeUnmount(() => {
         >h3 {
           position: absolute;
           left: 0;
-          bottom: calc(5 / 1080 * 100vh);
+          bottom: calc(5 / 1080 * 83vh);
           width: 100%;
-          padding: calc(7 / 1080 * 100vh) calc(25 / 1080 * 100vh);
+          padding: calc(7 / 1080 * 83vh) calc(25 / 1080 * 83vh);
           background: linear-gradient(90deg, rgba(176,161,121,0.7) 0%, rgba(0,0,0,0) 100%);
-          font-size: calc(20 / 1080 * 100vh);
+          font-size: calc(20 / 1080 * 83vh);
           font-family: Source Han Sans CN-Light, Source Han Sans CN;
           font-weight: 400;
           color: #FFFFFF;
           line-height: 1.5;
         }
       }
-      >.grid-item--width2 { width: calc(400 / 1080 * 100vh); }
-      >.grid-item--height2 { height: calc(400 / 1080 * 100vh); }
+      >.grid-item--width2 { width: calc(400 / 1080 * 83vh); }
+      >.grid-item--height2 { height: calc(400 / 1080 * 83vh); }
     }
     .loading-mask {
       position: absolute;

src/views/TreasureDetail.vue

@@ -627,10 +627,10 @@ export default {
     }
     >button.back {
       position: absolute;
-      top: calc(51 / 1080 * 100vh);
-      left: calc(67 / 1080 * 100vh);
-      width: calc(40 / 1080 * 100vh);
-      height: calc(40 / 1080 * 100vh);
+      top: calc(51 / 1080 * 83vh);
+      left: calc(67 / 1080 * 83vh);
+      width: calc(40 / 1080 * 83vh);
+      height: calc(40 / 1080 * 83vh);
       >img {
         width: 100%;
         height: 100%;
@@ -638,27 +638,27 @@ export default {
     }
     >h1 {
       position: absolute;
-      top: calc(36 / 1080 * 100vh);
+      top: calc(36 / 1080 * 83vh);
       left: 50%;
       transform: translateX(-50%);
-      font-size: calc(36 / 1080 * 100vh);
+      font-size: calc(36 / 1080 * 83vh);
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
       color: #FFFFFF;
     }
     >.tab-bar {
       position: absolute;
-      top: calc(108 / 1080 * 100vh);
+      top: calc(108 / 1080 * 83vh);
       left: 50%;
       transform: translateX(-50%);
       >button {
-        margin-right: calc(50 / 1080 * 100vh);
-        width: calc(80 / 1080 * 100vh);
-        height: calc(36 / 1080 * 100vh);
+        margin-right: calc(50 / 1080 * 83vh);
+        width: calc(80 / 1080 * 83vh);
+        height: calc(36 / 1080 * 83vh);
         background: rgba(255,255,255,0.2);
-        border-radius: calc(18 / 1080 * 100vh);
-        border: calc(1 / 1080 * 100vh) solid #fff;
-        font-size: calc(16 / 1080 * 100vh);
+        border-radius: calc(18 / 1080 * 83vh);
+        border: calc(1 / 1080 * 83vh) solid #fff;
+        font-size: calc(16 / 1080 * 83vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: #fff;
@@ -678,13 +678,13 @@ export default {
     >.main-wrapper {
       position: absolute;
       left: 50%;
-      top: calc(170 / 1080 * 100vh);
+      top: calc(170 / 1080 * 83vh);
       transform: translate(-50%, 0);
-      height: 75vh;
+      height: 75%;
       width: 80%;
-      max-width: calc(1164 / 1080 * 100vh);
+      max-width: calc(1164 / 1080 * 83vh);
       .swiper-root {
-        height: 55vh;
+        height: 80%;
         width: 100%;
         position: relative;
         overflow: hidden;
@@ -712,10 +712,10 @@ export default {
             }
             >button{
               position: fixed;
-              bottom: calc(44 / 1080 * 100vh);
-              right: calc(44 / 1080 * 100vh);
-              width: calc(44 / 1080 * 100vh);
-              height: calc(44 / 1080 * 100vh);
+              bottom: calc(44 / 1080 * 83vh);
+              right: calc(44 / 1080 * 83vh);
+              width: calc(44 / 1080 * 83vh);
+              height: calc(44 / 1080 * 83vh);
               > img {
                 width: 100%;
                 height: 100%;
@@ -737,33 +737,33 @@ export default {
         // }
       }
       >p.main {
-        margin-top: calc(20 / 1080 * 100vh);
-        font-size: calc(20 / 1080 * 100vh);
+        margin-top: calc(20 / 1080 * 83vh);
+        font-size: calc(20 / 1080 * 83vh);
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
         overflow: hidden;
         white-space: pre;
         text-overflow: ellipsis;
-        margin-bottom: calc(22 / 1080 * 100vh);
+        margin-bottom: calc(22 / 1080 * 83vh);
         text-align: center;
       }
       >.main-info-wrap {
-        font-size: calc(20 / 1080 * 100vh);
+        font-size: calc(20 / 1080 * 83vh);
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
         line-height: 1.5;
-        margin-top: calc(20 / 1080 * 100vh);
+        margin-top: calc(20 / 1080 * 83vh);
         white-space: pre;
         text-align: center;
       }
       >p.desc {
-        height: calc(108 / 1080 * 100vh);
+        height: calc(108 / 1080 * 83vh);
         width: 100%;
-        max-width: calc(1164 / 1080 * 100vh);
+        max-width: calc(1164 / 1080 * 83vh);
         text-align: center;
-        font-size: calc(20 / 1080 * 100vh);
+        font-size: calc(20 / 1080 * 83vh);
         line-height: 1.5;
         font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
@@ -772,10 +772,10 @@ export default {
         opacity: 0.8;
         margin-left: auto;
         margin-right: auto;
-        padding-left: calc(10 / 1080 * 100vh);
-        margin-top: calc(16 / 1080 * 100vh);
-        height: calc(100 / 1080 * 100vh);
-        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        padding-left: calc(10 / 1080 * 83vh);
+        margin-top: calc(16 / 1080 * 83vh);
+        height: calc(100 / 1080 * 83vh);
+        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 83vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
         &::-webkit-scrollbar-thumb {
           background: rgba(220, 231, 240, 0.2);
           border-radius: 2px;
@@ -784,9 +784,9 @@ export default {
     }
 
     .swiper-button-prev {
-      left: calc(44 / 1080 * 100vh);
-      width: calc(44 / 1080 * 100vh);
-      height: calc(44 / 1080 * 100vh);
+      left: calc(44 / 1080 * 83vh);
+      width: calc(44 / 1080 * 83vh);
+      height: calc(44 / 1080 * 83vh);
       background-image: url(@/assets/images/arrow-left-2.png);
       background-size: contain;
       &::after {
@@ -794,9 +794,9 @@ export default {
       }
     }
     .swiper-button-next {
-      right: calc(44 / 1080 * 100vh);
-      width: calc(44 / 1080 * 100vh);
-      height: calc(44 / 1080 * 100vh);
+      right: calc(44 / 1080 * 83vh);
+      width: calc(44 / 1080 * 83vh);
+      height: calc(44 / 1080 * 83vh);
       background-image: url(@/assets/images/arrow-right-2.png);
       background-size: contain;
       &::after {
@@ -806,13 +806,13 @@ export default {
 
     >menu {
       position: absolute;
-      right: calc(44 / 1080 * 100vh);
-      bottom: calc(130 / 1080 * 100vh);
+      right: calc(44 / 1080 * 83vh);
+      bottom: calc(130 / 1080 * 83vh);
       > button {
         display: block;
-        margin-bottom: calc(15 / 1080 * 100vh);
-        width: calc(44 / 1080 * 100vh);
-        height: calc(44 / 1080 * 100vh);
+        margin-bottom: calc(15 / 1080 * 83vh);
+        width: calc(44 / 1080 * 83vh);
+        height: calc(44 / 1080 * 83vh);
         > img {
           width: 100%;
           height: 100%;