月球大数据地理空间分析展示平台-【前端】-月球2期前端
11
WX
2023-07-14 23aac3cf9903d404eb86310d502a0eeb5a68b407
src/views/menus.vue
@@ -8,27 +8,31 @@
      </div>
    </div>
    <div class="menus_box">
      <div
        class="imgBox"
        v-for="(item, i) in menuOptions"
        :key="i"
        @click="setMenuClick(item)"
      >
        <img
          v-if="checkMenuFlag != item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/' + item.imgUrl)"
        />
        <img
          v-if="checkMenuFlag == item.id"
          class="imgIcon"
          :src="require('../assets/img/leftBtn/' + item.checkImgUrl)"
        />
      <div class="menu_Image_box">
        <div
          class="imgBox"
          v-for="(item, i) in menuOptions"
          :key="i"
          @click="setMenuClick(item)"
        >
          <img
            v-if="checkMenuFlag != item.id"
            class="imgIcon"
            :src="require('../assets/img/leftBtn/' + item.imgUrl)"
          />
          <img
            v-if="checkMenuFlag == item.id"
            class="imgIcon"
            :src="require('../assets/img/leftBtn/' + item.checkImgUrl)"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="content_box" v-show="fullScreen">
    <layer-manage v-show="checkMenuFlag == 'l1'"> </layer-manage>
    <layer-manage @setCloseLayer="setCloseLayer" v-if="checkMenuFlag == 'l1'">
    </layer-manage>
    <plotting v-show="checkMenuFlag == 'l2'"> </plotting>
    <baseMapSwitching v-show="checkMenuFlag == 'l5'"> </baseMapSwitching>
    <search v-if="thematicMapBtnState"> </search>
@@ -85,6 +89,9 @@
    menuTool.leftTools(res);
  }
};
const setCloseLayer = (res) => {
  checkMenuFlag.value = null;
};
// 切换浏览器全屏
const screen = () => {
  fullScreen.value = !fullScreen.value;
@@ -137,7 +144,7 @@
.menus {
  position: absolute;
  top: 27px;
  left: 14px;
  left: 0px;
  .logo_box {
    display: flex;
    align-items: center;
@@ -153,7 +160,7 @@
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 9px;
        line-height: 35px;
      }
      .logo_name_b {
        text-align: center;
@@ -163,13 +170,14 @@
    }
  }
  .menus_box {
    background: url("../assets/img/矩形 1.png");
    background: rgba(1, 10, 28, 0.68);
    left: 7px;
    position: absolute;
    top: 105px;
    width: 71px;
    height: 628px;
    padding: 36px 0px;
    height: 850px;
    .imgBox {
      width: 100%;
      display: flex;
@@ -183,6 +191,13 @@
    }
  }
}
.menu_Image_box {
  height: 778px;
  width: 100%;
  padding: 36px 0px;
  background: url("../assets/img/矩形 1.png") no-repeat;
  background-size: 100% 100%;
}
.content_box {
  position: absolute;
  top: 135px;