From 6564593ef44090cca74582d7b32ac979c262b908 Mon Sep 17 00:00:00 2001
From: 艺术家 <10819716+q100102@user.noreply.gitee.com>
Date: 星期六, 24 五月 2025 23:53:34 +0800
Subject: [PATCH] 优化
---
项目代码/伸缩杆/client/src/views/tts/PickAndDrop/Manualcontrol.vue | 627 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 553 insertions(+), 74 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue"
index 6b6b30e..fc310a1 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue"
@@ -1,25 +1,136 @@
<template>
<div class="Manualcontrol">
<div class="button">
- <el-button @click="jumpRouter('/PickAndDrop')" class="btn" type="primary" size="small"
- style="width: 27.52rem; height: 4.29rem; color: rgba(255, 255, 255, 1)">
- <span class="Aspan" style="font-size: 2.25rem; text-align: center">杩斿洖</span>
+ <div class="button_l">
+ <el-button
+ @click="handleAutoPickAndDrop('浼稿嚭')"
+ type="primary"
+ size="small"
+ style="
+ width: 14.69rem;
+ height: 5.06rem;
+ color: rgba(64, 253, 240, 1);
+ background-color: rgba(6, 229, 231, 0.3);
+ border: none;
+ border-top: 0.25rem solid rgba(6, 229, 231, 1);
+ "
+ >
+ <div class="btnicon">
+ <span
+ style="
+ width: 1rem;
+ height: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50% 50%;
+ border: 0.1rem solid rgb(0, 0, 0);
+ color: rgb(0, 0, 0);
+ font-size: 0.75rem;
+ margin-left: 0.1rem;
+ "
+ >i</span
+ >
+ </div>
+ <span style="font-size: 2.25rem; text-align: center">瀹氫綅浼告寜閽�</span>
+ </el-button>
+ <el-button
+ @click="handleAutoPickAndDrop('缂╁洖')"
+ type="primary"
+ size="small"
+ style="
+ width: 14.69rem;
+ height: 5.06rem;
+ color: rgba(64, 253, 240, 1);
+ background-color: rgba(6, 229, 231, 0.3);
+ border: none;
+ border-top: 0.25rem solid rgba(6, 229, 231, 1);
+ "
+ >
+ <div class="btnicon">
+ <span
+ style="
+ width: 1rem;
+ height: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50% 50%;
+ border: 0.1rem solid rgb(0, 0, 0);
+ color: rgb(0, 0, 0);
+ font-size: 0.75rem;
+ margin-left: 0.1rem;
+ "
+ >i</span
+ >
+ </div>
+ <span style="font-size: 2.25rem; text-align: center">瀹氫綅缂╂寜閽�</span>
+ </el-button>
+ <el-button
+ @click="handlePouse"
+ type="primary"
+ size="small"
+ style="
+ width: 14.69rem;
+ height: 5.06rem;
+ color: rgba(64, 253, 240, 1);
+ background-color: rgba(6, 229, 231, 0.3);
+ border: none;
+ border-top: 0.25rem solid rgba(6, 229, 231, 1);
+ "
+ >
+ <div class="btnicon">
+ <span
+ style="
+ width: 1rem;
+ height: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50% 50%;
+ border: 0.1rem solid rgb(0, 0, 0);
+ color: rgb(0, 0, 0);
+ font-size: 0.75rem;
+ margin-left: 0.1rem;
+ "
+ >i</span
+ >
+ </div>
+ <span style="font-size: 2.25rem; text-align: center">鏆傚仠</span>
+ </el-button>
+ </div>
+ <el-button
+ @click="jumpRouter('/PickAndDrop')"
+ class="btn"
+ type="primary"
+ size="small"
+ style="width: 27.52rem; height: 4.29rem; color: rgba(255, 255, 255, 1)"
+ >
+ <span class="Aspan" style="font-size: 2.25rem; text-align: center"
+ >杩斿洖</span
+ >
</el-button>
</div>
<div v-if="isMobile" class="content">
<div class="content_l">
<div class="model">
<div class="model_btn">
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('宸�', '浼稿嚭')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -30,20 +141,28 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
<span style="font-size: 2.25rem; text-align: center">浼稿嚭</span>
</el-button>
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('宸�', '缂╁洖')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -54,10 +173,15 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
<span style="font-size: 2.25rem; text-align: center">缂╁洖</span>
</el-button>
+ <div style="color: #fff; font-size: 2rem; margin-left: 15rem">
+ 鍙充晶浼哥缉鏉�
+ </div>
</div>
</div>
<div class="operate">
@@ -72,22 +196,36 @@
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
+ </div>
+ </div>
+ <div style="display: flex; flex-direction: column; align-items: center">
+ <div class="video_l">
+ <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
+ >瑙嗛鐩戞帶宸︿晶</span
+ >
+ <img src="@/assets/imgs/right.png" alt="" />
</div>
</div>
</div>
<div class="content_r">
<div class="model">
<div class="model_btn">
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('鍙�', '浼稿嚭')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -98,20 +236,28 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
<span style="font-size: 2.25rem; text-align: center">浼稿嚭</span>
</el-button>
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('鍙�', '缂╁洖')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -122,12 +268,16 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
<span style="font-size: 2.25rem; text-align: center">缂╁洖</span>
</el-button>
+ <div style="color: #fff; font-size: 2rem; margin-left: 15rem">
+ 宸︿晶浼哥缉鏉�
+ </div>
</div>
-
</div>
<div class="operate">
<div class="item">浼稿埌浣�</div>
@@ -141,6 +291,14 @@
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
+ </div>
+ </div>
+ <div style="display: flex; flex-direction: column; align-items: center">
+ <div class="video_r">
+ <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
+ >瑙嗛鐩戞帶鍙充晶</span
+ >
+ <img src="@/assets/imgs/left.png" alt="" />
</div>
</div>
</div>
@@ -149,16 +307,22 @@
<div class="content_l">
<div class="model">
<div class="model_btn">
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('宸�', '浼稿嚭')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -169,20 +333,28 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
- <span style="font-size: 2.25rem; text-align: center">浼稿嚭</span>
+ <span style="font-size: 2.25rem; text-align: center">鐐瑰姩浼�</span>
</el-button>
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('宸�', '缂╁洖')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -193,12 +365,17 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
- <span style="font-size: 2.25rem; text-align: center">缂╁洖</span>
+ <span style="font-size: 2.25rem; text-align: center">鐐瑰姩缂�</span>
</el-button>
</div>
- <div style="color:#fff;font-size:2rem;margin-left:20rem">宸︿晶浼哥缉鏉�</div>
+ <div style="color: #fff; font-size: 2rem">宸︿晶浼哥缉鏉�</div>
+ <span style="color: #fff; font-size: 2rem"
+ >褰撳墠浼哥缉鏉嗕綅缃細{{ Position.right }}</span
+ >
</div>
<div class="operate">
<div class="item">浼稿埌浣�</div>
@@ -212,22 +389,36 @@
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
+ </div>
+ </div>
+ <div style="display: flex; flex-direction: column; align-items: center">
+ <div class="video_l">
+ <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
+ >瑙嗛鐩戞帶宸︿晶</span
+ >
+ <img src="@/assets/imgs/right.png" alt="" />
</div>
</div>
</div>
<div class="content_r">
<div class="model">
<div class="model_btn">
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('鍙�', '浼稿嚭')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -238,20 +429,28 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
- <span style="font-size: 2.25rem; text-align: center">浼稿嚭</span>
+ <span style="font-size: 2.25rem; text-align: center">鐐瑰姩浼�</span>
</el-button>
- <el-button type="primary" size="small" style="
+ <el-button
+ @click="handManualOperation('鍙�', '缂╁洖')"
+ type="primary"
+ size="small"
+ style="
width: 14.69rem;
height: 5.06rem;
color: rgba(64, 253, 240, 1);
background-color: rgba(6, 229, 231, 0.3);
border: none;
border-top: 0.25rem solid rgba(6, 229, 231, 1);
- ">
+ "
+ >
<div class="btnicon">
- <span style="
+ <span
+ style="
width: 1rem;
height: 1rem;
display: flex;
@@ -262,12 +461,17 @@
color: rgb(0, 0, 0);
font-size: 0.75rem;
margin-left: 0.1rem;
- ">i</span>
+ "
+ >i</span
+ >
</div>
- <span style="font-size: 2.25rem; text-align: center">缂╁洖</span>
+ <span style="font-size: 2.25rem; text-align: center">鐐瑰姩缂�</span>
</el-button>
</div>
- <div style="color:#fff;font-size:2rem;margin-left:20rem">鍙充晶浼哥缉鏉�</div>
+ <div style="color: #fff; font-size: 2rem">鍙充晶浼哥缉鏉�</div>
+ <span style="color: #fff; font-size: 2rem"
+ >褰撳墠浼哥缉鏉嗕綅缃細{{ Position.right }}</span
+ >
</div>
<div class="operate">
<div class="item">浼稿埌浣�</div>
@@ -281,6 +485,23 @@
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
+ </div>
+ </div>
+ <div style="display: flex; flex-direction: column; align-items: center">
+ <div class="video_r">
+ <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
+ >瑙嗛鐩戞帶鍙充晶</span
+ >
+ <div
+ id="playWnd"
+ class="playWnd"
+ style="left: 109px; top: 133px"
+ ></div>
+ <!-- <iframe
+ src="http://192.168.2.168/doc/pageview.asp"
+ id="childFrame"
+ style="height: 100%"
+ ></iframe> -->
</div>
</div>
</div>
@@ -290,13 +511,226 @@
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import {
+ ManualOperation,
+ GetPosition,
+ AutoPickAndDrop,
+ Pouse,
+} from "@/api/newapi/Parameters.js";
+// import { WebVideoCtrl } from "@/assets/webControl/webVideoCtrl.js";
const router = useRouter();
const isMobile = ref(false);
+const Position = ref({
+ left: 0,
+ right: 0,
+});
+
const jumpRouter = (path) => {
router.push(path);
};
+const handManualOperation = async (position, ExtendedState) => {
+ try {
+ const res = await ManualOperation({
+ position: position,
+ ExtendedState: ExtendedState,
+ });
+ if (res.code === 0) {
+ ElMessage({
+ message: `${position}渚�${ExtendedState}鎴愬姛锛�${position}PLC鎵嬪姩${ExtendedState}閫熷害涓�${res.data.manualExtend}`,
+ type: "success",
+ });
+ } else {
+ ElMessage({
+ message: `${position}渚�${ExtendedState}澶辫触锛�${position}PLC鎵嬪姩${ExtendedState}閫熷害涓�${res.data.manualExtend}`,
+ type: "error",
+ });
+ }
+ } catch (error) {
+ ElMessage({
+ message: "鎿嶄綔澶辫触",
+ type: "error",
+ });
+ }
+ console.log(res);
+};
+const handleAutoPickAndDrop = async (val) => {
+ try {
+ const response = await AutoPickAndDrop({
+ ExtendedState: val,
+ });
+ if (response.code === 0) {
+ ElMessage.success(`${val}鎴愬姛`);
+ } else {
+ ElMessage.error(`${val}澶辫触`);
+ }
+ } catch (error) {
+ console.error(error);
+ ElMessage.error("鎿嶄綔澶辫触");
+ }
+};
+const handlePouse = async () => {
+ try {
+ const response = await Pouse();
+ if (response.code === 0) {
+ ElMessage.success(response.message);
+ } else {
+ ElMessage.error(response.message);
+ }
+ } catch (error) {
+ console.error(error);
+ ElMessage.error(error);
+ }
+};
+
+//鑾峰彇褰撳墠浣嶇疆
+const getPosition = () => {
+ GetPosition().then((res) => {
+ if (res.code == 0) {
+ Position.value.left = res.data.left;
+ Position.value.right = res.data.right;
+ }
+ });
+};
+// const WebVideoCtrl = new WebControl();
+// 鍒涘缓鎾斁瀹炰緥
+function initPlugin() {
+ console.log("initPlugin",new WebControl());
+
+ oWebControl = new WebControl({
+ szPluginContainer: "playWnd", // 鎸囧畾瀹瑰櫒id
+ iServicePortStart: 15900, // 鎸囧畾璧锋绔彛鍙凤紝寤鸿浣跨敤璇ュ��
+ iServicePortEnd: 15900,
+ szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 鐢ㄤ簬IE10浣跨敤ActiveX鐨刢lsid
+ cbConnectSuccess: function () {
+ // 鍒涘缓WebControl瀹炰緥鎴愬姛
+ oWebControl
+ .JS_StartService("window", {
+ // WebControl瀹炰緥鍒涘缓鎴愬姛鍚庨渶瑕佸惎鍔ㄦ湇鍔�
+ dllPath: "./VideoPluginConnect.dll", // 鍊�"./VideoPluginConnect.dll"鍐欐
+ })
+ .then(
+ function () {
+ // 鍚姩鎻掍欢鏈嶅姟鎴愬姛
+ oWebControl.JS_SetWindowControlCallback({
+ // 璁剧疆娑堟伅鍥炶皟
+ cbIntegrationCallBack: cbIntegrationCallBack,
+ });
+
+ oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () {
+ //JS_CreateWnd鍒涘缓瑙嗛鎾斁绐楀彛锛屽楂樺彲璁惧畾
+ init(); // 鍒涘缓鎾斁瀹炰緥鎴愬姛鍚庡垵濮嬪寲
+ });
+ },
+ function () {
+ // 鍚姩鎻掍欢鏈嶅姟澶辫触
+ }
+ );
+ },
+ cbConnectError: function () {
+ // 鍒涘缓WebControl瀹炰緥澶辫触
+ oWebControl = null;
+ $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...");
+ WebControl.JS_WakeUp("VideoWebPlugin://"); // 绋嬪簭鏈惎鍔ㄦ椂鎵цerror鍑芥暟锛岄噰鐢╳akeup鏉ュ惎鍔ㄧ▼搴�
+ initCount++;
+ if (initCount < 3) {
+ setTimeout(function () {
+ initPlugin();
+ }, 3000);
+ } else {
+ $("#playWnd").html("鎻掍欢鍚姩澶辫触锛岃妫�鏌ユ彃浠舵槸鍚﹀畨瑁咃紒");
+ }
+ },
+ cbConnectClose: function (bNormalClose) {
+ // 寮傚父鏂紑锛歜NormalClose = false
+ // JS_Disconnect姝ｅ父鏂紑锛歜NormalClose = true
+ console.log("cbConnectClose");
+ oWebControl = null;
+ $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...");
+ WebControl.JS_WakeUp("VideoWebPlugin://");
+ initCount++;
+ if (initCount < 3) {
+ setTimeout(function () {
+ initPlugin();
+ }, 3000);
+ } else {
+ $("#playWnd").html("鎻掍欢鍚姩澶辫触锛岃妫�鏌ユ彃浠舵槸鍚﹀畨瑁咃紒");
+ }
+ },
+ });
+
+}
+
+// const initWebVideoCtrl = () => {
+// if (!WebVideoCtrl) {
+// console.error("WebControl 鏈纭姞杞斤紝璇锋鏌ョ浉鍏宠剼鏈��");
+// ElMessage.error("WebControl 鏈纭姞杞斤紝璇锋鏌ョ浉鍏宠剼鏈��");
+// return;
+// }
+
+// try {
+// // 鍒濆鍖栨彃浠�
+// WebVideoCtrl.I_InitPlugin(800, 600, {
+// bWndFull: true, // 鏄惁鏀寔鍗曠獥鍙ｅ叏灞�
+// iPackageType: 2, // 2 琛ㄧず HLS 鍗忚
+// });
+// // 鎻掑叆鎻掍欢鍒版寚瀹� DOM 鍏冪礌
+// WebVideoCtrl.I_InsertOBJECTPlugin("videoDiv");
+
+// // 璁惧淇℃伅
+// const deviceInfo = {
+// sIP: "192.168.2.168", // 璁惧 IP 鍦板潃
+// iPort: 80, // 璁惧绔彛鍙�
+// sUsername: "admin", // 鐢ㄦ埛鍚�
+// sPassword: "123456", // 瀵嗙爜
+// };
+
+// // 璋冪敤鐧诲綍璁惧鍑芥暟
+// loginDevice(deviceInfo);
+// } catch (error) {
+// console.error("鍒濆鍖� WebVideoCtrl 鎻掍欢鏃跺嚭閿�:", error);
+// ElMessage.error("鍒濆鍖� WebVideoCtrl 鎻掍欢鏃跺嚭閿欙紝璇锋鏌ラ厤缃��");
+// }
+// };
+
+// 鐧诲綍璁惧
+// const loginDevice = (deviceInfo) => {
+// WebVideoCtrl.I_Login(
+// deviceInfo.sIP,
+// 1,
+// deviceInfo.iPort,
+// deviceInfo.sUsername,
+// deviceInfo.sPassword,
+// {
+// success: () => {
+// console.log("鐧诲綍鎴愬姛");
+// ElMessage.success("璁惧鐧诲綍鎴愬姛");
+// // 寮�濮嬮瑙�
+// startRealPlay();
+// },
+// error: () => {
+// console.error("鐧诲綍澶辫触锛岃妫�鏌ヨ澶囦俊鎭拰缃戠粶杩炴帴銆�");
+// ElMessage.error("璁惧鐧诲綍澶辫触锛岃妫�鏌ヨ澶囦俊鎭拰缃戠粶杩炴帴銆�");
+// },
+// }
+// );
+// };
+// // 寮�濮嬪疄鏃堕瑙堝嚱鏁�
+// const startRealPlay = () => {
+// try {
+// WebVideoCtrl.I_StartRealPlay(1, {
+// iStreamType: 0, // 涓荤爜娴�
+// });
+// console.log("寮�濮嬪疄鏃堕瑙�");
+// } catch (error) {
+// console.error("寮�濮嬪疄鏃堕瑙堟椂鍑洪敊:", error);
+// ElMessage.error("寮�濮嬪疄鏃堕瑙堟椂鍑洪敊锛岃妫�鏌ヨ澶囩姸鎬併��");
+// }
+// };
onMounted(() => {
+ initPlugin();
+ // initWebVideoCtrl();
// 鐩戝惉绐楀彛澶у皬鍙樺寲
window.addEventListener("resize", () => {
nextTick(() => {
@@ -315,6 +749,7 @@
// 濡傛灉绐楀彛瀹藉害灏忎簬绛変簬1080px锛屾墽琛岀浉搴旂殑鎿嶄綔
isMobile.value = false;
}
+ getPosition();
});
</script>
<style lang="scss" scoped>
@@ -326,7 +761,7 @@
.button {
height: 7.83rem;
display: flex;
- justify-content: center;
+ justify-content: space-between;
.btn {
position: relative;
@@ -407,9 +842,9 @@
.content {
display: flex;
-
.content_l {
display: flex;
+ flex-direction: column;
justify-content: space-between;
width: 50%;
height: 45rem;
@@ -419,13 +854,10 @@
border: 0.06rem solid rgba(6, 229, 231, 1);
padding: 0.88rem 0.88rem;
box-sizing: border-box;
-
.model {
display: flex;
-
.model_btn {
display: flex;
-
.btnicon {
display: flex;
justify-content: center;
@@ -444,18 +876,20 @@
.operate {
display: flex;
flex-direction: column;
-
+ align-items: flex-end;
.item {
display: flex;
flex-direction: column;
justify-content: center;
width: 8.75rem;
- height: 4.19rem;
+ height: 3.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -550,11 +984,23 @@
}
}
}
+ .video_l {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 80%;
+ border: 0.25rem solid rgba(255, 255, 255, 0.8);
+ img {
+ width: 6rem;
+ height: 8rem;
+ }
+ }
}
.content_r {
display: flex;
justify-content: space-between;
+ flex-direction: column;
width: 50%;
height: 45rem;
background-color: rgba(9, 48, 104, 1);
@@ -588,20 +1034,23 @@
.operate {
display: flex;
+ align-items: flex-end;
flex-direction: column;
- padding: 0.88rem 0.88rem;
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
justify-content: center;
width: 8.75rem;
- height: 4.19rem;
+ height: 3.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -694,6 +1143,17 @@
height: 4.375rem;
opacity: 0;
}
+ }
+ }
+ .video_r {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 80%;
+ border: 0.25rem solid rgba(255, 255, 255, 0.8);
+ img {
+ width: 6rem;
+ height: 8rem;
}
}
}
@@ -705,9 +1165,9 @@
.content_l {
display: flex;
+ flex-direction: column;
justify-content: space-between;
width: 100%;
- height: 45rem;
background-color: rgba(9, 48, 104, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
@@ -717,7 +1177,7 @@
.model {
display: flex;
-
+ justify-content: space-between;
.model_btn {
display: flex;
@@ -739,7 +1199,8 @@
.operate {
display: flex;
flex-direction: column;
-
+ align-items: flex-end;
+ padding: 0.58rem 0.58rem;
.item {
display: flex;
flex-direction: column;
@@ -747,10 +1208,12 @@
width: 8.75rem;
height: 4.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -845,13 +1308,20 @@
}
}
}
+ .video_l {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 70rem;
+ border: 0.75rem solid rgba(255, 255, 255, 0.8);
+ }
}
.content_r {
display: flex;
+ flex-direction: column;
justify-content: space-between;
width: 100%;
- height: 45rem;
background-color: rgba(9, 48, 104, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
@@ -862,7 +1332,7 @@
.model {
display: flex;
-
+ justify-content: space-between;
.model_btn {
display: flex;
@@ -885,7 +1355,7 @@
display: flex;
flex-direction: column;
padding: 0.88rem 0.88rem;
-
+ align-items: flex-end;
.item {
display: flex;
flex-direction: column;
@@ -893,10 +1363,12 @@
width: 8.75rem;
height: 4.19rem;
border-radius: 0.31rem;
- background: linear-gradient(90deg,
- rgba(0, 224, 255, 0.74) 0%,
- rgba(0, 224, 255, 0.4) 60%,
- rgba(235, 242, 243, 0.13) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 224, 255, 0.74) 0%,
+ rgba(0, 224, 255, 0.4) 60%,
+ rgba(235, 242, 243, 0.13) 100%
+ );
color: rgba(16, 16, 16, 1);
color: rgb(255, 255, 255);
font-size: 1.13rem;
@@ -991,7 +1463,14 @@
}
}
}
+ .video_r {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 70rem;
+ border: 0.75rem solid rgba(255, 255, 255, 0.8);
+ }
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3