左右切换文物功能

src/views/RelicDetail.vue

@@ -22,7 +22,7 @@
         notDarkTheme: !isDarkTheme,
       }"
     >
-      <h1 v-html="$gConfigInfo.objInfo[$route.query.m]" />
+      <h1 v-html="title" />
       <div
         v-show="isShowDescDetail"
         class="splitter"
@@ -30,7 +30,7 @@
       <div
         v-show="isShowDescDetail"
         class="detail"
-        v-html="$gConfigTxt.txtObj[$route.query.m]"
+        v-html="detail"
       />
     </article>
     <!-- 假的阴影 -->
@@ -88,7 +88,11 @@
       </button>
     </menu>
 
-    <button class="jump previous">
+    <button
+      v-show="hasPrevious"
+      class="jump previous"
+      @click="onClickPrevious"
+    >
       <img
         class=""
         src="@/assets/images/btn-arrow-left.png"
@@ -96,7 +100,11 @@
         draggable="false"
       >
     </button>
-    <button class="jump next">
+    <button
+      v-show="hasNext"
+      class="jump next"
+      @click="onClickNext"
+    >
       <img
         class=""
         src="@/assets/images/btn-arrow-right.png"
@@ -126,18 +134,39 @@ export default {
       isShowDescDetail: false,
       isShowLogo: true,
       isShowHelp: false,
+      title: this.$gConfigInfo.objInfo[this.$route.query.m],
+      detail: this.$gConfigTxt.txtObj[this.$route.query.m],
     }
   },
   computed: {
     ...mapState([
       'isDarkTheme',
     ]),
+    id() {
+      return this.$route.query.m
+    },
     Sunny() {
       return Sunny
     },
     Moon() {
       return Moon
     },
+    relicIndex() {
+      return Object.keys(this.$gConfigInfo.objInfo).indexOf(this.$route.query.m)
+    },
+    hasPrevious() {
+      return this.relicIndex !== 0
+    },
+    hasNext() {
+      return this.relicIndex !== Object.keys(this.$gConfigInfo.objInfo).length
+    },
+  },
+  watch: {
+    id: {
+      handler() {
+        location.reload()
+      }
+    }
   },
   created() {
     fdage.embed('user-config/4dage/' + this.$route.query.m + '.4dage', {
@@ -171,10 +200,23 @@ export default {
     onClickShowHelp() {
       this.isShowHelp = !this.isShowHelp
     },
-    onClickShareWeibo() {
-      console.log('click share weibo')
-    }
-  }
+    onClickPrevious: utils.debounce(function() {
+      this.$router.replace({
+        name: this.$route.name,
+        query: {
+          m: Object.keys(this.$gConfigInfo.objInfo)[this.relicIndex - 1]
+        }
+      })
+    }, 1000),
+    onClickNext: utils.debounce(function() {
+      this.$router.replace({
+        name: this.$route.name,
+        query: {
+          m: Object.keys(this.$gConfigInfo.objInfo)[this.relicIndex + 1]
+        }
+      })
+    }, 1000),
+  },
 }
 </script>
 
@@ -204,7 +246,8 @@ export default {
     position: absolute;
     top: 110px;
     left: 110px;
-    width: 503px;
+    max-width: 503px;
+    width: 25vw;
     z-index: 1;
     pointer-events: none;
     &.isDarkTheme {
@@ -274,10 +317,10 @@ export default {
     width: 74px;
     height: 74px;
     &.previous {
-      left: 70px;
+      left: 20px;
     }
     &.next {
-      right: 70px;
+      right: 20px;
     }
     > img {
       width: 100%;