feat：对接消息相关接口
This commit is contained in:
zjc
@@ -1,162 +1,159 @@
|
||||
<template>
|
||||
<div class="n-box-traffic">
|
||||
<!-- nav -->
|
||||
<div class="left-nav">
|
||||
<div class="top-box">
|
||||
|
||||
<div class="ul">
|
||||
<div class="li active">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-box-2">
|
||||
<div class="map-box">
|
||||
|
||||
<Map></Map>
|
||||
<!-- 视频 -->
|
||||
<div class="video-list">
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="menu">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="n-box-traffic">
|
||||
<!-- nav -->
|
||||
<div class="left-nav">
|
||||
<div class="top-box">
|
||||
<div class="ul">
|
||||
<div class="li active">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-box-2">
|
||||
<div class="map-box">
|
||||
<Map></Map>
|
||||
<!-- 视频 -->
|
||||
<div class="video-list">
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
<div class="menu">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
color: "#409eff", //主题色
|
||||
title: "", //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
"setting",
|
||||
"pip",
|
||||
"pageFullScreen",
|
||||
"fullScreen",
|
||||
], //显示所有按钮,
|
||||
});
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
const options = reactive({
|
||||
src: 'http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8', //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen'
|
||||
] //显示所有按钮,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.n-box-traffic{
|
||||
display: flex;
|
||||
margin-top:vh(100);
|
||||
}
|
||||
.left-nav{
|
||||
margin-left:vw(10);
|
||||
// margin-top:vh(35);
|
||||
// width:vw(250);
|
||||
.top-box{
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: rgba(255,255,255,0.7);
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.title{
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
height:vh(35);
|
||||
line-height: vh(34);
|
||||
padding-left:vw(20);
|
||||
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
||||
}
|
||||
.ul{
|
||||
.li{
|
||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
width:vw(120);
|
||||
height:vh(58);
|
||||
line-height:vh(58);
|
||||
text-align: center;
|
||||
margin-bottom:vh(15);
|
||||
}
|
||||
.active{
|
||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
// width:vw(178);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.traffic-box-2{
|
||||
width:vw(1390);
|
||||
height:vh(975);
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
margin:0 vw(10);
|
||||
padding:vh(35) vw(30);
|
||||
margin-right:0;
|
||||
position:relative;
|
||||
z-index:9;
|
||||
.map-box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:relative;
|
||||
.video-list{
|
||||
width:vw(320);
|
||||
height:vh(120);
|
||||
background: #0A254B;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position: absolute;
|
||||
bottom:vw(10);
|
||||
right:vw(10);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.li{
|
||||
width:vw(140);
|
||||
height:vh(105);
|
||||
background-image: url('/src/assets/images/small-v-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right:vw(6);
|
||||
}
|
||||
.menu{
|
||||
width: vw(12);
|
||||
height: vh(60);
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #FFFFFF;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.n-box-traffic {
|
||||
display: flex;
|
||||
margin-top: vh(120);
|
||||
}
|
||||
.left-nav {
|
||||
margin-left: vw(10);
|
||||
// margin-top:vh(35);
|
||||
// width:vw(250);
|
||||
.top-box {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
height: vh(35);
|
||||
line-height: vh(34);
|
||||
padding-left: vw(20);
|
||||
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
||||
}
|
||||
.ul {
|
||||
.li {
|
||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
width: vw(120);
|
||||
height: vh(58);
|
||||
line-height: vh(58);
|
||||
text-align: center;
|
||||
margin-bottom: vh(15);
|
||||
}
|
||||
.active {
|
||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
// width:vw(178);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.traffic-box-2 {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: vw(1290);
|
||||
height: vh(955);
|
||||
margin: 0 vw(8);
|
||||
padding: vw(20);
|
||||
box-sizing: border-box;
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
.map-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.video-list {
|
||||
width: vw(320);
|
||||
height: vh(120);
|
||||
background: #0a254b;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position: absolute;
|
||||
bottom: vw(10);
|
||||
right: vw(10);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.li {
|
||||
width: vw(140);
|
||||
height: vh(105);
|
||||
background-image: url('/src/assets/images/small-v-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right: vw(6);
|
||||
}
|
||||
.menu {
|
||||
width: vw(12);
|
||||
height: vh(60);
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #ffffff;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user