搞搞搞

public/4dage.js

@@ -1309,6 +1309,7 @@ function (I) {
     e
   }
 
+  // fetch thumbnail
   function n(e, t, i, s) {
     var n = !1
       , r = e + (-1 == e.indexOf("?") ? "?" : "&") + "thumb=1"

src/views/RelicDetail.vue

@@ -9,6 +9,7 @@
     <el-switch
       :model-value="isDarkTheme"
       class="theme-switch"
+      size="large"
       inline-prompt
       :active-icon="Moon"
       :inactive-icon="Sunny"
@@ -85,32 +86,25 @@
           draggable="false"
         >
       </button>
-      <button
-        class="share"
-        @click="onClickShareWeibo"
-      >
-        <img
-          :src="require(`@/assets/images/btn-share-weibo.png`)"
-          alt=""
-          draggable="false"
-        >
-      </button>
-      <button class="share">
-        <img
-          :src="require(`@/assets/images/btn-share-weixin.png`)"
-          alt=""
-          draggable="false"
-        >
-      </button>
-      <button class="share">
-        <img
-          :src="require(`@/assets/images/btn-share-qq.png`)"
-          alt=""
-          draggable="false"
-        >
-      </button>
     </menu>
 
+    <button class="jump previous">
+      <img
+        class=""
+        src="@/assets/images/btn-arrow-left.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+    <button class="jump next">
+      <img
+        class=""
+        src="@/assets/images/btn-arrow-right.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+
     <help-comp
       v-show="isShowHelp"
       @close="isShowHelp = false"
@@ -122,6 +116,8 @@
 import { Moon, Sunny } from '@element-plus/icons-vue'
 import { mapMutations, mapState } from 'vuex'
 import HelpComp from "@/components/HelpComp.vue"
+import dayTimePic from "@/assets/images/day-time.png"
+import nightTimePic from "@/assets/images/night-time.png"
 
 export default {
   components: {
@@ -132,6 +128,8 @@ export default {
       isShowDescDetail: false,
       isShowLogo: true,
       isShowHelp: false,
+      dayTimePic,
+      nightTimePic,
     }
   },
   computed: {
@@ -202,13 +200,13 @@ export default {
   }
   > .theme-switch {
     position: absolute;
-    top:10px;
-    right: 10px;
+    top: 56px;
+    right: 56px;
     z-index: 1;
   }
   > article.desc {
     position: absolute;
-    top: 127px;
+    top: 110px;
     left: 110px;
     width: 503px;
     z-index: 1;
@@ -271,6 +269,26 @@ export default {
       }
     }
   }
+
+  > button.jump {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 74px;
+    height: 74px;
+    &.previous {
+      left: 70px;
+    }
+    &.next {
+      right: 70px;
+    }
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-thumb { background: #fff; }
   ::-webkit-scrollbar-button { display: none; }
@@ -279,4 +297,20 @@ export default {
   ::-webkit-scrollbar-corner { background: transparent; }
   ::-webkit-scrollbar-resizer { background: transparent; }
 }
+</style>
+<style lang="less">
+* {
+  --el-switch-on-color: transparent;
+  --el-switch-off-color: transparent;
+  --el-switch-border-color: #a3a2a2;
+  .el-switch--large.is-checked .el-switch__core .el-switch__inner {
+    padding: 0 0px 0 28px;
+  }
+  .el-switch--large .el-switch__core .el-switch__inner {
+    padding: 0 28px 0 0;
+  }
+  .el-switch__core .el-switch__action {
+    z-index: -1;
+  }
+}
 </style>