lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style:首页样式

Browse Source
This commit is contained in:
zjc
2024-12-13 10:21:20 +08:00
parent 81d7983cb6
commit c263e68dd9
24 changed files with 657 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/home/index.vue
View File

@@ -2,18 +2,26 @@
<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>
<li></li>
<li></li>
<li></li>
<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 />
</main>
</template>
<script setup>
import box1 from './components/box-1.vue'
import box2 from './components/box-2.vue'
onMounted(() => {})
</script>
@@ -25,19 +33,61 @@
height: 100vh;
overflow: hidden;
background-color: #0a254b;
.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%;
.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>