<template>
|
<div
|
v-drag
|
class="layerBox"
|
>
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div
|
@click="setCloseLayer"
|
class="titleImg"
|
>
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">图层管理</div>
|
</div>
|
<div
|
class="titleImg set"
|
@click="layerSetBox"
|
>
|
<Setting />
|
</div>
|
</div>
|
<div class="layerContent">
|
<div
|
class="contentBox"
|
v-for="(item, i) in menuOption"
|
:key="i"
|
>
|
<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.name)"
|
class="contentUP"
|
:class="{ accordion: item.isShow }"
|
></div>
|
</div>
|
</div>
|
</div>
|
|
<div
|
class="content"
|
v-show="item.isShow"
|
>
|
<div
|
class="layer_box"
|
v-for="(v, k) in item.children"
|
:key="k"
|
>
|
<div class="check_box">
|
<el-checkbox
|
@change="handlCheckAllChange(item)"
|
v-model="v.layerState"
|
>{{ v.layerName }}</el-checkbox>
|
<img
|
src="../../assets/img/layer.png"
|
alt=""
|
/>
|
</div>
|
<div class="slider-demo-block">
|
<div class="demonstration">透明度</div>
|
<el-slider v-model="transparence" />
|
<div class="demonstration">{{ transparence }}%</div>
|
</div>
|
<div class="selectBox">
|
<div class="selectTile demonstration">拉伸方式</div>
|
<el-select
|
v-model="stretchValue"
|
class="m-2"
|
placeholder="Select"
|
size="small"
|
>
|
<el-option
|
v-for="item in stretchOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<layer-set
|
v-show="layerSetIsshow"
|
@SETstate="SETstate"
|
></layer-set>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import layerSet from "./layerSet";
|
const stretchValue = ref("");
|
|
const stretchOptions = [
|
{
|
value: "Option1",
|
label: "Option1",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
},
|
{
|
value: "Option3",
|
label: "Option3",
|
},
|
{
|
value: "Option4",
|
label: "Option4",
|
},
|
{
|
value: "Option5",
|
label: "Option5",
|
},
|
];
|
const transparence = ref(0);
|
let menuOption = reactive([
|
{
|
name: "测试",
|
isShow: false,
|
checkedAll: false,
|
children: [
|
{
|
layerState: false,
|
layerName: "图层名称",
|
layerUrl: "",
|
},
|
],
|
},
|
{
|
name: "测试1",
|
isShow: false,
|
checkedAll: true,
|
layerState: false,
|
},
|
]);
|
const layerSetIsshow = ref(false);
|
const emits = defineEmits(["setCloseLayer"]);
|
const handlCheckAllChange = (res) => {};
|
const handlIsShow = (res: string) => {
|
menuOption.forEach((e) => {
|
if (e.name == res) {
|
e.isShow = !e.isShow;
|
}
|
});
|
};
|
//图层设置弹框
|
const layerSetBox = () => {
|
layerSetIsshow.value = !layerSetIsshow.value;
|
};
|
//关闭状态
|
const SETstate = (res) => {
|
layerSetIsshow.value = res;
|
};
|
const setCloseLayer = () => {
|
emits("setCloseLayer", false);
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.layerBox {
|
width: 359px;
|
height: 680px;
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
.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: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
color: rgba(104, 156, 255, 1);
|
}
|
.set {
|
cursor: pointer;
|
}
|
}
|
.layerContent {
|
padding: 0 8px;
|
}
|
.contentBox {
|
margin-top: 3px;
|
.content {
|
}
|
}
|
.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: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
margin-bottom: 5px;
|
|
color: #ffffff;
|
margin-left: 7px;
|
}
|
}
|
.contentRight {
|
margin-right: 32px;
|
display: flex;
|
align-items: center;
|
.contentCheck {
|
margin-right: 12px;
|
/deep/.el-checkbox__label {
|
font-size: 14px;
|
}
|
}
|
.contentUP {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
}
|
.accordion {
|
transform: rotate(180deg);
|
}
|
.contentDown {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝 4.png");
|
}
|
}
|
}
|
.content {
|
background: #1e2a3d;
|
padding: 10px;
|
}
|
.check_box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-right: 50px;
|
img {
|
width: 22px;
|
height: 19px;
|
}
|
}
|
.check_box .el-checkbox {
|
font-size: 16px;
|
color: #ffffff;
|
}
|
.check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
background-color: rgba(13, 255, 0, 1);
|
border-color: rgba(41, 109, 255, 1);
|
}
|
.check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
|
color: #fff;
|
}
|
.slider-demo-block {
|
margin-top: 22px;
|
}
|
.demonstration {
|
font-size: 12px;
|
font-weight: 300;
|
color: #d6e4ff;
|
}
|
/deep/ .el-slider__runway {
|
height: 2px;
|
|
background: #73a1fa;
|
}
|
/deep/ .el-slider__bar {
|
height: 2px;
|
|
background: #73a1fa;
|
}
|
/deep/ .el-slider__button {
|
width: 17px;
|
height: 18px;
|
border: 0;
|
background: url("../../assets/img/DBX.png") no-repeat center;
|
background-size: 100% 100%;
|
border-radius: 0;
|
}
|
|
.selectBox {
|
margin-top: 24px;
|
.selectTile {
|
padding-bottom: 6px;
|
}
|
.el-select {
|
width: 100%;
|
}
|
}
|
}
|
/deep/.el-select-dropdown__item {
|
font-size: 12px !important;
|
}
|
</style>
|
