101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<template>
|
|
<main class="wrapper">
|
|
<box1 />
|
|
<box5/>
|
|
<!-- <box2 /> -->
|
|
<box3 />
|
|
<div class="header">
|
|
<ul class="nav-left">
|
|
<li class="nav-left-item">奉节县</li>
|
|
<li class="nav-left-item">三峡之巅</li>
|
|
<li class="nav-left-item">白帝城</li>
|
|
<li class="nav-left-item">龙河桥</li>
|
|
</ul>
|
|
<div class="title">监控大屏</div>
|
|
<ul class="nav-right">
|
|
<li class="nav-right-item">停车</li>
|
|
<li class="nav-right-item">工单</li>
|
|
<li class="nav-right-item">舆情</li>
|
|
<li class="nav-right-item">酒店</li>
|
|
</ul>
|
|
</div>
|
|
<box4 />
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import box1 from './components/box-1.vue'
|
|
import box4 from './components/box-4.vue'
|
|
import box3 from './components/box-3.vue'
|
|
import box2 from './components/box-2.vue'
|
|
import box5 from './components/box-5.vue'
|
|
|
|
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>
|