diff --git a/packages/shop/index/index.css b/packages/shop/index/index.css
index 5c34f82d..6ef2055d 100644
--- a/packages/shop/index/index.css
+++ b/packages/shop/index/index.css
@@ -132,6 +132,10 @@ page {
     padding: 35rpx 0;
 }
 
+.CateItem_active {
+    background-color: #ffffff;
+}
+
 .CateItem .hot {
     width: 25.82rpx;
     height: 30rpx;
diff --git a/packages/shop/index/index.vue b/packages/shop/index/index.vue
index 5f4e6789..de7d35b9 100644
--- a/packages/shop/index/index.vue
+++ b/packages/shop/index/index.vue
@@ -90,7 +90,7 @@
     <div class="Con">
       <div class="Con_left">
         <div
-          class="CateItem"
+          class="CateItem" :class="item.id === currentLeftCateId ? 'CateItem_active' : ''"
           v-for="item in leftCateList"
           :key="item.id"
           @click="changeLeftCate(item.id)"
@@ -356,6 +356,7 @@ export default {
       ],
 
       rightTopActive: 0,
+currentLeftCateId: null,
       topShow: false,
 
       GGshow: false,
@@ -416,8 +417,14 @@ export default {
         console.log(res);
         this.CateList = res.commodity_category_list;
         this.firstId = res.commodity_category_list[0].id;
-        this.leftCateList = res.commodity_category_list[0].level_two_category;
-        this.secondId = res.commodity_category_list[0].level_two_category[0].id;
+        this.leftCateList = res.commodity_category_list[0].level_two_category || [];
+        if (this.leftCateList.length > 0) {
+          this.currentLeftCateId = this.leftCateList[0].id;
+          this.secondId = this.leftCateList[0].id;
+        } else {
+          this.currentLeftCateId = null;
+          this.secondId = null;
+        }
         this.getGoodsList();
       });
     },
@@ -448,6 +455,7 @@ export default {
     },
 
     changeLeftCate(e) {
+      this.currentLeftCateId = e;
       this.secondId = e;
       this.getGoodsList();
     },