顶部菜单，左侧菜单，图图层管理界面

Surpriseplus

2023-06-05 7540886ea5a498085052104c054cf9f0853310c9

 src/components/menus.vue

@@ -7,7 +7,7 @@
        class="logo"
      />
      <div class="logo_name">
        <h3>数字月球系统</h3>
        <h3>月球大数据地理空间分析展示平台</h3>
        <img
          src="../assets/img/logob.png"
          alt=""
@@ -16,52 +16,27 @@
      </div>
    </div>
    <div class="menus_box">
      <div class="menus_btn">
        <div
          class="menus_btn_btn1"
          :class="{ CDactive: btnstate.CDbj }"
          @click="isactive('CDbj')"
        ></div>
        <div
          class="menus_btn_btn2"
          :class="{ SSactive: btnstate.SSbj }"
          @click="isactive('SSbj')"
        ></div>
        <div
          class="menus_btn_btn3"
          :class="{ SZactive: btnstate.SZbj }"
          @click="isactive('SZbj')"
        ></div>
        <div
          class="menus_btn_btn4"
          :class="{ TCactive: btnstate.TCbj }"
          @click="isactive('TCbj')"
        ></div>
      </div>
      <div class="menus_content">
        <div class="menus_content_TC">
          <div class="menus_content_TC_h">
            <i></i>
            <h3>数字月球系统</h3>
          </div>
          <div class="menus_content_TC_c">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
            />
          </div>
        </div>
      <div
        class="imgBox"
        v-for="(item,i) in menuOptions"
        @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>
</template>

<script lang="ts" setup>
// import { layerList } from "@/api/api";
import {
  ref,
  onMounted,
@@ -70,203 +45,67 @@
  defineProps,
  defineEmits,
} from "vue";
const defaultProps = {
  children: "children",
  label: "label",
};
const data = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
];
let btnstate = reactive({
  CDbj: false,
  SSbj: false,
  SZbj: false,
  TCbj: false,
});
const isactive = (e: string) => {
  for (const k in btnstate) {
    btnstate[k] = false;
    if (k == e) {
      btnstate[k] = true;
    }
import menuData from "@/assets/js/Map/menuData";
const menuOptions = ref([]);
const checkMenuFlag = ref("");
const setMenuClick = (res) => {
  if (checkMenuFlag.value && checkMenuFlag.value == res.id) {
    checkMenuFlag.value = null;
  } else {
    checkMenuFlag.value = res.id;
  }
};
const getList = async () => {
  // const data = await layerList();
  console.log(data);
};
getList();
onMounted(() => {
  menuOptions.value = menuData.leftMenu;
});
</script>
<style lang="less" scoped>
.menus {
  // height: ;
  position: absolute;
  top: 23px;
  left: 10px;
}
.logo_box {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding-left: 6px;
  margin-bottom: 14px;
  .logo {
    width: 68px;
    height: 68px;
  }
  .logo_name {
    margin-left: 18px;
    h3 {
      font-size: 36px;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
    }
    .logo_name_b {
      text-align: center;
      width: 208px;
      height: 9px;
    }
  }
}
.menus_box {
  height: 70vh;
  display: flex;
  .menus_btn {
    height: 100%;
    width: 72px;
    padding-top: 60px;
    box-sizing: border-box;
    background: url("../assets/img/menusbtnb.png") no-repeat center;
    background-size: 100% 100%;
  top: 27px;
  left: 14px;
  .logo_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: space-evenly;
    margin-right: 6px;
    .menus_btn_btn1 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/cd.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 50px;
      cursor: pointer;
    .logo {
      width: 68px;
      height: 68px;
    }
    .menus_btn_btn2 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/ss.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 50px;
      cursor: pointer;
    }
    .menus_btn_btn3 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/sz.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 50px;
      cursor: pointer;
    }
    .menus_btn_btn4 {
      width: 32px;
      height: 32px;
      background: url("../assets/img/tc.png") no-repeat center;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .CDactive {
      background: url("../assets/img/cdl.png") no-repeat center;
      background-size: 100% 100%;
    }
    .SSactive {
      background: url("../assets/img/ssl.png") no-repeat center;
      background-size: 100% 100%;
    }
    .SZactive {
      background: url("../assets/img/szl.png") no-repeat center;
      background-size: 100% 100%;
    }
    .TCactive {
      background: url("../assets/img/tcl.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .menus_content {
    height: 100%;
  }
  .menus_content_TC {
    width: 359px;
    height: 100%;
    .menus_content_TC_h {
      padding: 12px;
      background: #171e2e;
      box-shadow: 0px 10px 10px 0px #262f47,
        0px 20px 20px 0px rgba(8, 12, 19, 0.3);
      display: flex;
      align-items: center;
    .logo_name {
      margin-left: 14px;

      i {
        display: inline-block;
        width: 11px;
        height: 18px;
        background: url("../assets/img/jiantouZ.png") no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;
        margin-right: 10px;
      }
      h3 {
        font-size: 18px;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        font-family: Source Han Sans CN;
        line-height: 9px;
      }
      .logo_name_b {
        text-align: center;
        width: 100%;
        height: 9px;
      }
    }
    .menus_content_TC_c {
    }
  }
}
.el-tree {
  background: transparent;
  /deep/ .el-tree-node__label {
    color: #ffffff;
  .menus_box {
    background: url("../assets/img/矩形 1.png");
    left: 7px;
    position: absolute;
    top: 105px;
    width: 71px;
    height: 628px;
    padding: 36px 0px;
    .imgBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 52px;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>