From b035823c711d43902a06838065598f4f805ab408 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 06 六月 2023 14:23:42 +0800
Subject: [PATCH] 菜单修改
---
src/views/layer/layerManage.vue | 132 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 130 insertions(+), 2 deletions(-)
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index 8af9544..92b0bef 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -4,9 +4,49 @@
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>
@@ -19,6 +59,20 @@
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>
@@ -30,8 +84,82 @@
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>
\ No newline at end of file
--
Gitblit v1.9.3