首页土地资源上部组件提取

src/components/common/TagCard.vue

@@ -41,7 +41,7 @@ export default {
    * data.value: 值（必填）
    * data.unit: 单位
    */
-  props: ["data", "type", "title", "value", "unit"],
+  props: ["data"],
   methods: {},
   watch: {}
 };

src/components/common/TagTableCard.vue

@@ -0,0 +1,140 @@
+<template>
+  <!-- 外边框 -->
+  <div class="displayFlex" style="max-height: 180px">
+    <div class="displayFlex-c">
+      <div class="card card1">
+        <div>基本农田面积</div>
+        <div>100<span>公顷</span></div>
+      </div>
+      <div class="card card2">
+        <div>储备土地面积</div>
+        <div>100<span>公顷</span></div>
+      </div>
+    </div>
+    <div><TagCard :data="data"></TagCard></div>
+    <div class="displayFlex-c">
+      <div class="card card3">
+        <div style="text-align: right">减量化面积</div>
+        <div>100<span>公顷</span></div>
+      </div>
+      <div class="card card4">
+        <div style="text-align: right">一般耕地面积</div>
+        <div>100<span>公顷</span></div>
+      </div>
+    </div>
+    <div class="borders"></div>
+  </div>
+</template>
+
+<script>
+import TagCard from "./TagCard.vue";
+export default {
+  name: "TagTableCard",
+  components: {TagCard},
+  data() {
+    return {};
+  },
+  mounted() {},
+  /**
+   * data.type: 布局方式【lr:左右布局;other:上下布局】,默认为lr（非必填）
+   * data.title: 标题（必填）
+   * data.value: 值（必填）
+   * data.unit: 单位
+   */
+  props: ["data"],
+  methods: {},
+  watch: {}
+};
+</script>
+
+<style lang="less" scoped>
+@borderColor: #00aaff;
+@borderColor32: #00aaff32;
+@borderColor64: #00aaff64;
+@topTitleBgLeft: #00244d;
+@topTitleMinLeft: #002f56;
+@lightColor: #74ffff;
+@tagValueColor: #f19b56;
+.displayFlex {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  position: relative;
+  .borders {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 110px;
+    height: 100px;
+    background: linear-gradient(to left, #00aaff, #00aaff) left top no-repeat,
+      linear-gradient(to bottom, #00aaff, #00aaff) left top no-repeat,
+      linear-gradient(to left, #00aaff, #00aaff) right top no-repeat,
+      linear-gradient(to bottom, #00aaff, #00aaff) right top no-repeat,
+      linear-gradient(to left, #00aaff, #00aaff) left bottom no-repeat,
+      linear-gradient(to bottom, #00aaff, #00aaff) left bottom no-repeat,
+      linear-gradient(to left, #00aaff, #00aaff) right bottom no-repeat,
+      linear-gradient(to left, #00aaff, #00aaff) right bottom no-repeat;
+    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
+  }
+}
+.displayFlex-c {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  .card:nth-child(1) {
+    width: calc(100% - 20px);
+    height: 50px;
+    padding: 10px;
+    margin: 5px 10px;
+    background-color: #00aaff32;
+  }
+  .card:nth-child(2) {
+    width: calc(100% - 20px);
+    height: 50px;
+    padding: 10px;
+    margin: 5px 10px;
+    background-color: #00aaff32;
+  }
+  .card {
+    div:nth-child(1) {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+    }
+    div:nth-child(2) {
+      font-size: 30px;
+      font-weight: bold;
+      color: #00aaff;
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: nowrap;
+      font-family: YouSheBiaoTiHei;
+      span {
+        font-size: 12px;
+        font-weight: bold;
+        color: #00aaff;
+      }
+    }
+  }
+  .card1 {
+    clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 0 100%, 0 0);
+  }
+  .card2 {
+    clip-path: polygon(0 0, 75% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
+  }
+  .card3 {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 50%, 0 0);
+  }
+  .card4 {
+    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%, 0 50%, 25% 0);
+  }
+}
+</style>

src/views/HomeView.vue

@@ -6,31 +6,7 @@
     <div id="leftMenus">
       <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height">
         <template slot="top">
-          <!-- 需要提出一个组件 -->
-          <div class="displayFlex" style="max-height: 180px">
-            <div class="displayFlex-c">
-              <div class="card card1">
-                <div>基本农田面积</div>
-                <div>100<span>公顷</span></div>
-              </div>
-              <div class="card card2">
-                <div>储备土地面积</div>
-                <div>100<span>公顷</span></div>
-              </div>
-            </div>
-            <div><TagCard :data="tagCardData2"></TagCard></div>
-            <div class="displayFlex-c">
-              <div class="card card3">
-                <div style="text-align: right">减量化面积</div>
-                <div>100<span>公顷</span></div>
-              </div>
-              <div class="card card4">
-                <div style="text-align: right">一般耕地面积</div>
-                <div>100<span>公顷</span></div>
-              </div>
-            </div>
-            <div class="borders"></div>
-          </div>
+          <TagTableCard :data="tagCardData2"/>
         </template>
         <template slot="bottom">
           <ChartCard :title="'近三年农田面积变化'" />
@@ -128,6 +104,7 @@ import BarChart from "@/components/chart/BarChart.vue";
 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";
 export default {
   name: "HomeView",
   components: {
@@ -137,7 +114,8 @@ export default {
     NewSelect,
     BarChart,
     TagCard,
-    ChartCard
+    ChartCard,
+    TagTableCard
   },
   data() {
     return {
@@ -393,61 +371,4 @@ export default {
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }
-.displayFlex-c {
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-  .card:nth-child(1) {
-    width: calc(100% - 20px);
-    height: 50px;
-    padding: 10px;
-    margin: 5px 10px;
-    background-color: #00aaff32;
-  }
-  .card:nth-child(2) {
-    width: calc(100% - 20px);
-    height: 50px;
-    padding: 10px;
-    margin: 5px 10px;
-    background-color: #00aaff32;
-  }
-  .card {
-    div:nth-child(1) {
-      font-size: 16px;
-      font-weight: bold;
-      color: #ffffff;
-    }
-    div:nth-child(2) {
-      font-size: 30px;
-      font-weight: bold;
-      color: #00aaff;
-      display: flex;
-      align-content: center;
-      align-items: center;
-      justify-content: center;
-      flex-wrap: nowrap;
-      font-family: YouSheBiaoTiHei;
-      span {
-        font-size: 12px;
-        font-weight: bold;
-        color: #00aaff;
-      }
-    }
-  }
-  .card1 {
-    clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 0 100%, 0 0);
-  }
-  .card2 {
-    clip-path: polygon(0 0, 75% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
-  }
-  .card3 {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 50%, 0 0);
-  }
-  .card4 {
-    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%, 0 50%, 25% 0);
-  }
-}
 </style>