子菜单优化

src/components/layout/MenuCard.vue

@@ -1,20 +1,24 @@
 <template>
   <!-- 外边框 -->
   <div
-    class="menuMainBox"
+    :class="$ifLeftMenu(menuData.index) ? 'menuMainBox menuMainBoxA' : 'menuMainBox'"
     :style="{
       width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
       height: menuData.boxHeight + 'px',
       border: menuData.type !== 'chart' ? '' : '1px solid #2FB8FF',
       background: menuData.boxBackground ? menuData.boxBackground : ''
     }"
+    @click="changeLeftMenuIndex()"
   >
     <!-- 头部 -->
     <div class="menuMainBox_top" v-if="menuData.type !== 'chart'">
       <!-- 头部左侧 -->
       <div class="menuMainBox_top_left" :style="{ width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%' }">
         <!-- 左侧箭头图标 -->
-        <div class="menuMainBox_top_left_iconS"></div>
+        <div class="menuMainBox_top_left_iconS" v-if="menuData.type !== 'imageMenu'"></div>
+        <div class="menuMainBox_top_left_iconR" v-if="menuData.type === 'imageMenu'">
+          <div class="menuMainBox_top_left_iconR_active" v-if="$ifLeftMenu(menuData.index)"></div>
+        </div>
         <!-- 标题 -->
         <div class="menuMainBox_top_left_title">{{ menuData.title }}</div>
         <!-- 右侧倾斜图标1 -->
@@ -37,7 +41,11 @@
       </div>
     </div>
     <!-- 折线 -->
-    <div class="menuMainBox_topBottom" v-if="menuData.type !== 'chart'" :style="{ left: menuData.titleWidth ? menuData.titleWidth - 40 + '%' : '10%' }">
+    <div
+      class="menuMainBox_topBottom"
+      v-if="menuData.type === 'card'"
+      :style="{ left: menuData.titleWidth ? menuData.titleWidth - 40 + '%' : '10%' }"
+    >
       <!-- 圆球 -->
       <div></div>
     </div>
@@ -47,7 +55,7 @@
       </div>
     </div>
     <!-- 主题 -->
-    <div class="menuMainBox_main" v-if="menuData.type !== 'chart'">
+    <div class="menuMainBox_main" v-if="menuData.type === 'card'">
       <!-- 上部 -->
       <div class="menuMainBox_main_top">
         <slot name="top"></slot>
@@ -57,7 +65,7 @@
         <slot name="bottom"></slot>
       </div>
     </div>
-    <div class="menuMainBox_main" v-if="menuData.type === 'chart'">
+    <div class="menuMainBox_main" v-if="menuData.type !== 'card'">
       <!-- 上部 -->
       <div class="menuMainBox_main_all">
         <slot></slot>
@@ -76,7 +84,8 @@ export default {
   mounted() {},
   /**
    * menuData:
-   * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】,默认为card（非必填）
+   * index: 子菜单index（当type为imageMenu）
+   * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
    * title: 标题（必填）
    * boxWidth: 宽，默认为410px（非必填）
    * boxHeight: 高，默认为auto（非必填）
@@ -84,7 +93,13 @@ export default {
    * titleWidth: 标题宽度，默认为50（非必填）
    */
   props: ["menuData"],
-  methods: {},
+  methods: {
+    changeLeftMenuIndex() {
+      if (this.menuData.index != undefined) {
+        this.$store.commit("changeLeftMenuIndex", this.menuData.index);
+      }
+    }
+  },
   watch: {}
 };
 </script>
@@ -105,7 +120,53 @@ export default {
   border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: linear-gradient(to top, @borderColor, transparent) 1;
   opacity: 0.9;
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
   //   type !== chart
+  &A {
+    position: relative;
+    margin: 5px 0;
+    min-height: 60px;
+    border: 2px solid transparent;
+    border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
+    border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
+    border-image: linear-gradient(to top, @lightColor, transparent) 1;
+    opacity: 0.9;
+    cursor: pointer;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+    
+  &_top {
+    position: relative;
+    width: 100%;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    align-content: center;
+    overflow: hidden;
+    background-color: @lightColor;
+    
+    &_left {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        align-content: center;
+        height: 100%;
+        border-bottom: 2px solid @borderColor;
+        background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
+        background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
+        background-image: linear-gradient(to left, @lightColor, #007dff);}
+  }
+  }
   &_top {
     position: relative;
     width: 100%;
@@ -134,6 +195,25 @@ export default {
         background-image: linear-gradient(to top, #0071b2, #1deef5);
         clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
       }
+      &_iconR {
+        position: relative;
+        margin: 15px;
+        width: 10px;
+        height: 10px;
+        background-image: transparent;
+        border: 1px solid #1deef5;
+        border-radius: 20px;
+        &_active {
+          position: absolute;
+          transform: translate(-50%, -50%);
+          top: 50%;
+          left: 50%;
+          width: 5px;
+          height: 5px;
+          background-color: #1deef5;
+          border-radius: 20px;
+        }
+      }
       &_title {
         font-size: 28px;
         font-family: YouSheBiaoTiHei;
@@ -258,15 +338,15 @@ export default {
     background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
     background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
     &_top {
-      margin:0 10px;
+      margin: 0 10px;
       width: calc(100% - 20px);
     }
     &_bottom {
-      margin:0 10px;
+      margin: 0 10px;
       width: calc(100% - 20px);
     }
     &_all {
-      margin:0 10px;
+      margin: 0 10px;
       width: calc(100% - 20px);
       height: calc(100% - 10px);
     }

src/main.js

@@ -11,13 +11,16 @@ Vue.config.productionTip = false;
 
 Vue.use(ElementUI)
 
-Vue.prototype.$ifMenu = (menuIndex,subMenuIndex) => {
+Vue.prototype.$ifMenu = (menuIndex, subMenuIndex) => {
   if (store.state.navSelect && store.state.navSelect.index === menuIndex && (subMenuIndex !== "" ? store.state.navSelect.subIndex === subMenuIndex : true)) {
     return true;
   } else {
     return false;
   }
 };
+Vue.prototype.$ifLeftMenu = (leftMenuIndex) => {
+  return store.state.leftMenuIndex == leftMenuIndex;
+}
 new Vue({
   router,
   store,

src/store/index.js

@@ -5,16 +5,27 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    navSelect: { index: "1", name: "首页", subIndex: "" }
+    navSelect: { index: "1", name: "首页", subIndex: "" },
+    leftMenuIndex: -1
   },
   getters: {
     getNavSelect(state){
       return state.navSelect;
+    },
+    getLeftMenuIndex(state){
+      return state.leftMenuIndex;
     }
   },
   mutations: {
     changeNavSelect(state,navSelect){
       state.navSelect = navSelect;
+    },
+    changeLeftMenuIndex(state,leftMenuIndex){
+      if(state.leftMenuIndex == leftMenuIndex){
+        state.leftMenuIndex = -1;
+      }else{
+        state.leftMenuIndex = leftMenuIndex;
+      }
     }
   },
   actions: {

src/views/HomeView.vue

@@ -114,7 +114,7 @@
           <TopCard />
         </template>
       </MenuCard>
-      <MenuCard :menuData="menus.right[3]" v-if="$ifMenu('2', '')">
+      <MenuCard :menuData="menus.right[3]" v-if="$ifMenu('2', '1')">
         <template slot="top">
           <div class="menuCardFlex" style="justify-content: center">
             <TagCard :data="tagCardData3"></TagCard>
@@ -122,7 +122,7 @@
         </template>
         <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
-      <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '')">
+      <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
         <template slot="top">
           <TopCard />
         </template>
@@ -136,13 +136,7 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import {
-  street,
-  streetLocation,
-  soilData,
-  waterData,
-  forestryData,
-} from "@/config/common";
+import { street, streetLocation, 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";
@@ -158,7 +152,7 @@ export default {
     TagCard,
     ChartCard,
     TagTableCard,
-    TopCard,
+    TopCard
   },
   data() {
     return {
@@ -184,13 +178,13 @@ export default {
       activeIndex: 1,
       menus: {
         left: [
-          { type: "menu", title: "土地资源" },
-          { type: "menu", title: "水资源" },
-          { type: "menu", title: "林地资源" },
-          { type: "imageMenu", title: "基本农田被违规占用", titleWidth: 81 },
-          { type: "imageMenu", title: "基本农田种林", titleWidth: 81 },
-          { type: "imageMenu", title: "基本农田抛荒", titleWidth: 81 },
-          { type: "imageMenu", title: "一般耕地被违规占用", titleWidth: 81 }
+          { type: "card", title: "土地资源" },
+          { type: "card", title: "水资源" },
+          { type: "card", title: "林地资源" },
+          { type: "imageMenu", index: 0, title: "基本农田被违规占用", titleWidth: 81 },
+          { type: "imageMenu", index: 1, title: "基本农田种林", titleWidth: 81 },
+          { type: "imageMenu", index: 2, title: "基本农田抛荒", titleWidth: 81 },
+          { type: "imageMenu", index: 3, title: "一般耕地被违规占用", titleWidth: 81 }
         ],
         main: [
           {
@@ -202,11 +196,11 @@ export default {
           }
         ],
         right: [
-          { type: "menu", title: "资金投入情况", titleWidth: 64 },
-          { type: "menu", title: "资源环境项目", titleWidth: 64 },
-          { type: "menu", title: "历年频发问题TOP5", titleWidth: 81 },
-          { type: "menu", title: "土地类问题", titleWidth: 60 },
-          { type: "menu", title: "土地类问题TOP5", titleWidth: 81 }
+          { type: "card", title: "资金投入情况", titleWidth: 64 },
+          { type: "card", title: "资源环境项目", titleWidth: 64 },
+          { type: "card", title: "历年频发问题TOP5", titleWidth: 81 },
+          { type: "card", title: "土地类问题", titleWidth: 60 },
+          { type: "card", title: "土地类问题TOP5", titleWidth: 81 }
         ]
       },
       buttonData: ["A", "B", "C"],
@@ -258,8 +252,8 @@ export default {
     },
     selectEvent(val) {
       console.log(val, "current street");
-      this.$refs.mapLoaderRef.setView(streetLocation[val],11);
-    },
+      this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
+    }
   },
   created() {
     // 目录