<template>
|
<div
|
class="expiort"
|
v-drag="true"
|
>
|
<div class="leftMenu">
|
<div class="menuTitle">地图设计</div>
|
<div class="menmuContent">
|
<div class="contentTitle">
|
<div class="contentImg"></div>
|
图件信息
|
</div>
|
<div class="contentBox">
|
<p>地图名称</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.name"></el-input>
|
</div>
|
<p>制作日期</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.date"></el-input>
|
</div>
|
<p>制作单位</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.dep"></el-input>
|
</div>
|
</div>
|
<div class="contentTitle">
|
<div class="contentImg"></div>
|
地图要素
|
</div>
|
<div class="contentBox">
|
<p>指北针</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.name"></el-input>
|
</div>
|
<p>比例尺</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.date"></el-input>
|
</div>
|
<p>图例</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.dep"></el-input>
|
</div>
|
</div>
|
<div class="contentTitle">
|
<div class="contentImg"></div>
|
打印设置
|
</div>
|
<div class="contentBox">
|
<p>DPI</p>
|
<div class="contentInput">
|
<el-input v-model="exportFrom.name"></el-input>
|
</div>
|
<p>导出格式</p>
|
<div class="contentInput">
|
<el-select
|
style="width: 100%;"
|
v-model="exportFrom.date"
|
>
|
<el-option
|
label=".PNG"
|
value="png"
|
></el-option>
|
</el-select>
|
</div>
|
<p>纸张设置</p>
|
<div class="contentInput">
|
<el-select
|
style="width: 100%;"
|
v-model="exportFrom.date"
|
>
|
<el-option
|
label="A4"
|
value="A4"
|
></el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<div class="menuButton">
|
<el-button
|
size="small"
|
type="primary"
|
>确认</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
class="delbtn"
|
@click="editExport"
|
>取消</el-button>
|
</div>
|
</div>
|
<div class="rightMap">
|
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
|
const emits = defineEmits(["SETexportMap"]);
|
const exportFrom = ref({
|
name: "",
|
date: "",
|
dep: "",
|
});
|
const editExport = () => {
|
emits("SETexportMap", false);
|
};
|
</script>
|
|
|
|
<style lang="less" scoped>
|
.expiort {
|
width: 1227px;
|
height: 783px;
|
display: flex;
|
position: absolute;
|
top: 50%;
|
left: 20%;
|
transform: translateX(-50%);
|
transform: translateY(-50%);
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
}
|
.leftMenu {
|
width: 358px;
|
height: 100%;
|
border-right: 1px solid #d6e4ff;
|
display: flex;
|
flex-direction: column;
|
}
|
.menmuContent {
|
flex: 1;
|
width: 100%;
|
margin-top: 2px;
|
overflow: auto;
|
|
.contentTitle {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
height: 42px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background: #0e151f;
|
margin: 2px 0px;
|
}
|
.contentBox {
|
margin: 5px 7px;
|
width: calc(100% - 76px);
|
|
background: #1e2a3d;
|
padding: 14px 23px 5px 39px;
|
p {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
line-height: 9px;
|
margin-bottom: 10px;
|
}
|
.contentInput {
|
margin-bottom: 10px;
|
}
|
}
|
|
.contentImg {
|
width: 22px;
|
height: 22px;
|
background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
|
margin-top: 9px;
|
margin-left: 16px;
|
margin-right: 9px;
|
}
|
}
|
.menuButton {
|
padding: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.el-button {
|
height: 37px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 16px;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
.el-button:hover {
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
|
.menuTitle {
|
width: calc(100% - 30px);
|
height: 42px;
|
background: #0e151f;
|
|
font-size: 24px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
padding-left: 28px;
|
}
|
::-webkit-scrollbar {
|
width: 10px;
|
}
|
/* Change the scrollbar background color here */
|
::-webkit-scrollbar-track {
|
background-color: rgba(0, 0, 0, 0);
|
}
|
/* Change the scrollbar button color and roundedness here */
|
::-webkit-scrollbar-thumb {
|
background-color: rgba(104, 156, 255, 0.2);
|
border-radius: 0.5rem;
|
}
|
</style>
|
