882 lines
24 KiB
Vue
882 lines
24 KiB
Vue
<template>
|
|
<div class="airPointSetup uav_box">
|
|
<div class="header">
|
|
<div class="logo">
|
|
<img class="title" src="../../images/airsetup.png" alt="" />
|
|
<div class="item">
|
|
<div class="back com" @click="back" title="返回"></div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="save com" @click="save" title="保存"></div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="switch com" @click="senior" title="高级设置"></div>
|
|
</div>
|
|
<!-- <el-tooltip class="item" effect="dark" content="返回" placement="top">
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="保存" placement="top">
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="高级设置" placement="top">
|
|
</el-tooltip> -->
|
|
</div>
|
|
</div>
|
|
<div class="title">
|
|
<img src="../../images/title.png" alt="" />
|
|
<span>航点列表</span>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<!-- 航线信息 -->
|
|
<div class="info">
|
|
<el-row>
|
|
<el-col :span="10">
|
|
<div class="info_item">
|
|
<div>航线长度</div>
|
|
<div>{{ length }} m</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<div class="info_item">
|
|
<div>航点</div>
|
|
<div>{{ points.length }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<div class="info_item">
|
|
<div>照片</div>
|
|
<div>{{ getPhotoNum }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<!-- 航点列表 -->
|
|
<div class="content">
|
|
<div v-for="(item, index) in points" :key="index" @click="select(index, item)" class="point_item"
|
|
:class="{ active: selectId == index }">
|
|
<div class="left">
|
|
<img src="../../images/point.png" alt="" />
|
|
<span style="margin: 0 5px;">{{ index + 1 }}</span>
|
|
</div>
|
|
<div v-if="item.actions.length > 0" class="middle">
|
|
<div v-for="(item1, index1) in item.actions" :key="index1" @click.stop="openSet(index, index1, item1)"
|
|
style="display: inline-block;margin: 0 3px;cursor: pointer;">
|
|
<svg-icon :icon-class="item1.svg" style="width: 16px;height: 16px;" :style="selectIndexS == index1 && selectIndexF == index
|
|
? 'fill:rgba(0, 255, 255, 1)'
|
|
: 'fill:#fff'
|
|
"></svg-icon>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<el-dropdown @command="handleDropMenu" trigger="click">
|
|
<div class="more_icon"></div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item :command="beforeHandleDropMenu(drop.value, item)" v-for="drop in dropdownList"
|
|
:key="drop.value">{{ drop.label }}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 操作仓 -->
|
|
<div v-show="keywordShow" class="keyword flex">
|
|
<div class="left mr20">
|
|
<div class="top">
|
|
<div class="flex space_between">
|
|
<div class="img_box">
|
|
<img src="../../images/left.png" alt="" />
|
|
</div>
|
|
<div class="img_box">
|
|
<img style="width: 16px;height: 20px;" src="../../images/top.png" alt="" />
|
|
</div>
|
|
<div class="img_box">
|
|
<img src="../../images/right.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="flex space_between ">
|
|
<div class="item_bottom" @mousedown="towardsLeft">Q</div>
|
|
<div class="item_bottom" @mousedown="up">W</div>
|
|
<div class="item_bottom" @mousedown="towardsRight">E</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="flex space_between ">
|
|
<div class="img_box">
|
|
<img src="../../images/left_f.png" alt="" />
|
|
</div>
|
|
<div class="img_box">
|
|
<img src="../../images/after_f.png" alt="" />
|
|
</div>
|
|
<div class="img_box">
|
|
<img src="../../images/right_f.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="flex space_between ">
|
|
<div class="item_bottom" @mousedown="left">A</div>
|
|
<div class="item_bottom" @mousedown="after">S</div>
|
|
<div class="item_bottom" @mousedown="right">D</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle mr20">
|
|
<div class="middle_item">
|
|
<div class="titel">经度</div>
|
|
<div class="value">106.25467890 °</div>
|
|
</div>
|
|
<div class="middle_item">
|
|
<div class="titel">维度</div>
|
|
<div class="value">36.25467890 °</div>
|
|
</div>
|
|
<div class="middle_item">
|
|
<div class="titel">高度</div>
|
|
<div class="value">90 m</div>
|
|
</div>
|
|
</div>
|
|
<div class="right flex">
|
|
<img src="../../images/top_r.png" alt="" />
|
|
<div class="item_right">C</div>
|
|
<div class="alt flex space_between">
|
|
<div class="f30">96.3</div>
|
|
<div class="f14 text_algin_right">
|
|
<div>ALT</div>
|
|
<div>m</div>
|
|
</div>
|
|
</div>
|
|
<div class="f12 asl text_algin_right">581 ASL</div>
|
|
<img src="../../images/bottom_r.png" alt="" />
|
|
<div class="item_right">Z</div>
|
|
</div>
|
|
</div>
|
|
<!-- 动作 -->
|
|
<div class="control">
|
|
<div class="right">
|
|
<div v-if="points.length > 0" class="control_item" @click="addPoint">
|
|
<span>新增航点</span>
|
|
<img src="../../images/control_add.png" alt="" />
|
|
</div>
|
|
<div class="control_item" @click="more">
|
|
<span>更多</span>
|
|
<img src="../../images/control_more.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div v-show="leftShow" class="left">
|
|
<div class="control_item" v-for="item in controls" :key="item.label" @click="onClick(item)">
|
|
<span>{{ item.label }}</span>
|
|
<img :src="item.url" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 动作设置 -->
|
|
<div v-show="setupShow" class="setup">
|
|
<div class="setup_header flex space_between">
|
|
<div class="setup_header_left">
|
|
<svg-icon icon-class="camera" style="width: 20px;height: 16px;vertical-align: middle;"></svg-icon>
|
|
<span class="f14 header_title">{{ selectObj.label }}</span>
|
|
</div>
|
|
<div class="setup_header_right flex ai_center">
|
|
<svg-icon icon-class="left" style="width: 18px;height: 10px;"></svg-icon>
|
|
{{ selectIndexF + 1 }}-{{ selectIndexS + 1 }}
|
|
<svg-icon icon-class="right" style="width: 18px;height: 10px;color: red;"></svg-icon>
|
|
<div class="del" @click="delAction"></div>
|
|
</div>
|
|
<div class="close" @click="closeSetup"></div>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<!-- 开始录像 -->
|
|
<div v-if="selectObj.svg == 'start_record'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>DJI_YYYYMMDDhhmm_XXX_</div>
|
|
<div v-if="!selectObj.params.fileSuffix" class="edit" @click="inputShow = true, inputDiv = true"></div>
|
|
</div>
|
|
<div v-if="inputShow" class="flex wuyongBox">
|
|
<el-input v-if="inputDiv" v-model="selectObj.params.fileSuffix"></el-input>
|
|
<div style="flex: 1;" v-if="!inputDiv">{{ selectObj.params.fileSuffix }}</div>
|
|
<i class="el-icon-edit wuyong-icon" v-if="!inputDiv" @click="inputDiv = true"></i>
|
|
<i class="el-icon-check wuyong-icon" v-if="inputDiv" style="color: green;" @click="saveSuucess"></i>
|
|
<i class="el-icon-close wuyong-icon" v-if="inputDiv" style="color: red;" @click="deleteSuucess"></i>
|
|
</div>
|
|
<div class="flex mt15 space_between">
|
|
<div class="btns">
|
|
<el-checkbox-group :disabled="!selectObj.params.useGlobalPayloadLensIndex" v-model="checkboxGroup1" :min="1"
|
|
:max="2" @change="changeGroup">
|
|
<el-checkbox-button v-for="item in pohoto" :label="item.value" :key="item.value">{{ item.label
|
|
}}</el-checkbox-button>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<el-button size="small" :class="{ bugen: selectObj.params.useGlobalPayloadLensIndex == 1 }"
|
|
@click="genliuhangxian">
|
|
<svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 停止录像 -->
|
|
<!-- 开始等时隔拍照 -->
|
|
<div v-if="selectObj.svg == 'interval_time'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>间隔时间</div>
|
|
</div>
|
|
<div>
|
|
<plusReduce :defValue="selectObj.actionTrigger.actionTriggerParam" @value="interval_distance" :max="30"
|
|
:min="1">
|
|
</plusReduce>
|
|
</div>
|
|
<div class="flex mt15 space_between">
|
|
<div>
|
|
<el-button size="small" :disabled="pzDisabled">可见光</el-button>
|
|
<el-button size="small" :disabled="pzDisabled">红外照片</el-button>
|
|
</div>
|
|
<el-button size="small" :class="{ bugen: selectObj.params.useGlobalPayloadLensIndex == 1 }">
|
|
<svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 拍照 -->
|
|
<div v-if="selectObj.svg == 'take_photo'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>DJI_YYYYMMDDhhmm_XXX_</div>
|
|
<div v-if="!selectObj.params.fileSuffix" class="edit" @click="inputShow = true, inputDiv = true"></div>
|
|
</div>
|
|
<div v-if="inputShow" class="flex wuyongBox">
|
|
<el-input v-if="inputDiv" v-model="selectObj.params.fileSuffix"></el-input>
|
|
<div style="flex: 1;" v-if="!inputDiv">{{ selectObj.params.fileSuffix }}</div>
|
|
<i class="el-icon-edit wuyong-icon" v-if="!inputDiv" @click="inputDiv = true"></i>
|
|
<i class="el-icon-check wuyong-icon" v-if="inputDiv" style="color: green;" @click="saveSuucess"></i>
|
|
<i class="el-icon-close wuyong-icon" v-if="inputDiv" style="color: red;" @click="deleteSuucess"></i>
|
|
</div>
|
|
<div class="flex mt15 space_between">
|
|
<div class="btnss">
|
|
<el-checkbox-group :disabled="!selectObj.params.useGlobalPayloadLensIndex" v-model="checkboxGroup2" :min="1"
|
|
@change="changeGroup1">
|
|
<el-checkbox-button v-for="item in pohoto1" :label="item.value" :key="item.value">{{ item.label
|
|
}}</el-checkbox-button>
|
|
</el-checkbox-group>
|
|
<!-- <el-button size="small" :disabled="pzDisabled">可见光</el-button>
|
|
<el-button size="small" :disabled="pzDisabled">红外照片</el-button> -->
|
|
</div>
|
|
<el-button size="small" :class="{ bugen: selectObj.params.useGlobalPayloadLensIndex == 1 }"
|
|
@click="genliuhangxian">
|
|
<svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 开始等距隔拍照 -->
|
|
<div v-if="selectObj.svg == 'interval_distance'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>间隔时间</div>
|
|
</div>
|
|
<div>
|
|
<plusReduce @value="interval_distance" :defValue="selectObj.actionTrigger.actionTriggerParam" unit="m"
|
|
:max="100" :min="1"></plusReduce>
|
|
</div>
|
|
<div class="flex mt15 space_between">
|
|
<div>
|
|
<el-button size="small" :disabled="pzDisabled">可见光</el-button>
|
|
<el-button size="small" :disabled="pzDisabled">红外照片</el-button>
|
|
</div>
|
|
<el-button size="small" @click="pzDisabled = !pzDisabled">
|
|
<svg-icon icon-class="fly" style="width: 18px;height: 10px;"></svg-icon>跟随航线</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 悬停 -->
|
|
<div v-if="selectObj.svg == 'hover'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>间隔时间</div>
|
|
</div>
|
|
<div>
|
|
<plusReduce @value="interval_distance" :defValue="Number(selectObj.params.hoverTime)" :max="1800" :min="1">
|
|
</plusReduce>
|
|
</div>
|
|
</div>
|
|
<!-- 飞行器偏航角 -->
|
|
<div v-if="selectObj.svg == 'drone_yaw'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>飞行器偏航角</div>
|
|
<div class="lan">{{ selectObj.params.aircraftHeading }}°</div>
|
|
</div>
|
|
<div>
|
|
<myProgress :defValue="Number(selectObj.params.aircraftHeading)" @value="hpr" :sliderMax="180"
|
|
:sliderMin="-180">
|
|
</myProgress>
|
|
</div>
|
|
<div class="flex mt15 space_between"></div>
|
|
</div>
|
|
<!-- 云台俯仰角 -->
|
|
<div v-if="selectObj.svg == 'action_gimbal_pitch'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>云台俯仰角</div>
|
|
<div class="lan">{{ selectObj.params.gimbalPitchRotateAngle }}°</div>
|
|
</div>
|
|
<div>
|
|
<myProgress :defValue="Number(selectObj.params.gimbalPitchRotateAngle)" @value="hpr" :sliderMax="30"
|
|
:sliderMin="-90"></myProgress>
|
|
</div>
|
|
<div class="flex mt15 space_between"></div>
|
|
</div>
|
|
<!-- 变焦 camera_zoom -->
|
|
<div v-if="selectObj.svg == 'camera_zoom'" class="setup_content">
|
|
<div class="flex space_between">
|
|
<div>变焦</div>
|
|
<div class="lan">
|
|
{{ Number(selectObj.params.focalLength) / 24 }}
|
|
<span style="font-size: 24px;color: #fff;">X</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<myProgress :defValue="Number(selectObj.params.focalLength) / 24" @value="hpr" :sliderMax="56" :sliderMin="1"
|
|
unit="X"></myProgress>
|
|
</div>
|
|
<div class="flex mt15 space_between"></div>
|
|
</div>
|
|
</div>
|
|
<div id="tongbuEarth"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import plusReduce from "../component/plusReduce/index.vue";
|
|
import myProgress from "../component/progress/index.vue";
|
|
import mixin from "./js/pointSetup";
|
|
export default {
|
|
name: "airSetup",
|
|
components: { plusReduce, myProgress },
|
|
props: {
|
|
routeLine: {
|
|
type: Object,
|
|
default: () => { },
|
|
},
|
|
},
|
|
mixins: [mixin],
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.airPointSetup {
|
|
color: #fff;
|
|
left: 20px;
|
|
|
|
.header {
|
|
.logo {
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
.title {
|
|
width: 380px;
|
|
height: 32px;
|
|
}
|
|
|
|
.com {
|
|
position: absolute;
|
|
top: 5px;
|
|
width: 16px;
|
|
height: 16px;
|
|
z-index: 20;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.back {
|
|
right: 70px;
|
|
background: url("../../images/back.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.back:hover {
|
|
background: url("../../images/back_h.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.save {
|
|
right: 40px;
|
|
background: url("../../images/save.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.save:hover {
|
|
background: url("../../images/saveh.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.switch {
|
|
right: 10px;
|
|
background: url("../../images/switch.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.switch:hover {
|
|
background: url("../../images/switchh.png");
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
.el-input__inner {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
height: 32px;
|
|
border-color: rgba(0, 255, 255, 0.5);
|
|
}
|
|
|
|
.date {
|
|
height: 32px;
|
|
color: #fff;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.arrow {
|
|
flex-direction: column;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
height: 24px;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 16px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
.info_item {
|
|
div {
|
|
text-align: center;
|
|
line-height: 24px;
|
|
}
|
|
|
|
div:last-child {
|
|
font-family: "ddin";
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
height: calc(100% - 154px);
|
|
color: #fff;
|
|
overflow: auto;
|
|
padding-right: 5px;
|
|
|
|
.point_item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-height: 40px;
|
|
// margin-bottom: 10px;
|
|
border-bottom: 1px solid rgba(204, 204, 204, 0.2);
|
|
background: transparent;
|
|
|
|
.left {
|
|
min-width: 50px;
|
|
margin-left: 15px;
|
|
|
|
img {
|
|
width: 12px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
flex: 1;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 12px;
|
|
height: 16px;
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
.more_icon {
|
|
height: 20px;
|
|
width: 20px;
|
|
margin: 0 6px 0 10px;
|
|
cursor: pointer;
|
|
background: url("../../images/more1.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.more_icon:hover {
|
|
background: url("../../images/more2.png");
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: linear-gradient(180deg,
|
|
rgba(0, 255, 255, 0) 0%,
|
|
rgba(0, 255, 255, 0.5) 100%);
|
|
}
|
|
|
|
.point_item:hover {
|
|
background: linear-gradient(180deg,
|
|
rgba(0, 255, 255, 0) 0%,
|
|
rgba(0, 255, 255, 0.5) 100%);
|
|
}
|
|
}
|
|
|
|
/* 修改垂直滚动条 */
|
|
.content::-webkit-scrollbar {
|
|
width: 8px;
|
|
/* 修改宽度 */
|
|
}
|
|
|
|
/* 修改滚动条轨道背景色 */
|
|
.content::-webkit-scrollbar-track {
|
|
background-color: rgba(0, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* 修改滚动条滑块颜色 */
|
|
.content::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 255, 255, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.el-divider--horizontal {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.el-divider {
|
|
background: rgba(204, 204, 204, 0.2);
|
|
}
|
|
|
|
.text_align_center {
|
|
text-align: center;
|
|
}
|
|
|
|
.keyword {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 6%;
|
|
transform: translate(-50%, -8%);
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.top,
|
|
.bottom {
|
|
width: 157px;
|
|
height: 80px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
|
|
.img_box {
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
.item_bottom {
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 2px;
|
|
background: rgba(60, 60, 60, 1);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
.img_box:nth-child(1) {
|
|
img {
|
|
width: 12px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
.img_box:nth-child(2) {
|
|
img {
|
|
width: 18px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
.img_box:nth-child(3) {
|
|
img {
|
|
width: 12px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
min-width: 145px;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.middle_item {
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: rgba(230, 247, 255, 1);
|
|
}
|
|
|
|
.value {
|
|
font-family: "ddin";
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
min-width: 120px;
|
|
border-radius: 8px;
|
|
padding: 10px 16px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
img {
|
|
width: 16px;
|
|
height: 20px;
|
|
}
|
|
|
|
.item_right {
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 2px;
|
|
background: rgba(60, 60, 60, 1);
|
|
text-align: center;
|
|
}
|
|
|
|
.alt,
|
|
.asl {
|
|
font-family: "ddin";
|
|
}
|
|
|
|
.alt {
|
|
color: rgba(0, 255, 255, 1);
|
|
}
|
|
|
|
.asl {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.middle,
|
|
.right {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.control {
|
|
position: fixed;
|
|
right: 2%;
|
|
top: 35%;
|
|
|
|
// background-color: transparent;
|
|
.control_item {
|
|
text-align: right;
|
|
margin-bottom: 20px;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
/* 文字阴影，模拟边框效果 */
|
|
}
|
|
|
|
img {
|
|
width: 30px;
|
|
height: 30px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.left {
|
|
position: absolute;
|
|
right: 120px;
|
|
top: 0;
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
// 设置
|
|
.setup {
|
|
position: fixed;
|
|
top: 10%;
|
|
right: 5%;
|
|
min-width: 400px;
|
|
min-height: 100px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 255, 255, 0.5);
|
|
padding: 30px 12px 12px 16px;
|
|
|
|
.close {
|
|
width: 15px;
|
|
height: 15px;
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 12px;
|
|
cursor: pointer;
|
|
background: url("../../images/close1.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.setup_header_left {
|
|
.header_title {
|
|
font-weight: 500;
|
|
color: rgba(0, 255, 255, 1);
|
|
}
|
|
}
|
|
|
|
.setup_header_right {
|
|
.del {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: url("../../images/del.png");
|
|
background-size: cover;
|
|
cursor: pointer;
|
|
margin: 0 0 0 8px;
|
|
}
|
|
|
|
.del:hover {
|
|
background: url("../../images/delh.png");
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
.setup_content {
|
|
margin: 10px 0;
|
|
|
|
.wuyongBox {
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
|
|
.wuyong-icon {
|
|
font-weight: bold;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.bugen {
|
|
// background: rgba(0, 255, 255, 0.2) !important;
|
|
// color: rgba(0, 255, 255, 0.8) !important;
|
|
// border: 1px solid rgba(0, 255, 255, 0.5) !important;
|
|
background: rgb(255 255 255 / 20%) !important;
|
|
color: rgb(255 255 255 / 80%) !important;
|
|
border: 1px solid rgb(107 107 107 / 50%) !important;
|
|
}
|
|
|
|
.el-checkbox-group {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-checkbox-button:last-child .el-checkbox-button__inner,
|
|
.el-checkbox-button:first-child .el-checkbox-button__inner {
|
|
border-radius: 5px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
|
background: rgba(0, 255, 255, 0.2);
|
|
border: 1px solid rgba(0, 255, 255, 1);
|
|
color: rgba(0, 255, 255, 1);
|
|
|
|
}
|
|
|
|
.el-checkbox-button__inner {
|
|
// background: rgba(0, 255, 255, 0.2);
|
|
// color: rgba(0, 255, 255, 0.8);
|
|
// border: 1px solid rgba(0, 255, 255, 0.5);
|
|
background: rgb(255 255 255 / 20%);
|
|
color: rgb(255 255 255 / 80%);
|
|
border: 1px solid rgb(107 107 107 / 50%);
|
|
margin-right: 8px;
|
|
border-radius: 5px;
|
|
padding: 8px 15px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-input__inner {
|
|
background-color: transparent;
|
|
border-color: aqua;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
}
|
|
|
|
.edit {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: url("../../images/edit.png");
|
|
background-size: cover;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.el-button.is-disabled,
|
|
.el-button.is-disabled:focus,
|
|
.el-button.is-disabled:hover {
|
|
background: rgba(0, 255, 255, 0.2);
|
|
border: 1px solid rgba(0, 255, 255, 0.5);
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.el-button {
|
|
background: rgba(0, 255, 255, 0.2);
|
|
border: 1px solid rgba(0, 255, 255, 1);
|
|
color: rgba(0, 255, 255, 1);
|
|
}
|
|
|
|
.lan {
|
|
color: rgba(0, 255, 255, 1);
|
|
font-size: 30px;
|
|
font-family: "ddin";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-dropdown-menu {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(0, 255, 255, 0.5);
|
|
color: #fff;
|
|
|
|
.el-dropdown-menu__item:focus,
|
|
.el-dropdown-menu__item:not(.is-disabled):hover {
|
|
color: rgba(0, 255, 255, 1);
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.el-popper .popper__arrow,
|
|
.el-popper .popper__arrow::after {
|
|
display: none;
|
|
}
|
|
|
|
#tongbuEarth {
|
|
width: 300px;
|
|
height: 200px;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: aqua;
|
|
}
|
|
</style>
|