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
2025-01-01 14:14:59 +08:00
parent 0742c6fa93
commit d67ac75031
3 changed files with 57 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -218,22 +218,22 @@
<countup class="value" :end-val="homeData?.carShipData?.ship?.count || 0" />
<span class="unit">辆</span>
</div>
<div class="table">
<div class="header">
<div>景区</div>
<div>调度</div>
<div>空余</div>
</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 class="table">
<div class="header">
<div>景区</div>
<div>调度</div>
<div>空余</div>
</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>
@@ -320,7 +320,7 @@
margin-top: vh(120);
width: vw(750);
height: vh(950);
padding: vw(8);
padding-left: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-5.png');
background-size: 100% 100%;
@@ -357,13 +357,14 @@
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.icon {
width: vw(45);
height: auto;
}
.stop-box {
display: flex;
gap: vw(20);
.icon {
width: vw(45);
height: auto;
}
& > div {
flex: 1;
height: vh(70);
@@ -395,28 +396,24 @@
flex: 1;
& > div {
position: relative;
flex: 1;
height: vh(113);
height: vh(110);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.icon {
padding-left: vw(90);
width: vw(352);
height: vh(70);
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.car {
@extend .icon;
padding-left: vw(90);
width: vw(352);
height: vw(70);
background-image: url('@/assets/images/icon-6.png');
background-size: 100% 100%;
}
.ship {
@extend .icon;
padding-left: vw(90);
width: vw(352);
height: vw(70);
background-image: url('@/assets/images/icon-7.png');
background-size: 100% 100%;
}
@@ -441,7 +438,7 @@
position: absolute;
left: vw(160);
width: vw(200);
height: vh(100);
height: vh(96);
z-index: 2;
background: rgba(0, 150, 255, 0.17);
.header {
@@ -509,8 +506,7 @@
}
}
.hotel {
flex: 1;
margin-left: vw(6);
margin: 0 vw(6);
& > div:nth-child(1) {
display: flex;
width: vw(360);
@@ -547,11 +543,10 @@
}
}
& > div:nth-child(2) {
padding-top: vh(10);
padding-top: vh(6);
margin-top: vh(6);
width: vw(360);
height: vh(156);
background-image: url('@/assets/images/bg-4.png');
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
}