<template>
|
<div class="PickAndDrop">
|
<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> -->
|
<div class="button_r">
|
<el-button
|
@click="jumpRouter('/Manualcontrol')"
|
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>
|
<div v-if="isMobile" class="content">
|
<div class="content_l">
|
<div class="model">
|
<span
|
>当前伸缩杆位置：{{
|
leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
|
}}</span
|
>
|
<span>左侧伸缩杆</span>
|
<span></span>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.leftPosition }}</div>
|
<!-- ruleForm.leftPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.extendSpeed }}</div>
|
<div class="item">缩回速度:{{ ruleForm.extendSpeed }}</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/left.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="content_r">
|
<div class="model">
|
<span
|
>当前伸缩杆位置：{{
|
rightposition.Rightvalue ? parseInt(rightposition.Rightvalue) : 0
|
}}</span
|
>
|
<span>右侧伸缩杆</span>
|
<span></span>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.rightPosition }}</div>
|
<!-- ruleForm.rightPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.retractionSpeed }}</div>
|
<div class="item">缩回速度:{{ ruleForm.retractionSpeed }}</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/right.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="content_mobile">
|
<div class="content_l">
|
<div class="model">
|
<span
|
>当前伸缩杆位置：{{
|
leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
|
}}</span
|
>
|
<span>左侧伸缩杆</span>
|
<span></span>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.leftPosition }}</div>
|
<!-- ruleForm.leftPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.extendSpeed }}</div>
|
<div class="item">缩回速度:{{ ruleForm.extendSpeed }}</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: 2.5rem; font-weight: bold"
|
>视频监控左侧</span
|
>
|
<img src="@/assets/imgs/left.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="content_r">
|
<div class="model">
|
<span
|
>当前伸缩杆位置：{{
|
rightposition.Rightvalue ? parseInt(rightposition.Rightvalue) : 0
|
}}</span
|
>
|
<span>右侧伸缩杆</span>
|
<span></span>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.rightPosition }}</div>
|
<!-- ruleForm.rightPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.retractionSpeed }}</div>
|
<div class="item">缩回速度:{{ ruleForm.retractionSpeed }}</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: 2.5rem; font-weight: bold"
|
>视频监控右侧</span
|
>
|
<!-- <video
|
id="video"
|
controls
|
autoplay
|
muted
|
width="100%"
|
height="100%"
|
></video> -->
|
<img src="@/assets/imgs/right.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {
|
ref,
|
onMounted,
|
nextTick,
|
onUnmounted,
|
onActivated,
|
onDeactivated,
|
onBeforeUnmount,
|
} from "vue";
|
import { useRouter } from "vue-router";
|
import { ElMessage } from "element-plus";
|
import {
|
AutoPickAndDrop,
|
Pouse,
|
GetPosition,
|
GetParameter,
|
} from "@/api/newapi/Parameters.js";
|
|
const router = useRouter();
|
const isMobile = ref(false);
|
const Position = ref({
|
lift: 0,
|
right: 0,
|
});
|
const ruleForm = ref({
|
creater: "string",
|
createDate: "2025-03-27T05:48:57.698Z",
|
modifier: "string",
|
modifyDate: "2025-03-27T05:48:57.698Z",
|
id: 0,
|
extendSpeed: 0,
|
retractionSpeed: 0,
|
manualExtend: 0,
|
manualRetraction: 0,
|
// depid: userInfo.depid,
|
// account: userInfo.userName,
|
leftPosition: 0,
|
rightPosition: 0,
|
});
|
const rightposition = ref({});
|
const leftposition = ref({});
|
const tableData = ref([]);
|
const isStart = ref(false); // 是否开始
|
const timer = ref(null);
|
const client = ref(null);
|
const jumpRouter = (path) => {
|
router.push(path);
|
};
|
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.lift = res.data.lift;
|
// Position.value.right = res.data.right;
|
// }
|
// });
|
// };
|
|
//获取参数
|
const getParameter = () => {
|
GetParameter().then((res) => {
|
if (res.code == 0) {
|
ruleForm.value.extendSpeed = res.data == null ? 0 : res.data.extendSpeed;
|
ruleForm.value.retractionSpeed =
|
res.data == null ? 0 : res.data.retractionSpeed;
|
ruleForm.value.manualExtend =
|
res.data == null ? 0 : res.data.manualExtend;
|
ruleForm.value.manualRetraction =
|
res.data == null ? 0 : res.data.manualRetraction;
|
ruleForm.value.leftPosition =
|
res.data == null ? 0 : res.data.leftPosition;
|
ruleForm.value.rightPosition =
|
res.data == null ? 0 : res.data.rightPosition;
|
}
|
});
|
};
|
|
const createSocket = (url) => {
|
clearInterval(timer.value);
|
// 创建WebSocket连接
|
//"ws://127.0.0.1:9295/admin"
|
//192.168.1.103
|
client.value = new WebSocket("ws://192.168.1.103:5173/");
|
client.value.onopen = function () {
|
console.log("WebSocket 连接成功");
|
};
|
client.value.onmessage = function (event) {
|
let data = JSON.parse(event.data);
|
if (data.Status) {
|
tableData.value = data.Data;
|
} else if (data.device == "右Plc") {
|
rightposition.value = data;
|
} else if (data.device == "左Plc") {
|
leftposition.value = data;
|
}
|
|
console.log("WebSocket 接收到消息", data);
|
};
|
client.value.onclose = function () {
|
console.log("WebSocket 连接关闭");
|
if (isStart.value) {
|
timer.value = setTimeout(createSocket, 1000);
|
}
|
};
|
|
client.value.onerror = function () {};
|
};
|
|
//视频监控
|
const webRtcServer = ref();
|
// webrtc服务器地址
|
const IP = "http://127.0.0.1:8000";
|
|
// 创建视频实例
|
|
const initVideo = () => {
|
webRtcServer.value = new WebRtcStreamer("video", IP);
|
//需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。
|
//注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
|
webRtcServer.value.connect(
|
"rtsp://admin:MXmx2380#@192.168.1.168:554/h264/Camera 01/main/av_stream"
|
);
|
};
|
//rtsp://admin:MXmx2380#@192.168.1.168:554/h264/ch1/main/av_stream
|
// 销毁视频实例
|
|
const destroyVideo = () => {
|
webRtcServer.value &&
|
(webRtcServer.value.disconnect(), (webRtcServer.value = null));
|
};
|
|
onMounted(() => {
|
initVideo();
|
// 监听窗口大小变化
|
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;
|
}
|
isStart.value = true; // 设置为开始状态
|
createSocket();
|
// getPosition();
|
getParameter();
|
});
|
// 页面激活
|
|
onActivated(() => {
|
// 缓存页面 打开页面 实现播放
|
const video = document.getElementById("video");
|
video.paused && video.play();
|
});
|
// 页面停用
|
|
onDeactivated(() => {
|
// 缓存页面 离开页面 实现暂停
|
const video = document.getElementById("video");
|
video.play && video.pause();
|
});
|
|
onBeforeUnmount(() => {
|
destroyVideo();
|
});
|
onUnmounted(() => {
|
isStart.value = false;
|
clearInterval(timer.value);
|
if (client.value) {
|
client.value.close();
|
}
|
clearInterval(timer.value);
|
});
|
</script>
|
<style lang="scss" scoped>
|
.PickAndDrop {
|
display: flex;
|
flex-direction: column;
|
|
// background-color: rgba(0, 0, 0, 0.3);
|
.button {
|
height: 7.83rem;
|
display: flex;
|
justify-content: center;
|
.button_l {
|
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;
|
}
|
}
|
|
.button_r {
|
.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: -9.5rem;
|
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: -9.5rem;
|
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: 2rem 0rem;
|
.model {
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 0rem 2rem;
|
width: 100%;
|
font-size: 2rem;
|
}
|
|
.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: 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;
|
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);
|
margin-left: 2rem;
|
padding: 2rem 0rem;
|
.model {
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 0rem 2rem;
|
width: 100%;
|
font-size: 2rem;
|
}
|
|
.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: 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;
|
justify-content: space-between;
|
flex-direction: column;
|
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: 2rem 0rem;
|
.model {
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 0rem 2rem;
|
width: 100%;
|
font-size: 2rem;
|
}
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
padding: 0.88rem 0.88rem;
|
.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-around;
|
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);
|
margin-top: 10%;
|
padding: 2rem 0rem;
|
.model {
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 0rem 2rem;
|
width: 100%;
|
font-size: 2rem;
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
padding: 0.88rem 0.88rem;
|
.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>
|
