<template>
|
<div class="content">
|
<div class="title">
|
<label>详细编辑</label>
|
<el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
|
<Close />
|
</el-icon>
|
</div>
|
<div class="layer_box">
|
<div class="check_box">
|
<!-- <el-checkbox @change="handlCheckAllChange" v-model="layerState">{{
|
layerName
|
}}</el-checkbox> -->
|
{{ layerData.name }}
|
<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"
|
@change="changeSelection(stretchValue)"
|
ref="select"
|
>
|
<el-option
|
v-for="item in stretchOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
<img :src="item.url" style="height: 30px; margin-right: 10px" />
|
<span>{{ item.label }}</span>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
const stretchValue = ref("");
|
const transparence = ref(0);
|
let layerName = ref("图层名称");
|
let layerState = ref(false);
|
let select = ref();
|
const stretchOptions = [
|
{
|
value: "Option1",
|
label: "Option1",
|
url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
|
},
|
];
|
const emits = defineEmits(["detailClose"]);
|
//defineProps 来接收组件的传值
|
const props = defineProps({
|
layerData: Object,
|
});
|
const setSpatialClose = () => {
|
emits("detailClose", false);
|
};
|
const handlCheckAllChange = (res) => {};
|
const changeSelection = (scope) => {
|
let brand = scope;
|
for (let index in stretchOptions) {
|
let aa = stretchOptions[index];
|
let value = aa.value;
|
if (brand === value) {
|
console.log(select.value);
|
select.value.$el.children[0].children[0].setAttribute(
|
"style",
|
"background:url(" +
|
aa.url +
|
") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
|
);
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.content {
|
background: #1e2a3d;
|
padding: 20px;
|
height: 400px;
|
margin-left: 20px;
|
margin-top: 40px;
|
.title {
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.layer_box {
|
margin-top: 10px;
|
}
|
}
|
.check_box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-right: 50px;
|
padding-top: 10px;
|
font-size: 16px;
|
color: #ffffff;
|
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>
|
