优化

艺术家

2025-05-24 6564593ef44090cca74582d7b32ac979c262b908

 ÏîÄ¿´úÂë/ÉìËõ¸Ë/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的clsid
    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函数，采用wakeup来启动程序
      initCount++;
      if (initCount < 3) {
        setTimeout(function () {
          initPlugin();
        }, 3000);
      } else {
        $("#playWnd").html("插件启动失败，请检查插件是否安装！");
      }
    },
    cbConnectClose: function (bNormalClose) {
      // å¼‚常断开：bNormalClose = false
      // JS_Disconnect正常断开：bNormalClose = 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>
</style>