<template>
|
<div class="menus_bg">
|
<div class="menus_btn" v-for="(item, i) in menuOptions" :key="i">
|
<div class="menus_btn_f" @click="setMenuClick(item)">
|
<img
|
v-show="checkMenuFlag != item.id"
|
class="menus_btn_img"
|
:src="require('../assets/img/leftBtn/' + item.background)"
|
/>
|
|
<img
|
v-show="checkMenuFlag == item.id"
|
class="menus_btn_img"
|
:src="require('../assets/img/leftBtn/' + item.backgroundy)"
|
/>
|
<div class="menus_btn_text">{{ item.name }}</div>
|
</div>
|
<div
|
class="menus_btn_c"
|
v-if="item.child.length !== 0"
|
v-show="checkMenuFlag == item.id"
|
>
|
<div
|
class="menus_btn_c_list"
|
v-for="(v, j) in item.child"
|
:key="j"
|
@click.stop="setMenuChildClick(v)"
|
:class="{ child_Menu_Options: childMenuOptions == v.id }"
|
>
|
{{ v.name }}
|
<div
|
class="menus_btn_c_list_chlid"
|
v-if="v.child"
|
v-show="childMenuOptions == v.id"
|
>
|
<div
|
class="menus_btn_c_list_chlid_list"
|
v-for="(e, k) in v.child"
|
:key="k"
|
:class="{ child_Menu_Options: checkMenuChildFlag == e.id }"
|
@click.stop="setMenuTreeChildClick(e)"
|
>
|
{{ e.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, onBeforeUnmount, onMounted } from "vue";
|
import menuData from "@/assets/js/menuData";
|
import menuTool from "@/assets/js/menuTool";
|
export default {
|
setup(props, { emit }) {
|
const checkMenuFlag = ref("f1");
|
let checkMenuChildFlag = ref("");
|
let menuOptions = ref([]);
|
let childMenuOptions = ref("");
|
const setMenuClick = (res) => {
|
if (checkMenuFlag.value && checkMenuFlag.value == res.id) {
|
checkMenuFlag.value = null;
|
if (childMenuOptions.value != null) {
|
if (childMenuOptions.value[0] == res.id[0]) {
|
childMenuOptions.value = null;
|
emit("menusData", { id: null, isActive: false });
|
menuTool.clearLeftTools(res);
|
}
|
if (checkMenuChildFlag.value != null) {
|
if (checkMenuChildFlag.value[0] == res.id[0]) {
|
checkMenuChildFlag.value = null;
|
// emit("menusData", { id: null, isActive: false });
|
// menuTool.clearLeftTools(res);
|
}
|
}
|
}
|
res.isActive = false;
|
} else {
|
checkMenuFlag.value = res.id;
|
res.isActive = true;
|
|
// menuTool.thematicTools(res);
|
}
|
emit("menusData", res);
|
};
|
const setMenuChildClick = (res) => {
|
if (childMenuOptions.value && childMenuOptions.value == res.id) {
|
if (checkMenuChildFlag.value != null) {
|
if (checkMenuChildFlag.value[0] == res.id[0]) {
|
checkMenuChildFlag.value = null;
|
emit("menusData", { id: null, isActive: false });
|
menuTool.clearLeftTools(res);
|
}
|
}
|
childMenuOptions.value = null;
|
menuTool.clearLeftTools(res);
|
res.isActive = false;
|
} else {
|
if (checkMenuChildFlag.value) {
|
checkMenuChildFlag.value = null;
|
emit("menusData", { id: null, isActive: false });
|
menuTool.clearLeftTools(res);
|
}
|
childMenuOptions.value = res.id;
|
menuTool.leftTools(res);
|
res.isActive = true;
|
}
|
emit("menusData", res);
|
};
|
const setMenuTreeChildClick = (res) => {
|
if (checkMenuChildFlag.value && checkMenuChildFlag.value == res.id) {
|
checkMenuChildFlag.value = null;
|
|
menuTool.clearLeftTools(res);
|
res.isActive = false;
|
} else {
|
checkMenuChildFlag.value = res.id;
|
menuTool.leftTools(res);
|
res.isActive = true;
|
}
|
emit("menusData", res);
|
};
|
onMounted(() => {
|
menuOptions.value = menuData.leftMenu;
|
});
|
return {
|
checkMenuFlag,
|
menuOptions,
|
childMenuOptions,
|
setMenuClick,
|
setMenuChildClick,
|
checkMenuChildFlag,
|
setMenuTreeChildClick,
|
};
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.menus_bg {
|
width: 223px;
|
height: 100%;
|
background: rgba(11, 33, 56, 0.5);
|
position: absolute;
|
top: 0;
|
left: 0;
|
padding-top: 80px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.menus_btn {
|
width: 100%;
|
position: relative;
|
margin-bottom: 60px;
|
z-index: 11;
|
.menus_btn_f {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
cursor: pointer;
|
}
|
.menus_btn_img {
|
width: 164px;
|
height: 164px;
|
}
|
.menus_btn_text {
|
margin-top: 13px;
|
font-size: 40px;
|
font-family: JLinXin;
|
font-weight: 600;
|
font-style: italic;
|
color: #eff8fc;
|
// text-shadow: 3px 4px 3px #021528;
|
background: linear-gradient(0deg, #ffffff 0%, #d1f8ff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.menus_btn_c {
|
position: absolute;
|
top: 50%;
|
left: 220px;
|
transform: translateY(-50%);
|
// width: 256px;
|
padding: 53px 74px;
|
box-sizing: border-box;
|
background: url("../assets/img/cdbg.png") no-repeat center;
|
background-size: 100% 100%;
|
.menus_btn_c_list {
|
width: 100%;
|
font-size: 30px;
|
font-family: JLinXin;
|
font-weight: 600;
|
color: #ffffff;
|
white-space: nowrap;
|
cursor: pointer;
|
line-height: 64px;
|
border-radius: 5px;
|
padding: 0 12px;
|
position: relative;
|
.menus_btn_c_list_chlid {
|
position: absolute;
|
width: 280px;
|
// height: 200px;
|
background: url("../assets/img/sj.png") no-repeat center;
|
background-size: 100% 100%;
|
right: -320px;
|
top: 50%;
|
transform: translateY(-50%);
|
padding: 43px 42px 52px 56px;
|
box-sizing: border-box;
|
.menus_btn_c_list_chlid_list {
|
width: 100%;
|
font-size: 30px;
|
font-family: JLinXin;
|
font-weight: 600;
|
color: #ffffff;
|
white-space: nowrap;
|
cursor: pointer;
|
line-height: 64px;
|
border-radius: 5px;
|
text-align: center;
|
// padding: 0 12px;
|
}
|
.menus_btn_c_list_chlid_list:hover {
|
background: rgba(49, 180, 255, 0.4);
|
}
|
}
|
}
|
.menus_btn_c_list:hover {
|
background: rgba(49, 180, 255, 0.4);
|
}
|
.child_Menu_Options {
|
background: rgba(49, 180, 255, 0.4);
|
}
|
}
|
}
|
}
|
</style>
|
