<template>
|
<div class="menus">
|
<div class="logo_box">
|
<img
|
src="../assets/img/logo.png"
|
alt=""
|
class="logo"
|
/>
|
<div class="logo_name">
|
<h3>数字月球系统</h3>
|
<img
|
src="../assets/img/logob.png"
|
alt=""
|
class="logo_name_b"
|
/>
|
</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>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
// import { layerList } from "@/api/api";
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
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;
|
}
|
}
|
};
|
const getList = async () => {
|
// const data = await layerList();
|
console.log(data);
|
};
|
getList();
|
</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%;
|
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;
|
}
|
.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;
|
|
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-weight: 400;
|
color: #ffffff;
|
font-family: Source Han Sans CN;
|
}
|
}
|
.menus_content_TC_c {
|
}
|
}
|
}
|
.el-tree {
|
background: transparent;
|
/deep/ .el-tree-node__label {
|
color: #ffffff;
|
}
|
}
|
</style>
|
