From 820433f8f5ab6073ae96e4ecc60ad3a4c3aa2782 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 17 一月 2025 10:15:12 +0800
Subject: [PATCH] ui
---
src/components/ControllerVideoWx.vue | 174 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 113 insertions(+), 61 deletions(-)
diff --git a/src/components/ControllerVideoWx.vue b/src/components/ControllerVideoWx.vue
index 9741405..69a77fb 100644
--- a/src/components/ControllerVideoWx.vue
+++ b/src/components/ControllerVideoWx.vue
@@ -1,108 +1,75 @@
<template>
<div>
- <div class="control-body" style="margin-left: 20px">
+ <div class="control-body">
<div style="height: 140px; position: relative">
- <div class="control-title">鏂瑰悜鎺у埗</div>
<div class="margin20">
<div class="fx">
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT_UP'}" @touchstart="setCameraCommand('LEFT_UP', 0)" @touchend="setCameraCommand('LEFT_UP', 1)"><i class="el-icon-top-left"></i></div>
+ <div :class="{'b-item-item': true, 'icon-lt': true, bgc: this.command === 'LEFT_UP'}" @touchstart="setCameraCommand('LEFT_UP', 0)" @touchend="setCameraCommand('LEFT_UP', 1)"> </div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'UP'}" @touchstart="setCameraCommand('UP', 0)" @touchend="setCameraCommand('UP', 1)"><i class="el-icon-top"></i></div>
+ <div :class="{'b-item-item': true, 'icon-t': true, bgc: this.command === 'UP'}" @touchstart="setCameraCommand('UP', 0)" @touchend="setCameraCommand('UP', 1)"> </div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_UP'}" @touchstart="setCameraCommand('RIGHT_UP', 0)" @touchend="setCameraCommand('RIGHT_UP', 1)"><i class="el-icon-top-right"></i></div>
+ <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_UP'}" @touchstart="setCameraCommand('RIGHT_UP', 0)" @touchend="setCameraCommand('RIGHT_UP', 1)"> </div>
</div>
</div>
<div class="fx">
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT'}" @touchstart="setCameraCommand('LEFT', 0)" @touchend="setCameraCommand('LEFT', 1)"><i class="el-icon-back"></i></div>
+ <div :class="{'b-item-item': true, 'icon-l': true, bgc: this.command === 'LEFT'}" @touchstart="setCameraCommand('LEFT', 0)" @touchend="setCameraCommand('LEFT', 1)"> </div>
</div>
<div class="b-item">
- <div style="min-width: 54px; user-select: none;"> </div>
+ <div style="min-width: 65px; user-select: none;"> </div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT'}" @touchstart="setCameraCommand('RIGHT', 0)" @touchend="setCameraCommand('RIGHT', 1)"><i class="el-icon-right"></i></div>
+ <div :class="{'b-item-item': true, 'icon-r': true, bgc: this.command === 'RIGHT'}" @touchstart="setCameraCommand('RIGHT', 0)" @touchend="setCameraCommand('RIGHT', 1)"> </div>
</div>
</div>
<div class="fx">
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'LEFT_DOWN'}" @touchstart="setCameraCommand('LEFT_DOWN', 0)" @touchend="setCameraCommand('LEFT_DOWN', 1)"><i class="el-icon-bottom-left"></i></div>
+ <div :class="{'b-item-item': true, 'icon-lb': true, bgc: this.command === 'LEFT_DOWN'}" @touchstart="setCameraCommand('LEFT_DOWN', 0)" @touchend="setCameraCommand('LEFT_DOWN', 1)"> </div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'DOWN'}" @touchstart="setCameraCommand('DOWN', 0)" @touchend="setCameraCommand('DOWN', 1)"><i class="el-icon-bottom"></i></div>
+ <div :class="{'b-item-item': true, 'icon-bo': true, bgc: this.command === 'DOWN'}" @touchstart="setCameraCommand('DOWN', 0)" @touchend="setCameraCommand('DOWN', 1)"> </div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, icon: true, bgc: this.command === 'RIGHT_DOWN'}" @touchstart="setCameraCommand('RIGHT_DOWN', 0)" @touchend="setCameraCommand('RIGHT_DOWN', 1)"><i class="el-icon-bottom-right"></i></div>
+ <div :class="{'b-item-item': true, 'icon-rb': true, bgc: this.command === 'RIGHT_DOWN'}" @touchstart="setCameraCommand('RIGHT_DOWN', 0)" @touchend="setCameraCommand('RIGHT_DOWN', 1)"> </div>
</div>
</div>
</div>
</div>
- <div style="height: 50px; position: relative">
- <div class="control-title">鐒﹁窛鎺у埗</div>
+ <div style="height: 60px;margin-top: 30px; position: relative">
<div class="margin20">
<div class="fx">
<div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'ZOOM_IN'}" @touchstart="setCameraCommand('ZOOM_IN', 0)" @touchend="setCameraCommand('ZOOM_IN', 1)">鐒﹁窛鍙樺ぇ</div>
+ <div :class="{'b-item-item-other': true, bgc: this.command === 'ZOOM_IN'}" @touchstart="setCameraCommand('ZOOM_IN', 0)" @touchend="setCameraCommand('ZOOM_IN', 1)">鐒﹁窛鍙樺ぇ</div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'ZOOM_OUT'}" @touchstart="setCameraCommand('ZOOM_OUT', 0)" @touchend="setCameraCommand('ZOOM_OUT', 1)">鐒﹁窛鍙樺皬</div>
+ <div :class="{'b-item-item-other': true, bgc: this.command === 'ZOOM_OUT'}" @touchstart="setCameraCommand('ZOOM_OUT', 0)" @touchend="setCameraCommand('ZOOM_OUT', 1)">鐒﹁窛鍙樺皬</div>
</div>
</div>
</div>
</div>
- <div style="height: 50px; position: relative">
- <div class="control-title">鐒︾偣鎺у埗</div>
+ <div style="height: 60px; position: relative">
<div class="margin20">
<div class="fx">
<div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'FOCUS_NEAR'}" @touchstart="setCameraCommand('FOCUS_NEAR', 0)" @touchend="setCameraCommand('FOCUS_NEAR', 1)">鐒︾偣鍓嶇Щ</div>
+ <div :class="{'b-item-item-other': true, bgc: this.command === 'FOCUS_NEAR'}" @touchstart="setCameraCommand('FOCUS_NEAR', 0)" @touchend="setCameraCommand('FOCUS_NEAR', 1)">鐒︾偣鍓嶇Щ</div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'FOCUS_FAR'}" @touchstart="setCameraCommand('FOCUS_FAR', 0)" @touchend="setCameraCommand('FOCUS_FAR', 1)">鐒︾偣鍚庣Щ</div>
+ <div :class="{'b-item-item-other': true, bgc: this.command === 'FOCUS_FAR'}" @touchstart="setCameraCommand('FOCUS_FAR', 0)" @touchend="setCameraCommand('FOCUS_FAR', 1)">鐒︾偣鍚庣Щ</div>
</div>
</div>
</div>
</div>
- <div style="height: 50px; position: relative">
- <div class="control-title">鍏夊湀鎺у埗</div>
+ <div style="height: 60px; position: relative">
<div class="margin20">
<div class="fx">
<div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'IRIS_ENLARGE'}" @touchstart="setCameraCommand('IRIS_ENLARGE', 0)" @touchend="setCameraCommand('IRIS_ENLARGE', 1)">鍏夊湀鎵╁ぇ</div>
+ <div :class="{'b-item-item-other': true, bgc: this.command === 'IRIS_ENLARGE'}" @touchstart="setCameraCommand('IRIS_ENLARGE', 0)" @touchend="setCameraCommand('IRIS_ENLARGE', 1)">鍏夊湀鎵╁ぇ</div>
</div>
<div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'IRIS_REDUCE'}" @touchstart="setCameraCommand('IRIS_REDUCE', 0)" @touchend="setCameraCommand('IRIS_REDUCE', 1)">鍏夊湀缂╁皬</div>
- </div>
- </div>
- </div>
- </div>
- <div style="height: 50px; position: relative; margin: 8px 0px">
- <div class="control-title">璺嚎鎺у埗</div>
- <div class="margin20">
- <div class="fx">
- <div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'START_RECORD_TRACK'}" @touchstart="setCameraCommand('START_RECORD_TRACK', 0)" @touchend="setCameraCommand('START_RECORD_TRACK', 1)">寮�濮嬭褰曡矾绾�</div>
- </div>
- <div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'STOP_RECORD_TRACK'}" @touchstart="setCameraCommand('STOP_RECORD_TRACK', 0)" @touchend="setCameraCommand('STOP_RECORD_TRACK', 1)">鍋滄璁板綍璺嚎</div>
- </div>
- <div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'START_TRACK'}" @touchstart="setCameraCommand('START_TRACK', 0)" @touchend="setCameraCommand('START_TRACK', 1)">寮�濮嬭矾绾�</div>
- </div>
- <div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'STOP_TRACK'}" @touchstart="setCameraCommand('STOP_TRACK', 0)" @touchend="setCameraCommand('STOP_TRACK', 1)">鍋滄璺嚎</div>
- </div>
- </div>
- </div>
- </div>
- <div style="height: 50px; position: relative">
- <div class="control-title">闆ㄥ埛寮�鍏�</div>
- <div class="margin20">
- <div class="fx">
- <div class="b-item">
- <div :class="{'b-item-item': true, bgc: this.command === 'WIPER_SWITCH'}" @touchstart="setCameraCommand('WIPER_SWITCH', 0)" @touchend="setCameraCommand('WIPER_SWITCH', 1)">鎺ラ�氶洦鍒峰紑鍏�</div>
+ <div :class="{'b-item-item-other': true, bgc: this.command === 'IRIS_REDUCE'}" @touchstart="setCameraCommand('IRIS_REDUCE', 0)" @touchend="setCameraCommand('IRIS_REDUCE', 1)">鍏夊湀缂╁皬</div>
</div>
</div>
</div>
@@ -168,15 +135,27 @@
left: 5px
}
.control-body {
- width: 700px;
-}
-.margin20 {
- margin-left: 20px;
+ width: 350px;
+ height: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ /* 璁剧疆鑳屾櫙鍥剧墖 */
+ background-image: url('../assets/bg.png');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
}
/* 閽堝鎵嬫満灞忓箷鐨勬牱寮� */
@media (max-width: 768px) {
.control-body {
width: 90vw;
+ /* 璁剧疆鑳屾櫙鍥剧墖 */
+ background-image: url('../assets/bg.png');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
}
.control-title {
display: none;
@@ -186,19 +165,92 @@
}
}
.fx {
- display: flex;justify-content: center;align-items: center;height: 35px;margin-bottom: 8px;
+ display: flex;justify-content: center;align-items: center;height: 50px;margin-bottom: 5px;
}
.b-item {
- margin-right: 8px;
+ margin: 5px;
+ opacity: 0.7;
}
.b-item-item {
- padding: 10px;
- background-color: #eaeaea;
- border-radius: 4px;
+ width: 65px;
+ height: 50px;
+ background-color: #f8f2d1;
+ border-radius: 8px;
user-select: none;
+}
+.b-item-item-other {
+ width: 102px;
+ height: 50px;
+ background-color: #f8f2d1;
+ border-radius: 8px;
+ user-select: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.icon {
min-width: 34px;
+ background-image: url("../assets/fx.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ background-size: 42% 42%;
+}
+.icon-lt {
+ background-image: url("../assets/lt.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-size: 85% 85%;
+ background-position: center;
+ transform-origin: center center;
+}
+.icon-t {
+ background-image: url("../assets/top.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-size: 60% 60%;
+ background-position: center;
+ transform-origin: center center;
+}
+.icon-l {
+ background-image: url("../assets/left.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-size: 60% 60%;
+ background-position: center;
+ transform-origin: center center;
+}
+.icon-r {
+ background-image: url("../assets/right.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-size: 60% 60%;
+ background-position: center;
+ transform-origin: center center;
+}
+.icon-lb {
+ background-image: url("../assets/lb.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-size: 85% 85%;
+ background-position: center;
+ transform-origin: center center;
+}
+.icon-bo {
+ background-image: url("../assets/bottom.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-size: 60% 60%;
+ background-position: center;
+ transform-origin: center center;
+}
+.icon-rb {
+ background-image: url("../assets/rb.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-size: 85% 85%;
+ background-position: center;
+ transform-origin: center center;
}
.bgc {
background-color: #409EFF;
--
Gitblit v1.8.0