修改样式

src/views/priceDriven/detail.vue

@@ -34,7 +34,10 @@ const getClassify = async () => {
 
   if (code === 200) {
     const { permission_list } = data;
-    varietiesList.value = permission_list.slice(0, 4);
+    permission_list.forEach(_ => {
+      _.isShow = _.list ? _.list.some(sub_item => sub_item.pirce_driven_state) : false
+    })
+    varietiesList.value = permission_list.filter(_ => _.isShow);
 
     // 分享进入的默认品种
     if (route.query.default_classify_first) {
@@ -259,13 +262,32 @@ onUnmounted(() => {
               'classify-sub-item',
               { act: select_classify_sub === item.chart_permission_id },
             ]"
-            v-for="item in classifyList"
+            v-for="item in classifyList.slice(0,6)"
             :key="item.chart_permission_id"
             @click="changeSubClassify(item)"
           >
             {{ item.chart_permission_name }}
           </li>
-          <div
+
+          <el-popover
+            :width="500"
+            trigger="click"
+          >
+            <template #reference>
+              <img v-if="classifyList.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
+            </template>
+            <template #default>
+              <div class="flex top-nav-filter-box">
+                <div 
+                    :class="['item',item.chart_permission_id == select_classify_sub&&'active']" 
+                    v-for="item in classifyList.slice(6)" 
+                    :key="item.chart_permission_id"
+                    @click="changeSubClassify(item)"
+                >{{item.chart_permission_name}}</div>
+              </div>
+            </template>
+          </el-popover>
+          <!-- <div
             class="slide"
             v-if="!isSlideClassify"
             @click="isSlideClassify = !isSlideClassify"
@@ -274,7 +296,7 @@ onUnmounted(() => {
           </div>
           <div class="slide" v-else @click="isSlideClassify = !isSlideClassify">
             收起 <el-icon><ArrowUp /></el-icon>
-          </div>
+          </div> -->
         </ul>
       </div>
 
@@ -461,7 +483,7 @@ onUnmounted(() => {
       .classify-sub-item {
         flex-shrink: 0;
         position: relative;
-        margin: 5px 50px 4px 0;
+        margin: 5px 30px 4px 0;
         cursor: pointer;
         &.act {
           color: #e3b377;
@@ -547,6 +569,30 @@ onUnmounted(() => {
         margin-right: auto;
     }
   }
+
+}
+.top-nav-filter-box{
+  flex-wrap: wrap;
+  .item{
+      margin: 5px 10px;
+      width: 113px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f6f6f6;
+      border-radius: 4px;
+      font-size: 16px;
+      cursor: pointer;
+      :hover{
+          color: #fff;
+          background-color: #F3A52F;
+      }
+  }
+  .active{
+      color: #fff;
+      background-color: #F3A52F;
+  }
 }
 </style>
 <style lang="scss">