<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>
|
</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
|
}
|
</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;
|
}
|
}
|
}
|
}
|
}
|
|
: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>
|
今日情况
|
航线展示：照片计算 （已完成）
|
