<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>当前伸缩杆位置：{{ Position.right }}</span>
|
<span>左侧伸缩杆</span>
|
<span></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">
|
<span>当前伸缩杆位置：{{ Position.right }}</span>
|
<span>左侧伸缩杆</span>
|
<span></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
|
>
|
<img src="@/assets/imgs/left.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="content_mobile">
|
<div class="content_l">
|
<div class="model">
|
<span>当前伸缩杆位置：{{ Position.left }}</span>
|
<span>左侧伸缩杆</span>
|
<span></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: 2.5rem; font-weight: bold"
|
>视频监控左侧</span
|
>
|
<img src="@/assets/imgs/right.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="content_r">
|
<div class="model">
|
<span>当前伸缩杆位置：{{ Position.right }}</span>
|
<span>左侧伸缩杆</span>
|
<span></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: 2.5rem; font-weight: bold"
|
>视频监控右侧</span
|
>
|
<img src="@/assets/imgs/left.png" alt="" />
|
</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 {
|
AutoPickAndDrop,
|
Pouse,
|
GetPosition,
|
} from "@/api/newapi/Parameters.js";
|
|
const router = useRouter();
|
const isMobile = ref(false);
|
const Position = ref({
|
left: 0,
|
right: 0,
|
});
|
|
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.left = res.data.lift;
|
Position.value.right = res.data.right;
|
}
|
});
|
};
|
onMounted(() => {
|
// 监听窗口大小变化
|
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>
|
.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>
|
