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

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,8 +36,8 @@
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<Line
:width="250"
:height="150"
width="95%"
:height="100"
:config="{ legend: false }"
:data="congestionData"
:xAxisData="congestionXAxisData"
@@ -91,8 +91,8 @@
<Title3 title="停车场车流量" />
<div class="pt-10">
<Line
:width="250"
:height="150"
width="95%"
:height="100"
:config="{ legend: false }"
:data="parkData"
:xAxisData="parkXAxisData"
@@ -125,9 +125,9 @@
<div class="flex-1">
<Title1 title="车船信息" class="title1" />
</div>
<div class="flex-1">
<!-- <div class="flex-1" >
<Title1 title="酒店信息" class="title1" />
</div>
</div> -->
</div>
<div class="flex">
@@ -209,7 +209,7 @@
</div>
</div>
</div>
<div class="hotel">
<div class="hotel" v-if="false">
<div>
<div class="item">
<div class="label">接入总数</div>
@@ -299,45 +299,47 @@
}
.box-3 {
margin-top: vh(120);
width: vw(774);
height: vh(956);
width: vw(1200);
height:100%;
// height: vh(2056);
padding-left: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-5.png');
background-size: 100% 100%;
.traffic-info {
height: vh(80);
// height: vh(80);
}
.cell {
display: flex;
align-items: center;
.icon {
width: vw(64);
width: vw(124);
height: auto;
}
.countup-wrap {
color: #02f9fa;
font-size: vw(24);
font-size: font-vw(24);
font-weight: bold;
text-shadow: 0 0 9px #0096ff;
}
.label {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(18);
margin-top: vh(10);
color: rgba(255, 255, 255, 0.9);
}
}
.box {
width: vw(250);
height: vh(200);
width: 33%;
// height: vh(200);
margin-right: vw(8);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.box-1 {
width: vw(250);
height: vh(200);
// width: vw(300);
flex:1;
height: vh(450);
margin-right: vw(8);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
@@ -352,7 +354,7 @@
& > div {
flex: 1;
height: vh(70);
height: vh(120);
display: flex;
align-items: center;
justify-content: space-evenly;
@@ -360,13 +362,13 @@
background-size: 100% 100%;
.label {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(16);
color: rgba(255, 255, 255, 0.9);
}
.value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(22);
color: #ffffff;
}
.error {
@@ -384,20 +386,22 @@
}
}
.car-ship {
flex: 1;
width:100%;
// flex: 1;
& > div {
position: relative;
height: vh(114);
height: vh(235);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
background-size: cover;
.car {
@extend .icon;
width: vw(352);
height: vw(70);
padding-left: vw(90);
margin-left: vw(10);
margin-left: vw(30);
display: flex;
flex-direction: column;
justify-content: center;
@@ -419,12 +423,12 @@
.label {
margin-bottom: vh(6);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: rgba(255, 255, 255, 0.9);
}
.value {
font-weight: bold;
font-size: vw(24);
font-size: font-vw(22);
color: #02f9fa;
}
.unit {
@@ -435,27 +439,31 @@
}
.table {
position: absolute;
left: vw(160);
width: vw(226);
height: vh(96);
left: vw(200);
// width: vw(350);
width:80%;
// height: vh(196);
height:90%;
z-index: 2;
background: rgba(0, 150, 255, 0.17);
.header {
display: flex;
height: vh(18);
line-height: vh(18);
height: vh(48);
line-height: vh(48);
text-align: center;
background: rgba(0, 150, 255, 0.4);
& > div {
flex: 1;
font-weight: 400;
font-size: vw(12);
font-size: font-vw(20);
color: #fff;
// height: vh(50);
// line-height: vh(50);
}
}
.content {
overflow-y: hidden;
height: vh(82);
// height: vh(282);
// /* 滚动条整体样式 */
// &::-webkit-scrollbar {
// width: vw(4); /* 滚动条的宽度 */
@@ -472,8 +480,9 @@
}
.cell {
display: flex;
height: vh(27);
line-height: vh(27);
// height: vh(50);
// line-height: vh(50);
padding:vw(10);
text-align: center;
background: #074686;
&:nth-child(odd) {
@@ -486,36 +495,38 @@
flex: 1;
}
& > div:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
font-weight: 400;
font-size: vw(12);
font-size: font-vw(18);
color: rgba(255, 255, 255, 0.9);
}
& > div:nth-child(2) {
font-weight: bold;
font-size: vw(18);
font-size: font-vw(18);
color: #ffffff;
}
& > div:nth-child(3) {
font-weight: bold;
font-size: vw(18);
font-size: font-vw(18);
color: #02f9fa;
}
.unit-1 {
font-size: vw(12);
font-size: vw(18);
}
}
}
}
}
.hotel {
flex:1;
margin: 0 vw(6);
& > div:nth-child(1) {
display: flex;
width: vw(360);
// width: vw(360);
height: vh(70);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
@@ -527,13 +538,13 @@
justify-content: center;
.label {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: rgba(255, 255, 255, 0.9);
}
.value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(20);
color: #ffffff;
}
.success {
@@ -551,7 +562,7 @@
& > div:nth-child(2) {
padding-top: vh(6);
margin-top: vh(6);
width: vw(360);
// width: vw(360);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
@@ -564,7 +575,7 @@
}
.title1 {
:deep(.title) {
width: vw(300) !important;
// width: vw(300) !important;
}
}
</style>