<template>
|
<div class="control-console">
|
<div class="control" :class="isShowKzBtn?'actived-blue':''" @click="authenticationPwd">
|
<img src="@/assets/images/open-close.png" />
|
</div>
|
<div class="control-left" v-show="isShowKzBtn">
|
<div class="top" @touchstart="handlePublish({ x: SPEED })"><div class="xq">向前</div></div>
|
<div class="left" @touchstart="handlePublish({ y: -SPEED })"><div class="xz">向左</div></div>
|
<div class="bottom" @touchstart="handlePublish({ x: -SPEED })"><div class="xx">向下</div></div>
|
<div class="right" @touchstart="handlePublish({ y: SPEED })"><div class="xy">向右</div></div>
|
</div>
|
<div class="control-right" v-show="isShowKzBtn">
|
<div class="top" @touchstart="handlePublish({ h: HEIGHT })"><div class="xq">上升</div></div>
|
<div class="left" @touchstart="handlePublish({ w: -W_SPEED })"><div class="xz">左转</div></div>
|
<div class="bottom" @touchstart="handlePublish({ h: -HEIGHT })"><div class="xx">下降</div></div>
|
<div class="right" @touchstart="handlePublish({ w: W_SPEED })" ><div class="xy">右转</div></div>
|
</div>
|
<el-dialog
|
v-model="dialogVisible"
|
title="提示"
|
width="500">
|
<span>确认是否接管?</span>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="sureJg">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
|
import { useMyStore } from '@/store'
|
import {exitController,droneController,returnHomeCancel,returnHome} from '@/api/drone/drc'
|
import { useConnectMqtt } from '@/utils/mqtt/connect-mqtt';
|
import { useMqtt, DeviceTopicInfo } from '@/utils/mqtt/index'
|
import { DRC_METHOD } from '@/types/drc'
|
|
|
const props = defineProps({
|
sn: {
|
type: String,
|
required: true,
|
},
|
osdVisible: {
|
type: Object,
|
required: true,
|
}
|
});
|
|
const store = useMyStore()
|
// 显示控制和退出控制状态按钮
|
let isShowKzBtn = ref(false);
|
// 是否接管提示
|
let dialogVisible = ref(false);
|
// 面板提示
|
let hasPermission = ref(false);
|
// 是否返航状态
|
let nowInReturnStatus = ref(false);
|
// 返航状态点击
|
let nowInReturnStatusClick = ref(false)
|
// 控制状态
|
let flightMode = ref('自动控制')
|
|
// 控制无人机速度
|
let droneSeepd = ref(5);
|
const SPEED = ref(droneSeepd.value || 5) // check
|
const HEIGHT = ref(5) // check
|
const W_SPEED = ref(20) // 机头角速度
|
|
// A S D....按键
|
let deviceTopicInfo: DeviceTopicInfo = reactive({
|
sn: props.sn || '',
|
pubTopic: '',
|
subTopic: ''
|
})
|
|
// 连接或断开drc
|
useConnectMqtt()
|
|
// const clientId = computed(() => {
|
// return localStorage.getItem('clientId') //store.state.clientId
|
// });
|
let clientId = ref(localStorage.getItem('clientId'))
|
|
// {"0":"待机","1":"起飞准备","2":"起飞准备完毕","3":"手动飞行","4":"自动起飞","5":"航线飞行","6":"全景拍照","7":"智能跟随","8":"ADS-B 躲避","9":"自动返航","10":"自动降落","11":"强制降落","12":"三桨叶降落","13":"升级中","14":"未连接","15":"APAS","16":"虚拟摇杆状态","17":"指令飞行","18":"空中 RTK 收敛模式","19":"机场选址中"}
|
watch(() => store.state.wsMessage, (newValue, oldValue) => {
|
// console.log('监控值', newValue.mode_code)
|
hasPermission.value = false
|
if (newValue.mode_code == '5') {
|
hasPermission.value = true
|
}
|
if (newValue.mode_code && (newValue.mode_code == 9 || newValue.mode_code == 10) && !nowInReturnStatusClick.value) {
|
nowInReturnStatus.value = true
|
flightMode.value = '自动控制'
|
} else if (newValue.mode_code && (newValue.mode_code == 9 || newValue.mode_code == 10) && nowInReturnStatusClick.value) {
|
// 没电、强制返航
|
nowInReturnStatus.value = true
|
nowInReturnStatusClick.value = false
|
}
|
}, {deep:true})
|
|
// 进行控制
|
const enterFlightControl = () => {
|
droneController({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
|
if (result.code != 0) { return }
|
if (result.data.sub && result.data.sub?.length > 0) {
|
deviceTopicInfo.subTopic = result.data.sub[0]
|
}
|
if (result.data.pub && result.data.pub?.length > 0) {
|
deviceTopicInfo.pubTopic = result.data.pub[0]
|
}
|
// 接管成功之后再显示
|
isShowKzBtn.value = true
|
flightMode.value = '人工控制'
|
// 控制成功之后：也可以操作了
|
hasPermission.value = true
|
nowInReturnStatus.value = true
|
})
|
}
|
|
// 退出控制
|
const exitFlightCOntrol = () => {
|
exitController({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
|
deviceTopicInfo.subTopic = ''
|
deviceTopicInfo.pubTopic = ''
|
flightMode.value = '自动控制'
|
})
|
}
|
|
const sureJg = () => {
|
dialogVisible.value = false
|
enterFlightControl()
|
}
|
|
// 是否进行人工控制
|
const authenticationPwd = (value:any, str:String) => {
|
// 提示是否进行人工控制
|
if (!isShowKzBtn.value) {
|
if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
|
dialogVisible.value = true
|
} else {
|
isShowKzBtn.value = false
|
exitFlightCOntrol()
|
}
|
}
|
|
// 返航
|
const onBackDock = () => {
|
returnHome(props.sn).then((res) => {
|
if (res.code === 0) {
|
nowInReturnStatus.value = true
|
flightMode.value = '自动控制'
|
nowInReturnStatusClick.value = false
|
}
|
})
|
}
|
|
// 取消返航
|
const notonBackDock = () => {
|
returnHomeCancel({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
|
if (result.code !== 0) return
|
nowInReturnStatus.value = false
|
// 取消返航时，退出飞行控制，进入人工控制
|
nowInReturnStatusClick.value = true
|
flightMode.value = '人工控制'
|
})
|
}
|
|
// 无人机速度控制
|
const onControlsDroneSpeed = (value:Boolean) => {
|
if (value) {
|
if (droneSeepd.value >= 15) {
|
return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
|
}
|
droneSeepd.value += 1
|
} else {
|
if (droneSeepd.value <= 0) {
|
return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
|
}
|
droneSeepd.value -= 1
|
}
|
}
|
|
const mqttHooks = useMqtt(deviceTopicInfo)
|
// 字母按键
|
const handlePublish = (params:Object) => {
|
// if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
|
const body = { method: DRC_METHOD.DRONE_CONTROL, data: params}
|
mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, {qos: 0})
|
}
|
|
onMounted(async () => {
|
await nextTick()
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
.control-console {
|
|
.control {
|
position: absolute;
|
bottom: 12.8rem;
|
right: 0.2rem;
|
width: 2rem;
|
height: 2rem;
|
border-radius: 3px;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
cursor: pointer;
|
pointer-events: all;
|
img {
|
width: 1.6rem;
|
height: 1.6rem;
|
}
|
}
|
.actived-blue {
|
background-image: none;
|
background-color: rgba(23, 124, 198, 0.7);
|
}
|
.control-left {
|
left: 10%;
|
}
|
.control-right {
|
right: 10%;
|
}
|
.control-left, .control-right{
|
width: 100px;
|
height: 100px;
|
border-radius: 50%;
|
overflow: hidden;
|
// background-color: rgba(255, 255, 255, 0.5); /* 白色，50%透明度 */
|
// box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
|
background-color: rgba(0, 0, 0, 0.5);
|
padding: 20px; /* 内边距 */
|
position: absolute;
|
top: 30%;
|
.top,
|
.left,
|
.bottom,
|
.right {
|
width: 10px;
|
height: 10px;
|
position: absolute;
|
cursor: pointer;
|
z-index: 2;
|
}
|
|
.top {
|
top: -2px;
|
left: 50%;
|
transform: translateX(-50%);
|
border-top: 10px solid transparent;
|
border-right: 10px solid transparent;
|
border-left: 10px solid transparent;
|
border-bottom: 10px solid #fff;
|
|
&:hover {
|
&~.blue-bgc {
|
border-top: 50px solid #fff;
|
}
|
}
|
.xq {
|
position: absolute;
|
top: 10px;
|
font-size: 10px;
|
width: 30px;
|
left: -9px;
|
color: #fff;
|
}
|
}
|
|
.left {
|
top: 50%;
|
left: -2px;
|
transform: translateY(-50%);
|
border-top: 10px solid transparent;
|
border-right: 10px solid #fff;
|
border-left: 10px solid transparent;
|
border-bottom: 10px solid transparent;
|
|
&:hover {
|
&~.blue-bgc {
|
border-left: 50px solid #fff;
|
}
|
}
|
.xz {
|
position: absolute;
|
top: -7px;
|
font-size: 10px;
|
width: 30px;
|
left: 11px;
|
color: #fff;
|
}
|
}
|
|
.bottom {
|
bottom: -2px;
|
left: 50%;
|
transform: translateX(-50%);
|
border-top: 10px solid #fff;
|
border-right: 10px solid transparent;
|
border-left: 10px solid transparent;
|
border-bottom: 10px solid transparent;
|
|
&:hover {
|
&~.blue-bgc {
|
border-bottom: 50px solid #fff;
|
}
|
}
|
.xx {
|
position: absolute;
|
bottom: 8px;
|
font-size: 10px;
|
width: 30px;
|
left: -9px;
|
color: #fff;
|
}
|
}
|
|
.right {
|
top: 50%;
|
right: -2px;
|
transform: translateY(-50%);
|
border-top: 10px solid transparent;
|
border-right: 10px solid transparent;
|
border-left: 10px solid #fff;
|
border-bottom: 10px solid transparent;
|
|
&:hover {
|
&~.blue-bgc {
|
border-right: 50px solid #fff;
|
}
|
}
|
.xy {
|
position: absolute;
|
top: -8px;
|
font-size: 10px;
|
width: 30px;
|
right : 2px;
|
color: #fff;
|
}
|
}
|
}
|
// width: 100%;
|
// height: 200px;
|
// margin-top: 20px;
|
// margin: 0 auto;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-between;
|
// overflow-x: auto;
|
// overflow-y: hidden;
|
// background-repeat: no-repeat;
|
// background-size: 100% 100%;
|
// color: #fff;
|
// font-weight: bold;
|
// .DroneOperation {
|
// display: flex;
|
// align-items: center;
|
// height: 245px;
|
// position: relative;
|
// }
|
|
// .center {
|
// display: flex;
|
// align-items: center;
|
|
// &_left,
|
// &_center,
|
// .speed {
|
// margin-right: 10px;
|
// }
|
|
// .center_left {
|
// .tubiaoshow {
|
// height: 50px;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
|
// img {
|
// width: 40px;
|
// height: 50px;
|
// cursor: pointer;
|
// }
|
// }
|
|
// .Airplanemode {
|
// font-style: normal;
|
// margin: 5px 0px;
|
// text-align: center;
|
// }
|
|
// .operatingjixufanhang {
|
// display: flex;
|
// justify-content: center;
|
|
// .el-button {
|
// font-size: 16px;
|
// background-color: rgba(0, 0, 0, 0.5);
|
// color: white;
|
// border-width: 0;
|
// margin: 5px;
|
// }
|
// }
|
// }
|
|
// .center_center {
|
// width: 120px;
|
|
// padding: 0px 0px;
|
|
// .center {
|
// height: 45px;
|
|
// p {
|
// line-height: 50px;
|
// color: #00ee8b;
|
// font-size: 20px;
|
// margin: 0 auto;
|
// }
|
// }
|
|
// .top,
|
// .bottom {
|
// background: rgba(0, 0, 0, 0.5);
|
// border-radius: 5px;
|
// display: flex;
|
// height: 80px;
|
// width: 100%;
|
|
// .Q,
|
// .W,
|
// .E {
|
// flex: 1;
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// justify-content: center;
|
// gap: 10px;
|
|
// img {
|
// width: 20px;
|
// height: 20px;
|
// // margin-top: 5px;
|
// // margin-top: 5px;
|
// }
|
|
// .el-button {
|
// padding: 4px;
|
// font-size: 20px;
|
// height: 30px;
|
// background: #3c3c3c;
|
// color: white;
|
// -webkit-touch-callout: none;
|
// -webkit-user-select: none;
|
// -khtml-user-select: none;
|
// -moz-user-select: none;
|
// -ms-user-select: none;
|
// user-select: none;
|
// }
|
// }
|
|
// .A,
|
// .S,
|
// .D {
|
// flex: 1;
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// justify-content: center;
|
|
// img {
|
// width: 20px;
|
// height: 20px;
|
// }
|
|
// .el-button {
|
// padding: 4px;
|
// font-size: 20px;
|
// margin-bottom: 10px;
|
// height: 30px;
|
// background: #3c3c3c;
|
// color: white;
|
// -webkit-touch-callout: none;
|
// -webkit-user-select: none;
|
// -khtml-user-select: none;
|
// -moz-user-select: none;
|
// -ms-user-select: none;
|
// user-select: none;
|
// }
|
// }
|
// }
|
|
// .top {
|
// // padding: 5px 2px 5px;
|
// margin-bottom: 10px;
|
// }
|
|
// .bottom {
|
// padding: 5px 0px 0px 0px;
|
// }
|
// }
|
|
// .speed {
|
// width: 43px;
|
// height: 170px;
|
// border-radius: 5px;
|
// background-color: rgba(0, 0, 0, 0.5);
|
|
// &-content {
|
// height: 100%;
|
// display: flex;
|
// flex-direction: column;
|
|
// .add-speed--button,
|
// .sub-speed--button {
|
// flex: 1;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
// cursor: pointer;
|
|
// i {
|
// font-size: 20px;
|
// font-weight: bolder;
|
// }
|
// }
|
|
// .speed-text {
|
// flex: 2;
|
// display: flex;
|
// flex-direction: column;
|
// justify-content: center;
|
// align-items: center;
|
|
// div:first-child {
|
// font-size: 20px;
|
// color: #00ee8b;
|
// font-weight: bolder;
|
// }
|
// }
|
// }
|
// }
|
// }
|
|
// .right {
|
// .rightbutton {
|
// // padding: 0px 0px;
|
// // // width: 150px;
|
// // margin-right: 0px;
|
|
// .center {
|
// height: 45px;
|
// margin: 5px 0px;
|
// display: flex;
|
// flex-direction: column;
|
|
// .top_in {
|
// display: flex;
|
// width: 100%;
|
|
// .top_in_left {
|
// min-width: 70px;
|
// text-align: right;
|
// font-size: 22px;
|
// color: #00ee8b;
|
// margin-right: 5px;
|
// margin-left: auto;
|
// }
|
|
// .top_in_right {
|
// p {
|
// font-size: 14px;
|
// line-height: 14px;
|
// text-align: right;
|
// }
|
// }
|
// }
|
|
// .top_in_ASL {
|
// font-size: 12px;
|
// line-height: 12px;
|
// text-align: right;
|
// }
|
// }
|
|
// .top {
|
// margin-left: auto;
|
// width: 43px;
|
// background: rgba(0, 0, 0, 0.5);
|
// display: flex;
|
// flex-direction: column;
|
// border-radius: 5px;
|
// height: 80px;
|
// margin-bottom: 10px;
|
|
// img {
|
// width: 25px;
|
// height: 25px;
|
// margin: 5px auto 0px;
|
// }
|
|
// .el-button {
|
// padding: 4px;
|
// font-size: 16px;
|
// background: #3c3c3c;
|
// color: white;
|
// width: 25px;
|
// height: 30px;
|
// margin: 10px auto 12px;
|
// -webkit-touch-callout: none;
|
// -webkit-user-select: none;
|
// -khtml-user-select: none;
|
// -moz-user-select: none;
|
// -ms-user-select: none;
|
// user-select: none;
|
// }
|
// }
|
|
// .bottom {
|
// margin-left: auto;
|
// width: 40px;
|
// background: rgba(0, 0, 0, 0.5);
|
// display: flex;
|
// flex-direction: column;
|
// border-radius: 5px;
|
// height: 80px;
|
|
// img {
|
// width: 25px;
|
// height: 25px;
|
// margin: 0px auto 5px;
|
// }
|
|
// .el-button {
|
// padding: 4px;
|
// font-size: 20px;
|
// background: #3c3c3c;
|
// color: white;
|
// width: 25px;
|
// margin: 10px auto 10px;
|
// }
|
// }
|
// }
|
// }
|
|
// .instrument-panel {
|
// position: relative;
|
|
// .title {
|
// position: absolute;
|
// font-size: 12px;
|
// font-weight: 400;
|
// top: -5px;
|
// left: 10px;
|
// color: #ffffff;
|
// z-index: 1;
|
// }
|
// }
|
|
// .camera-load {
|
|
// // background: rgba(6, 25, 39, 0.5);
|
// // height: 245px;
|
// // padding: 10px;
|
// // position: relative;
|
// // border: 1px solid red;
|
// .title {
|
// position: absolute;
|
// font-size: 12px;
|
// font-weight: 400;
|
// top: -5px;
|
// left: 10px;
|
// color: #ffffff;
|
// z-index: 1;
|
// }
|
|
// .camera-control {
|
// width: 100%;
|
// margin-bottom: 10px;
|
// display: flex;
|
// justify-content: center;
|
|
// .promptInformation {
|
// position: absolute;
|
// width: 30px;
|
// height: 30px;
|
// right: 10px;
|
// top: 10px;
|
// }
|
|
// .circle-box {
|
// width: 90px;
|
// height: 90px;
|
// border-radius: 50%;
|
// background-color: rgba(0, 0, 0, 0.5);
|
// -webkit-mask-image: radial-gradient(circle,
|
// transparent 35%,
|
// white 35%);
|
// mask-image: radial-gradient(circle, transparent 35%, white 35%);
|
// position: relative;
|
|
// .top,
|
// .left,
|
// .bottom,
|
// .right {
|
// width: 10px;
|
// height: 10px;
|
// position: absolute;
|
// cursor: pointer;
|
// z-index: 2;
|
// }
|
|
// .top {
|
// top: -2px;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// border-top: 10px solid transparent;
|
// border-right: 10px solid transparent;
|
// border-left: 10px solid transparent;
|
// border-bottom: 10px solid #fff;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-top: 45px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .left {
|
// top: 50%;
|
// left: -2px;
|
// transform: translateY(-50%);
|
// border-top: 10px solid transparent;
|
// border-right: 10px solid #fff;
|
// border-left: 10px solid transparent;
|
// border-bottom: 10px solid transparent;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-left: 45px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .bottom {
|
// bottom: -2px;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// border-top: 10px solid #fff;
|
// border-right: 10px solid transparent;
|
// border-left: 10px solid transparent;
|
// border-bottom: 10px solid transparent;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-bottom: 45px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .right {
|
// top: 50%;
|
// right: -2px;
|
// transform: translateY(-50%);
|
// border-top: 10px solid transparent;
|
// border-right: 10px solid transparent;
|
// border-left: 10px solid #fff;
|
// border-bottom: 10px solid transparent;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-right: 45px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .blue-bgc {
|
// width: 90px;
|
// height: 90px;
|
// position: absolute;
|
// top: 0;
|
// left: 0;
|
// z-index: 1;
|
// border-top: 45px solid transparent;
|
// border-right: 45px solid transparent;
|
// border-left: 45px solid transparent;
|
// border-bottom: 45px solid transparent;
|
// }
|
// }
|
// }
|
|
// .camera-select {
|
// display: flex;
|
// display: flex;
|
// justify-content: center;
|
|
// :deep() {
|
// .el-select {
|
// width: 250px;
|
// height: 40px;
|
// line-height: 40px;
|
// background-color: rgba(0, 0, 0, 0.5);
|
// border-radius: 5px;
|
|
// .el-input {
|
// width: auto;
|
// height: auto;
|
|
// .el-input__inner {
|
// background-color: transparent;
|
// box-shadow: none;
|
// border: 0;
|
// color: #fff;
|
// }
|
|
// .el-input__suffix {
|
// display: flex;
|
// align-items: center;
|
// }
|
// }
|
// }
|
// }
|
|
// .load-button {
|
// font-style: normal;
|
// background: rgba(21, 138, 255, 0.5);
|
// margin-left: 10px;
|
// padding: 0 5px;
|
|
// &:hover {
|
// color: #409eff;
|
// }
|
// }
|
// }
|
|
// .btn-group {
|
// display: flex;
|
// flex-wrap: wrap;
|
// margin-top: 10px;
|
// width: 300px;
|
// padding: 0px 20px;
|
|
// .btn-item {
|
// display: flex;
|
// // width: 140px;
|
// box-sizing: border-box;
|
// margin: 2px 10px;
|
// cursor: pointer;
|
|
// img {
|
// width: 30px;
|
// height: 30px;
|
// margin-right: 3px;
|
// }
|
|
// div {
|
// font-size: 18px;
|
// font-style: normal;
|
// }
|
// }
|
// }
|
// }
|
|
// .payload-control {
|
// height: 100%;
|
// display: flex;
|
// justify-content: center;
|
// flex-direction: column;
|
// gap: 15px;
|
|
// .left-box {
|
// display: flex;
|
// // flex-direction: column;
|
// align-items: center;
|
// justify-content: center;
|
// gap: 10px;
|
|
// .circle-box {
|
// width: 100px;
|
// height: 100px;
|
// border-radius: 50%;
|
// overflow: hidden;
|
// background-color: rgba(0, 0, 0, 0.5);
|
// // -webkit-mask-image: radial-gradient(
|
// // circle,
|
// // transparent 35%,
|
// // white 35%
|
// // );
|
// // mask-image: radial-gradient(circle, transparent 35%, white 35%);
|
// position: relative;
|
// // border: 1px solid red;
|
|
// .top,
|
// .left,
|
// .bottom,
|
// .right {
|
// width: 10px;
|
// height: 10px;
|
// position: absolute;
|
// cursor: pointer;
|
// z-index: 2;
|
// }
|
|
// .top {
|
// top: -2px;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// border-top: 10px solid transparent;
|
// border-right: 10px solid transparent;
|
// border-left: 10px solid transparent;
|
// border-bottom: 10px solid #fff;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-top: 50px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .left {
|
// top: 50%;
|
// left: -2px;
|
// transform: translateY(-50%);
|
// border-top: 10px solid transparent;
|
// border-right: 10px solid #fff;
|
// border-left: 10px solid transparent;
|
// border-bottom: 10px solid transparent;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-left: 50px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .bottom {
|
// bottom: -2px;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// border-top: 10px solid #fff;
|
// border-right: 10px solid transparent;
|
// border-left: 10px solid transparent;
|
// border-bottom: 10px solid transparent;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-bottom: 50px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .right {
|
// top: 50%;
|
// right: -2px;
|
// transform: translateY(-50%);
|
// border-top: 10px solid transparent;
|
// border-right: 10px solid transparent;
|
// border-left: 10px solid #fff;
|
// border-bottom: 10px solid transparent;
|
|
// &:hover {
|
// &~.blue-bgc {
|
// border-right: 50px solid #409eff;
|
// }
|
// }
|
// }
|
|
// .reset-center {
|
// position: absolute;
|
// width: 40%;
|
// height: 40%;
|
// left: 50%;
|
// top: 50%;
|
// transform: translate(-50%, -50%);
|
// border-radius: 50%;
|
// background-color: rgb(63, 66, 68);
|
// z-index: 2;
|
// cursor: pointer;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
|
// i {
|
// color: #fff;
|
// font-size: 20px;
|
// font-weight: bolder;
|
// }
|
|
// &:hover {
|
// background-color: #409eff;
|
// }
|
// }
|
|
// .blue-bgc {
|
// width: 100px;
|
// height: 100px;
|
// position: absolute;
|
// top: 0;
|
// left: 0;
|
// z-index: 1;
|
// border-top: 50px solid transparent;
|
// border-right: 50px solid transparent;
|
// border-left: 50px solid transparent;
|
// border-bottom: 50px solid transparent;
|
// }
|
// }
|
|
// .payload-info {
|
// font-size: 14px;
|
// }
|
|
// .btn-group {
|
// width: auto;
|
// display: flex;
|
// flex-wrap: wrap;
|
// width: 200px;
|
|
// // flex-direction: column;
|
// // justify-content: center;
|
// .btn-item {
|
// width: 100px;
|
// display: flex;
|
// box-sizing: border-box;
|
// cursor: pointer;
|
|
// img {
|
// width: 30px;
|
// height: 30px;
|
// margin-right: 3px;
|
// }
|
|
// div {
|
// height: 100%;
|
// font-size: 17px;
|
// line-height: 30px;
|
// font-style: normal;
|
// }
|
// }
|
// }
|
// }
|
|
// .right-box {
|
// position: relative;
|
// flex-shrink: 0;
|
// display: flex;
|
|
// // justify-content: center;
|
// .btn-group {
|
// width: auto;
|
// display: flex;
|
// flex-wrap: wrap;
|
// width: 290px;
|
// justify-content: center;
|
|
// .btn-item {
|
// width: 140px;
|
// display: flex;
|
// box-sizing: border-box;
|
// cursor: pointer;
|
|
// img {
|
// width: 30px;
|
// height: 30px;
|
// margin-right: 3px;
|
// }
|
|
// div {
|
// width: 100px;
|
// height: 100%;
|
// font-size: 17px;
|
// line-height: 30px;
|
// font-style: normal;
|
// }
|
// }
|
// }
|
|
// .payload-info {
|
// font-size: 14px;
|
|
// .info-item {
|
// display: flex;
|
// align-items: center;
|
// gap: 10px;
|
// height: 25px;
|
|
// div:first-child {
|
// width: 170px;
|
// }
|
|
// div:nth-child(2) {
|
// :deep() {
|
// .el-input-number {
|
// width: 70px;
|
// height: 20px;
|
|
// &__decrease,
|
// &__increase {
|
// width: 18px;
|
// height: 18px;
|
// line-height: 18px;
|
// background-color: transparent;
|
// border-right: 0;
|
// border-left: 0;
|
|
// i {
|
// color: #fff;
|
// font-size: 17px;
|
// font-weight: bold;
|
// }
|
// }
|
|
// .el-input {
|
// margin: 0;
|
// padding: 0;
|
// height: 18px;
|
// display: flex;
|
// justify-content: center;
|
|
// &__inner {
|
// padding: 0;
|
// }
|
|
// input {
|
// width: 80px;
|
// height: 18px;
|
// overflow: hidden;
|
// font-size: 14px;
|
// font-weight: bold;
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
}
|
</style>
|
