首页样式

src/views/home/jdcomponents/JDCategory.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="cate-menu" @mouseleave="activeIndex = -1">
-    <ul class="cate-list">
-      <li v-for="(c, i) in dataList" :key="i" class="cate-item" :class="{ active: activeIndex === i }" @mouseenter="onMouseenter(i)">
-        <img :src="c.icon" class="cate-icon" />
-        <a href="#">{{ c.name }}</a>
-      </li>
+    <div class="cate-list"></div>
+    <ul class="cate-list-box">
+      <template v-for="(c, i) in dataList" :key="i">
+        <li
+          v-if="activeIndex == -1 ? (Number(i) < 9 ? true : false) : true"
+          class="cate-item"
+          :class="{ active: activeIndex === i }"
+          @mouseenter="onMouseenter(i)"
+        >
+          <img :src="c.icon" class="cate-icon" />
+          <a href="#">{{ c.name }}</a>
+        </li>
+      </template>
     </ul>
 
     <!-- 巨大悬浮菜单面板 (根据图5精细刻画) -->
@@ -87,12 +95,22 @@ const onMouseenter = (index: any) => {
   height: 100%;
   z-index: 100;
 }
+
 .cate-list {
   padding: 10px 0;
   background: #f8f9fa;
   height: 100%;
   box-sizing: border-box;
 }
+.cate-list-box {
+  width: 100%;
+  position: absolute;
+  padding: 10px 0;
+  background: #f8f9fa;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+}
 
 .cate-item {
   height: 40px;