中展专区

src/views/Home.vue

@@ -49,6 +49,12 @@
                     <product-small :info="item"></product-small>
                 </swiper-slide>
             </swiper> -->
+
+                <div class="list-top">
+                    <div class="text1" :class="{ active: active === 0 }">数字文创</div>
+                    <div class="text1" @click="goHall">中展专区</div>
+                </div>
+
                 <!-- 商品列表 -->
                 <div class="collection_list">
                     <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getList"> -->
@@ -147,7 +153,8 @@ export default {
             loading: false,
             finished: false,
             page: 0,
-            isLoading: true
+            isLoading: true,
+            active: 0
         };
     },
     computed: {
@@ -205,6 +212,9 @@ export default {
         },
         keepRecord() {
             document.location.replace('https://beian.miit.gov.cn');
+        },
+        goHall() {
+            this.$router.push({ path: '/productList', query: { category: '中展' } });
         }
     },
     mounted() {
@@ -485,4 +495,33 @@ export default {
         }
     }
 }
+
+.list-top {
+    .flex();
+    justify-content: center;
+    .text1 {
+        font-size: 16px;
+        color: @text3;
+        line-height: 24px;
+        padding: 8px 40px 16px;
+
+        &.active {
+            color: #000000;
+            font-weight: bold;
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                width: 24px;
+                height: 2px;
+                background: #3ab200;
+                border-radius: 1px;
+                bottom: 10px;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+    }
+}
 </style>