123

src/components/Trumbs/index.vue

@@ -17,7 +17,11 @@
         :key="item.picUrl"
         style="background: none"
       >
-        <div class="img_card" :key="item.picUrl" @click="viewDetail(item.id)">
+        <div
+          :class="isActive(item.id) ? 'img_card active_card' : 'img_card'"
+          :key="item.picUrl"
+          @click="viewDetail(item.id)"
+        >
           <img v-lazy="item.picUrl" class="img" alt="" />
           <div class="dialog_text">
             <div class="btn" @click="viewDetail(item.id)">查看详情</div>
@@ -83,6 +87,15 @@ const props = defineProps({
   isCase: Boolean,
 })
 const modules = ref([FreeMode, Navigation])
+
+const isActive = index => {
+  if (props.isCase) {
+    return index == detailStore.example_id
+  } else {
+    return index == detailStore.hardwareExampleId
+  }
+}
+
 const viewDetail = index => {
   myEmit('onMySonFunc')
   if (props.isCase) {
@@ -158,6 +171,10 @@ const onSwiper = swiper => {
       }
     }
   }
+  .active_card {
+    border-top: solid 6px #283fe7;
+    box-sizing: border-box;
+  }
   .dialog_text:hover {
     background: rgba(53, 83, 227, 0.63);
     opacity: 1;