菜单样式

.gitignore

@@ -4990,3 +4990,4 @@ node_modules/@babel/core/node_modules/@babel/helpers/node_modules/@babel/travers
 package-lock.json
 package.json
 dist
+evn.setting.js

evn.setting.js

@@ -3,4 +3,4 @@ const pro = 'pro' // 生产环境
 const staging = 'dev' // 测试环境
 
 export default
-    dev
+    staging

src/styles/base.scss

@@ -1,295 +1,308 @@
-body {
-    height: 100%;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-    .el-menu--popup {
-        background-color: #fff !important;
-        .el-menu-item {
-            color: #696969 !important;
-            &:hover {
-                color: #2d74e7 !important;
-            }
-        }
-    }
-}
-
-// label {
-//   // font-weight: 700;
-// }
-html {
-    height: 100%;
-    box-sizing: border-box;
-}
-
-#app {
-    height: 100%;
-}
-
-*::-webkit-scrollbar {
-    width: 7px;
-    height: 10px;
-    background-color: transparent;
-}
-
-
-/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-
-*::-webkit-scrollbar-track {
-    background-color: #f0f6ff;
-}
-
-
-/*定义滚动条轨道 内阴影+圆角*/
-
-*::-webkit-scrollbar-thumb {
-    background-color: rgba(220, 221, 223, 0.9);
-    border-radius: 6px;
-}
-
-
-/*定义滑块 内阴影+圆角*/
-
-.scrollbarHide::-webkit-scrollbar {
-    display: none
-}
-
-.scrollbarShow::-webkit-scrollbar {
-    display: block
-}
-
-*,
-*:before,
-*:after {
-    box-sizing: inherit;
-}
-
-a:focus,
-a:active {
-    outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-    cursor: pointer;
-    color: inherit;
-    text-decoration: none;
-}
-
-div:focus {
-    outline: none;
-}
-
-.clearfix {
-    &:after {
-        visibility: hidden;
-        display: block;
-        font-size: 0;
-        content: " ";
-        clear: both;
-        height: 0;
-    }
-}
-
-// main-container global css
-.app-container {
-    padding: 20px;
-}
-
-.d-flex {
-    display: flex;
-}
-
-.flex1 {
-    flex: 1;
-}
-
-// 坐标类
-.space-between {
-    justify-content: space-between;
-}
-
-.space-around {
-    justify-content: space-around;
-}
-
-.space-center {
-    justify-content: center;
-}
-
-.flex-center {
-    justify-content: center;
-    align-items: center;
-}
-
-.align-item-center {
-    align-items: center;
-}
-
-.mb-20 {
-    margin-bottom: 20px;
-}
-
-.mt-20 {
-    margin-top: 20px;
-}
-
-.mr-10 {
-    margin-right: 10px;
-}
-
-.fiexed-bar {
-    position: fixed;
-}
-
-.posa {
-    position: absolute;
-}
-
-.posr {
-    position: relative;
-}
-
-.posf {
-    position: fixed;
-}
-
-// 宽高类
-.w100 {
-    width: 100%;
-}
-
-.h100 {
-    height: 100%;
-}
-
-.mh100 {
-    min-height: 100%;
-}
-
-// 文字类
-.text-center {
-    text-align: center;
-}
-
-.text-danger {
-    color: #e64340!important;
-}
-
-.bg-white {
-    background: #fff;
-}
-
-@mixin font-style($fontSize, $lineHeight, $height) {
-    font-size: $fontSize;
-    line-height: $lineHeight;
-    height: $height;
-}
-
-.border-top-1px,
-.border-right-1px,
-.border-bottom-1px,
-.border-left-1px {
-    position: relative;
-}
-
-.border-top-1px::before,
-.border-right-1px::before,
-.border-bottom-1px::before,
-.border-left-1px::before,
-.border-top-1px::after,
-.border-right-1px::after,
-.border-bottom-1px::after,
-.border-left-1px::after {
-    content: "";
-    display: block;
-    position: absolute;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-}
-
-.border-top-1px::before {
-    border-top: 1PX solid #ebebeb;
-    left: 0;
-    top: 0;
-    width: 100%;
-    -webkit-transform-origin: 0 top;
-    transform-origin: 0 top;
-}
-
-.border-right-1px::after {
-    border-right: 1PX solid #f5f5f5;
-    top: 0;
-    right: 0;
-    height: 100%;
-    -webkit-transform-origin: right 0;
-    transform-origin: right 0;
-}
-
-.border-bottom-1px::after {
-    border-bottom: 1PX solid #ebebeb;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    -webkit-transform-origin: 0 bottom;
-    transform-origin: 0 bottom;
-}
-
-.border-left-1px::before {
-    border-left: 1PX solid #f5f5f5;
-    top: 0;
-    left: 0;
-    height: 100%;
-    -webkit-transform-origin: left 0;
-    transform-origin: left 0;
-}
-
-@media (-webkit-min-device-pixel-ratio: 2),
-(min-resolution: 2dppx) {
-    .border-top-1px::before {
-        width: 200%;
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-    }
-    .border-right-1px::after {
-        height: 200%;
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-    }
-    .border-bottom-1px::after {
-        width: 200%;
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-    }
-    .border-left-1px::before {
-        height: 200%;
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-    }
-}
-
-@media (-webkit-min-device-pixel-ratio: 3),
-(min-resolution: 3dppx) {
-    .border-top-1px::before {
-        width: 300%;
-        -webkit-transform: scale(0.333);
-        transform: scale(0.333);
-    }
-    .border-right-1px::after {
-        height: 300%;
-        -webkit-transform: scale(0.333);
-        transform: scale(0.333);
-    }
-    .border-bottom-1px::after {
-        width: 300%;
-        -webkit-transform: scale(0.333);
-        transform: scale(0.333);
-    }
-    .border-left-1px::before {
-        height: 300%;
-        -webkit-transform: scale(0.333);
-        transform: scale(0.333);
-    }
-}
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+
+  .el-menu--popup {
+    // background-color: #fff !important;
+    background-color: #0d2043 !important;
+
+    .el-submenu__title,
+    .el-menu-item {
+    //   color: #696969 !important;
+      color: rgb(235, 240, 254) !important;
+
+      &:hover {
+        // color: #2d74e7 !important;
+        background: linear-gradient(90deg, #6898ef, #416593) !important;
+      }
+    }
+  }
+}
+
+// label {
+//   // font-weight: 700;
+// }
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*::-webkit-scrollbar {
+  width: 7px;
+  height: 10px;
+  background-color: transparent;
+}
+
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+
+*::-webkit-scrollbar-track {
+  background-color: #f0f6ff;
+}
+
+
+/*定义滚动条轨道 内阴影+圆角*/
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(220, 221, 223, 0.9);
+  border-radius: 6px;
+}
+
+
+/*定义滑块 内阴影+圆角*/
+
+.scrollbarHide::-webkit-scrollbar {
+  display: none
+}
+
+.scrollbarShow::-webkit-scrollbar {
+  display: block
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+// main-container global css
+.app-container {
+  padding: 20px;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.flex1 {
+  flex: 1;
+}
+
+// 坐标类
+.space-between {
+  justify-content: space-between;
+}
+
+.space-around {
+  justify-content: space-around;
+}
+
+.space-center {
+  justify-content: center;
+}
+
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.align-item-center {
+  align-items: center;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.fiexed-bar {
+  position: fixed;
+}
+
+.posa {
+  position: absolute;
+}
+
+.posr {
+  position: relative;
+}
+
+.posf {
+  position: fixed;
+}
+
+// 宽高类
+.w100 {
+  width: 100%;
+}
+
+.h100 {
+  height: 100%;
+}
+
+.mh100 {
+  min-height: 100%;
+}
+
+// 文字类
+.text-center {
+  text-align: center;
+}
+
+.text-danger {
+  color: #e64340 !important;
+}
+
+.bg-white {
+  background: #fff;
+}
+
+@mixin font-style($fontSize, $lineHeight, $height) {
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  height: $height;
+}
+
+.border-top-1px,
+.border-right-1px,
+.border-bottom-1px,
+.border-left-1px {
+  position: relative;
+}
+
+.border-top-1px::before,
+.border-right-1px::before,
+.border-bottom-1px::before,
+.border-left-1px::before,
+.border-top-1px::after,
+.border-right-1px::after,
+.border-bottom-1px::after,
+.border-left-1px::after {
+  content: "";
+  display: block;
+  position: absolute;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+
+.border-top-1px::before {
+  border-top: 1PX solid #ebebeb;
+  left: 0;
+  top: 0;
+  width: 100%;
+  -webkit-transform-origin: 0 top;
+  transform-origin: 0 top;
+}
+
+.border-right-1px::after {
+  border-right: 1PX solid #f5f5f5;
+  top: 0;
+  right: 0;
+  height: 100%;
+  -webkit-transform-origin: right 0;
+  transform-origin: right 0;
+}
+
+.border-bottom-1px::after {
+  border-bottom: 1PX solid #ebebeb;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  -webkit-transform-origin: 0 bottom;
+  transform-origin: 0 bottom;
+}
+
+.border-left-1px::before {
+  border-left: 1PX solid #f5f5f5;
+  top: 0;
+  left: 0;
+  height: 100%;
+  -webkit-transform-origin: left 0;
+  transform-origin: left 0;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 2dppx) {
+  .border-top-1px::before {
+    width: 200%;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  .border-right-1px::after {
+    height: 200%;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  .border-bottom-1px::after {
+    width: 200%;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  .border-left-1px::before {
+    height: 200%;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 3),
+(min-resolution: 3dppx) {
+  .border-top-1px::before {
+    width: 300%;
+    -webkit-transform: scale(0.333);
+    transform: scale(0.333);
+  }
+
+  .border-right-1px::after {
+    height: 300%;
+    -webkit-transform: scale(0.333);
+    transform: scale(0.333);
+  }
+
+  .border-bottom-1px::after {
+    width: 300%;
+    -webkit-transform: scale(0.333);
+    transform: scale(0.333);
+  }
+
+  .border-left-1px::before {
+    height: 300%;
+    -webkit-transform: scale(0.333);
+    transform: scale(0.333);
+  }
+}

src/styles/sidebar.scss

@@ -1,210 +1,210 @@
-#app {
-
-  .main-container {
-    min-height: calc(100% - 64px);
-    transition: margin-left .28s;
-    margin-left: $sideBarWidth;
-    position: relative;
-    top: 64px;
-  }
-
-  .sidebar-container {
-    transition: width 0.28s;
-    width: $sideBarWidth !important;
-    // background-color: $menuBg;
-    // background: url('../assets/images/sidebar.png') no-repeat;
-    // background-size: 100% 100%;
-    height: calc(100% - 64px);
-    position: fixed;
-    font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1001;
-    overflow: hidden;
-
-    .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-    }
-
-    .scrollbar-wrapper {
-      overflow-x: hidden !important;
-    }
-
-    .el-scrollbar__bar.is-vertical {
-      right: 0px;
-    }
-
-    .el-scrollbar {
-      height: 100%;
-    }
-
-    &.has-logo {
-      .el-scrollbar {
-        height: calc(100% - 50px);
-      }
-    }
-
-    .is-horizontal {
-      display: none;
-    }
-
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    .svg-icon {
-      margin-right: 16px;
-    }
-
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
-
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      &:hover {
-        // background-color: $menuHover !important;
-        background: linear-gradient(90deg, #6898ef,#416593) !important
-      }
-    }
-
-    .is-active>.el-submenu__title {
-      color: $subMenuActiveText !important;
-      // background: linear-gradient(90deg, #6898ef,#416593) !important
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
-      // color: #fff !important;
-
-      &:hover {
-        background: linear-gradient(90deg, #6898ef,#416593) !important
-      }
-    }
-  }
-
-  .hideSidebar {
-    .sidebar-container {
-      width: 54px !important;
-    }
-
-    .main-container {
-      margin-left: 54px;
-    }
-
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
-      }
-    }
-
-    .el-submenu {
-      overflow: hidden;
-
-      &>.el-submenu__title {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
-
-        .el-submenu__icon-arrow {
-          display: none;
-        }
-      }
-    }
-
-    .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
-          &>span {
-            height: 0;
-            width: 0;
-            overflow: hidden;
-            visibility: hidden;
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
-
-  .el-menu--collapse .el-menu .el-submenu {
-    min-width: $sideBarWidth !important;
-  }
-
-  .mobile {
-    .main-container {
-      margin-left: 0px;
-    }
-
-    .sidebar-container {
-      transition: transform .28s;
-      width: $sideBarWidth !important;
-    }
-
-    &.hideSidebar {
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
-      }
-    }
-  }
-
-  .withoutAnimation {
-
-    .main-container,
-    .sidebar-container {
-      transition: none;
-    }
-  }
-}
-
-.el-menu--vertical {
-  &>.el-menu {
-    .svg-icon {
-      margin-right: 16px;
-    }
-  }
-
-  .nest-menu .el-submenu>.el-submenu__title,
-  .el-menu-item {
-    &:hover {
-      background-color: $menuHover !important;
-      // background: linear-gradient(90deg, #6898ef,#416593) !important
-    }
-  }
-
-  >.el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
-  }
-}
+#app {
+
+  .main-container {
+    min-height: calc(100% - 64px);
+    transition: margin-left .28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+    top: 64px;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    // background-color: $menuBg;
+    // background: url('../assets/images/sidebar.png') no-repeat;
+    // background-size: 100% 100%;
+    height: calc(100% - 64px);
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 16px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        // background-color: $menuHover !important;
+        background: linear-gradient(90deg, #6898ef,#416593) !important
+      }
+    }
+
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+      // background: linear-gradient(90deg, #6898ef,#416593) !important
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+      // color: #fff !important;
+
+      &:hover {
+        background: linear-gradient(90deg, #6898ef,#416593) !important
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      background-color: $menuHover !important;
+      // background: linear-gradient(90deg, #6898ef,#416593) !important
+    }
+  }
+
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

src/views/MapView/index.vue

@@ -97,7 +97,7 @@ import Layout from '@/layout';
 
 import 'ol/ol.css';
 import Comps from '@/layout/components/loadComps';
-import { HalfPanels, FullPanels, FloatPanels, SidePanels,RightHalfPanals } from '@/layout/components/index';
+import { HalfPanels, FullPanels, FloatPanels, SidePanels, RightHalfPanals } from '@/layout/components/index';
 import { esriConfig } from 'staticPub/config';
 import { loadCss } from '@/utils/loadResources';
 import tfDialog from './common/Dialog';
@@ -224,7 +224,7 @@ export default {
     FloatPanels() {
       return this.$store.state.map.floatPanels;
     },
-    RightHalfPanals(){
+    RightHalfPanals() {
       return this.$store.state.map.rightHalfPanels;
     },
   },
@@ -779,8 +779,8 @@ export default {
       }
       >>> .ol-overviewmap button {
         left: unset !important;
-        bottom: 1px;
-        right: -38px;
+        bottom: 4px;
+        right: -36px;
         position: absolute;
       }
     }