feat 安全检测
This commit is contained in:
duanliang
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div class="box-1">
|
||||
<div class="title">核心景区视频</div>
|
||||
<ul class="list">
|
||||
<li
|
||||
class="item"
|
||||
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
|
||||
v-for="(item, index) in 10"
|
||||
:key="index"
|
||||
>
|
||||
<p class="item-title">三峡之巅-最新异常名称</p>
|
||||
<!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import item1 from '@/assets/images/item-1.png'
|
||||
import item2 from '@/assets/images/item-2.png'
|
||||
|
||||
console.log(item1, 'item1')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-1 {
|
||||
margin: vh(10);
|
||||
width: vw(326);
|
||||
border-radius: vw(2);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title {
|
||||
width: vw(260);
|
||||
height: vh(26);
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: vh(1026);
|
||||
padding: vw(8);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(0); /* 滚动条的宽度 */
|
||||
}
|
||||
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* 轨道的背景色 */
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #888; /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
|
||||
/* 当鼠标悬停在滚动条上时滑块的样式 */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* 滑块的背景色 */
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: vh(13);
|
||||
background-size: 100% 100%;
|
||||
&-title {
|
||||
margin-bottom: vh(6);
|
||||
margin-left: vw(45);
|
||||
color: #fff;
|
||||
font-size: vw(16);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: vh(164);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="box-2">
|
||||
<div class="header">
|
||||
<div class="title"> 交通信息 </div>
|
||||
<div class="title"> <span>交通信息</span> </div>
|
||||
</div>
|
||||
<div class="flex pt-20 p-box">
|
||||
<div class="item core">
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="title"> 景区信息 </div>
|
||||
<div class="title"> <span>景区信息</span> </div>
|
||||
</div>
|
||||
<div class="flex-four">
|
||||
<div class="item item1">
|
||||
@@ -60,7 +60,14 @@
|
||||
<div class="flex pt-20 p-box">
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警</span></div>
|
||||
<div class="pt-20">
|
||||
<div class="pt-20 chart-p">
|
||||
<div class="check-box">
|
||||
<el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
<el-option label="用户电话" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,7 +89,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="title"> 景区信息 </div>
|
||||
<div class="title"> <span>交通信息</span> </div>
|
||||
</div>
|
||||
<div class="flex-four">
|
||||
<div class="item item1">
|
||||
@@ -124,8 +131,14 @@
|
||||
<div class="flex pt-20 p-box">
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警</span></div>
|
||||
<div class="pt-20">
|
||||
<!-- <Line :width="370" :height="180" id="line" /> -->
|
||||
<div class="pt-20 chart-p">
|
||||
<div class="check-box">
|
||||
<el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
<el-option label="用户电话" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,6 +190,7 @@
|
||||
]);
|
||||
|
||||
provide(THEME_KEY, 'dark');
|
||||
let selectSpot = ref('')
|
||||
const option1 = ref({
|
||||
backgroundColor:'transparent',
|
||||
tooltip: {
|
||||
@@ -328,6 +342,16 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-select__wrapper){
|
||||
background:linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
|
||||
border:none;
|
||||
box-shadow:none;
|
||||
border-top-left-radius: vh(30);
|
||||
border-bottom-left-radius: vh(30);
|
||||
font-size:vw(14);
|
||||
color:#fff;
|
||||
|
||||
}
|
||||
.line-chart{
|
||||
width:100%;
|
||||
height:vh(200);
|
||||
@@ -343,6 +367,16 @@
|
||||
.p-box{
|
||||
padding-top:vh(10);
|
||||
justify-content: space-between;
|
||||
.chart-p{
|
||||
position:relative;
|
||||
.check-box{
|
||||
position: absolute;
|
||||
right:vw(30);
|
||||
top:vh(10);
|
||||
width:vw(120);
|
||||
z-index: 19;
|
||||
}
|
||||
}
|
||||
}
|
||||
.h-flex{
|
||||
display: flex;
|
||||
@@ -476,6 +510,14 @@
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/title-4.png');
|
||||
background-size: 100% 100%;
|
||||
span{
|
||||
font-weight: 800;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
|
||||
}
|
||||
}
|
||||
.more {
|
||||
position: absolute;
|
||||
|
||||
@@ -1,35 +1,20 @@
|
||||
<template>
|
||||
<!-- 视频 -->
|
||||
<div class="box-3-content">
|
||||
<navLeft></navLeft>
|
||||
|
||||
<div class="left-nav">
|
||||
<div class="top-box">
|
||||
<!-- <div class="title">监控切换</div> -->
|
||||
<div class="ul">
|
||||
<div class="li active">异常告警</div>
|
||||
<div class="li">景区入口</div>
|
||||
<div class="li">核心路段</div>
|
||||
<div class="li">公共交通</div>
|
||||
<div class="li">广场</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<div class="title">
|
||||
<span>检索</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视频 -->
|
||||
<div class="video-box">
|
||||
<div v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
||||
<block @click="handleItemVideo">
|
||||
<div class="flex video-one-1" v-if="videoLog == 1">
|
||||
<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</block>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="video-live flex" v-if="videoLog==2">
|
||||
<div class="video-lt">
|
||||
<div class="video-lt v-error-bg">
|
||||
<div class="desc">核心路段：这是一条信息说明</div>
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="video-rt">
|
||||
@@ -38,6 +23,7 @@
|
||||
</div>
|
||||
<div class="rt-v-box">
|
||||
<div class="rt-video v-error-bg" v-for="item in 8">
|
||||
<div class="desc">核心路段：这是一条信息说明</div>
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
|
||||
@@ -51,6 +37,8 @@
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import navLeft from '@/components/navLeft/index.vue'
|
||||
let searchValue = ref('')
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
@@ -86,27 +74,69 @@
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
//背景色设置为透明
|
||||
:deep(.el-input__wrapper){
|
||||
background-color:rgba(0,0,0,0);
|
||||
border:none;
|
||||
box-shadow:none;
|
||||
}
|
||||
//输入框颜色
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
color: #fff;
|
||||
}
|
||||
.box-3-content{
|
||||
width:vw(2410);
|
||||
width:vw(2356);
|
||||
height:vh(965);
|
||||
// background-image: url('/src/assets/images/monotir-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
margin-top: vh(120);
|
||||
display: flex;
|
||||
.video-box{
|
||||
flex:1;
|
||||
// padding:vh(40) vw(20);
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top:0;
|
||||
margin-left:vw(20);
|
||||
.video-one-1{
|
||||
background-image: url('/src/assets/images/log-v-bg.png');
|
||||
background-size: 100% 100%;
|
||||
flex-wrap: wrap;
|
||||
padding-top:0;
|
||||
padding:vh(30) vw(20);
|
||||
margin-left:vw(20);
|
||||
}
|
||||
.video-live{
|
||||
justify-content: space-between;
|
||||
margin-left:vw(10) ;
|
||||
.video-lt{
|
||||
width:vw(1700);
|
||||
width:vw(1666);
|
||||
height:vh(950);
|
||||
background-image: url('/src/assets/images/one-video-bg.png');
|
||||
background-size: 100% 100%;
|
||||
padding:vh(40) vw(50);
|
||||
position:relative;
|
||||
.desc{
|
||||
position:absolute;
|
||||
// width:100%;
|
||||
left:vw(50);
|
||||
right:vw(50);
|
||||
top:40(vh);
|
||||
z-index: 9;
|
||||
background: rgba(4,30,69,0.5);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #FFFFFF;
|
||||
padding:vw(20);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.v-error-bg{
|
||||
// background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||
// background-size: 100% 100%;
|
||||
.desc{
|
||||
background: rgba(226,27,27,0.5);
|
||||
}
|
||||
}
|
||||
.video-rt{
|
||||
width:vw(400);
|
||||
@@ -153,15 +183,36 @@
|
||||
padding:vw(20);
|
||||
box-sizing: border-box;
|
||||
margin-bottom:vh(2);
|
||||
position:relative;
|
||||
.desc{
|
||||
position:absolute;
|
||||
width:100%;
|
||||
left:0;
|
||||
bottom:0;
|
||||
z-index: 9;
|
||||
background: rgba(4,30,69,0.5);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #FFFFFF;
|
||||
padding:vw(20);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.v-error-bg{
|
||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
.desc{
|
||||
background: rgba(226,27,27,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.v-item{
|
||||
width:vw(420);
|
||||
width:vw(400);
|
||||
height:vh(300);
|
||||
background-image: url('/src/assets/images/v-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -174,71 +225,6 @@
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.left-nav{
|
||||
margin-left:vw(10);
|
||||
// margin-top:vh(35);
|
||||
width:vw(250);
|
||||
.bom-box{
|
||||
margin-top:vh(20);
|
||||
.title{
|
||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
span{
|
||||
margin-left:vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.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(250);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,177 +0,0 @@
|
||||
<template>
|
||||
<div class="box-4-content">
|
||||
<div class="top-box">
|
||||
<div class="title">融合通信</div>
|
||||
<div class="icon-box flex">
|
||||
<div class="icon">
|
||||
<img src="/src/assets/images/r-icon-1.png" alt="" />
|
||||
白帝城
|
||||
</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<div class="title">
|
||||
<span>最近联系</span>
|
||||
</div>
|
||||
<table class="table">
|
||||
<tr class="tr-th">
|
||||
<th>人员姓名</th>
|
||||
<th>部门</th>
|
||||
<th>职位</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-4-content{
|
||||
width:vw(317);
|
||||
height:vh(1062);
|
||||
background-image: url('/src/assets/images/rt-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top:vh(10);
|
||||
margin-left:vw(10);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
.bom-box{
|
||||
.table{
|
||||
width:100%;
|
||||
margin-top:vh(5);
|
||||
.tr-th{
|
||||
background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
// border: 1px solid;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #0096FF;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
th{
|
||||
padding:vw(5);
|
||||
}
|
||||
|
||||
}
|
||||
.tr-td{
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #F1F7FF;
|
||||
line-height: vh(16);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
td{
|
||||
padding:vh(5) vw(10)
|
||||
}
|
||||
}
|
||||
.tr-td:nth-child(odd){
|
||||
background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
|
||||
}
|
||||
}
|
||||
.title{
|
||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
span{
|
||||
margin-left:vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.top-box{
|
||||
width:100%;
|
||||
height:vh(500);
|
||||
.icon-box{
|
||||
justify-content: center;
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #FFFFFF;
|
||||
line-height: vh(16);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
flex-wrap: wrap;
|
||||
.icon{
|
||||
display: block;
|
||||
margin:vh(20) auto;
|
||||
width:vw(86);
|
||||
height:vh(104);
|
||||
img{
|
||||
width:vw(86);
|
||||
height:vh(104);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,84 +1,120 @@
|
||||
<template>
|
||||
<main class="wrapper">
|
||||
<CoreVideo />
|
||||
<box2 />
|
||||
<box3 />
|
||||
<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||
<Correspondence />
|
||||
</main>
|
||||
<main class="wrapper">
|
||||
<CoreVideo />
|
||||
<box2 />
|
||||
<box3 />
|
||||
<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||
<Correspondence />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import box3 from './components/box-3.vue'
|
||||
import box2 from './components/box-2.vue'
|
||||
import box5 from './components/box-5.vue'
|
||||
const navLeft = [{ name: '奉节县' }, { name: '三峡之巅', path: '/scenic' }, { name: '白帝城' },{ name: '龙河桥' }]
|
||||
const navRight = [{ name: '路段' }, { name: '路段' }, { name: '路段' }, { name: '路段' }]
|
||||
onMounted(() => {})
|
||||
import box3 from './components/box-3.vue'
|
||||
import box2 from './components/box-2.vue'
|
||||
const navLeft = [{
|
||||
name: '奉节县',
|
||||
path: '/sceneTesting'
|
||||
},
|
||||
{
|
||||
name: '三峡之巅',
|
||||
path: '/sceneTesting'
|
||||
},
|
||||
{
|
||||
name: '白帝城',
|
||||
path: '/sceneTesting'
|
||||
}, {
|
||||
name: '龙河桥',
|
||||
path: '/sceneTesting'
|
||||
}
|
||||
]
|
||||
const navRight = [{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
},
|
||||
{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
},
|
||||
{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
},
|
||||
{
|
||||
name: '路段',
|
||||
path: '/roadTesting'
|
||||
}
|
||||
]
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
.header {
|
||||
position: absolute;
|
||||
left: vw(326);
|
||||
.title {
|
||||
width: vw(3133);
|
||||
height: vh(120);
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
padding-top: vh(20);
|
||||
color: #fff;
|
||||
letter-spacing: vw(10);
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||
background-image: url('@/assets/images/title.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: vw(380);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-left: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
position: absolute;
|
||||
right: vw(424);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-right: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
left: vw(326);
|
||||
|
||||
.title {
|
||||
width: vw(3133);
|
||||
height: vh(120);
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
padding-top: vh(20);
|
||||
color: #fff;
|
||||
letter-spacing: vw(10);
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||
background-image: url('@/assets/images/title.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: vw(380);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-left: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
position: absolute;
|
||||
right: vw(424);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-right: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user