解决方案新增二级切换功能

 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-03 16:18:50
+ * @LastEditTime: 2024-12-03 17:46:50
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -15,6 +15,13 @@
         </div>
       </div>
     </hager-box>
+    <hager-box v-if="case_list.length > 1">
+      <div class="hager-solution-detail-nav">
+        <div class="nav" v-for="(item, index) in case_list" :key="index">
+          <div @click="changeCase(item, index)" :class="[current_id === item.id ? 'current-nav' : '', 'detail-nav']">{{ item.category_name }}</div>
+        </div>
+      </div>
+    </hager-box>
     <hager-box v-if="!is_xs" class="box-n">
       <el-row :gutter="0">
         <el-col :span="12" style="height: 25rem;">
@@ -181,6 +188,8 @@ export default {
       reach_product_end: false,
       SuccessSlidesPerView: 4,
       productSlidesPerView: 4,
+      case_list: [],
+      current_id: '',
     }
   },
   async mounted () {
@@ -189,8 +198,10 @@ export default {
       this.case_info = data;
       this.case_banner = data.file?.banner ? data.file?.banner[0] : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
       this.case_img = data.file?.img ? data.file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
-      this.success_data_list = data.list;
-      this.product_list = data.product;
+      this.case_list = data.list;
+      this.current_id = this.case_list[0]['id'];
+      this.success_data_list = this.case_list[0].list ?? [];
+      this.product_list = this.case_list[0].product ?? [];
     }
     this.$nextTick(() => {
       this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
@@ -271,6 +282,15 @@ export default {
         this.reach_success_end = false;
       }
     },
+    changeCase (v, idx) {
+      this.current_id = this.case_list[idx]['id'];
+      this.success_data_list = this.case_list[idx].list ?? [];
+      this.product_list = this.case_list[idx].product ?? [];
+      this.activeSuccessIndex = 0
+      this.activeProductIndex = 0
+      this.reach_product_end = false
+      this.reach_success_end = false
+    }
   }
 }
 </script>
@@ -393,11 +413,11 @@ export default {
 
   .card-box {
     .card-image-wrapper {
-      background-color: #F3F3F3;
+      background-color: #FFF;
       border-radius: 5px;
       transition: transform 0.3s ease-in-out;
+      border: 1px solid rgba(0, 0, 0, 0.1);
       &:hover {
-        transform: scale(1.05);
         // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         cursor: pointer;
       }
@@ -417,5 +437,42 @@ export default {
       }
     }
   }
+
+  .hager-solution-detail-nav {
+    background-color: #F3F3F3;
+    display: flex;
+    align-items: center;
+    justify-content:space-around;
+    margin-top: 2rem;
+    .nav {
+      flex: 1; text-align: center; padding: 0.75rem 0;
+      position: relative;
+      &:not(:last-child) {
+        &::after {
+          content: '|';
+          position: absolute;
+          right: 0rem;
+          top: 50%;
+          transform: translateY(-50%);
+          color: #adadad;
+          font-size: 1rem;
+        }
+      }
+    }
+    .detail-nav {
+      display: inline;
+      color: @text-color;
+      font-size: 1.05rem;
+      padding: 0.7rem 0;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .current-nav {
+      color: @secondary-color;
+      border-bottom: 2px solid #ED6C00;
+      font-weight: bold;
+    }
+  }
 }
 </style>