<template>
|
<div class="setting">
|
<a-popover
|
placement="bottom"
|
trigger="click"
|
:getPopupContainer="(triggerNode: any) => triggerNode.parentNode">
|
<template #content>
|
<div class="setting-content">
|
<div class="start-point common">
|
<div class="title">起飞点</div>
|
</div>
|
<div class="photo-setting common">
|
<div class="title">拍照设置</div>
|
<ul class="select-box">
|
<li class="select-item">广角照片</li>
|
<li class="select-item">变焦照片</li>
|
</ul>
|
<div class="auto-low-light">
|
<div class="title">自动低光</div>
|
<a-switch />
|
</div>
|
</div>
|
<div class="height-mode common">
|
<div class="title">航线高度模式</div>
|
<div class="mode-box">
|
<a-radio-group button-style="solid">
|
<a-radio-button value="a">绝对高度</a-radio-button>
|
<a-radio-button value="b">相对起飞高度</a-radio-button>
|
<a-radio-button value="c">相对地面高度</a-radio-button>
|
</a-radio-group>
|
</div>
|
</div>
|
</div>
|
</template>
|
<slot name="show"></slot>
|
</a-popover>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
const getResource = (name: string) => {
|
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
|
}
|
|
const waylineSetting = reactive({})
|
|
</script>
|
|
<style lang="scss" scoped>
|
.setting {
|
margin-left: auto;
|
.setting-content {
|
width: 390px;
|
height: 50vh;
|
color: #fff;
|
.common {
|
background-color: #232323;
|
border-radius: 10px;
|
padding: 15px;
|
margin-bottom: 16px;
|
.title {
|
font-weight: bold;
|
}
|
&:last-child {
|
margin: 0;
|
}
|
}
|
.photo-setting {
|
.select-box {
|
padding: 0;
|
display: flex;
|
margin-top: 10px;
|
li {
|
list-style-type: none;
|
padding: 3px 15px;
|
margin-left: 10px;
|
background-color: #409eff;
|
border-radius: 9999px;
|
font-weight: bold;
|
cursor: pointer;
|
&:first-child {
|
margin: 0;
|
}
|
}
|
}
|
.auto-low-light {
|
display: flex;
|
.title {
|
font-weight: bold;
|
margin-right: auto;
|
}
|
}
|
}
|
.height-mode {
|
.mode-box {
|
margin-top: 10px;
|
:deep() {
|
.ant-radio-group {
|
display: flex;
|
.ant-radio-button-wrapper {
|
flex: 1;
|
text-align: center;
|
background-color: #3c3c3c;
|
border: 1px solid #101010;
|
color: #fff;
|
font-weight: bold;
|
border: 0;
|
&::before {
|
background-color: #101010;
|
}
|
&-checked {
|
background-color: #409eff !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
:deep() {
|
.ant-popover-content {
|
.ant-popover-arrow,
|
.ant-popover-inner {
|
background-color: #101010;
|
}
|
.ant-popover-arrow {
|
border-top-color: #101010 !important;
|
border-left-color: #101010 !important;
|
}
|
.ant-popover-inner {
|
border-radius: 15px;
|
.ant-popover-inner-content {
|
padding: 16px;
|
}
|
}
|
}
|
}
|
</style>
|
