移动端样式

public/4dage.js

@@ -5781,7 +5781,7 @@ function (I) {
         i.style.zIndex = 999
         i.style.left = "7%",
         i.style.width = "86%",
-        i.style.bottom = "30%",
+        i.style.bottom = document.body.classList.contains('mobile') ? '12%' : "30%",
         i.style.height = "3px",
         i.style["border-radius"] = "1px",
         this.progressBar = document.createElement("div"),

public/index.html

@@ -13,18 +13,17 @@
       new VConsole()
     </script> -->
     
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
     <script src="./4dage.js"></script>
     <script src="./user-config/info.js"></script>
     <script src="./user-config/txt.js"></script>
-    
     <script>
       document.title = gConfigInfo.title
     </script>
     
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
   </body>
 </html>

src/components/HelpComp.vue

@@ -1,9 +1,15 @@
 <template>
   <div
     class="help"
+    :class="{
+      mobile: $isMobile,
+    }"
   >
     <button
       class="close"
+      :class="{
+        mobile: $isMobile,
+      }"
       @click="$emit('close')"
     >
       <img
@@ -12,8 +18,17 @@
         draggable="false"
       >
     </button>
-    <h1>操作指引</h1>
-    <ul>
+    <h1
+      :class="{
+        mobile: $isMobile,
+      }"
+    >
+      操作指引
+    </h1>
+    <ul
+      v-if="!$isMobile"
+      class="pc"
+    >
       <li>
         <img
           src="@/assets/images/rotate.png"
@@ -60,6 +75,38 @@
         <span>SHIFT+鼠标左键</span>
       </li>
     </ul>
+    <ul
+      v-if="$isMobile"
+      class="mobile"
+    >
+      <li>
+        <img
+          class=""
+          src="@/assets/images/enlarge-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <div>放大</div>
+      </li>
+      <li>
+        <img
+          class=""
+          src="@/assets/images/reduce-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <div>缩小</div>
+      </li>
+      <li>
+        <img
+          class=""
+          src="@/assets/images/rotate-mobile.png"
+          alt=""
+          draggable="false"
+        >
+        <div>旋转</div>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -77,13 +124,17 @@ export default {
   width: 100%;
   height: 100%;
   z-index: 2;
+  padding-left: 235px;
+  padding-right: 235px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  padding-left: 235px;
-  padding-right: 235px;
   background: rgba(0, 0, 0, 0.82);
+  &.mobile {
+    padding-left: initial;
+    padding-right: initial;
+  }
   > button.close {
     position: absolute;
     top: 55px;
@@ -94,6 +145,12 @@ export default {
       width: 100%;
       height: 100%;
     }
+    &.mobile {
+      top: 7vw;
+      right: 4vw;
+      width: 8vw;
+      height: 8vw;
+    }
   }
   > h1 {
     margin-bottom: 105px;
@@ -102,8 +159,13 @@ export default {
     color: #FFFFFF;
     letter-spacing: 7px;
     white-space: pre;
+    &.mobile {
+      margin-bottom: initial;
+      font-size: 4vw;
+      letter-spacing: 1vw;
+    }
   }
-  > ul {
+  > ul.pc {
     width: 100%;
     justify-content: space-evenly;
     display: flex;
@@ -134,5 +196,30 @@ export default {
       }
     }
   }
+  > ul.mobile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    > li {
+      flex: 0 0 auto;
+      width: 27vw;
+      user-select: none;
+      padding-top: 9vw;
+      > img {
+        width: 27vw;
+        height: 27vw;
+        margin-bottom: 2vw;
+      }
+      > div {
+        text-align: center;
+        font-size: 4vw;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
+    }
+  }
 }
+
+
 </style>

src/main.js

@@ -45,6 +45,7 @@ if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
 }
 if (uaInfo.device.type === 'mobile') {
   app.config.globalProperties.$isMobile = true
+  document.body.classList.add('mobile')
 }
 
 // // 处理resize事件

src/views/RelicDetail.vue

@@ -9,7 +9,7 @@
     <el-switch
       :model-value="isDarkTheme"
       class="theme-switch"
-      size="large"
+      :size="$isMobile ? '' : 'large'"
       inline-prompt
       :active-icon="Moon"
       :inactive-icon="Sunny"
@@ -24,15 +24,35 @@
     >
       <h1 v-html="title" />
       <div
-        v-show="isShowDescDetail"
+        v-show="!$isMobile && isShowDescDetail"
         class="splitter"
       />
       <div
-        v-show="isShowDescDetail"
+        v-show="!$isMobile && isShowDescDetail"
         class="detail"
         v-html="detail"
       />
     </article>
+    <div
+      v-show="$isMobile && isShowDescDetail"
+      class="desc-for-mobile"
+    >
+      <button
+        class="close"
+        @click="isShowDescDetail = false"
+      >
+        <img
+          src="@/assets/images/btn-close.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <h1 v-html="title" />
+      <div
+        class="detail"
+        v-html="detail"
+      />
+    </div>
     <!-- 假的阴影 -->
     <!-- <img
       class="relic-shadow"
@@ -52,13 +72,13 @@
     </transition>
 
     <menu>
-      <button class="go-homepage">
+      <!-- <button class="go-homepage">
         <img
           :src="require(`@/assets/images/btn-home-${isDarkTheme ? 'dark' : 'light'}.png`)"
           alt=""
           draggable="false"
         >
-      </button>
+      </button> -->
       <button
         class="show-detail"
         @click="onClickShowDetail"
@@ -336,6 +356,141 @@ export default {
   ::-webkit-scrollbar-corner { background: transparent; }
   ::-webkit-scrollbar-resizer { background: transparent; }
 }
+
+
+
+.mobile {
+  .relic-detail {
+    &.isDarkTheme {
+    }
+    &.notDarkTheme {
+    }
+    > .theme-switch {
+      top: 4vw;
+      right: -4vw;
+      transform: rotate(90deg);
+      transform-origin: 0 0;
+    }
+    > article.desc {
+      position: absolute;
+      top: 12.7%;
+      left: 12vw;
+      writing-mode: vertical-lr;
+      max-height: 75%;
+      pointer-events: none;
+      &.isDarkTheme {
+        > h1 {
+          text-decoration-color: #3e3e3e;
+        }
+      }
+      &.notDarkTheme {
+        > h1 {
+          text-decoration-color: #d9dadb;
+        }
+      }
+      > h1 {
+        font-size: 4vw;
+        font-weight: 800;
+        line-height: 5vw;
+        text-decoration-line: underline;
+        text-underline-offset: 8px;
+        text-underline-position: right;
+      }
+    }
+    > .desc-for-mobile {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 2;
+      background: rgba(0,0,0,0.3);
+      backdrop-filter: blur(10px);
+      padding: 20vw;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      > button.close {
+        position: absolute;
+        top: 9vw;
+        right: 5vw;
+        width: 8vw;
+        height: 8vw;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      > h1 {
+        font-size: 4vw;
+        font-family: Source Han Serif CN-Heavy, Source Han Serif CN;
+        font-weight: 800;
+        color: #FFFFFF;
+        line-height: 7vw;
+      }
+      > .detail {
+        margin-top: 1em;
+        font-size: 2vw;
+        font-family: PingFang HK-Semibold, PingFang HK;
+        font-weight: 600;
+        color: #FFFFFF;
+        line-height: 5vw;
+      }
+    }
+    > .relic-shadow {
+      position: absolute;
+      bottom: 104px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 824px;
+      height: 55.82px;
+    }
+    > img.logo {
+      bottom: 4.2%;
+      width: 31vw;
+      height: 6vw;
+      pointer-events: none;
+      z-index: 1;
+    }
+    > menu {
+      bottom: 22.2%;
+      right: 7vw;
+      > button {
+        display: block;
+        width: 7vw;
+        height: 7vw;
+        margin-left: initial;
+        margin-top: 3vw;
+        > img {
+        }
+      }
+    }
+
+    > button.jump {
+      top: 85%;
+      transform: translateY(-50%);
+      width: 10vw;
+      height: 10vw;
+      &.previous {
+        left: 6vw;
+      }
+      &.next {
+        right: 6vw;
+      }
+      > img {
+      }
+    }
+
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-thumb { background: #fff; }
+    ::-webkit-scrollbar-button { display: none; }
+    ::-webkit-scrollbar-track { background: #000; }
+    // 横竖滚动条轨道交汇处
+    ::-webkit-scrollbar-corner { background: transparent; }
+    ::-webkit-scrollbar-resizer { background: transparent; }
+  }
+}
 </style>
 <style lang="less">
 * {
@@ -350,6 +505,13 @@ export default {
     padding: 0 27px 0 1px !important;
   }
 
+  .el-switch.is-checked .el-switch__core .el-switch__inner {
+    padding: 0 0px 0 21px !important;
+  }
+  .el-switch .el-switch__core .el-switch__inner {
+    padding: 0 21px 0 1px !important;
+  }
+
   .el-switch .el-switch__core .el-switch__action {
     z-index: -1;
     background-color: #000 !important;
@@ -364,5 +526,8 @@ export default {
   .el-switch.is-checked .el-switch__core .el-switch__inner .is-icon {
     color: #000 !important;
   }
+  .mobile .el-switch.is-checked .el-switch__core .el-switch__inner .is-icon {
+    transform: rotate(-90deg);
+  }
 }
 </style>