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/topBtn.vue | 223 ++++++++++++++++++++++++++++---------------------------
1 files changed, 114 insertions(+), 109 deletions(-)
diff --git a/src/components/topBtn.vue b/src/components/topBtn.vue
index acaa101..f4dc141 100644
--- a/src/components/topBtn.vue
+++ b/src/components/topBtn.vue
@@ -1,52 +1,49 @@
<template>
<div class="top_btn">
- <div>
- <ul>
- <li
- class="firstMenu"
- v-for="(item,i) in menuOptions"
- @mousemove="setFirstLevlMenu(item,1)"
- @mouseleave="setFirstLevlMenu(item,2)"
- >
- <div
- class="menuDiv"
- :title="item.name"
- :class="{ 'border_left' : i == 0, 'border_right' :i == (menuOptions.length -1)}"
- @click="setMenuClick(item)"
+ <div class="menu_Box">
+ <div
+ class="first_Menu"
+ :title="item.name"
+ v-for="(item,i) in menuOptions"
+ @click="setMenuClick(item)"
+ >
+ <div class="First_img">
+ <img
+ class="imgIcon"
+ :src="require('../assets/img/topBtn/'+item.imgUrl)"
>
+ </div>
+ <div
+ class="menu_second"
+ v-if="item.children && item.children.length > 0"
+ v-show="menuFlag == item.id"
+ >
+ <div class="upTop">
+ <div class="upimg"></div>
+ </div>
+ <div class="second_Box">
<div
- class="menuFirstImage"
- :class="item.class"
+ class="second_Menu"
+ :title="res.name"
+ v-for="(res,j) in item.children"
+ @click="setMenuClick(res)"
+ :class="{'second_Menu_click':checkFlag == res.id}"
>
+ <img
+ class="imgIcon"
+ style="margin-bottom: 5px;"
+ :src="require('../assets/img/topBtn/'+res.imgUrl)"
+ >
+ <div>
+ {{ res.name }}
+ </div>
+
</div>
</div>
- <ul
- @mouseleave="setFirstLevlMenu(item,2)"
- v-show="item.children &&menuFlag == item.id"
- >
- <li v-for="(res,j) in item.children">
- <div
- class="tmenuDiv"
- :title="res.name"
- @click="setMenuClick(res)"
- >
- <div class="tmenuImg">
- <div
- class="menuFirstImage"
- :class="res.class"
- >
- </div>
- </div>
- <div class="tmenulabel">
- {{ res.name }}
- </div>
- </div>
- </li>
+ </div>
- </ul>
- </li>
- </ul>
+ </div>
</div>
</div>
</template>
@@ -61,21 +58,27 @@
defineEmits,
} from "vue";
import menuData from "@/assets/js/Map/menuData.js";
+import menuTool from "@/assets/js/Map/menuTool.js";
const menuFlag = ref(null);
const menuOptions = ref([]);
-const setFirstLevlMenu = (res, flag) => {
- if (flag == 1) {
- menuFlag.value = res.id;
- } else {
- menuFlag.value = null;
- }
-};
+const checkFlag = ref(null);
const setMenuClick = (res) => {
- if (res.children && res.children.length > 0) {
- return;
+ if (res.children) {
+ if (menuFlag.value && menuFlag.value == res.id) {
+ menuFlag.value = null;
+ checkFlag.value = null;
+ } else {
+ menuFlag.value = res.id;
+ }
+ } else {
+ if (res.level == 1) {
+ checkFlag.value = null;
+ } else if (res.level == 2) {
+ checkFlag.value = res.id;
+ }
+ menuFlag.value = null;
+ menuTool.menuTools(res);
}
- menuFlag.value = null;
- menuData.menuTools(res);
};
onMounted(() => {
menuOptions.value = menuData.topMenu;
@@ -86,68 +89,70 @@
.top_btn {
position: absolute;
top: 23px;
- right: 25px;
+ right: 0px;
display: flex;
cursor: pointer;
+ .menu_Box {
+ margin-right: 104px;
+ display: flex;
+ .imgIcon {
+ width: 30px;
+ height: 30px;
+ }
+ .first_Menu {
+ min-width: 50px;
+ height: 50px;
+ margin-right: 7px;
+ background: url("../assets/img/topBtn/鍥炬爣bj.png") no-repeat;
+ background-size: 100% 100%;
+ .First_img {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+ .upTop {
+ width: 100%;
+ height: 10px;
+ display: flex;
+ justify-content: center;
+ .upimg {
+ width: 15px;
+ height: 100%;
+ background: url("../assets/img/topBtn/鍚戜笂1.png") no-repeat;
+ }
+ }
+ .menu_second {
+ margin-top: 0px;
+ }
+ .second_Box {
+ background: #07080e;
+ box-shadow: inset 0px 0px 15px 0px rgb(38, 47, 71, 0.68);
- .menuDiv {
- width: 72px;
- padding: 20px 0px;
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgba(1, 10, 28, 1);
- border-top: 1px solid gray;
- border-bottom: 1px solid gray;
- }
- .border_left {
- border-radius: 5px 0px 0px 5px;
- border-left: 1px solid gray;
- }
- .border_right {
- border-radius: 0px 5px 5px 0px;
- border-right: 1px solid gray;
- }
- .tmenuDiv {
- width: 70px;
- padding: 10px 0px;
- border-right: 1px solid gray;
- border-left: 1px solid gray;
- border-bottom: 1px solid gray;
- background: rgba(1, 10, 28, 1);
- }
- .tmenuDiv :hover {
- color: #409eff;
- }
- .tmenuImg {
- width: 100%;
+ .second_Menu {
+ background: #07080e;
+ box-shadow: inset 0px 0px 8px 0px rgb(38, 47, 71, 0.68);
+ margin-top: 1px;
+ font-size: 12px;
+ font-family: Source Han Sans CN;
+ padding: 10px 10px;
+ font-weight: 300;
+ color: #d1e0ff;
+ line-height: 7px;
+ text-align: center;
+ border: 1px solid none;
+ }
- display: flex;
- justify-content: center;
- }
- .tmenulabel {
- width: 100%;
-
- display: flex;
- justify-content: center;
- color: #fff;
- font-size: 12px;
- margin-top: 2px;
- }
- .firstMenu {
- float: left;
- }
- .menuScond {
- width: 100%;
- display: flex;
- justify-content: center;
- }
- .menuFirstImage {
- width: 15px;
- height: 15px;
- }
- .twoMenu_imge21 {
- background: url("../assets/img/cd.png") no-repeat 100% 100%;
+ .second_Menu_click {
+ background: #171e2e;
+ border: 1px solid;
+ border-image: linear-gradient(47deg, #397bc9, #77a5cd, #397bc9) 1 1;
+ box-shadow: 0px 0px 6px 0px #080c13,
+ 0px 7px 8px 0px rgba(38, 47, 71, 0.68);
+ }
+ }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3