top组件优化

src/components/common/TopCard.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="CardBox">
     <div v-for="(items, index) in dataList" :key="index" class="Top_box">
-      <div class="Top_box_name">{{ items.name }}</div>
-      <div class="Top_box_main">
+      <div class="Top_box_name" v-if="dataSize > index">{{ items.name }}</div>
+      <div class="Top_box_main" v-if="dataSize > index">
         <div class="Top_box_main_title">{{ items.title }}</div>
         <div><el-progress :percentage="items.value" :stroke-width="10" :show-text="false"></el-progress></div>
       </div>
-      <div class="Top_box_value">{{ items.value }}</div>
+      <div class="Top_box_value" v-if="dataSize > index">{{ items.value }}</div>
     </div>
   </div>
 </template>
@@ -26,7 +26,16 @@ export default {
           title: "河道被截断或填埋，河道周边存在不规范养殖，河岸被违章搭建等",
           value: 22
         },
-        { name: "TOP5", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: 19 }
+        { name: "TOP5", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: 19 },
+        { name: "TOP6", title: "基本农田、耕地等被违规占用、改变用途或闲置抛荒", value: 36 },
+        { name: "TOP7", title: "发现问题整改不到位，存在长期不整改不处理的现象", value: 30 },
+        { name: "TOP8", title: "建设用地减量化复垦地块后续管养不到位", value: 25 },
+        {
+          name: "TOP9",
+          title: "河道被截断或填埋，河道周边存在不规范养殖，河岸被违章搭建等",
+          value: 22
+        },
+        { name: "TOP10", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: 19 }
       ]
     };
   },
@@ -34,7 +43,7 @@ export default {
   /**
    * data:top data
    */
-  props: ["data"],
+  props: ["dataSize"],
   methods: {},
   watch: {}
 };
@@ -64,6 +73,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     .Top_box_name {
+      width: 50px;
       font-size: 14px;
       font-family: PingFang SC;
       padding-right: 10px;
@@ -72,7 +82,7 @@ export default {
     }
     .Top_box_main {
       border-left: 1px solid #666;
-      width: 100%;
+      width: 80%;
       font-size: 14px;
       font-family: PingFang SC;
       font-weight: 400;
@@ -97,6 +107,7 @@ export default {
       }
     }
     .Top_box_value {
+      width: calc(20% - 50px);
       padding-left: 5px;
       font-size: 14px;
       font-family: PingFang SC;

src/components/layout/MenuCard.vue

@@ -448,6 +448,14 @@ export default {
   background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
   &_top {
     margin: 0 10px;
     width: calc(100% - 20px);

src/views/HomeView.vue

@@ -112,7 +112,7 @@
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
         <template slot="top">
-          <TopCard />
+          <TopCard :dataSize="5"/>
         </template>
       </MenuCard>
       <MenuCard :menuData="menus.right[3]" v-if="$ifMenu('2', '1')">
@@ -125,7 +125,7 @@
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
         <template slot="top">
-          <TopCard />
+          <TopCard :dataSize="5"/>
         </template>
       </MenuCard>
     </div>
@@ -227,7 +227,7 @@ export default {
         right: [
           { type: "card", title: "资金投入情况", titleWidth: 64 },
           { type: "card", title: "资源环境项目", titleWidth: 64 },
-          { type: "card", title: "历年频发问题TOP5", titleWidth: 81 },
+          { type: "card", title: "历年频发问题TOP5", titleWidth: 81},
           { type: "card", title: "土地类问题", titleWidth: 60 },
           { type: "card", title: "土地类问题TOP5", titleWidth: 81 }
         ]