完成基本card组件模板

src/components/chart/LineChart.vue

@@ -67,3 +67,9 @@ export default {
   },
 };
 </script>
+<style>
+#lineChart{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/common/ChartCard.vue

@@ -0,0 +1,94 @@
+<template>
+  <!-- 外边框 -->
+  <div>
+    <!-- 需要提出一个组件 -->
+    <div class="displayFlex">
+      <div class="borders2"></div>
+      <div class="chartTitle">
+        {{ title }}
+        <div class="chartTitleBorder"></div>
+      </div>
+    </div>
+    <div style="height: 100px">
+      <!-- 需要重写 -->
+      <LineChart :categoryData="['2020年', '2021年', '2022年']" :valueData="[1024, 1026, 1029]" />
+    </div>
+  </div>
+</template>
+
+<script>
+import LineChart from "@/components/chart/LineChart.vue";
+export default {
+  name: "ChartCard",
+  components: { LineChart },
+  data() {
+    return {};
+  },
+  mounted() {},
+  /**
+   * title: 标题（必填）
+   */
+  props: ["title"],
+  methods: {},
+  watch: {}
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+  }
+}
+.borders2 {
+  width: 10px;
+  height: 10px;
+  background-color: #74ffff;
+  transform: rotate(45deg);
+}
+.chartTitle {
+  position: relative;
+  width: 100%;
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #74ffff;
+  margin-left: 10px;
+  background: linear-gradient(180deg, #ffffff 0%, #33eeff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  border-bottom: 1px solid transparent;
+  border-image: --webkit-linear-gradient(to right, #33eeff, transparent) 1;
+  border-image: --moz-linear-gradient(to right, #33eeff, transparent) 1;
+  border-image: linear-gradient(to right, #33eeff, transparent) 1;
+}
+.chartTitleBorder {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  width: 10px;
+  height: 3px;
+  background: #00a8ff;
+  border-radius: 2px;
+}
+</style>

src/components/common/TagCard.vue

@@ -78,14 +78,14 @@ export default {
     display: flex;
     span:nth-child(1) {
       font-family: YouSheBiaoTiHei;
-      font-weight: 400;
+      font-weight: bold;
       color: @tagValueColor;
       line-height: 30px;
       font-size: 30px;
     }
     span:nth-child(2) {
       font-size: 12px;
-      font-weight: 400;
+      font-weight: bold;
       color: @tagValueColor;
       line-height: 30px;
     }
@@ -99,7 +99,7 @@ export default {
   }
   .tagTitle {
     font-size: 16px;
-    font-weight: 400;
+    font-weight: bold;
     color: #ffffff;
     line-height: 20px;
   }

src/components/layout/MenuCard.vue

@@ -114,9 +114,7 @@ export default {
 @borderColor32: #00aaff32;
 @borderColor64: #00aaff64;
 @topTitleBgLeft: #00244d;
-@topTitleBgLeft64: #00244d64;
 @topTitleMinLeft: #002f56;
-@topTitleMinLeft64: #002f5664;
 @lightColor: #74ffff;
 .menuMainBox {
   position: relative;
@@ -126,9 +124,10 @@ export default {
   border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: linear-gradient(to top, @borderColor, transparent) 1;
-  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft64, @topTitleBgLeft64);
-  background-image: --moz-linear-gradient(to top, @topTitleMinLeft64, @topTitleBgLeft64);
-  background-image: linear-gradient(to top, @topTitleMinLeft64, @topTitleBgLeft64);
+  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);
+  opacity: 0.9;
   //   type !== chart
   &_top {
     position: relative;

src/views/HomeView.vue

@@ -6,10 +6,35 @@
     <div id="leftMenus">
       <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height">
         <template slot="top">
-            <TagCard :data="tagCardData2"></TagCard>
-            <TagCard :data="tagCardData2"></TagCard>
+          <!-- 需要提出一个组件 -->
+          <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>
+        </template>
+        <template slot="bottom">
+          <ChartCard :title="'近三年农田面积变化'" />
         </template>
-        <template slot="bottom">主题下部插槽</template>
       </MenuCard>
       <MenuCard :type="menus.left[1].type" :title="menus.left[1].title" :boxHeight="menus.left[1].height">
         <template slot="top">
@@ -19,18 +44,26 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
+        <template slot="bottom">
+          <ChartCard :title="'近三年水域面积变化'" />
+        </template>
+      </MenuCard>
+      <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height">
+        <template slot="top">
+          <div class="displayFlex">
+            <TagCard :data="tagCardData3"></TagCard>
+            <TagCard :data="tagCardData3"></TagCard>
+          </div>
+        </template>
+        <template slot="bottom">
+          <ChartCard :title="'近三年林地面积变化'" />
+        </template>
       </MenuCard>
-      <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height"></MenuCard>
     </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus">
       <div id="mainMenus_topLeft">所属街道</div>
-      <NewSelect
-        id="mainMenus_topSelect"
-        v-model="streetSelectVal"
-        :options="streetOptions"
-        :value="streetSelectVal"
-      />
+      <NewSelect id="mainMenus_topSelect" v-model="streetSelectVal" :options="streetOptions" :value="streetSelectVal" />
       <div id="mainMenus_topRight">
         <MenuCard
           :type="menus.main[0].type"
@@ -94,6 +127,7 @@ import NewSelect from "@/components/common/NewSelect.vue";
 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";
 export default {
   name: "HomeView",
   components: {
@@ -102,20 +136,27 @@ export default {
     MenuCard,
     NewSelect,
     BarChart,
-    TagCard
+    TagCard,
+    ChartCard
   },
   data() {
     return {
       tagCardData: {
-        type:"tb",
+        type: "tb",
         title: "土地资源",
         value: 100,
         unit: "公顷"
       },
       tagCardData2: {
-        type:"lr",
-        title: "土地资源",
-        value: 100,
+        type: "tb",
+        title: "土地资源面积",
+        value: 172,
+        unit: "公顷"
+      },
+      tagCardData3: {
+        type: "lr",
+        title: "林地面积",
+        value: 654,
         unit: "公顷"
       },
       testTitle: "土地资源",
@@ -124,7 +165,7 @@ export default {
         left: [
           { type: "menu", title: "土地资源" },
           { type: "menu", title: "水资源" },
-          { type: "menu", title: "林地资源" },
+          { type: "menu", title: "林地资源" }
         ],
         main: [
           {
@@ -132,34 +173,34 @@ export default {
             title: "浦东新区自然资源分布TOP10",
             width: "360",
             height: "370",
-            background: "rgba(0,39,77,0.6)",
-          },
+            background: "rgba(0,39,77,0.6)"
+          }
         ],
         right: [
           { type: "menu", title: "资金投入情况", titleWidth: 62 },
           { type: "menu", title: "资源环境项目", titleWidth: 62 },
-          { type: "menu", title: "历年频发问题TOP5", titleWidth: 82 },
-        ],
+          { type: "menu", title: "历年频发问题TOP5", titleWidth: 82 }
+        ]
       },
       buttonData: ["A", "B", "C"],
       btnChecked: "A",
       AData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       BData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       CData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       streetSelectVal: "全部街道",
-      streetOptions: [],
+      streetOptions: []
     };
   },
   methods: {
@@ -185,7 +226,7 @@ export default {
           this.forestry = this.CData.forestry;
           break;
       }
-    },
+    }
   },
   created() {
     // 目录
@@ -221,10 +262,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key],
+        label: street[key]
       });
     }
-  },
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -239,10 +280,18 @@ export default {
   position: absolute;
   left: 10px;
   top: 60px;
-  width: 410px;
+  width: 414px;
+  padding-right: 10px;
+  margin-right: 10px;
   height: calc(100% - 60px);
   z-index: 999999;
   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 */}
 }
 #mainMenus {
   position: absolute;
@@ -295,7 +344,7 @@ export default {
     .bar-content {
       width: 100%;
       height: 90%;
-      background: rgba(100,100,100,0.3);
+      background: rgba(100, 100, 100, 0.3);
       .bar {
         width: 95%;
         height: 98%;
@@ -307,16 +356,97 @@ export default {
   position: absolute;
   right: 10px;
   top: 60px;
-  width: 410px;
+  width: 414px;
   height: calc(100% - 60px);
   z-index: 999999;
   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 */}
 }
 .displayFlex {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    justify-content: space-around;
-    flex-wrap: nowrap;
+  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>