tree selection页 不用tab 用左右选择按钮

src/views/TreeSelection.vue

@@ -136,7 +136,21 @@
         />
       </div>
     </div>
-    <nav>
+    <img
+      v-show="currentTab !== 0"
+      class="left-btn"
+      src="@/assets/image/left.png"
+      alt=""
+      @click="onClickLeftBtn"
+    >
+    <img
+      v-show="currentTab !== 2"
+      class="right-btn"
+      src="@/assets/image/right.png"
+      alt=""
+      @click="onClickRightBtn"
+    >
+    <!-- <nav>
       <button
         class="theme"
         @click="onClickExhibTabBtn(0)"
@@ -155,7 +169,7 @@
       >
         传统与现代特展
       </button>
-    </nav>
+    </nav> -->
   </div>
 </template>
 
@@ -255,6 +269,20 @@ export default {
     clearInterval(this.intervalId)
   },
   methods: {
+    onClickLeftBtn() {
+      if (this.currentTab > 0) {
+        this.$store.commit("setSelectedTreeTabIdx", this.currentTab - 1)
+      } else if (this.currentTab === -1) {
+        this.$store.commit("setSelectedTreeTabIdx", 0)
+      }
+    },
+    onClickRightBtn() {
+      if (this.currentTab >= 0 && this.currentTab < 2) {
+        this.$store.commit("setSelectedTreeTabIdx", this.currentTab + 1)
+      } else if (this.currentTab === -1) {
+        this.$store.commit("setSelectedTreeTabIdx", 2)
+      }
+    },
     onClickExhibTabBtn(idx) {
       this.$store.commit("setSelectedTreeTabIdx", idx)
     },
@@ -563,6 +591,26 @@ export default {
       background: #2FB779;
     }
   }
+  .left-btn {
+    position: absolute;
+    left: 0.8rem;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 50%;
+    z-index: 1;
+  }
+  .right-btn {
+    position: absolute;
+    right: 0.8rem;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 50%;
+    z-index: 1;
+  }
 }
 @keyframes emerge {
   50% {