From eff42e5897b5f0935aa5b93c1bd9acb8bb39b8f0 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 09 六月 2023 18:02:12 +0800
Subject: [PATCH] ui页面补充添加，功能按钮调整
---
src/views/layer/layerManage.vue | 199 ++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 168 insertions(+), 31 deletions(-)
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index 92b0bef..bb1a15b 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -1,47 +1,71 @@
<template>
- <div
- v-drag
- class="layerBox"
- >
+ <div v-drag class="layerBox">
<div class="layerTitle">
<div class="tileLeft">
<div class="titleImg">
<ArrowLeft />
</div>
- <div class="titleLable">
- 鍥惧眰绠＄悊
- </div>
+ <div class="titleLable">鍥惧眰绠＄悊</div>
</div>
<div class="titleImg">
<Setting />
</div>
</div>
- <div>
- <div
- class="contentBox"
- v-for="(item,i) in menuOption"
- >
+ <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
+ <div class="contentCheck">
+ <el-checkbox
@change="handlCheckAllChange(item)"
v-model="item.checkedAll"
- >鍏ㄩ儴閫変腑</el-checkbox></div>
+ >鍏ㄩ儴閫変腑</el-checkbox
+ >
+ </div>
<div>
<div
- @click="handlIsShow(item,1)"
- v-show="item.isShow"
+ @click="handlIsShow(item.name)"
class="contentUP"
+ :class="{ accordion: item.isShow }"
></div>
- <div
- @click="handlIsShow(item,2)"
- v-show="!item.isShow"
- class="contentDown"
- ></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>
@@ -59,27 +83,67 @@
defineProps,
defineEmits,
} from "vue";
-const menuOption = [
+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: true,
+ isShow: false,
checkedAll: false,
+ children: [
+ {
+ layerState: false,
+ layerName: "鍥惧眰鍚嶇О",
+ layerUrl: "",
+ },
+ ],
},
{
name: "娴嬭瘯1",
- isShow: true,
+ isShow: false,
checkedAll: true,
+ layerState: false,
},
-];
+]);
+const activeNames = ref(false);
+const handleChange = (val: string[]) => {
+ console.log(val);
+};
const handlCheckAllChange = (res) => {};
-const handlIsShow = (res, boolean) => {};
+const handlIsShow = (res: string) => {
+ menuOption.forEach((e) => {
+ if (e.name == res) {
+ e.isShow = !e.isShow;
+ }
+ });
+};
</script>
<style lang="less" scoped>
.layerBox {
- position: absolute;
- top: 135px;
- left: 100px;
width: 359px;
height: 680px;
background: rgba(7, 8, 14, 0.8);
@@ -111,10 +175,16 @@
height: 100%;
display: flex;
align-items: center;
+ color: rgba(104, 156, 255, 1);
}
+ }
+ .layerContent {
+ padding: 0 8px;
}
.contentBox {
margin-top: 3px;
+ .content {
+ }
}
.contentTile {
width: 100%;
@@ -152,7 +222,14 @@
.contentUP {
width: 18px;
height: 11px;
- background: url("../../assets/img/leftBtn/绠ご-宸� 鎷疯礉.png");
+ background: url("../../assets/img/leftBtn/绠ご-宸� 鎷疯礉.png") no-repeat
+ center;
+ background-size: 100% 100%;
+
+ cursor: pointer;
+ }
+ .accordion {
+ transform: rotate(180deg);
}
.contentDown {
width: 18px;
@@ -161,5 +238,65 @@
}
}
}
+ .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%;
+ }
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3