1

src/components/PanoList.vue

@@ -30,8 +30,10 @@
       >
         <div class="tab-wrap">
           <button
-            v-for="(catalogLevel1) in catalogTopology"
+            v-for="(catalogLevel1, index) in catalogTopology"
             :key="catalogLevel1.id"
+            :class="{active: index === secondLineActiveIdx}"
+            @click="onClickSecondLineBtn(index)"
           >
             {{ catalogLevel1.name }}
           </button>
@@ -64,6 +66,7 @@ export default {
         },
       ],
       firstLineActiveIdx: 0,
+
       secondLineActiveIdx: 0,
       isSecondLineExpanded: false,
     }
@@ -80,6 +83,9 @@ export default {
     onClickFirstLineBtn(index) {
       this.firstLineActiveIdx = index
     },
+    onClickSecondLineBtn(index) {
+      this.secondLineActiveIdx = index
+    },
     onClickClose: globalUtils.throttle(function() {
       this.$router.go(-1)
     }, 1000)
@@ -163,6 +169,9 @@ export default {
             font-size: 1.83rem;
             color: #FFFFFF;
             line-height: 2.15rem;
+            &.active {
+              color: #D8B275;
+            }
           }
         }
         .expand-shrink {
@@ -189,6 +198,9 @@ export default {
             font-size: 1.83rem;
             color: #FFFFFF;
             line-height: 2.15rem;
+            &.active {
+              color: #D8B275;
+            }
           }
         }
         .expand-shrink {