From 7540886ea5a498085052104c054cf9f0853310c9 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 05 六月 2023 10:20:58 +0800
Subject: [PATCH] 顶部菜单，左侧菜单，图图层管理界面
---
src/components/menus.vue | 283 ++++++++++++--------------------------------------------
1 files changed, 61 insertions(+), 222 deletions(-)
diff --git a/src/components/menus.vue b/src/components/menus.vue
index 00667d0..fb946b4 100644
--- a/src/components/menus.vue
+++ b/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>
--
Gitblit v1.9.3