首页右下角《历年频发问题TOP5》组件内容开发

src/components/common/TagTableCard.vue

@@ -36,10 +36,7 @@ export default {
   },
   mounted() {},
   /**
-   * data.type: 布局方式【lr:左右布局;other:上下布局】,默认为lr（非必填）
-   * data.title: 标题（必填）
-   * data.value: 值（必填）
-   * data.unit: 单位
+   * data:TagCard组件参数
    */
   props: ["data"],
   methods: {},

src/components/common/TopCard.vue

@@ -0,0 +1,108 @@
+<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_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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TopCard",
+  components: {},
+  data() {
+    return {
+      dataList: [
+        { name: "TOP1", title: "基本农田、耕地等被违规占用、改变用途或闲置抛荒", value: "36" },
+        { name: "TOP2", title: "发现问题整改不到位，存在长期不整改不处理的现象", value: "30" },
+        { name: "TOP3", title: "建设用地减量化复垦地块后续管养不到位", value: "25" },
+        {
+          name: "TOP4",
+          title: "河道被截断或填埋，河道周边存在不规范养殖，河岸被违章搭建等",
+          value: "22"
+        },
+        { name: "TOP5", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: "19" }
+      ]
+    };
+  },
+  mounted() {},
+  /**
+   * data:top data
+   */
+  props: ["data"],
+  methods: {},
+  watch: {}
+};
+</script>
+<style lang="less" scoped>
+@borderColor: #00aaff;
+@borderColor32: #00aaff32;
+@borderColor64: #00aaff64;
+@topTitleBgLeft: #00244d;
+@topTitleMinLeft: #002f56;
+@lightColor: #74ffff;
+@tagValueColor: #f19b56;
+.CardBox {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  .Top_box {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
+    .Top_box_name {
+      font-size: 14px;
+      font-family: PingFang SC;
+      padding-right: 10px;
+      font-weight: bold;
+      color: #ffffff;
+    }
+    .Top_box_main {
+      border-left: 1px solid #666;
+      width: 100%;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #b8c5cc;
+      padding-bottom: 5px;
+      &_title {
+        width: calc(100% - 20px);
+        padding: 0 10px;
+        height: 40px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+      ::v-deep .el-progress-bar__outer {
+        background-color: transparent;
+        background-image: linear-gradient(90deg, #007dff32 0%, #00ffff32 100%) !important;
+      }
+      ::v-deep .el-progress-bar__inner {
+        background-image: linear-gradient(90deg, #007dff 0%, #00ffff 100%) !important;
+      }
+    }
+    .Top_box_value {
+      padding-left: 5px;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #f19b56;
+    }
+  }
+}
+</style>

src/views/HomeView.vue

@@ -107,7 +107,11 @@
         :titleWidth="menus.right[2].titleWidth"
         :title="menus.right[2].title"
         :boxHeight="menus.right[2].height"
-      ></MenuCard>
+      >
+        <template slot="top">
+          <TopCard />
+        </template>
+      </MenuCard>
     </div>
   </div>
 </template>
@@ -121,6 +125,7 @@ import { street, soilData, waterData, forestryData } from "@/config/common";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
 import TagTableCard from "@/components/common/TagTableCard";
+import TopCard from "@/components/common/TopCard";
 export default {
   name: "HomeView",
   components: {
@@ -131,7 +136,8 @@ export default {
     BarChart,
     TagCard,
     ChartCard,
-    TagTableCard
+    TagTableCard,
+    TopCard
   },
   data() {
     return {