<template>
|
<div class="Manualcontrol">
|
<div class="button">
|
<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
|
@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="
|
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="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="
|
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 style="color: #fff; font-size: 2rem; margin-left: 15rem">
|
右侧伸缩杆
|
</div>
|
</div>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位</div>
|
<div class="item">缩到位</div>
|
<div class="item">伸出速度</div>
|
<div class="item">缩回速度</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<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
|
@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="
|
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="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="
|
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 style="color: #fff; font-size: 2rem; margin-left: 15rem">
|
左侧伸缩杆
|
</div>
|
</div>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位</div>
|
<div class="item">缩到位</div>
|
<div class="item">伸出速度</div>
|
<div class="item">缩回速度</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<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>
|
</div>
|
<div v-else class="content_mobile">
|
<div class="content_l">
|
<div class="model">
|
<div class="model_btn">
|
<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="
|
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="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="
|
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>
|
<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>
|
<div class="item">缩到位</div>
|
<div class="item">伸出速度</div>
|
<div class="item">缩回速度</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<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
|
@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="
|
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="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="
|
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>
|
<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>
|
<div class="item">缩到位</div>
|
<div class="item">伸出速度</div>
|
<div class="item">缩回速度</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<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>
|
</div>
|
</div>
|
</template>
|
<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(() => {
|
if (window.innerWidth > 1200) {
|
isMobile.value = true;
|
} else {
|
isMobile.value = false;
|
}
|
});
|
});
|
// 初始化时判断窗口大小
|
if (window.innerWidth > 1200) {
|
// 如果窗口宽度小于1080px，执行相应的操作
|
isMobile.value = true;
|
} else {
|
// 如果窗口宽度小于等于1080px，执行相应的操作
|
isMobile.value = false;
|
}
|
getPosition();
|
});
|
</script>
|
<style lang="scss" scoped>
|
.Manualcontrol {
|
display: flex;
|
flex-direction: column;
|
|
// background-color: rgba(0, 0, 0, 0.3);
|
.button {
|
height: 7.83rem;
|
display: flex;
|
justify-content: space-between;
|
|
.btn {
|
position: relative;
|
background-color: rgba($color: #000000, $alpha: 0);
|
background-image: url("@/assets/index/icon/btnbg.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
border: none;
|
|
.Aspan {
|
position: relative;
|
color: rgba(255, 255, 255, 1);
|
font-size: 2.25rem;
|
text-align: center;
|
}
|
|
.Aspan::before {
|
content: "";
|
position: absolute;
|
height: 0.66rem;
|
/* 设置边框的长度 */
|
width: 0.66rem;
|
/* 设置边框的宽度 */
|
background-color: rgba(102, 255, 255, 1);
|
/* 设置边框的颜色 */
|
left: -11.8rem;
|
top: -0.25rem;
|
border-radius: 50%;
|
}
|
|
.Aspan::after {
|
content: "";
|
position: absolute;
|
height: 0.66rem;
|
/* 设置边框的长度 */
|
width: 0.66rem;
|
/* 设置边框的宽度 */
|
background-color: rgba(102, 255, 255, 1);
|
/* 设置边框的颜色 */
|
right: -11.8rem;
|
top: -0.25rem;
|
border-radius: 50%;
|
}
|
}
|
|
.btn::after {
|
content: "";
|
position: absolute;
|
left: 50%;
|
height: 0.25rem;
|
/* 设置边框的长度 */
|
width: 20rem;
|
/* 设置边框的宽度 */
|
background-color: rgba(102, 255, 255, 1);
|
/* 设置边框的颜色 */
|
transform: translateX(-50%);
|
bottom: 0;
|
border-radius: 0.25rem;
|
}
|
|
.btn::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
height: 1.01rem;
|
/* 设置边框的长度 */
|
width: 27.57rem;
|
/* 设置边框的宽度 */
|
background-image: url("@/assets/index/icon/border.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
/* 设置边框的颜色 */
|
transform: translateX(-50%);
|
top: 0;
|
border-radius: 0.25rem;
|
}
|
}
|
|
.content {
|
display: flex;
|
.content_l {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 50%;
|
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);
|
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;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 8.75rem;
|
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%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
height: 4.375rem;
|
opacity: 0;
|
}
|
}
|
}
|
.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);
|
color: rgba(16, 16, 16, 1);
|
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
|
border: 0.06rem solid rgba(6, 229, 231, 1);
|
margin-left: 3rem;
|
padding: 0.88rem 0.88rem;
|
box-sizing: border-box;
|
|
.model {
|
display: flex;
|
|
.model_btn {
|
display: flex;
|
|
.btnicon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
align-items: flex-end;
|
flex-direction: column;
|
padding: 0.58rem 0.58rem;
|
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 8.75rem;
|
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%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
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;
|
}
|
}
|
}
|
}
|
|
.content_mobile {
|
display: flex;
|
flex-direction: column;
|
|
.content_l {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 100%;
|
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);
|
border: 0.06rem solid rgba(6, 229, 231, 1);
|
padding: 0.88rem 0.88rem;
|
box-sizing: border-box;
|
|
.model {
|
display: flex;
|
justify-content: space-between;
|
.model_btn {
|
display: flex;
|
|
.btnicon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
padding: 0.58rem 0.58rem;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
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%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
height: 4.375rem;
|
opacity: 0;
|
}
|
}
|
}
|
.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%;
|
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);
|
border: 0.06rem solid rgba(6, 229, 231, 1);
|
padding: 0.88rem 0.88rem;
|
box-sizing: border-box;
|
margin-top: 10%;
|
|
.model {
|
display: flex;
|
justify-content: space-between;
|
.model_btn {
|
display: flex;
|
|
.btnicon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
padding: 0.88rem 0.88rem;
|
align-items: flex-end;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
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%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
height: 4.375rem;
|
opacity: 0;
|
}
|
}
|
}
|
.video_r {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 70rem;
|
border: 0.75rem solid rgba(255, 255, 255, 0.8);
|
}
|
}
|
}
|
}
|
</style>
|
