<template>
|
<div
|
v-drag
|
class="layerBox"
|
>
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div class="titleImg">
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">
|
图层管理
|
</div>
|
</div>
|
<div class="titleImg">
|
<Setting />
|
</div>
|
</div>
|
<div>
|
<div
|
class="contentBox"
|
v-for="(item,i) in menuOption"
|
>
|
<div class="contentTile">
|
<div class="contentLeft">
|
<div class="contentImg"></div>
|
<div class="contentLabel">{{ item.name }}</div>
|
</div>
|
<div class="contentRight">
|
<div class="contentCheck"><el-checkbox
|
@change="handlCheckAllChange(item)"
|
v-model="item.checkedAll"
|
>全部选中</el-checkbox></div>
|
<div>
|
<div
|
@click="handlIsShow(item,1)"
|
v-show="item.isShow"
|
class="contentUP"
|
></div>
|
<div
|
@click="handlIsShow(item,2)"
|
v-show="!item.isShow"
|
class="contentDown"
|
></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
const menuOption = [
|
{
|
name: "测试",
|
isShow: true,
|
checkedAll: false,
|
},
|
{
|
name: "测试1",
|
isShow: true,
|
checkedAll: true,
|
},
|
];
|
const handlCheckAllChange = (res) => {};
|
const handlIsShow = (res, boolean) => {};
|
</script>
|
|
<style lang="less" scoped>
|
.layerBox {
|
position: absolute;
|
top: 135px;
|
left: 100px;
|
width: 359px;
|
height: 680px;
|
background: rgba(7, 8, 14, 0.8);
|
.layerTitle {
|
width: calc(100% - 27px);
|
height: 42px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
color: white;
|
.tileLeft {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.titleLable {
|
font-size: 24px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
}
|
.contentBox {
|
margin-top: 3px;
|
}
|
.contentTile {
|
width: 100%;
|
height: 42px;
|
background: #0d131d;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.contentLeft {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.contentImg {
|
width: 22px;
|
height: 22px;
|
background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
|
margin-left: 16px;
|
}
|
.contentLabel {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 7px;
|
}
|
}
|
.contentRight {
|
margin-right: 32px;
|
display: flex;
|
align-items: center;
|
.contentCheck {
|
margin-right: 12px;
|
}
|
.contentUP {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝.png");
|
}
|
.contentDown {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝 4.png");
|
}
|
}
|
}
|
}
|
</style>
|
