diff --git a/src/components/CarInfo/CarInfo.vue b/src/components/CarInfo/CarInfo.vue
index fd4b107..a282e7f 100644
--- a/src/components/CarInfo/CarInfo.vue
+++ b/src/components/CarInfo/CarInfo.vue
@@ -3,37 +3,34 @@
![]()
+
+

+
-
- 车牌号
- {{ carInfo.carCode }}
-
-
-
车位号
-
{{ carInfo.spaceNo }}
+
+
+
车牌号
+
{{ carInfo.carCode }}浙B88888
+
+
+
车位号
+
{{ carInfo.spaceNo }}S-B1-001-102区
+
-
-
停车时长
-
{{ carInfo.parkingTime }}
+
+
+
停车时长
+
{{ carInfo.parkingTime }}1小时30分钟
+
+
+
停车费用
+
{{ carInfo.spaceNo }}30元
+
-
-
-
- GO
+
+
-
@@ -85,6 +82,7 @@ function go() {
width: 1920px;
height: 1080px;
background: rgb(142 144 145 / 50%);
+ backdrop-filter: blur(50px);
.masker {
position: fixed;
@@ -99,74 +97,71 @@ function go() {
top: 112px;
left: 528px;
z-index: 3;
- width: 564px;
- height: 856px;
+ width: 864px;
background: #fff;
border-radius: 16px;
}
.close-icon {
- position: absolute;
- top: -50px;
- right: -50px;
+ @include fl(center);
+
+ position: fixed;
+ top: 72px;
+ right: 496px;
width: 100px;
height: 100px;
+ background: rgb(255 255 255 / 60%);
+ border: 2px solid #fff;
+ border-radius: 50px;
+ backdrop-filter: blur(20px);
+ img {
+ width: 48px;
+ height: 48px;
+ }
}
.car-img {
- width: 717px;
- height: 403px;
- border-radius: 16px 16px 0 0;
+ width: 864px;
+ height: 486px;
+ border-radius: 16px;
+ }
+ .left {
+ @include fl(center);
+
+ width: 320px;
+ height: 370px;
+ background: rgb(0 0 0 / 3%);
+ border-radius: 0 0 0 16px;
+ img {
+ width: 168px;
+ height: 80px;
+ }
}
.car {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 48px 56px;
- margin-top: -3px;
- background: #efeeea;
+ flex-wrap: wrap;
+ position: absolute;
+ bottom: 102px;
+ left: 368px;
+ .row {
+ @include fl();
+ }
}
.car-group {
- display: flex;
- flex-direction: column;
&.mr120 {
- margin-right: 120px;
+ margin-right: 100px;
}
.tip {
padding-bottom: 16px;
font-size: 20px;
- font-family: 'font_regulars';
- color: #736661;
+ font-family: 'font_regular';
+ color: #615c59;
line-height: 28px;
}
.text {
font-size: 28px;
font-family: 'font_bold';
- color: #595447;
+ color: #534f46;
font-weight: 700;
line-height: 36px;
}
}
- .go {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100px;
- font-size: 36px;
- text-align: center;
- color: #faeba9;
- background: linear-gradient(159.19deg, #c4b280 13.77%, #a89866 96.7%);
- border-radius: 0 0 16px 16px;
- font-weight: 700;
- line-height: 44px;
- .go-icon {
- width: 36px;
- height: 36px;
- }
- .line {
- width: 1px;
- height: 20px;
- margin: 0 24px;
- border: 1px solid rgb(255 255 255 / 50%);
- }
- }
}
diff --git a/src/views/Traffic/Traffic.vue b/src/views/Traffic/Traffic.vue
index 91f82d3..5e1d0db 100644
--- a/src/views/Traffic/Traffic.vue
+++ b/src/views/Traffic/Traffic.vue
@@ -33,7 +33,7 @@ const list = [
}
]
-const isCurrent = ref(false)
+const isCurrent = ref(true)
//切换控制
function handleSwitch() {
isCurrent.value = !isCurrent.value