适配移动端，妈的不早说

src/App.vue

@@ -128,6 +128,7 @@ import {
   onMounted,
   reactive,
   ref,
+  getCurrentInstance,
 } from 'vue'
 
 export default {
@@ -135,8 +136,11 @@ export default {
     HomeFadeIn,
   },
   setup () {
+    const internalInstance = getCurrentInstance()
+
     const isShowFadeInMask = ref(true)
     const progress = ref(0)
+
     onMounted(() => {
       /**
      * 加载unity
@@ -215,7 +219,7 @@ export default {
 
     const isShowNavBar = ref(true)
     const activeNavItemIdx = ref(0)
-    const navBarHeight = '90px'
+    const navBarHeight = internalInstance.appContext.config.globalProperties.$isMobile ? `${90 / 1080 * window.innerHeight}px` : '90px'
     return {
       isShowFadeInMask,
       progress,
@@ -350,6 +354,7 @@ html, body {
   }
 }
 </style>
+
 <style scoped lang="less">
 .app-view {
   width: 100%;
@@ -440,4 +445,91 @@ html, body {
     }
   }
 }
+
+.mobile {
+  .app-view {
+    width: 100%;
+    height: calc(100% - v-bind('navBarHeight'));
+    position: relative;
+    &.higher {
+      height: 100%;
+    }
+    >.fade-in-mask {
+      z-index: 2005;
+    }
+    >#unity-container {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      >#unity-canvas {
+        height: 100%;
+        width: 100%;
+        background: #231F20;
+      }
+    }
+
+    >nav {
+      position: fixed;
+      left: 0;
+      width: 100%;
+      height: v-bind('navBarHeight');
+      border-radius: 5px 5px 0 0;
+      border-top: rgba(210, 189, 132, 0.7);
+      box-shadow: inset 0px 2px 2px 0px rgba(210,189,132,0.45), 0px -9px 24px 0px rgba(183,162,109,0.25);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: all 0.5s;
+      // backdrop-filter: blur(10px);
+      background-image: url(@/assets/images/bg-bottom-bar.jpg);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      // background-color: #0c0d12;
+      >button.tab-item {
+        font-size: calc(30 / 1080 * 100vh);
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        margin-left: calc(200 / 1080 * 100vh);
+        opacity: 0.5;
+        position: relative;
+        user-select: none;
+        >img.decorator {
+          display: none;
+        }
+        &:first-of-type {
+          margin-left: initial;
+        }
+        &.active {
+          opacity: initial;
+          font-weight: bold;
+          >img.decorator {
+            display: initial;
+            position: absolute;
+            left: 50%;
+            bottom: -calc(15 / 1080 * 100vh);
+            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);
+      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

@@ -177,4 +177,110 @@ export default {
     }
   }
 }
+
+.mobile {
+  .history-person-card {
+    padding: calc(8 / 1080 * 100vh);
+    backdrop-filter: blur(5px);
+    background-color: rgba(6, 11, 26, 0.20);
+    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);
+    }
+    &.fat{
+      width: calc(389 / 1080 * 100vh);
+      height: calc(268 / 1080 * 100vh);
+    }
+    >.inner-wrap{
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      &.tall{
+        background-image: url(@/assets/images/bg-person-card-tall.png);
+      }
+      &.fat{
+        background-image: url(@/assets/images/bg-person-card-fat.png);
+      }
+      >h1.name{
+        padding-top: calc(20 / 1080 * 100vh);
+        height: calc(70 / 1080 * 100vh);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: calc(24 / 1080 * 100vh);
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        color: #ECDCA6;
+        line-height: calc(28 / 1080 * 100vh);
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+      }
+      >img.splitter{
+        height: calc(10 / 1080 * 100vh);
+      }
+      >.content-wrap {
+        &.tall{
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          height: calc(390 / 1080 * 100vh);
+        }
+        &.fat{
+          display: flex;
+          margin-top: calc(10 / 1080 * 100vh);
+          margin-left: calc(20 / 1080 * 100vh);
+          margin-right: calc(20 / 1080 * 100vh);
+          display: flex;
+          height: calc(170 / 1080 * 100vh);
+        }
+        >img.portrait{
+          flex: 0 0 auto;
+          object-fit: cover;
+          &.tall{
+            margin-top: calc(20 / 1080 * 100vh);
+            width: calc(210 / 1080 * 100vh);
+            height: calc(220 / 1080 * 100vh);
+          }
+          &.fat {
+            width:  calc(101 / 1080 * 100vh);
+            height: calc(139 / 1080 * 100vh);
+          }
+        }
+        >.text{
+          text-align: initial;
+          flex: 1 0 1px;
+          padding-right: calc(4 / 1080 * 100vh);
+          font-size: calc(16 / 1080 * 100vh);
+          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 1.5;
+          opacity: 0.7;
+          overflow: auto;
+          text-indent: 2em;
+          &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+          &::-webkit-scrollbar-thumb {
+            background: rgba(220, 231, 240, 0.2);
+            border-radius: 2px;
+          }
+          &.tall{
+            margin-top: calc(20 / 1080 * 100vh);
+            margin-left: calc(39 / 1080 * 100vh);
+            margin-right: calc(35 / 1080 * 100vh);
+          }
+          &.fat{
+            margin-left: calc(20 / 1080 * 100vh);
+            margin-bottom: calc(30 / 1080 * 100vh);
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/components/HomeFadeIn.vue

@@ -79,4 +79,52 @@ export default {
     color: #FFFFFF;
   }
 }
+
+.mobile {
+  .home-fadein {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    >.bg-video {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      background-color: #000;
+    }
+    >.progress {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      >span:nth-of-type(1) {
+        font-size: calc(32 / 1080 * 100vh);
+        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-family: Source Han Sans CN-Light, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
+    }
+    >.organization {
+      position: absolute;
+      left: 50%;
+      bottom: calc(38 / 1080 * 100vh);
+      transform: translate(-50%, -50%);
+      font-size: calc(24 / 1080 * 100vh);
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #FFFFFF;
+    }
+  }
+}
 </style>

src/components/TreasureShare.vue

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

src/main.js

@@ -71,7 +71,6 @@ app.use(store)
   // .component('HotSpot', HotSpot)
   .mount('#app')
 
-// 必须在vue根组件挂载之后执行
 if (app.config.globalProperties.$isMobile) {
-  document.getElementById('app').classList.add('mobile')
+  document.body.classList.add('mobile')
 }

src/views/General.vue

@@ -571,4 +571,295 @@ export default {
     background: black;
   }
 }
+
+.mobile {
+  .general {
+    height: 100%;
+    >.map-mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    >h1 {
+      position: absolute;
+      top: calc(51 / 1080 * 100vh);
+      left: calc(81 / 1080 * 100vh);
+      max-width: 50%;
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      font-size: calc(48 / 1080 * 100vh);
+      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);
+      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);
+      display: flex;
+      align-items: center;
+      >input {
+        background: rgba(255,255,255,0.1);
+        border-radius: calc(3 / 1080 * 100vh);
+        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);
+        font-family: Source Han Sans CN-Light, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        &:focus {
+          border: 1px solid rgba(255, 255, 255, 1);
+        }
+        &::placeholder {
+          font-size: calc(16 / 1080 * 100vh);
+          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);
+        background: rgba(255,255,255,0.3);
+        border-radius: 3px 3px 3px 3px;
+        opacity: 1;
+        border: 1px solid #FFFFFF;
+        &:hover {
+          background: rgba(255,255,255,0.5);
+        }
+        >img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    >ul {
+      position: absolute;
+      top: calc(272 / 1080 * 100vh);
+      left: calc(81 / 1080 * 100vh);
+      max-height: 60vh;
+      overflow: auto;
+      user-select: none;
+      >li {
+        display: block;
+        color: #fff;
+        >h2 {
+          width: calc(323 / 1080 * 100vh);
+          height: calc(47 / 1080 * 100vh);
+          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-family: Source Han Sans CN-Bold, Source Han Sans CN;
+          font-weight: bold;
+          color: #FFFFFF;
+          text-shadow: 0px 0px 5px #FFD15B;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-bottom: calc(17 / 1080 * 100vh);
+          >span {
+            margin-left: calc(13 / 1080 * 100vh);
+            margin-right: calc(13 / 1080 * 100vh);
+          }
+          >img {
+            width: calc(60 / 1080 * 100vh);
+            height: calc(15 / 1080 * 100vh);
+          }
+        }
+        >.corp-item {
+          position: relative;
+          width: calc(363 / 1080 * 100vh);
+          height: calc(50 / 1080 * 100vh);
+          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);
+          border-radius: 3px 3px 3px 3px;
+          opacity: 1;
+          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);
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          align-items: flex-start;
+          margin-bottom: calc(24 / 1080 * 100vh);
+          cursor: pointer;
+          >.item-icon {
+            position: absolute;
+            border-radius: 50%;
+            left: calc(35 / 1080 * 100vh);
+            top: 50%;
+            transform: translateY(-50%);
+            width: calc(8 / 1080 * 100vh);
+            height: calc(8 / 1080 * 100vh);
+            background: #9AA4AB;
+            z-index: 2;
+            box-shadow: 0px 0px 12px 0px #6D9DC6, 0px 0px 8px 0px #6D9DC6;
+          }
+          >.verticle-line {
+            position: absolute;
+            top: -1px;
+            left: calc(38 / 1080 * 100vh);
+            width: calc(2 / 1080 * 100vh);
+            height: calc(75 / 1080 * 100vh);
+            background: #B0A179 50%;
+            z-index: 1;
+          }
+          &:first-of-type {
+            >.verticle-line {
+              top: 50%;
+            }
+          }
+          &:last-of-type {
+            >.verticle-line {
+              height: calc(25 / 1080 * 100vh);
+            }
+          }
+          &:first-of-type:last-of-type {
+            >.verticle-line {
+              display: none;
+            }
+          }
+          >span.corp-name {
+            display: block;
+            font-size: calc(16 / 1080 * 100vh);
+            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+            font-weight: bold;
+            color: #FFFFFF;
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+            opacity: 0.6;
+          }
+          &.active {
+            >span.corp-name {
+              font-size: calc(20 / 1080 * 100vh);
+              font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+              text-shadow: 0px 0px calc(16 / 1080 * 100vh) #BD9D48;
+              opacity: initial;
+            }
+          }
+          >span.corp-time {
+            display: block;
+            font-size: calc(16 / 1080 * 100vh);
+            font-family: Source Han Sans CN-Light, Source Han Sans CN;
+            font-weight: 400;
+            color: #FFFFFF;
+            opacity: 0.5;
+          }
+          &:hover {
+            background: linear-gradient(90deg, #B0A179 0%, rgba(255,209,91,0) 100%);
+            border-image: linear-gradient(98deg, rgba(176, 161, 121, 1), rgba(176, 161, 121, 0)) 1 1;
+          }
+          &.active {
+            background: linear-gradient(90deg, #B0A179 0%, rgba(255,209,91,0) 100%);
+            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;
+            }
+          }
+        }
+      }
+      &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar-thumb {
+        background: transparent;
+        border-radius: 2px;
+      }
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background: rgba(220, 231, 240, 0.2);
+        }
+      }
+    }
+    >article {
+      position: absolute;
+      top: calc(74 / 1080 * 100vh);
+      right: calc(102 / 1080 * 100vh);
+      width: calc(653 / 1080 * 100vh);
+      height: 70vh;
+      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);
+      display: flex;
+      flex-direction: column;
+      @media only screen and (max-width: 1700px) {
+        right: 0;
+      }
+      >button.close {
+        position: absolute;
+        top: calc(30 / 1080 * 100vh);
+        right: calc(50 / 1080 * 100vh);
+        width: calc(32 / 1080 * 100vh);
+        height: calc(32 / 1080 * 100vh);
+        background-image: url(@/assets/images/icon-close.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+      >h2 {
+        flex: 0 0 auto;
+        font-size: calc(24 / 1080 * 100vh);
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+        margin-bottom: calc(21 / 1080 * 100vh);
+      }
+      >img.splitter {
+        flex: 0 0 auto;
+        width: 100%;
+        margin-bottom: calc(37 / 1080 * 100vh);
+      }
+      >img.banner {
+        flex: 0 0 auto;
+        width: 100%;
+        height: 34.8%;
+        object-fit: contain;
+        margin-bottom: calc(20 / 1080 * 100vh);
+      }
+      >.txt {
+        flex: 1 0 1px;
+        font-size: calc(20 / 1080 * 100vh);
+        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);
+        white-space: pre-wrap;
+        // text-indent: 2em;
+        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        &::-webkit-scrollbar-thumb {
+          background: rgba(220, 231, 240, 0.2);
+          border-radius: 2px;
+        }
+      }
+    }
+    .loading-mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+    }
+  }
+}
 </style>

src/views/HistoryNew.vue

@@ -5,6 +5,10 @@
     @mousemove.passive="onMouseMove"
     @mouseup="onMouseUp"
     @mouseleave="onMouseLeave"
+    @touchstart.passive="onTouchStart"
+    @touchmove.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchCancel"
   >
     <video
       src="@/assets/videos/bg-history.mp4"
@@ -102,7 +106,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, onBeforeMount, ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+import { reactive, toRefs, onBeforeMount, ref, watch, onMounted, onBeforeUnmount, getCurrentInstance, computed } from 'vue'
 import HistoryPersonCard from "@/components/HistoryPersonCard.vue"
 import axios from "axios"
 import { ElLoading } from 'element-plus'
@@ -112,6 +116,8 @@ export default {
     HistoryPersonCard,
   },
   setup () {
+    const internalInstance = getCurrentInstance()
+
     const spaceEachPerson = 220
 
     // mask相关
@@ -259,6 +265,20 @@ export default {
         isAutoMoving.value = false
       }
     }
+    function onTouchStart(e) {
+      isMouseDown.value = true
+      moveSpeed.value = 0
+      lastMoveEventTimeStamp.value = 0
+      lastAnimationTimeStamp = Date.now()
+      lastCursorPos.value = e.changedTouches[0].clientX
+      if (beginAutoMoveIntervalId) {
+        clearInterval(beginAutoMoveIntervalId)
+        beginAutoMoveIntervalId = null
+      }
+      if (isAutoMoving.value) {
+        isAutoMoving.value = false
+      }
+    }
     function onMouseUp(e) {
       isMouseDown.value = false
       beginAutoMoveIntervalId = setInterval(() => {
@@ -267,9 +287,20 @@ export default {
         }
       }, 2000)
     }
+    function onTouchEnd(e) {
+      isMouseDown.value = false
+      beginAutoMoveIntervalId = setInterval(() => {
+        if (moveSpeed.value === 0) {
+          isAutoMoving.value = true
+        }
+      }, 2000)
+    }
     function onMouseLeave() {
       isMouseDown.value = false
     }
+    function onTouchCancel() {
+      isMouseDown.value = false
+    }
     function onMouseMove(e) {
       if (isMouseDown.value) {
         // 疯狂操作的极端情况下两个时间戳之间的时差会不合理，甚至为0
@@ -282,6 +313,18 @@ export default {
         lastMoveEventTimeStamp.value = e.timeStamp
       }
     }
+    function onTouchMove(e) {
+      if (isMouseDown.value && e.changedTouches.length === 1) {
+        // 疯狂操作的极端情况下两个时间戳之间的时差会不合理，甚至为0
+        if (lastMoveEventTimeStamp.value && (e.timeStamp - lastMoveEventTimeStamp.value > 1)) {
+          // 更新speed
+          const currentMoveSpeed = - (e.changedTouches[0].clientX - lastCursorPos.value) / (e.timeStamp - lastMoveEventTimeStamp.value) * 1
+          moveSpeed.value = moveSpeed.value * 0.9 + currentMoveSpeed * 0.1
+          lastCursorPos.value = e.changedTouches[0].clientX
+        }
+        lastMoveEventTimeStamp.value = e.timeStamp
+      }
+    }
 
     /**
      * 镜头自动平移
@@ -432,11 +475,12 @@ 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)
             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: Math.random() * 70 + (tallOrFat === 'tall' ? 250 : 350),
+              top: internalInstance.appContext.config.globalProperties.$isMobile ? top / 1080 * window.innerHeight : top,
               tallOrFat,
               zIndex: tallOrFat === 'tall' ? 5 : 4,
               filter: `brightness(${tallOrFat === 'tall' ? '1' : '0.75'})`,
@@ -462,6 +506,10 @@ export default {
       onMouseLeave,
       onMouseMove,
       onMouseUp,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onTouchCancel,
       personList,
       stageLabelList,
       stageList,
@@ -560,4 +608,92 @@ export default {
     z-index: 20;
   }
 }
+
+.mobile {
+  .history-view {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    >video.bg{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    >.gear-wrap {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: calc(100vw * 940 / 1920);
+      >img.gear{
+        width: 100%;
+      }
+    }
+    >.current-stage-name {
+      position: absolute;
+      left: 50%;
+      top: 10.5vw;
+      transform: translateX(-50%);
+      width: calc(250 / 1080 * 100vh);
+      text-align: center;
+      >h1{
+        font-size: calc(36 / 1080 * 100vh);
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: calc(42 / 1080 * 100vh);
+      }
+      >img.underline{
+        margin-top: -calc(20 / 1080 * 100vh);
+        width: 100%;
+      }
+    }
+    >.time-axis-wrap{
+      bottom: 32.4%;
+      position: absolute;
+      display: flex;
+      >.scale-line{
+        height: calc(30 / 1080 * 100vh);
+        background-color: #91886b;
+      }
+    }
+    >.stage-label{
+      position: absolute;
+      bottom: 15.7%;
+      font-size: calc(96 / 1080 * 100vh);
+      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;
+      z-index: 10;
+      width: calc(407 / 1080 * 100vh);
+      text-align: left;
+      >img.star{
+        position: absolute;
+        left: 0;
+        top: 0;
+        transform: translate(-50%, -80%);
+      }
+    }
+    >.history-person-card{
+      position: absolute;
+    }
+    >.loading-mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+      z-index: 20;
+    }
+  }
+}
 </style>

src/views/Metaverse.vue

@@ -175,4 +175,88 @@ export default {
     background: black;
   }
 }
+
+.mobile {
+  .metaverse-root {
+    height: 100%;
+    position: relative;
+    pointer-events: none;
+    >article {
+      pointer-events: initial;
+      position: absolute;
+      top: calc(100% / 2);
+      transform: translateY(-50%);
+      right: calc(102 / 1080 * 100vh);
+      width: calc(653 / 1080 * 100vh);
+      height: calc(100% - 74px - 50px);
+      max-height: calc(740 / 1080 * 100vh);
+      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);
+      display: flex;
+      flex-direction: column;
+      @media only screen and (max-width: 1700px) {
+        right: 0;
+      }
+      >button.close {
+        position: absolute;
+        top: calc(30 / 1080 * 100vh);
+        right: calc(50 / 1080 * 100vh);
+        width: calc(32 / 1080 * 100vh);
+        height: calc(32 / 1080 * 100vh);
+        background-image: url(@/assets/images/icon-close.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+      >h2 {
+        flex: 0 0 auto;
+        font-size: calc(24 / 1080 * 100vh);
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+        margin-bottom: calc(21 / 1080 * 100vh);
+      }
+      >img.splitter {
+        flex: 0 0 auto;
+        width: 100%;
+        margin-bottom: calc(37 / 1080 * 100vh);
+      }
+      >img.banner {
+        flex: 0 0 auto;
+        width: 100%;
+        height: 34.8%;
+        object-fit: contain;
+        margin-bottom: calc(20 / 1080 * 100vh);
+      }
+      >.txt {
+        flex: 1 0 1px;
+        font-size: calc(20 / 1080 * 100vh);
+        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); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        &::-webkit-scrollbar-thumb {
+          background: rgba(220, 231, 240, 0.2);
+          border-radius: 2px;
+        }
+      }
+    }
+    .loading-mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+    }
+  }
+}
 </style>

src/views/Record.vue

@@ -137,4 +137,32 @@ export default {
     border-radius: 20px;
   }
 }
+
+.mobile {
+  .record-root {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    >iframe {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    >button.stop-record {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: calc(130 / 1080 * 100vh);
+      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);
+    }
+  }
+}
 </style>

src/views/Treasure.vue

@@ -289,4 +289,77 @@ onBeforeUnmount(() => {
     background: black;
   }
 }
+
+.mobile {
+  .history {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    &::-webkit-scrollbar { background: transparent; width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+    &::-webkit-scrollbar-thumb {
+      // background: rgba(220, 231, 240, 0.2);
+      // border-radius: 2px;
+    }
+    >video.bg{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    >.grid {
+      height: 100%;
+      &::after {
+        content: '';
+        display: block;
+        clear: both;
+      }
+
+      >.grid-item {
+        float: left;
+        position: relative;
+        border: calc(5 / 1080 * 100vh) solid #000;
+        font-size: 0; // 令strut高度为0
+        cursor: pointer;
+        &.tall {
+          height: calc(400 / 1080 * 100vh);
+          width: auto;
+        }
+        &.fat {
+          height: calc(200 / 1080 * 100vh);
+          width: auto;
+        }
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        >h3 {
+          position: absolute;
+          left: 0;
+          bottom: calc(5 / 1080 * 100vh);
+          width: 100%;
+          padding: calc(7 / 1080 * 100vh) calc(25 / 1080 * 100vh);
+          background: linear-gradient(90deg, rgba(176,161,121,0.7) 0%, rgba(0,0,0,0) 100%);
+          font-size: calc(20 / 1080 * 100vh);
+          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); }
+    }
+    .loading-mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+    }
+  }
+}
 </style>

src/views/TreasureDetail.vue

@@ -610,4 +610,215 @@ export default {
     }
   }
 }
+
+.mobile {
+  .treasure-detail {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: relative;
+    >video.bg{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    >button.back {
+      position: absolute;
+      top: calc(51 / 1080 * 100vh);
+      left: calc(67 / 1080 * 100vh);
+      width: calc(40 / 1080 * 100vh);
+      height: calc(40 / 1080 * 100vh);
+      >img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    >h1 {
+      position: absolute;
+      top: calc(36 / 1080 * 100vh);
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: calc(36 / 1080 * 100vh);
+      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);
+      left: 50%;
+      transform: translateX(-50%);
+      >button {
+        margin-right: calc(50 / 1080 * 100vh);
+        width: calc(80 / 1080 * 100vh);
+        height: calc(36 / 1080 * 100vh);
+        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);
+        font-family: Source Han Sans CN-Light, Source Han Sans CN;
+        font-weight: 400;
+        color: #fff;
+        opacity: 0.7;
+        &:last-of-type {
+          margin-right: initial;
+        }
+        &.active {
+          background: rgba(255,255,255,0.2);
+          border: 1px solid #DBC386;
+          color: #DBC386;
+          opacity: initial;
+        }
+      }
+    }
+
+    >.main-wrapper {
+      position: absolute;
+      left: 50%;
+      top: calc(170 / 1080 * 100vh);
+      transform: translate(-50%, 0);
+      height: 75vh;
+      width: 80%;
+      max-width: calc(1164 / 1080 * 100vh);
+      .swiper-root {
+        height: 55vh;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        .swiper-wrapper {
+          height: 100%;
+          margin-left: auto;
+          margin-right: auto;
+          .swiper-slide {
+            font-size: 0;
+            > iframe {
+              width: 100%;
+              height: 100%;
+            }
+            > video {
+              width: 100%;
+              height: 100%;
+              user-select: none;
+              object-fit: contain;
+            }
+            > img {
+              width: 100%;
+              height: 100%;
+              user-select: none;
+              object-fit: contain;
+            }
+            >button{
+              position: fixed;
+              bottom: calc(44 / 1080 * 100vh);
+              right: calc(44 / 1080 * 100vh);
+              width: calc(44 / 1080 * 100vh);
+              height: calc(44 / 1080 * 100vh);
+              > img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+        // .swiper-pagination {
+        //   position: absolute;
+        //   bottom: 10px;
+        //   left: 50%;
+        //   transform: translateX(-50%);
+        //   font-size: 1.33rem;
+        //   font-family: Inter-Regular, Inter;
+        //   color: #666;
+        //   .cur {
+        //     color: #930909;
+        //   }
+        // }
+      }
+      >p.main {
+        margin-top: calc(20 / 1080 * 100vh);
+        font-size: calc(20 / 1080 * 100vh);
+        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);
+        text-align: center;
+      }
+      >.main-info-wrap {
+        font-size: calc(20 / 1080 * 100vh);
+        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);
+        white-space: pre;
+        text-align: center;
+      }
+      >p.desc {
+        height: calc(108 / 1080 * 100vh);
+        width: 100%;
+        max-width: calc(1164 / 1080 * 100vh);
+        text-align: center;
+        font-size: calc(20 / 1080 * 100vh);
+        line-height: 1.5;
+        font-family: Source Han Sans CN-Light, Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        overflow: auto;
+        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); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        &::-webkit-scrollbar-thumb {
+          background: rgba(220, 231, 240, 0.2);
+          border-radius: 2px;
+        }
+      }
+    }
+
+    .swiper-button-prev {
+      left: calc(44 / 1080 * 100vh);
+      width: calc(44 / 1080 * 100vh);
+      height: calc(44 / 1080 * 100vh);
+      background-image: url(@/assets/images/arrow-left-2.png);
+      background-size: contain;
+      &::after {
+        content: '';
+      }
+    }
+    .swiper-button-next {
+      right: calc(44 / 1080 * 100vh);
+      width: calc(44 / 1080 * 100vh);
+      height: calc(44 / 1080 * 100vh);
+      background-image: url(@/assets/images/arrow-right-2.png);
+      background-size: contain;
+      &::after {
+        content: '';
+      }
+    }
+
+    >menu {
+      position: absolute;
+      right: calc(44 / 1080 * 100vh);
+      bottom: calc(130 / 1080 * 100vh);
+      > button {
+        display: block;
+        margin-bottom: calc(15 / 1080 * 100vh);
+        width: calc(44 / 1080 * 100vh);
+        height: calc(44 / 1080 * 100vh);
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
 </style>