feat: 部分功能新增
This commit is contained in:
kun
parent
8982cb1d29
commit
22480ff8e8
305
src/views/goverment/largeScreen/components/mapMeasurement.vue
Normal file
305
src/views/goverment/largeScreen/components/mapMeasurement.vue
Normal file
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<div class="main-content-title">
|
||||
<span>图上量算</span>
|
||||
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
|
||||
</div>
|
||||
<div class="main-content-menu">
|
||||
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)">
|
||||
<div><img class="icon" src="@/assets/images/icon/fire.png" alt="" srcset="" /></div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="only-modal">
|
||||
<el-checkbox v-model="formData.checkVal" @change="onlyPickModelPosition">仅测量模型(不拾取地形)</el-checkbox>
|
||||
</div>
|
||||
<div class="unit-select">
|
||||
<span>单位</span>
|
||||
<el-select v-model="formData.unitVal" placeholder="请选择">
|
||||
<el-option v-for="item in unitList" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="distance-show" v-if="formData.distanceVal">
|
||||
<span>{{ formData.distanceVal }}</span>
|
||||
</div>
|
||||
<div class="empty-btn">
|
||||
<el-button type="primary" @click="emptyMeasure">清空测量数据</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts-content" v-if="echartShow">sss</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//引入cesium基础库
|
||||
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
||||
import * as Cesium from "mars3d-cesium";
|
||||
//导入mars3d主库
|
||||
import "mars3d/dist/mars3d.css";
|
||||
import * as mars3d from "mars3d";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
const props = defineProps(["show", "mapInstance"]);
|
||||
const emits = defineEmits(["hiddenConfim"]);
|
||||
const echartShow = ref<boolean>(false);
|
||||
const unitList = ref([
|
||||
{ name: "自动", value: "auto" },
|
||||
{ name: "米", value: "m" },
|
||||
{ name: "公里", value: "km" },
|
||||
{ name: "海里", value: "mile" },
|
||||
{ name: "丈", value: "zhang " }
|
||||
]);
|
||||
const formData = ref({
|
||||
checkVal: false,
|
||||
unitVal: null,
|
||||
distanceVal: 0
|
||||
});
|
||||
const menuList = ref([
|
||||
{ name: "空间距离" },
|
||||
{ name: "贴地距离" },
|
||||
{ name: "剖面" },
|
||||
{ name: "水平面积" },
|
||||
{ name: "贴地面积" },
|
||||
{ name: "角度" },
|
||||
{ name: "三角测量" },
|
||||
{ name: "坐标测量" },
|
||||
{ name: "高度差" }
|
||||
]);
|
||||
let map: any = props.mapInstance;
|
||||
let measure: any;
|
||||
// 清空测量数据
|
||||
const emptyMeasure = () => {
|
||||
measure.clear();
|
||||
formData.value.distanceVal = 0;
|
||||
};
|
||||
const onlyPickModelPosition = () => {
|
||||
// 控制鼠标只取模型上的点，忽略地形上的点的拾取
|
||||
map.onlyPickModelPosition = formData.value.checkVal;
|
||||
};
|
||||
const closeDiv = () => {
|
||||
emits("hiddenConfim");
|
||||
};
|
||||
const mapOperate = (name: any) => {
|
||||
console.log(name);
|
||||
if (name == "空间距离") {
|
||||
measure.distance({
|
||||
showAddText: true,
|
||||
// label: {
|
||||
// type: "div",
|
||||
// updateText: function (text: any, graphic: any) {
|
||||
// // 必须，用于动态更新text
|
||||
// graphic.html = `<div class="marsGreenGradientPnl" style="color: #fff;">${text}</div>`;
|
||||
// },
|
||||
// // 下面是graphic对应类型本身的参数
|
||||
// html: `<div class="marsGreenGradientPnl"></div>`,
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||
// },
|
||||
unit: formData.value.unitVal
|
||||
// style: {
|
||||
// color: '#ffff00',
|
||||
// width: 3,
|
||||
// clampToGround: false // 是否贴地
|
||||
// }
|
||||
});
|
||||
} else if (name == "贴地距离") {
|
||||
measure.distanceSurface({
|
||||
showAddText: true,
|
||||
unit: formData.value.unitVal,
|
||||
exact: false // 是否进行精确计算, 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
|
||||
});
|
||||
} else if (name == "剖面") {
|
||||
measure.section({
|
||||
splitNum: 300, // 插值次数
|
||||
unit: formData.value.unitVal,
|
||||
exact: false
|
||||
});
|
||||
} else if (name == "水平面积") {
|
||||
measure.area({
|
||||
unit: formData.value.unitVal
|
||||
// style: {
|
||||
// color: '#00fff2',
|
||||
// opacity: 0.4,
|
||||
// outline: true,
|
||||
// outlineColor: '#fafa5a',
|
||||
// outlineWidth: 1,
|
||||
// clampToGround: false //贴地
|
||||
// }
|
||||
});
|
||||
} else if (name == "贴地面积") {
|
||||
measure.areaSurface({
|
||||
unit: formData.value.unitVal,
|
||||
style: {
|
||||
color: "#ffff00"
|
||||
},
|
||||
splitNum: 10, // step插值分割的个数
|
||||
exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
|
||||
});
|
||||
} else if (name == "角度") {
|
||||
measure.angle();
|
||||
} else if (name == "三角测量") {
|
||||
measure.heightTriangle({
|
||||
unit: formData.value.unitVal
|
||||
});
|
||||
} else if (name == "坐标测量") {
|
||||
measure.point();
|
||||
} else if (name == "高度差") {
|
||||
measure.height({
|
||||
unit: formData.value.unitVal
|
||||
});
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log(map, "66666");
|
||||
measure = new mars3d.thing.Measure({
|
||||
label: {
|
||||
color: "#ffffff",
|
||||
font_family: "楷体",
|
||||
font_size: 20,
|
||||
background: false
|
||||
}
|
||||
});
|
||||
map.addThing(measure);
|
||||
// 触发事件：开始分析前
|
||||
measure.on(mars3d.EventType.start, function (e: any) {
|
||||
console.log("开始分析", e);
|
||||
});
|
||||
// 触发事件：异步分析完成后
|
||||
measure.on(mars3d.EventType.end, function (e: any) {
|
||||
console.log(e);
|
||||
formData.value.distanceVal = e.label;
|
||||
// echartShow.value = true;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@mixin flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
// 菜单弹框出现动画
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.main-content {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
padding: 0 !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid #008aff70;
|
||||
border-radius: 2px !important;
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
&-title {
|
||||
@include flex;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 5px 0 10px;
|
||||
background-color: #173147;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
margin-right: auto;
|
||||
}
|
||||
:deep() {
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-menu {
|
||||
width: 90%;
|
||||
height: max-content;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
.menu-item {
|
||||
display: inline-block;
|
||||
width: 75px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
.icon {
|
||||
width: 65px;
|
||||
height: 60px;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.only-modal {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
:deep() {
|
||||
.el-checkbox__inner {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-checkbox__label {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.unit-select {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
span {
|
||||
color: white;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.distance-show {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
span {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.empty-btn {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
:deep() {
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.echarts-content {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
padding: 0 !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid #008aff70;
|
||||
border-radius: 2px !important;
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
}
|
||||
// 图上图形样式
|
||||
:deep() {
|
||||
.marsGreenGradientPnl {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -17,7 +17,7 @@
|
||||
<!-- 菜单操作 -->
|
||||
<div class="menu-operate">
|
||||
<div class="menu-operate-item" v-for="(item, i) in data" :key="i">
|
||||
<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.widget)">
|
||||
<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.name)">
|
||||
<el-icon size="18" color="#fff" v-if="i == 0"><PictureRounded /></el-icon>
|
||||
<el-icon size="18" color="#fff" v-else-if="i == 1"><DocumentCopy /></el-icon>
|
||||
<span class="title">{{ item.name }}</span>
|
||||
@ -30,19 +30,44 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="dropdown">
|
||||
<el-dropdown-item v-for="child in item.children" :key="child.widget" @click="clickMenu"
|
||||
><el-icon size="16" color="#fff"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
|
||||
<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)"
|
||||
><el-icon size="16"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底图菜单操作页面 -->
|
||||
<div class="basic-map" v-if="basicMapShow">
|
||||
<div class="basic-title">
|
||||
<span>底图</span>
|
||||
<el-icon size="16" color="#fff" @click="basicMapShow = false"><Close /></el-icon>
|
||||
</div>
|
||||
<div class="basemap">
|
||||
<div
|
||||
v-for="(item, i) in baseMaps"
|
||||
:key="i"
|
||||
class="basemap-card"
|
||||
:class="{ 'active-card': active === item.id }"
|
||||
@click="changeBaseMaps(item.id)"
|
||||
>
|
||||
<div><img class="icon" :src="`${item.options.icon || 'src/assets/images/Mars3DImg/basemaps/bingAerial.png'}`" /></div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="terrain-show">
|
||||
<span>显示地形</span>
|
||||
<el-switch v-model="chkHasTerrain" @change="terrainOperate" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图层添加 -->
|
||||
<!-- <div class="layer-add">
|
||||
<span class="layer-add-title">图层添加</span>
|
||||
<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
|
||||
<div class="layer-add" v-if="layersShow">
|
||||
<div class="layer-add-title">
|
||||
<span>图层</span>
|
||||
<el-icon size="16" color="#fff" @click="layersShow = false"><Close /></el-icon>
|
||||
</div>
|
||||
<div class="layer-add-tree">
|
||||
<el-tree
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:default-checked-keys="checkedKeys"
|
||||
@ -51,8 +76,12 @@
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图上量算弹框 -->
|
||||
<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
|
||||
</div>
|
||||
|
||||
<!-- <div class="option-list">
|
||||
<span class="option-list-title">功能选择</span>
|
||||
<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
|
||||
@ -159,7 +188,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import { ref, onMounted, onUnmounted, computed, markRaw } from "vue";
|
||||
//引入cesium基础库
|
||||
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
||||
import * as Cesium from "mars3d-cesium";
|
||||
@ -172,6 +201,13 @@ import { ElMessage } from "element-plus";
|
||||
import { datas } from "@/enums/company/SetpsEnum";
|
||||
import { initVue3Popup } from "@/utils/file-util";
|
||||
import QueryPopup from "./components/query-popup.vue";
|
||||
import MapMeasurement from "./components/mapMeasurement.vue";
|
||||
const measurementShow = ref(false); // 图上量算弹框
|
||||
const layersShow = ref(false); // 图层弹框
|
||||
const basicMapShow = ref(false); // 底图弹框
|
||||
const chkHasTerrain = ref(false);
|
||||
const active = ref("");
|
||||
const baseMaps = ref([]);
|
||||
const storageName = "mars3d_queryGaodePOI";
|
||||
const inputVal = ref();
|
||||
const dataSource = ref<any>([]);
|
||||
@ -279,9 +315,9 @@ const data = [
|
||||
name: "工具",
|
||||
icon: "tool",
|
||||
children: [
|
||||
// { name: "图上量算", icon: "ruler", widget: "measure" },
|
||||
// { name: "空间分析", icon: "analysis", widget: "analysis" },
|
||||
{ name: "坐标定位", icon: "local", widget: "location-point" }
|
||||
{ name: "图上量算", icon: "ruler", widget: "measure" },
|
||||
{ name: "空间分析", icon: "analysis", widget: "analysis" }
|
||||
// { name: "坐标定位", icon: "local", widget: "location-point" }
|
||||
// { name: "地区导航", icon: "navigation", widget: "location-region" },
|
||||
// { name: "我的标记", icon: "mark", widget: "addmarker" },
|
||||
// { name: "视角书签", icon: "bookmark", widget: "bookmark" },
|
||||
@ -295,12 +331,30 @@ const data = [
|
||||
]
|
||||
}
|
||||
];
|
||||
const showWidget = (widget: string) => {
|
||||
// 显示地形
|
||||
const terrainOperate = (e: any) => {
|
||||
map.hasTerrain = chkHasTerrain.value;
|
||||
};
|
||||
// 改变底图
|
||||
const changeBaseMaps = (id: string) => {
|
||||
map.basemap = active.value = id;
|
||||
};
|
||||
const showWidget = (name: string) => {
|
||||
if (name == "底图") {
|
||||
basicMapShow.value = true;
|
||||
layersShow.value = false;
|
||||
} else if (name == "图层") {
|
||||
basicMapShow.value = false;
|
||||
layersShow.value = true;
|
||||
}
|
||||
console.log(666);
|
||||
};
|
||||
|
||||
const clickMenu = ({ key }: any) => {
|
||||
console.log(666);
|
||||
const clickMenu = (name: any) => {
|
||||
console.log(name);
|
||||
if (name == "图上量算") {
|
||||
measurementShow.value = true;
|
||||
}
|
||||
};
|
||||
// 获取Canvas对象
|
||||
const getCanvas = (text: any) => {
|
||||
@ -504,6 +558,8 @@ const initMars3d = (option: any) => {
|
||||
return dom;
|
||||
});
|
||||
map.addLayer(graphicLayer);
|
||||
// 获取配置文件底图数据
|
||||
getBasicMaps();
|
||||
// 添加数据
|
||||
// addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]);
|
||||
// addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]);
|
||||
@ -558,6 +614,25 @@ const initMars3d = (option: any) => {
|
||||
// map.addEffect(snowCover);
|
||||
// map.addThing(shadows);
|
||||
};
|
||||
// 获取config.json中的底图配置
|
||||
const getBasicMaps = () => {
|
||||
const layers = {
|
||||
baseMaps: map.getBasemaps(true),
|
||||
hasTerrain: map.hasTerrain
|
||||
};
|
||||
console.log(layers.baseMaps);
|
||||
baseMaps.value = layers.baseMaps.map((m: any) => {
|
||||
if (m.isAdded && m.show) {
|
||||
active.value = m.id;
|
||||
}
|
||||
return {
|
||||
name: m.name,
|
||||
id: m.id,
|
||||
options: markRaw(m.options)
|
||||
};
|
||||
});
|
||||
chkHasTerrain.value = layers.hasTerrain || false;
|
||||
};
|
||||
const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||
position: position,
|
||||
@ -738,11 +813,16 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.map-content {
|
||||
height: calc(100% - 72px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #ccc;
|
||||
overflow: hidden;
|
||||
.mars3d-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -798,8 +878,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
.menu-operate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include flex;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
@ -812,11 +891,11 @@ onUnmounted(() => {
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
&-item {
|
||||
.toolbar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include flex;
|
||||
padding: 6px 12px;
|
||||
height: 100%;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
.title {
|
||||
color: white;
|
||||
margin-left: 5px;
|
||||
@ -827,12 +906,143 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
// 菜单弹框出现动画
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.basic-map {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
padding: 0 !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid #008aff70;
|
||||
border-radius: 2px !important;
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
width: 380px;
|
||||
height: 500px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
.basic-title {
|
||||
@include flex;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 5px 0 10px;
|
||||
background-color: #173147;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
margin-right: auto;
|
||||
}
|
||||
:deep() {
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.basemap {
|
||||
width: 95%;
|
||||
height: calc(100% - 80px);
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
.basemap-card {
|
||||
display: inline-block;
|
||||
width: 75px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
&:hover {
|
||||
color: #337fe5 !important;
|
||||
.icon {
|
||||
border-color: #337fe5;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
border: 1px solid #4db3ff78;
|
||||
width: 75px;
|
||||
height: 70px;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
.active-card {
|
||||
color: #337fe5 !important;
|
||||
.icon {
|
||||
border-color: #337fe5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.terrain-show {
|
||||
@include flex;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
span {
|
||||
color: white;
|
||||
margin: 0 5px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layer-add {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
padding: 0 !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid #008aff70;
|
||||
border-radius: 2px !important;
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
&-title {
|
||||
@include flex;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 5px 0 10px;
|
||||
background-color: #173147;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
margin-right: auto;
|
||||
}
|
||||
:deep() {
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-tree {
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: scroll;
|
||||
:deep() {
|
||||
.el-tree {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
color: white;
|
||||
}
|
||||
.el-tree-node__content:hover {
|
||||
background-color: rgba(0, 138, 255, 0.5);
|
||||
}
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: rgba(0, 138, 255, 0.5);
|
||||
}
|
||||
.el-checkbox__inner {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// :deep() {
|
||||
// .el-dropdown__popper.el-popper {
|
||||
// border: 1px solid rgba(23, 49, 71, 0.8);
|
||||
// }
|
||||
// }
|
||||
// .dropdown {
|
||||
// background-color: rgba(23, 49, 71, 0.8) !important;
|
||||
// // border: 1px solid rgba(23, 49, 71, 0.8) !important;
|
||||
@ -845,19 +1055,6 @@ onUnmounted(() => {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.layer-add {
|
||||
width: 200px;
|
||||
height: 350px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
&-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.option-list {
|
||||
width: 200px;
|
||||
height: 350px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user