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

feat：完善首页

Browse Source
This commit is contained in:
zjc
2024-12-16 18:28:02 +08:00
parent 111133ffb4
commit 5e5ce522db
4 changed files with 317 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/home/components/box-4.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="box-4">
<!-- <Title1 title="交通信息" />
<Title1 title="交通信息" />
<div class="flex justify-evenly pt-10">
<div v-for="item in list" class="cell">
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
@@ -97,7 +97,7 @@
<div class="flex-1">
<Title1 title="酒店信息" class="title1" />
</div>
</div> -->
</div>
<div class="flex">
<div class="car-ship">
<div class="mb-6">
@@ -114,9 +114,19 @@
<div>空余</div>
</div>
<div class="cell">
<div class="label">车牌号</div>
<div>车长</div>
<div>车速</div>
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
</div>
</div>
@@ -126,12 +136,56 @@
<div class="flex align-center">
<countup class="value" :end-val="130" /> <span class="unit">辆</span>
</div>
<div class="table">
<div class="header">
<div>景区</div>
<div>调度</div>
<div>空余</div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="hotel">
<div> 3 </div>
<div> 4 </div>
<div>
<div class="item">
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
</div>
<div class="item">
<div class="label">房间总数</div>
<countup class="value" :end-val="500" />
</div>
<div class="item">
<div class="label">总入住</div>
<countup class="value" :end-val="500" />
</div>
<div class="item">
<div class="label">总入住率</div>
<countup class="value" :end-val="500" />
</div>
</div>
<div>
<div class="pt-6">
<Title3 title="酒店入住人数及入住率" />
</div>
<lodging-ratio />
</div>
</div>
</div>
</div>
@@ -139,8 +193,10 @@
<script setup>
import jam from './jam.vue'
import TrafficFlow from './traffic-flow.vue'
import vacancy from './vacancy.vue'
import TrafficFlow from './traffic-flow.vue'
import LodgingRatio from './lodging-ratio.vue'
import countup from 'vue-countup-v3'
import icon1 from '@/assets/images/icon-1.png'
import icon2 from '@/assets/images/icon-2.png'
@@ -227,10 +283,10 @@
}
& > div {
flex: 1;
height: vh(70);
display: flex;
align-items: center;
justify-content: space-evenly;
height: vh(70);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.label {
@@ -263,10 +319,12 @@
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.icon {
padding-left: vw(90);
width: vw(352);
height: vh(70);
padding-top: vh(10);
padding-left: vw(90);
display: flex;
flex-direction: column;
justify-content: center;
background-size: 100% 100%;
box-sizing: border-box;
}
@@ -298,7 +356,7 @@
.table {
position: absolute;
left: vw(160);
width: vw(200);
width: vw(220);
height: vh(100);
z-index: 2;
.header {
@@ -316,19 +374,73 @@
}
.cell {
display: flex;
height: vh(30);
line-height: vh(30);
height: vh(27);
line-height: vh(27);
text-align: center;
background: #074686;
&:nth-child(2n + 1) {
background: rgba(0, 150, 255, 0.1);
}
& > div {
flex: 1;
}
& > div:nth-child(1) {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
& > div:nth-child(2) {
font-weight: bold;
font-size: vw(18);
color: #ffffff;
}
& > div:nth-child(3) {
font-weight: bold;
font-size: vw(18);
color: #02f9fa;
}
.unit-1 {
font-size: vw(12);
}
}
}
}
}
.hotel {
flex: 1;
margin-left: vw(6);
& > div:nth-child(1) {
display: flex;
width: vw(360);
height: vh(70);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.label {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #ffffff;
}
}
}
& > div:nth-child(2) {
margin-top: vh(10);
width: vw(360);
height: vh(140);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
}
}
}
</style>