菜单

src/components/easyMap/initMapInfo.ts

@@ -5,7 +5,7 @@ import LutuImg from './images/bg-land.png'
 import WeixingImg from './images/bg-sky.png'
 import store from '@/store/index'
 
-const isInternet = false
+const isInternet = true
 
 const baseMapView = {
   center: [109.6915958479584, 19.111636735969318],

src/style/font.scss

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: PangMenZhengDao;
+  src: url("@/style/PangMenZhengDao.ttf");
+}
+@font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url("@/style/YouSheBiaoTiHei.TTF");
+}

src/style/index.scss

@@ -1,5 +1,6 @@
 @import './webkit-scrollbar';
 @import './cus';
+@import './font';
 
 * {
   outline: none;  // dom元素选中带边框

src/views/gis/layout/index.vue

@@ -5,8 +5,9 @@
         @easyMapLoad="mapLoad"
     />
     <div class="gis-menu">
+      <img class="gis-menu-bottom" src="@/assets/images/gis-layout/gis-layout-menu_bottom.png" alt=""/>
       <template v-for="item in menuCpt">
-        <div class="gis-menu-item __hover" :class="{active: $route.name === item.name}" @click="$router.push({name: item.name})">
+        <div class="gis-menu-item __hover" :class="{active: $route.name === item.name, max: String(item.meta.title).length >5}" @click="$router.push({name: item.name})">
           {{item.meta.title}}
         </div>
       </template>
@@ -152,16 +153,68 @@ export default defineComponent({
   top: 0;
   left: 0;
   z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   .map {
     z-index: 1;
   }
   .gis-menu {
+    $diff: 14px;
+    $menuBottom: 16px;
     position: absolute;
     z-index: 2;
-    bottom: 0;
+    bottom: $menuBottom;
+    display: flex;
+    justify-content: center;
+    //align-items: center;
+    &:before, &:after {
+      content: '';
+      background-image: url("@/assets/images/gis-layout/gis-layout-menu_side.png");
+      width: 246px;
+      height: 39px;
+      position: absolute;
+      bottom: -$menuBottom;
+    }
+    &:before {
+      left: calc((#{$diff} + 246px) * -1);
+    }
+    &:after {
+      right: calc((#{$diff} + 246px) * -1);
+      transform: rotateY(180deg);
+    }
+    .gis-menu-bottom {
+      position: absolute;
+      height: 9px;
+      width: calc(100% + 10px + #{$diff} * 2);
+      bottom: -$menuBottom;
+    }
     .gis-menu-item {
+      width: 95px;
+      height: 36px;
+      background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-min.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      color: #60AEFF;
+      &:not(&:last-child) {
+        margin-right: 4px;
+      }
       &.active {
-        color: red;
+        color: #FFFFFF;
+        background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-min_active.png");
+      }
+      &.max {
+        width: 125px;
+        background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-max.png");
+        &.active {
+          background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-max_active.png");
+        }
       }
     }
   }