<template>
|
<div
|
v-drag
|
class="plottingBox"
|
>
|
<div class="plottingTitle">
|
<div class="tileLeft">
|
<div class="titleImg">
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">标绘查询</div>
|
</div>
|
</div>
|
<div class="plotting_content">
|
<div class="plotting_content_btn">
|
<span class="plotting_content_title">标绘工具</span>
|
<div class="plotting_btn">
|
<div class="btn_box_d btn_box"></div>
|
<div class="btn_box_x btn_box"></div>
|
<div class="btn_box_m btn_box"></div>
|
</div>
|
</div>
|
<div class="plotting_list">
|
<div
|
class="plotting_list_tr"
|
v-for="(item, i) in list"
|
:key="i"
|
>
|
<div class="plotting_list_tr_name">
|
<img
|
:src="require(`../../assets/img/${item.icon}`)"
|
class="ico"
|
alt=""
|
/><span>{{ item.name }}</span>
|
</div>
|
<div class="plotting_list_tr_btn">
|
<div class="tr_btn dw"></div>
|
<div class="tr_btn sc"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
let list = ref([
|
{
|
name: "Path #9",
|
type: "poi",
|
icon: "d.png",
|
},
|
{
|
name: "路径 #1",
|
type: "line",
|
icon: "x.png",
|
},
|
{
|
name: "多边形 #5",
|
type: "cover",
|
icon: "m.png",
|
},
|
]);
|
</script>
|
|
<style lang="less" scoped>
|
.plottingBox {
|
width: 359px;
|
height: 680px;
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
.plottingTitle {
|
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);
|
}
|
}
|
.plotting_content {
|
margin-top: 3px;
|
|
.plotting_content_title {
|
font-size: 20px;
|
font-weight: 300;
|
color: #ffffff;
|
}
|
.plotting_content_btn {
|
height: 42px;
|
background: #0d131d;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 25px;
|
.plotting_btn {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.btn_box {
|
cursor: pointer;
|
margin-right: 18px;
|
}
|
.btn_box_d {
|
width: 17px;
|
height: 18px;
|
background: url("../../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_d:hover {
|
background: url("../../assets/img/dl.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_x {
|
width: 26px;
|
height: 27px;
|
background: url("../../assets/img/x.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_x:hover {
|
background: url("../../assets/img/xl.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_m {
|
width: 22px;
|
height: 20px;
|
background: url("../../assets/img/m.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-right: 0;
|
}
|
.btn_box_m:hover {
|
background: url("../../assets/img/ml.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
.plotting_list_tr {
|
height: 42px;
|
margin-top: 10px;
|
background: #0d131d;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 25px;
|
.plotting_list_tr_name {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.ico {
|
width: 26px;
|
height: 27px;
|
}
|
span {
|
font-size: 16px;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 10px;
|
}
|
}
|
.plotting_list_tr_btn {
|
display: flex;
|
align-items: center;
|
.tr_btn {
|
width: 16px;
|
height: 15px;
|
cursor: pointer;
|
}
|
.dw {
|
background: url("../../assets/img/dw.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-right: 18px;
|
}
|
.sc {
|
background: url("../../assets/img/sc.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
