<template>
|
<div class="edit">
|
<div class="layerBox">
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div
|
class="titleImg"
|
@click="editState"
|
>
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">图层编辑</div>
|
</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>
|
<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>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="edit_box">
|
<div class="edit_box_btn btnstyle">
|
<el-button
|
type="primary"
|
:icon="Plus"
|
>新增同级</el-button>
|
<el-button
|
type="primary"
|
:icon="Plus"
|
>新增子级</el-button>
|
<el-button
|
type="primary"
|
:icon="Delete"
|
class="delbtn"
|
>删除</el-button>
|
<el-button
|
type="primary"
|
:icon="Top"
|
>向上移动</el-button>
|
<el-button
|
type="primary"
|
:icon="Bottom"
|
>向下移动</el-button>
|
</div>
|
<div class="edit_box_form">
|
<el-form
|
:model="form"
|
label-width="120px"
|
>
|
<el-form-item label="Activity name">
|
<el-input v-model="form.name" />
|
</el-form-item>
|
<el-form-item label="Activity zone">
|
<el-select
|
v-model="form.region"
|
placeholder="please select your zone"
|
>
|
<el-option
|
label="Zone one"
|
value="shanghai"
|
/>
|
<el-option
|
label="Zone two"
|
value="beijing"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="Resources">
|
<el-radio-group v-model="form.resource">
|
<el-radio label="Sponsor" />
|
<el-radio label="Venue" />
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="Activity form">
|
<el-input
|
v-model="form.desc"
|
type="textarea"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="onSubmit"
|
>Create</el-button>
|
<el-button>Cancel</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
|
const stretchValue = ref("");
|
const emits = defineEmits(["SETstate"]);
|
const stretchOptions = [
|
{
|
value: "Option1",
|
label: "Option1",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
},
|
{
|
value: "Option3",
|
label: "Option3",
|
},
|
{
|
value: "Option4",
|
label: "Option4",
|
},
|
{
|
value: "Option5",
|
label: "Option5",
|
},
|
];
|
|
let menuOption = reactive([
|
{
|
name: "测试",
|
isShow: false,
|
checkedAll: false,
|
children: [
|
{
|
layerState: false,
|
layerName: "图层名称",
|
layerUrl: "",
|
},
|
],
|
},
|
{
|
name: "测试1",
|
isShow: false,
|
checkedAll: true,
|
layerState: false,
|
},
|
]);
|
const form = reactive({
|
name: "",
|
region: "",
|
date1: "",
|
date2: "",
|
delivery: false,
|
type: [],
|
resource: "",
|
desc: "",
|
});
|
|
const onSubmit = () => {
|
console.log("submit!");
|
};
|
const handlCheckAllChange = (res) => {};
|
const handlIsShow = (res: string) => {
|
menuOption.forEach((e) => {
|
if (e.name == res) {
|
e.isShow = !e.isShow;
|
}
|
});
|
};
|
//图层设置弹框
|
const layerSet = () => {};
|
//关闭状态
|
const editState = () => {
|
emits("SETstate", false);
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.edit {
|
width: 1227px;
|
display: flex;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%);
|
transform: translateY(-50%);
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
}
|
.edit_box {
|
width: 867px;
|
padding: 30px 0;
|
.edit_box_btn {
|
display: flex;
|
justify-content: center;
|
margin-bottom: 47px;
|
}
|
.edit_box_form {
|
padding: 0 116px;
|
}
|
}
|
.btnstyle {
|
.el-button {
|
height: 37px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 16px;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
.el-button:hover {
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
.layerBox {
|
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;
|
color: rgba(104, 156, 255, 1);
|
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: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 7px;
|
}
|
}
|
.contentRight {
|
margin-right: 32px;
|
display: flex;
|
align-items: center;
|
|
.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;
|
}
|
}
|
</style>
|
