<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="store.state.layerFlag = null"
|
title="关闭">
|
<CloseBold />
|
</div>
|
</div>
|
<div class="layerContent"></div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, nextTick, watch } from "vue";
|
import { MoreFilled, Setting, CloseBold } from "@element-plus/icons-vue";
|
import store from "@/store";
|
|
onMounted(() => {});
|
</script>
|
|
<style lang="less" scoped>
|
.layerBox {
|
width: 300px;
|
height: 600px;
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
|
position: absolute;
|
z-index: 41;
|
top: 150px;
|
right: 1%;
|
|
.layerTitle {
|
width: calc(100% - 27px);
|
height: 42px;
|
background: #30bcff;
|
box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5);
|
border-bottom: 1px solid #20bc74;
|
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: #fff;
|
}
|
|
.set {
|
cursor: pointer;
|
}
|
}
|
|
.layerContent {
|
height: 525px;
|
padding: 0 8px;
|
overflow: auto;
|
overflow-y: auto;
|
}
|
|
.layerContent::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
.layerContent::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(35, 47, 42, 0.8);
|
}
|
|
.layerContent::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(35, 47, 42, 0.8);
|
}
|
|
.el-tree {
|
width: 100%;
|
overflow-y: auto;
|
}
|
|
.layerContent .el-tree-node__content {
|
overflow: hidden;
|
}
|
|
.layerContent .custom-tree-node {
|
overflow: hidden;
|
flex-shrink: 1;
|
flex-grow: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 16px;
|
padding-right: 8px;
|
}
|
|
.layerContent .custom-tree-node .label {
|
flex-shrink: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.layerContent .custom-tree-node .button {
|
flex-grow: 0;
|
flex-shrink: 0;
|
}
|
}
|
|
.dropdown_box {
|
position: relative;
|
}
|
|
/deep/.el-select-dropdown__item {
|
font-size: 12px !important;
|
}
|
|
.el-tree {
|
background: transparent;
|
}
|
|
/deep/ .el-tree-node {
|
background: #0d131d;
|
color: #ffffff;
|
font-size: 20px;
|
font-weight: 300;
|
margin-top: 3px;
|
padding: 8px;
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background: transparent;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background: #0d131d;
|
}
|
|
/deep/ .el-tree-node__children {
|
background: #1e2a3d;
|
|
.el-tree-node {
|
background: #1e2a3d;
|
margin-top: 0;
|
padding: 4px;
|
}
|
}
|
|
/deep/
|
.el-tree--highlight-current
|
.el-tree-node.is-current
|
> .el-tree-node__content {
|
background: rgba(104, 156, 255, 0.5) !important;
|
}
|
|
.highlight {
|
background: rgba(104, 156, 255, 0.5) !important;
|
}
|
|
// .custom-tree-node {
|
// flex: 1;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-between;
|
// font-size: 16px;
|
// padding-right: 8px;
|
// }
|
|
.el-dropdown-menu {
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
color: #fff;
|
border: 0;
|
|
/deep/ .el-dropdown-menu__item {
|
color: #fff;
|
}
|
}
|
|
/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
|
background-color: rgba(104, 156, 255, 0.5);
|
|
color: #fff;
|
}
|
</style>
|
<style>
|
.el-popper.is-light {
|
border: 1px solid rgba(7, 8, 14, 0.8) !important;
|
}
|
|
.el-scrollbar {
|
border: 0 !important;
|
}
|
</style>
|
