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-27 14:50:53 +08:00
parent f7e15899a4
commit 88eb805c46
4 changed files with 84 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/home/components/box-3.vue
View File

@@ -198,10 +198,16 @@
<div>调度</div>
<div>空余</div>
</div>
<div class="cell" v-for="(item, index) in homeData?.carShipData?.car.info" :key="index">
<div>{{ item.scenic_area }}</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
<div class="content">
<div
class="cell"
v-for="(item, index) in homeData?.carShipData?.car.info"
:key="index"
>
<div>{{ item.scenic_area }}</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
</div>
</div>
</div>
</div>
@@ -218,14 +224,16 @@
<div>调度</div>
<div>空余</div>
</div>
<div
class="cell"
v-for="(item, index) in homeData?.carShipData.ship.info"
:key="index"
>
<div>白帝城</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
<div class="content">
<div
class="cell"
v-for="(item, index) in homeData?.carShipData.ship.info"
:key="index"
>
<div>白帝城</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
</div>
</div>
</div>
</div>
@@ -244,18 +252,19 @@
<div class="item">
<div class="label">总入住</div>
<countup
class="value"
color="#02F9FA"
class="value success"
:end-val="homeData?.hotelData.info.total_guest_count || 0"
/>
</div>
<div class="item">
<div class="label">总入住率</div>
<countup
class="value"
color="#02F9FA"
:end-val="homeData?.hotelData.info.occupancy_rate || 0"
/>
<div class="flex align-center">
<countup
class="value success"
:end-val="homeData?.hotelData.info.occupancy_rate || 0"
/>
<span class="suffix">%</span>
</div>
</div>
</div>
<div>
@@ -387,7 +396,7 @@
& > div {
position: relative;
flex: 1;
height: vh(110);
height: vh(113);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-4.png');
@@ -434,6 +443,7 @@
width: vw(200);
height: vh(100);
z-index: 2;
background: rgba(0, 150, 255, 0.17);
.header {
display: flex;
height: vh(18);
@@ -447,6 +457,23 @@
color: #52b8ff;
}
}
.content {
overflow-y: auto;
height: vh(82);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
}
.cell {
display: flex;
height: vh(27);
@@ -507,13 +534,23 @@
font-size: vw(24);
color: #ffffff;
}
.success {
color: #02f9fa;
}
.suffix {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
color: #02f9fa;
}
}
}
& > div:nth-child(2) {
padding-top: vh(10);
margin-top: vh(8);
margin-top: vh(6);
width: vw(360);
height: vh(140);
height: vh(156);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
}
@@ -521,7 +558,7 @@
}
.occupancy {
:deep(.title-3) {
margin-top: vh(10);
margin-top: vh(6);
}
}
.title1 {