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)"> </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; 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