菜单优化

src/components/layout/MenuCard.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 外边框 -->
   <div
-    :class="$ifLeftMenu(menuData.index) ? 'menuMainBox menuMainBoxA' : 'menuMainBox'"
+    :class="$ifLeftMenu(menuData.index) ? 'menuMainBoxA' : 'menuMainBox'"
     :style="{
       width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
       height: menuData.boxHeight + 'px',
@@ -43,7 +43,7 @@
     <!-- 折线 -->
     <div
       class="menuMainBox_topBottom"
-      v-if="menuData.type === 'card'"
+      v-if="menuData.type !== 'chart'"
       :style="{ left: menuData.titleWidth ? menuData.titleWidth - 40 + '%' : '10%' }"
     >
       <!-- 圆球 -->
@@ -65,12 +65,14 @@
         <slot name="bottom"></slot>
       </div>
     </div>
-    <div class="menuMainBox_main" v-if="menuData.type !== 'card'">
-      <!-- 上部 -->
+    <div class="menuMainBox_main" v-if="menuData.type === 'chart'">
       <div class="menuMainBox_main_all">
         <slot></slot>
       </div>
     </div>
+    <div class="menuMainBox_main_image" v-if="menuData.type === 'imageMenu'">
+      <div class="menuMainBox_main_image_box" :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"></div>
+    </div>
   </div>
 </template>
 
@@ -83,9 +85,10 @@ export default {
   },
   mounted() {},
   /**
-   * menuData:
-   * index: 子菜单index（当type为imageMenu）
+   * menuData =>
    * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
+   * index: 子菜单index（当type为imageMenu时有效）
+   * imageUrl: 菜单图片地址（当type为imageMenu时有效）
    * title: 标题（必填）
    * boxWidth: 宽，默认为410px（非必填）
    * boxHeight: 高，默认为auto（非必填）
@@ -98,6 +101,14 @@ export default {
       if (this.menuData.index != undefined) {
         this.$store.commit("changeLeftMenuIndex", this.menuData.index);
       }
+    },
+    returnImageUrl(imageUrl, boxHeight) {
+      let returnStyle = "";
+      if (boxHeight) {
+        returnStyle += "heihgt:" + (boxHeight - 36) + "px;";
+      }
+      returnStyle += "background-image: url('" + imageUrl + "');";
+      return returnStyle;
     }
   },
   watch: {}
@@ -111,9 +122,11 @@ export default {
 @topTitleBgLeft: #00244d;
 @topTitleMinLeft: #002f56;
 @lightColor: #74ffff;
+
 .menuMainBox {
   position: relative;
-  margin: 5px 0;
+  z-index: 999;
+  margin: 5px 5px;
   min-height: 60px;
   border: 2px solid transparent;
   border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
@@ -127,22 +140,6 @@ export default {
   -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%;
@@ -152,22 +149,134 @@ export default {
     flex-wrap: nowrap;
     align-content: center;
     overflow: hidden;
-    background-color: @lightColor;
-    
+    background-color: @topTitleMinLeft;
     &_left {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      align-content: center;
+      height: 100%;
+      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      border-bottom: 2px solid @borderColor;
+      &_iconS {
+        margin: 10px;
+        width: 20px;
+        height: 20px;
+        background-image: linear-gradient(to top, #0071b2, #1deef5);
+        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
+      }
+      &_iconR {
         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);}
-  }
+        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;
+        font-weight: 400;
+        color: #ffffff;
+      }
+      &_iconE {
+        position: absolute;
+        margin-left: 10px;
+        width: 15px;
+        height: 30px;
+        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
+        transform: skew(-45deg);
+      }
+      &_iconE1 {
+        right: 27px;
+      }
+      &_iconE2 {
+        right: 7px;
+      }
+    }
+    &_right {
+      position: absolute;
+      right: -10%;
+      height: 100%;
+      border-top: 2px solid @borderColor;
+      border-left: 2px solid @borderColor;
+      transform: skew(-45deg);
+      background-color: @topTitleBgLeft;
+      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
+      border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
+      border-image: linear-gradient(to right, @borderColor, transparent) 1;
+      &_d1 {
+        position: absolute;
+        left: 10px;
+        width: 50px;
+        height: 20px;
+        background-color: @borderColor64;
+      }
+      &_d2 {
+        position: absolute;
+        left: 70px;
+        width: 80px;
+        height: 10px;
+        background-color: @borderColor32;
+      }
+    }
+    &_topRight {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      div:nth-child(1) {
+        width: 5px;
+        height: 2px;
+        background-color: @borderColor;
+      }
+      div:nth-child(2) {
+        margin: 0 1px;
+        width: 5px;
+        height: 2px;
+        background-color: #f19b56;
+      }
+      div:nth-child(3) {
+        width: 5px;
+        height: 2px;
+        background-color: @borderColor;
+      }
+    }
   }
-  &_top {
+}
+// 选中后的样式
+.menuMainBoxA {
+  position: relative;
+  z-index: 999;
+  margin: 5px 5px;
+  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;
+  //   type !== chart
+  .menuMainBox_top {
     position: relative;
     width: 100%;
     height: 36px;
@@ -176,7 +285,7 @@ export default {
     flex-wrap: nowrap;
     align-content: center;
     overflow: hidden;
-    background-color: @topTitleMinLeft;
+    background-color: @lightColor;
     &_left {
       position: relative;
       display: flex;
@@ -184,10 +293,10 @@ export default {
       flex-wrap: nowrap;
       align-content: center;
       height: 100%;
-      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
       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);
       &_iconS {
         margin: 10px;
         width: 20px;
@@ -284,72 +393,97 @@ export default {
       }
     }
   }
-  &_topBottom {
+}
+// 公共样式
+.menuMainBox_topBottom {
+  position: absolute;
+  top: 20px;
+  width: 38%;
+  height: 20px;
+  border-bottom: 2px solid @borderColor;
+  border-right: 2px solid @borderColor;
+  transform: skew(-45deg);
+  border-image: --webkit-linear-gradient(to left, @borderColor, transparent) 1;
+  border-image: --moz-linear-gradient(to left, @borderColor, transparent) 1;
+  border-image: linear-gradient(to left, @borderColor, transparent) 1;
+  z-index: 9999;
+  div {
     position: absolute;
-    top: 20px;
-    width: 38%;
-    height: 20px;
-    border-bottom: 2px solid @borderColor;
-    border-right: 2px solid @borderColor;
-    transform: skew(-45deg);
-    border-image: --webkit-linear-gradient(to left, @borderColor, transparent) 1;
-    border-image: --moz-linear-gradient(to left, @borderColor, transparent) 1;
-    border-image: linear-gradient(to left, @borderColor, transparent) 1;
-    z-index: 9999;
-    div {
-      position: absolute;
-      top: -2px;
-      right: -2px;
-      width: 4px;
-      height: 4px;
-      border-radius: 4px;
-      background-color: @borderColor;
-      transform: skew(45deg);
-    }
+    top: -2px;
+    right: -2px;
+    width: 4px;
+    height: 4px;
+    border-radius: 4px;
+    background-color: @borderColor;
+    transform: skew(45deg);
   }
-  //   type === chart
-  &_topChart {
-    width: 100%;
-    height: 30px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-content: center;
-    background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-    background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-    background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-    &_title {
-      font-size: 18px;
-      font-family: PingFang SC;
-      font-weight: 300;
-      color: #e6e6e6;
-      line-height: 60px;
-    }
+}
+//   type === chart
+.menuMainBox_topChart {
+  width: 100%;
+  height: 30px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: center;
+  background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+  background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+  background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+  &_title {
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 300;
+    color: #e6e6e6;
+    line-height: 60px;
   }
-  // 卡片主题
-  &_main {
-    position: relative;
-    padding-top: 10px;
+}
+// 卡片主题
+.menuMainBox_main {
+  position: relative;
+  padding-top: 10px;
+  width: 100%;
+  height: calc(100% - 40px);
+  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);
+  &_top {
+    margin: 0 10px;
+    width: calc(100% - 20px);
+  }
+  &_bottom {
+    margin: 0 10px;
+    width: calc(100% - 20px);
+  }
+  &_all {
+    margin: 0 10px;
+    width: calc(100% - 20px);
+    height: calc(100% - 10px);
+  }
+  &_image {
+    margin: 0px 10px;
+    width: calc(100% - 20px);
+    height: 210px;
+    background-size: 100% 200px;
+    background-repeat: no-repeat;
+  }
+}
+
+// 卡片主题
+.menuMainBox_main_image {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  height: calc(100% - 40px);
+  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);
+  &_box {
     width: 100%;
-    height: calc(100% - 40px);
-    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);
-    &_top {
-      margin: 0 10px;
-      width: calc(100% - 20px);
-    }
-    &_bottom {
-      margin: 0 10px;
-      width: calc(100% - 20px);
-    }
-    &_all {
-      margin: 0 10px;
-      width: calc(100% - 20px);
-      height: calc(100% - 10px);
-    }
+    height: 200px;
+    background-size: 100% 200px;
+    background-repeat: no-repeat;
   }
 }
 </style>

src/views/HomeView.vue

@@ -37,10 +37,11 @@
       </MenuCard>
     </div>
     <!-- 左侧菜单列 2 -- 疑点筛查 -->
-    <div id="leftMenus" v-if="$ifMenu('2', '1')">
+    <div id="leftMenusW" v-if="$ifMenu('2', '1')">
       <MenuCard :menuData="menus.left[3]"> </MenuCard>
       <MenuCard :menuData="menus.left[4]"> </MenuCard>
       <MenuCard :menuData="menus.left[5]"> </MenuCard>
+      <MenuCard :menuData="menus.left[6]"> </MenuCard>
     </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus" v-if="$ifMenu('1', '')">
@@ -181,10 +182,38 @@ export default {
           { 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 }
+          {
+            type: "imageMenu",
+            index: 0,
+            title: "基本农田被违规占用",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZQTkn.jpg"
+          },
+          {
+            type: "imageMenu",
+            index: 1,
+            title: "基本农田种林",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZQTkn.jpg"
+          },
+          {
+            type: "imageMenu",
+            index: 2,
+            title: "基本农田抛荒",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZQTkn.jpg"
+          },
+          {
+            type: "imageMenu",
+            index: 3,
+            title: "一般耕地被违规占用",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZQTkn.jpg"
+          }
         ],
         main: [
           {
@@ -305,9 +334,9 @@ export default {
 /* 左侧菜单列 */
 #leftMenus {
   position: absolute;
-  left: 10px;
+  left: 5px;
   top: 60px;
-  width: 414px;
+  width: 420px;
   padding-right: 10px;
   margin-right: 10px;
   height: calc(100% - 60px);
@@ -321,6 +350,28 @@ export default {
     display: none; /* Chrome Safari */
   }
 }
+#leftMenusW {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+    align-content: flex-start;
+  left: 5px;
+  top: 65px;
+  width: 870px;
+  padding-right: 10px;
+  margin-right: 10px;
+  height: calc(100% - 65px);
+  float: left;
+  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;
   left: 430px;
@@ -440,9 +491,8 @@ export default {
   position: absolute;
   right: 10px;
   top: 60px;
-  width: 414px;
+  width: 420px;
   height: calc(100% - 60px);
-  z-index: 999999;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;