feat:新增景区页面

This commit is contained in:
zjc
2024-12-17 18:18:07 +08:00
parent 5e5ce522db
commit 1108aafed4
22 changed files with 1061 additions and 126 deletions

View File

@@ -1,97 +1,17 @@
<template>
<main class="wrapper">
<box1 />
<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>
</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>
<box2 />
<box3 />
<box4 />
</main>
<Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
<CoreVideo />
<box2 />
<box3 />
<box4 />
<Correspondence />
</template>
<script setup>
import box1 from './components/box-1.vue'
import box2 from './components/box-2.vue'
import box3 from './components/box-3.vue'
import box4 from './components/box-4.vue'
const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通' }]
const navRight = [{ name: '停车' }, { name: '工单' }, { name: '舆情' }, { name: '酒店' }]
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(630);
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>