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/assets/lb.png                          |    0 
 src/components/ControllerVideoWeb.vue      |   30 -------
 src/views/wx/CameraPTZ1.vue                |    2 
 src/assets/fx.png                          |    0 
 src/assets/right.png                       |    0 
 src/assets/bg.png                          |    0 
 src/assets/top.png                         |    0 
 src/views/wx/CameraPTZ3.vue                |    2 
 src/assets/bottom.png                      |    0 
 src/views/wx/CameraPTZ2.vue                |    2 
 src/components/ControllerVideoWx.vue       |  174 ++++++++++++++++++++++++++++---------------
 src/assets/text/fonts.css                  |    6 +
 src/assets/lt.png                          |    0 
 src/assets/left.png                        |    0 
 src/views/wx/CameraPTZ4.vue                |    2 
 src/assets/rb.png                          |    0 
 src/assets/text/FZCHSJWGB10_DOWNYI.COM.TTF |    0 
 src/App.vue                                |   10 ++
 18 files changed, 132 insertions(+), 96 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3c56e8e..3f6810b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,11 +6,17 @@
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+  font-family: JDZY, sans-serif;
+  -webkit-font-smoothing: antialiased ;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  height: 95vh;
+  overflow-y: hidden;
+  /*font-weight: bold;*/
+  letter-spacing: 0.1em;
+  font-size: large;
+  color: black;
 }
 
 nav {
diff --git a/src/assets/bg.png b/src/assets/bg.png
new file mode 100644
index 0000000..577a46f
--- /dev/null
+++ b/src/assets/bg.png
Binary files differ
diff --git a/src/assets/bottom.png b/src/assets/bottom.png
new file mode 100644
index 0000000..0fb8da3
--- /dev/null
+++ b/src/assets/bottom.png
Binary files differ
diff --git a/src/assets/fx.png b/src/assets/fx.png
new file mode 100644
index 0000000..0deaf00
--- /dev/null
+++ b/src/assets/fx.png
Binary files differ
diff --git a/src/assets/lb.png b/src/assets/lb.png
new file mode 100644
index 0000000..f134dbf
--- /dev/null
+++ b/src/assets/lb.png
Binary files differ
diff --git a/src/assets/left.png b/src/assets/left.png
new file mode 100644
index 0000000..4d4adde
--- /dev/null
+++ b/src/assets/left.png
Binary files differ
diff --git a/src/assets/lt.png b/src/assets/lt.png
new file mode 100644
index 0000000..25e849f
--- /dev/null
+++ b/src/assets/lt.png
Binary files differ
diff --git a/src/assets/rb.png b/src/assets/rb.png
new file mode 100644
index 0000000..014cb3f
--- /dev/null
+++ b/src/assets/rb.png
Binary files differ
diff --git a/src/assets/right.png b/src/assets/right.png
new file mode 100644
index 0000000..d74023e
--- /dev/null
+++ b/src/assets/right.png
Binary files differ
diff --git a/src/assets/text/FZCHSJWGB10_DOWNYI.COM.TTF b/src/assets/text/FZCHSJWGB10_DOWNYI.COM.TTF
new file mode 100644
index 0000000..483cb3b
--- /dev/null
+++ b/src/assets/text/FZCHSJWGB10_DOWNYI.COM.TTF
Binary files differ
diff --git a/src/assets/text/fonts.css b/src/assets/text/fonts.css
new file mode 100644
index 0000000..562b626
--- /dev/null
+++ b/src/assets/text/fonts.css
@@ -0,0 +1,6 @@
+@font-face {
+    font-family: "JDZY";
+    src: url('./FZCHSJWGB10_DOWNYI.COM.TTF');
+    font-weight: normal;
+    font-style: normal;
+}
diff --git a/src/assets/top.png b/src/assets/top.png
new file mode 100644
index 0000000..6cf325f
--- /dev/null
+++ b/src/assets/top.png
Binary files differ
diff --git a/src/components/ControllerVideoWeb.vue b/src/components/ControllerVideoWeb.vue
index 84583c3..c50662c 100644
--- a/src/components/ControllerVideoWeb.vue
+++ b/src/components/ControllerVideoWeb.vue
@@ -78,40 +78,12 @@
           </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'}" @mousedown="setCameraCommand('START_RECORD_TRACK', 0)" @mouseup="setCameraCommand('START_RECORD_TRACK', 1)">寮�濮嬭褰曡矾绾�</div>
-            </div>
-            <div class="b-item">
-              <div :class="{'b-item-item': true, bgc: this.command === 'STOP_RECORD_TRACK'}" @mousedown="setCameraCommand('STOP_RECORD_TRACK', 0)" @mouseup="setCameraCommand('STOP_RECORD_TRACK', 1)">鍋滄璁板綍璺嚎</div>
-            </div>
-            <div class="b-item">
-              <div :class="{'b-item-item': true, bgc: this.command === 'START_TRACK'}" @mousedown="setCameraCommand('START_TRACK', 0)" @mouseup="setCameraCommand('START_TRACK', 1)">寮�濮嬭矾绾�</div>
-            </div>
-            <div class="b-item">
-              <div :class="{'b-item-item': true, bgc: this.command === 'STOP_TRACK'}" @mousedown="setCameraCommand('STOP_TRACK', 0)" @mouseup="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'}" @mousedown="setCameraCommand('WIPER_SWITCH', 0)" @mouseup="setCameraCommand('WIPER_SWITCH', 1)">鎺ラ�氶洦鍒峰紑鍏�</div>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
+import '@/assets/text/fonts.css'
 import { setCameraCommand } from '@/api/camear'
 
 export default {
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)">&nbsp;</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)">&nbsp;</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)">&nbsp;</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)">&nbsp;</div>
             </div>
             <div class="b-item">
-              <div style="min-width: 54px; user-select: none;">&nbsp;</div>
+              <div style="min-width: 65px; user-select: none;">&nbsp;</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)">&nbsp;</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)">&nbsp;</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)">&nbsp;</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)">&nbsp;</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;
diff --git a/src/views/wx/CameraPTZ1.vue b/src/views/wx/CameraPTZ1.vue
index 685cfb7..a95df28 100644
--- a/src/views/wx/CameraPTZ1.vue
+++ b/src/views/wx/CameraPTZ1.vue
@@ -5,7 +5,7 @@
         <easy-player :video-url="url"></easy-player>
       </div>
     </div>
-    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
+    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
       <controller-video :index-code="indexCode"/>
     </div>
   </div>
diff --git a/src/views/wx/CameraPTZ2.vue b/src/views/wx/CameraPTZ2.vue
index 02575f4..13ed969 100644
--- a/src/views/wx/CameraPTZ2.vue
+++ b/src/views/wx/CameraPTZ2.vue
@@ -5,7 +5,7 @@
         <easy-player :video-url="url"></easy-player>
       </div>
     </div>
-    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
+    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
       <controller-video :index-code="indexCode"/>
     </div>
   </div>
diff --git a/src/views/wx/CameraPTZ3.vue b/src/views/wx/CameraPTZ3.vue
index 2d1f8fc..a0132ae 100644
--- a/src/views/wx/CameraPTZ3.vue
+++ b/src/views/wx/CameraPTZ3.vue
@@ -5,7 +5,7 @@
         <easy-player :video-url="url"></easy-player>
       </div>
     </div>
-    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
+    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
       <controller-video :index-code="indexCode"/>
     </div>
   </div>
diff --git a/src/views/wx/CameraPTZ4.vue b/src/views/wx/CameraPTZ4.vue
index a853d5a..6a1b7ba 100644
--- a/src/views/wx/CameraPTZ4.vue
+++ b/src/views/wx/CameraPTZ4.vue
@@ -5,7 +5,7 @@
         <easy-player :video-url="url"></easy-player>
       </div>
     </div>
-    <div style="margin-top: 15px;display: flex;justify-content: center; width: 100%;">
+    <div style="margin-top: 2px;display: flex;justify-content: center; width: 100%;">
       <controller-video :index-code="indexCode"/>
     </div>
   </div>

--
Gitblit v1.8.0