<template>
|
<div class="PickAndDrop" v-if="!isShow">
|
<div class="button">
|
<div class="button_l">
|
<el-button
|
@click="handleAutoPickAndDrop('伸出')"
|
type="primary"
|
size="small"
|
style="
|
width: 10rem;
|
height: 4.06rem;
|
color: #fff;
|
background-color: rgba(6, 229, 231, 1);
|
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: 1.25rem; text-align: center">定位伸按钮</span>
|
</el-button>
|
<el-button
|
@click="handleAutoPickAndDrop('缩回')"
|
type="primary"
|
size="small"
|
style="
|
width: 10rem;
|
height: 4.06rem;
|
color: #fff;
|
background-color: rgba(6, 229, 231, 1);
|
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: 1.25rem; text-align: center">定位缩按钮</span>
|
</el-button>
|
<el-button
|
@click="showPose"
|
type="primary"
|
size="small"
|
style="
|
width: 8.69rem;
|
height: 4.06rem;
|
color: #fff;
|
background-color: rgba(6, 229, 231, 1);
|
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: 1.25rem; text-align: center">暂停</span>
|
</el-button>
|
</div>
|
<div class="button_r">
|
<el-button
|
@click="changshow"
|
class="btn"
|
type="primary"
|
size="small"
|
style="width: 20rem; 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">左侧伸缩杆</div>
|
<div class="operate" style="opacity: 0">
|
<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>
|
<div class="operate" style="opacity: 0">
|
<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 style="display: flex; align-items: center">
|
<div class="model">左侧伸缩杆</div>
|
<div class="mode"></div>
|
<div class="operate" style="opacity: 0">
|
<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>
|
<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 style="display: flex; align-items: center">
|
<div class="model">右侧伸缩杆</div>
|
<div class="mode"></div>
|
<div class="operate" style="opacity: 0">
|
<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>
|
<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>
|
<!-- 切换自动和手动 -->
|
<div v-if="isShow">
|
<!-- 通过标签页切换部门，并动态加载该部门的位置数据。 -->
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
<el-tab-pane v-for="item in list" :key="item.id" :label="item.name" :name="item.id">
|
<div class="Manualcontrol">
|
<div class="button">
|
<el-button
|
@click="changshow"
|
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>
|
</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="" /> -->
|
<video
|
id="video_left"
|
autoplay
|
muted
|
controls
|
playsinline
|
width="100%"
|
height="100%"
|
></video>
|
|
</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>
|
<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="" /> -->
|
<video id="video_right" autoplay muted controls playsinline width="100%" height="100%"></video>
|
</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: 10.69rem;
|
height: 4rem;
|
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: 1.25rem; text-align: center">点动伸</span>
|
</el-button>
|
<el-button
|
@click="handManualOperation('左', '缩回')"
|
type="primary"
|
size="small"
|
style="
|
width: 10.69rem;
|
height: 4rem;
|
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: 1.25rem; text-align: center">点动缩</span>
|
</el-button>
|
</div>
|
<div style="color: #fff; font-size: 1.5rem"> 左侧伸缩杆 </div>
|
<div style="color: #fff; font-size: 1.5rem">
|
<!-- 当前伸缩杆位置:{{ Position.left }} -->
|
</div>
|
</div>
|
<!-- 把 style去掉就显示了-->
|
<div class="operate" style="opacity: 0">
|
<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: 10.69rem;
|
height: 4rem;
|
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: 1.25rem; text-align: center">点动伸</span>
|
</el-button>
|
<el-button
|
@click="handManualOperation('右', '缩回')"
|
type="primary"
|
size="small"
|
style="
|
width: 10.69rem;
|
height: 4rem;
|
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: 1.25rem; text-align: center">点动缩</span>
|
</el-button>
|
</div>
|
<div style="color: #fff; font-size: 1.5rem"> 右侧伸缩杆 </div>
|
<div style="color: #fff; font-size: 1.5rem">
|
<!-- 当前伸缩杆位置:{{ Position.right }} -->
|
</div>
|
</div>
|
<div class="operate" style="opacity: 0">
|
<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"
|
>视频监控右侧58</span
|
>
|
|
<img src="@/assets/imgs/left.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<el-dialog v-model="dialogVisible" :modal="false">
|
<div>
|
<el-radio-group v-model="redioDeptId">
|
<el-radio :value="1">检修道一</el-radio>
|
<el-radio :value="2">检修道二</el-radio>
|
<el-radio :value="3">检修道三</el-radio>
|
<el-radio :value="4">检修道四</el-radio>
|
<el-radio :value="5">检修道五</el-radio>
|
</el-radio-group>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handlePouse"> 确认 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</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, ManualOperation, Pause, GetPosition } from '@/api/newapi/Parameters.js'
|
const activeName = ref('first')
|
const router = useRouter()
|
const isShow = ref(false)
|
const isMobile = ref(false)
|
const list = ref([
|
{
|
name: '检道一',
|
id: 'first',
|
value: 1
|
},
|
{
|
name: '检道二',
|
id: 'second',
|
value: 2
|
},
|
{
|
name: '检道三',
|
id: 'third',
|
value: 3
|
},
|
{
|
name: '检道四',
|
id: 'fourth',
|
value: 4
|
},
|
{
|
name: '检道五',
|
id: 'fifith',
|
value: 5
|
},
|
{
|
name: '检道六',
|
id: 'six',
|
value: 6
|
}
|
])
|
const DeptId = ref(1)
|
const dialogVisible = ref(false)
|
const redioDeptId = ref(1)
|
const Position = ref({
|
left: 0,
|
right: 0
|
})
|
|
const handleAutoPickAndDrop = throttle(async (val) => {
|
try {
|
const response = await AutoPickAndDrop({
|
ExtendedState: val
|
})
|
if (response.status === true) {
|
if (response.code === 0) {
|
ElMessage.success(`${val}成功`)
|
} else {
|
ElMessage.error(`${response.message}`)
|
}
|
} else {
|
ElMessage.error(`${val}失败`)
|
}
|
} catch (error) {
|
console.error(error)
|
ElMessage.error('操作失败')
|
}
|
}, 2000)
|
const handManualOperation = throttle(async (position, ExtendedState) => {
|
try {
|
const res = await ManualOperation({
|
position: position,
|
ExtendedState: ExtendedState,
|
DeptId: DeptId.value
|
})
|
if (res.status === true) {
|
if (res.code === 0) {
|
ElMessage({
|
message: `${position}侧${ExtendedState}成功`,
|
type: 'success'
|
})
|
} else {
|
ElMessage({
|
message: `${position}侧${ExtendedState}失败`,
|
type: 'error'
|
})
|
}
|
} else {
|
ElMessage.error(`${position}${ExtendedState}失败`)
|
}
|
} catch (error) {
|
ElMessage({
|
message: '操作失败',
|
type: 'error'
|
})
|
}
|
|
console.log(res)
|
}, 2000)
|
|
|
|
// 通过标签页切换部门，并动态加载该部门的位置数据。
|
const srtpaddres=[
|
{
|
left:"rtsp:admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
|
right:"rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
|
},{
|
left:"rtsp:admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
|
right:"rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
|
},{
|
left:"rtsp:admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
|
right:"rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
|
},{
|
left:"rtsp:admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
|
right:"rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
|
},{
|
left:"rtsp:admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
|
right:"rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
|
},{
|
left:"rtsp:admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
|
right:"rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
|
}
|
|
] //视频流
|
//默认写个视频流地址
|
const rstp=ref(srtpaddres[0].left)
|
const rstp1=ref(srtpaddres[0].right)
|
// ✅ 先声明变量
|
const webRtcServer_left = ref(null)
|
const webRtcServer_right = ref(null)
|
|
//切换标签
|
const handleClick = (tab, event) => {
|
destroyVideo()//切换的时候消除上次的视频监控流
|
console.log(tab.index);
|
|
DeptId.value = Number(tab.index) + 1
|
// GetPosition(DeptId.value).then((res) => {
|
// Position.value.left = res.data.lift
|
// Position.value.right = res.data.right
|
// })
|
|
rstp.value=srtpaddres[tab.index].left
|
rstp1.value=srtpaddres[tab.index].right
|
}
|
|
//视频监控
|
// WebRtcStreamer 服务地址
|
const serverUrl = 'http://192.168.1.103:8000' // ← 改为你运行的那台电脑的 IP
|
|
const initVideo = () => {
|
destroyVideo()// 安全清理
|
try {
|
webRtcServer_left.value = new WebRtcStreamer('video_left', serverUrl)
|
webRtcServer_left.value.connect(rstp.value)
|
|
webRtcServer_right.value = new WebRtcStreamer('video_right', serverUrl)
|
webRtcServer_right.value.connect(rstp1.value)
|
|
console.log('视频初始化完成')
|
} catch (err) {
|
ElMessage.error('视频初始化失败: ' + err.message)
|
}
|
}
|
|
//销毁视频函数
|
const destroyVideo = () => {
|
if (webRtcServer_left.value) {
|
webRtcServer_left.value.disconnect()
|
webRtcServer_left.value = null
|
}
|
if (webRtcServer_right.value) {
|
webRtcServer_right.value.disconnect()
|
webRtcServer_right.value = null
|
}
|
}
|
|
onActivated(() => {
|
// 缓存页面 打开页面 实现播放
|
["video_left", "video_right"].forEach(id => {
|
const video = document.getElementById(id);
|
if (video && video.paused) video.play();
|
});
|
});
|
// 页面停用
|
|
onDeactivated(() => {
|
// 缓存页面 离开页面 实现暂停
|
["video_left", "video_right"].forEach(id => {
|
const video = document.getElementById(id);
|
if (video && !video.paused) video.pause();
|
});
|
});
|
//视频监控
|
//视频
|
|
|
const changshow = () => {
|
isShow.value = !isShow.value
|
}
|
const showPose = () => {
|
dialogVisible.value = true
|
}
|
const handlePouse = () => {
|
try {
|
Pause(redioDeptId.value).then((res) => {
|
if (res.status === true) {
|
if (res.code === 0) {
|
ElMessage({
|
message: res.message,
|
type: 'success'
|
})
|
dialogVisible.value = false
|
}
|
} else {
|
ElMessage({
|
message: res.message,
|
type: 'warning'
|
})
|
dialogVisible.value = false
|
}
|
})
|
} catch (error) {
|
console.log(error)
|
}
|
}
|
|
function throttle(func, wait) {
|
// 上一次执行函数的时间戳，初始值为 0
|
let lastTime = 0
|
// 返回一个闭包函数，作为节流后的函数
|
return function (...args) {
|
// 获取当前时间戳
|
const now = Date.now()
|
// 如果当前时间与上一次执行时间的差值大于等于 wait，则执行函数
|
if (now - lastTime >= wait) {
|
// 更新上一次执行函数的时间戳
|
lastTime = now
|
// 调用原始函数，并传入参数
|
func(...args)
|
}
|
}
|
}
|
|
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
|
}
|
// GetPosition(DeptId.value).then((res) => {
|
// Position.value.left = res.data.lift
|
// Position.value.right = res.data.right
|
// })
|
})
|
onBeforeUnmount(destroyVideo)
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
.PickAndDrop {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
// background-color: rgba(0, 0, 0, 0.3);
|
.button {
|
height: 4.83rem;
|
display: flex;
|
justify-content: space-between;
|
.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/imgs/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/imgs/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: -6rem;
|
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: 14rem;
|
/* 设置边框的宽度 */
|
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: 20rem;
|
/* 设置边框的宽度 */
|
background-image: url('@/assets/imgs/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;
|
text-align: center;
|
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;
|
text-align: center;
|
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: 1rem 0rem;
|
|
.model {
|
color: #fff;
|
text-align: center;
|
width: 100%;
|
font-size: 2rem;
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
padding: 0 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: 80%;
|
border: 0.25rem 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: 1%;
|
padding: 1rem 0rem;
|
|
.model {
|
color: #fff;
|
text-align: center;
|
width: 100%;
|
font-size: 2rem;
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
padding: 0 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: 80%;
|
border: 0.25rem solid rgba(255, 255, 255, 0.8);
|
}
|
}
|
}
|
}
|
.Manualcontrol {
|
display: flex;
|
flex-direction: column;
|
.button {
|
height: 4.83rem;
|
display: flex;
|
justify-content: center;
|
.btn {
|
position: relative;
|
background-color: rgba($color: #000000, $alpha: 0);
|
background-image: url('@/assets/imgs/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/imgs/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.88rem 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: 80%;
|
border: 0.25rem 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: 1%;
|
|
.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 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: 80%;
|
border: 0.25rem solid rgba(255, 255, 255, 0.8);
|
}
|
}
|
}
|
}
|
</style>
|
