header and header image

src/components/layout/Header.vue

@@ -1,121 +1,141 @@
 <template>
-    <div id="layoutHeader">
-        <el-row>
-            <el-col :span="6">
-                <div class="logo">
-                    浦东新区资源环境智慧审计平台
-                </div>
-            </el-col>
-            <el-col :span="12">
-                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="select">
-                    <el-menu-item index="1">首页</el-menu-item>
-                    <el-submenu index="2">
-                        <template slot="title" class="submenu">疑点筛查</template>
-                        <el-menu-item index="2-1">土地资源</el-menu-item>
-                        <el-menu-item index="2-2">生态资源</el-menu-item>
-                        <el-menu-item index="2-3">林资源</el-menu-item>
-                        <el-menu-item index="2-4">水资源</el-menu-item>
-                        <el-menu-item index="2-5">镇域专题</el-menu-item>
-                    </el-submenu>
-                    <el-menu-item index="3">综合分析</el-menu-item>
-                    <el-menu-item index="4">全流程管理</el-menu-item>
-                    <el-submenu index="5">
-                        <template slot="title">智能辅助</template>
-                        <el-menu-item index="5-1">法律法规</el-menu-item>
-                        <el-menu-item index="5-2">频发问题</el-menu-item>
-                        <el-menu-item index="5-3">指标体系</el-menu-item>
-                    </el-submenu>
-                </el-menu>
-            </el-col>
-            <el-col :span="6">
-            	<div class="user">
-            		user001
-            	</div>
-            </el-col>
-        </el-row>
-    </div>
+  <div id="layoutHeader">
+    <el-row>
+      <el-col :span="9">
+        <div class="logo"></div>
+        <div class="title">浦 东 新 区 资 源 环 境 智 慧 审 计 平 台</div>
+      </el-col>
+      <el-col :span="13">
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="select"
+        >
+          <el-menu-item index="1">首页</el-menu-item>
+          <el-submenu index="2">
+            <template slot="title" class="submenu">疑点筛查</template>
+            <el-menu-item index="2-1">土地资源</el-menu-item>
+            <el-menu-item index="2-2">生态资源</el-menu-item>
+            <el-menu-item index="2-3">林资源</el-menu-item>
+            <el-menu-item index="2-4">水资源</el-menu-item>
+            <el-menu-item index="2-5">镇域专题</el-menu-item>
+          </el-submenu>
+          <el-menu-item index="3">综合分析</el-menu-item>
+          <el-menu-item index="4">全流程管理</el-menu-item>
+          <el-submenu index="5">
+            <template slot="title">智能辅助</template>
+            <el-menu-item index="5-1">法律法规</el-menu-item>
+            <el-menu-item index="5-2">频发问题</el-menu-item>
+            <el-menu-item index="5-3">指标体系</el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-col>
+      <el-col :span="2">
+        <div class="user">user001</div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 <script>
 export default {
-    name: 'Header',
-    data() {
-        return {
-        	activeIndex:"1",
-        	navData:{
-        		"1":"首页",
-        		"2":"疑点筛查",
-        		"2-1":"土地资源",
-        		"2-2":"生态资源",
-        		"2-3":"林资源",
-        		"2-4":"水资源",
-        		"2-5":"镇域专题",
-        		"3":"综合分析",
-        		"4":"全流程管理",
-        		"5-1":"法律法规",
-        		"5-2":"频发问题",
-        		"5-3":"指标体系"
-        	}
-        };
-    },
-    methods: {
-    	select:function(index){
-    		var that = this;
-    		var name = that.navData[index];
-    		index = index.split("-");
-    		that.$emit("navSelect",{
-    			index:index[0],
-    			subIndex:index[1],
-    			name:name
-    		})
-    	}
+  name: "Header",
+  data() {
+    return {
+      activeIndex: "1",
+      navData: {
+        1: "首页",
+        2: "疑点筛查",
+        "2-1": "土地资源",
+        "2-2": "生态资源",
+        "2-3": "林资源",
+        "2-4": "水资源",
+        "2-5": "镇域专题",
+        3: "综合分析",
+        4: "全流程管理",
+        "5-1": "法律法规",
+        "5-2": "频发问题",
+        "5-3": "指标体系",
+      },
+    };
+  },
+  methods: {
+    select: function (index) {
+      var that = this;
+      var name = that.navData[index];
+      index = index.split("-");
+      that.$emit("navSelect", {
+        index: index[0],
+        subIndex: index[1],
+        name: name,
+      });
     },
+  },
 };
 </script>
-<style scoped>
+<style lang="less" scoped>
 #layoutHeader {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  height: 60px;
+  left: 0px;
+  top: 0px;
+  background: url("../../assets/home/header_background.png") no-repeat center;
+  background-size: 100% 100%;
+  color: #ffffff;
+  .logo {
+    position: relative;
+    left:50px;
+    top:15px;
+    width: 30px;
+    height: 30px;
+    background: url("../../assets/home/header_title_icon.png") no-repeat center;
+  }
+  .title {
     position: absolute;
-    z-index: 2;
-    width: 100%;
-    height: 60px;
-    left: 0px;
-    top: 0px;
-    background: #1557c0;
-    color: #ffffff;
-}
-
-#layoutHeader .logo {
+    left:50px;
+    top:0;
     line-height: 60px;
-    font-size: 20px;
+    font-size: 28px;
     text-indent: 50px;
+    font-weight: bold;
+  }
 }
-.el-menu-demo >>> .el-menu-item{
-	font-size: 20px;
+
+.el-menu-demo /deep/ .el-menu-item {
+  font-size: 20px;
 }
-.el-menu-demo >>> .el-menu-item:hover,.el-menu-demo >>> .el-menu-item:focus{
-	background: none !important;
+.el-menu-demo /deep/ .el-menu-item:hover,
+.el-menu-demo /deep/ .el-menu-item:focus {
+  background: none !important;
 }
-#layoutHeader >>> .el-submenu__title{
+#layoutHeader /deep/ .el-submenu__title {
   color: #ffffff !important;
   font-size: 20px !important;
 }
-#layoutHeader >>> .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+#layoutHeader
+  /deep/
+  .el-menu--horizontal
+  > .el-submenu
+  .el-submenu__title:hover {
   background: none;
 }
-#layoutHeader >>> .el-submenu__title i{
-	color: #fff;
+#layoutHeader /deep/ .el-submenu__title i {
+  color: #fff;
 }
-#layoutHeader >>> .el-menu {
+#layoutHeader /deep/ .el-menu {
   background: transparent;
   border-bottom: 0px;
 }
-#layoutHeader >>> .el-menu-item {
+#layoutHeader /deep/ .el-menu-item {
   color: #ffffff;
 }
-#layoutHeader .user{
-	float: right;
-	margin-right: 30px;
-	line-height: 60px;
-	font-size: 20px;
-	cursor: pointer;
+#layoutHeader .user {
+  float: right;
+  margin-right: 30px;
+  line-height: 60px;
+  font-size: 20px;
+  cursor: pointer;
 }
-</style>
+</style>

src/views/HomeView.vue

@@ -2,7 +2,7 @@
   <div id="LayoutContent">
     <MapHolder></MapHolder>
     <Header @navSelect="navSelect"></Header>
-    <!-- 左侧菜单列 -->
+    <!-- 左侧菜单列 1 -- 首页 -->
     <div id="leftMenus" v-if="$ifMenu('1','')">
       <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height">
         <template slot="top">
@@ -12,7 +12,11 @@
           <ChartCard :title="'近三年农田面积变化'" />
         </template>
       </MenuCard>
-      <MenuCard :type="menus.left[1].type" :title="menus.left[1].title" :boxHeight="menus.left[1].height">
+      <MenuCard
+        :type="menus.left[1].type"
+        :title="menus.left[1].title"
+        :boxHeight="menus.left[1].height"
+      >
         <template slot="top">
           <div class="menuCardFlex">
             <TagCard :data="tagCardData"></TagCard>
@@ -24,7 +28,11 @@
           <ChartCard :title="'近三年水域面积变化'" />
         </template>
       </MenuCard>
-      <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height">
+      <MenuCard
+        :type="menus.left[2].type"
+        :title="menus.left[2].title"
+        :boxHeight="menus.left[2].height"
+      >
         <template slot="top">
           <div class="menuCardFlex">
             <TagCard :data="tagCardData3"></TagCard>
@@ -39,7 +47,12 @@
     <!-- 中部菜单列 -->
     <div id="mainMenus" v-if="$ifMenu('1','')">
       <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"
@@ -71,6 +84,28 @@
           </div>
         </MenuCard>
       </div>
+      <MenuCard
+        id="mainMenus_bottomLegend"
+        :type="'chart'"
+        :title="'图例'"
+        :boxWidth="'150'"
+        :boxHeight="'180'"
+        ><div class="legend-container">
+          <div class="left-container">
+            <div
+              class="legend-icon"
+              v-for="(item, index) in legendData"
+              :key="index"
+              :style="{ background: item }"
+            ></div>
+          </div>
+          <div class="right-container">
+            <div class="lengend-title" v-for="item in buttonData" :key="item">
+              {{ item }} 类
+            </div>
+          </div>
+        </div>
+      </MenuCard>
     </div>
     <!-- 右侧菜单列 -->
     <div id="rightMenus" v-if="$ifMenu('1','')">
@@ -85,7 +120,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
       <MenuCard
         :type="menus.right[1].type"
@@ -100,7 +136,8 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
       <MenuCard
         :type="menus.right[2].type"
@@ -145,19 +182,19 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷"
+        unit: "公顷",
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -165,7 +202,7 @@ export default {
         left: [
           { type: "menu", title: "土地资源" },
           { type: "menu", title: "水资源" },
-          { type: "menu", title: "林地资源" }
+          { type: "menu", title: "林地资源" },
         ],
         main: [
           {
@@ -173,34 +210,35 @@ 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: 64 },
           { type: "menu", title: "资源环境项目", titleWidth: 64 },
-          { type: "menu", title: "历年频发问题TOP5", titleWidth: 81 }
-        ]
+          { type: "menu", title: "历年频发问题TOP5", titleWidth: 81 },
+        ],
       },
       buttonData: ["A", "B", "C"],
+      legendData: ["#E565FF", "#0055FF", "#00FFD5"],
       btnChecked: "A",
       AData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       BData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       CData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       streetSelectVal: "全部街道",
-      streetOptions: []
+      streetOptions: [],
     };
   },
   methods: {
@@ -226,7 +264,7 @@ export default {
           this.forestry = this.CData.forestry;
           break;
       }
-    }
+    },
   },
   created() {
     // 目录
@@ -262,10 +300,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>
@@ -309,17 +347,63 @@ export default {
     z-index: 99999;
     color: #fff;
   }
+  &_bottomLegend {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    color: #fff;
+    z-index: 99999;
+    .legend-container {
+      margin: 0 auto;
+      width: 70%;
+      height: 100%;
+      position: relative;
+      .left-container {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .legend-icon {
+          width: 25px;
+          height: 15px;
+          background: #00aaff;
+          border-radius: 2px;
+        }
+      }
+      .right-container {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        .legend-title {
+          width: 30px;
+          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+        }
+      }
+    }
+  }
   &_topSelect {
     position: absolute;
     left: 100px;
     top: 30px;
-    z-index: 99999;
+    z-index: 3;
   }
   &_topRight {
     position: absolute;
     right: 10px;
     top: 30px;
-    z-index: 999999;
+    z-index: 3;
     overflow: hidden;
     .bar-btn {
       width: 100%;