新增组件tagCard

src/components/common/TagCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- 外边框 -->
+  <div class="tagMainBox">
+    <div v-if="data">
+      <!-- 上下布局 -->
+      <div v-if="data.type !== 'lr'" class="tbFlx">
+        <div class="tagValue">
+          <span>{{ data.value ? data.value : "--" }}</span
+          ><span>{{ data.unit ? data.unit : "--" }}</span>
+        </div>
+        <div class="tagImg"></div>
+        <div class="tagTitle">{{ data.title ? data.title : "--" }}</div>
+      </div>
+      <!-- 左右布局 -->
+      <div v-if="data.type === 'lr'" class="lrFlx">
+        <div class="tagImg"></div>
+        <div>
+          <div class="tagValue">
+            <span>{{ data.value ? data.value : "--" }}</span
+            ><span>{{ data.unit ? data.unit : "--" }}</span>
+          </div>
+          <div class="tagTitle">{{ data.title ? data.title : "--" }}</div>
+        </div>
+      </div>
+    </div>
+    <el-empty v-else description="暂无数据"></el-empty>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TagCard",
+  components: {},
+  data() {
+    return {};
+  },
+  mounted() {},
+  /**
+   * data.type: 布局方式【lr:左右布局;other:上下布局】,默认为lr（非必填）
+   * data.title: 标题（必填）
+   * data.value: 值（必填）
+   * data.unit: 单位
+   */
+  props: ["data", "type", "title", "value", "unit"],
+  methods: {},
+  watch: {}
+};
+</script>
+
+<style lang="less" scoped>
+@borderColor: #00aaff;
+@borderColor32: #00aaff32;
+@borderColor64: #00aaff64;
+@topTitleBgLeft: #00244d;
+@topTitleMinLeft: #002f56;
+@lightColor: #74ffff;
+@tagValueColor: #f19b56;
+.tagMainBox {
+  position: relative;
+  //   上下布局
+  .tbFlx {
+    display: flex;
+    align-content: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: nowrap;
+  }
+  //   左右布局
+  .lrFlx {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: nowrap;
+  }
+  .tagValue {
+    display: flex;
+    span:nth-child(1) {
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      color: @tagValueColor;
+      line-height: 30px;
+      font-size: 30px;
+    }
+    span:nth-child(2) {
+      font-size: 12px;
+      font-weight: 400;
+      color: @tagValueColor;
+      line-height: 30px;
+    }
+  }
+  .tagImg {
+    width: 75px;
+    height: 75px;
+    background-image: url("../../assets/image/cardTag.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+  .tagTitle {
+    font-size: 16px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 20px;
+  }
+}
+</style>

src/components/layout/MenuCard.vue

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

src/views/HomeView.vue

@@ -4,24 +4,23 @@
     <Header @navSelect="navSelect"></Header>
     <!-- 左侧菜单列 -->
     <div id="leftMenus">
-      <MenuCard
-        :type="menus.left[0].type"
-        :title="menus.left[0].title"
-        :boxHeight="menus.left[0].height"
-      >
-        <template slot="top">主题上部插槽</template>
+      <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>
+        </template>
         <template slot="bottom">主题下部插槽</template>
       </MenuCard>
-      <MenuCard
-        :type="menus.left[1].type"
-        :title="menus.left[1].title"
-        :boxHeight="menus.left[1].height"
-      ></MenuCard>
-      <MenuCard
-        :type="menus.left[2].type"
-        :title="menus.left[2].title"
-        :boxHeight="menus.left[2].height"
-      ></MenuCard>
+      <MenuCard :type="menus.left[1].type" :title="menus.left[1].title" :boxHeight="menus.left[1].height">
+        <template slot="top">
+          <div class="displayFlex">
+            <TagCard :data="tagCardData"></TagCard>
+            <TagCard :data="tagCardData"></TagCard>
+            <TagCard :data="tagCardData"></TagCard>
+          </div>
+        </template>
+      </MenuCard>
+      <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height"></MenuCard>
     </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus">
@@ -94,6 +93,7 @@ import MenuCard from "@/components/layout/MenuCard";
 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";
 export default {
   name: "HomeView",
   components: {
@@ -102,9 +102,22 @@ export default {
     MenuCard,
     NewSelect,
     BarChart,
+    TagCard
   },
   data() {
     return {
+      tagCardData: {
+        type:"tb",
+        title: "土地资源",
+        value: 100,
+        unit: "公顷"
+      },
+      tagCardData2: {
+        type:"lr",
+        title: "土地资源",
+        value: 100,
+        unit: "公顷"
+      },
       testTitle: "土地资源",
       activeIndex: 1,
       menus: {
@@ -299,4 +312,11 @@ export default {
   z-index: 999999;
   box-sizing: border-box;
 }
+.displayFlex {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: nowrap;
+}
 </style>