fix: 🧩 停车详情

src/components/CarInfo/CarInfo.vue

@@ -3,37 +3,34 @@
     <div class="masker" @click="close"></div>
     <div class="car-content">
       <img :src="carInfo.carImage" class="car-img" alt="" />
+      <div class="left">
+        <img src="@/assets/images/shopDetail/go.svg" alt="" @click="go" />
+      </div>
       <div class="car">
-        <div class="car-group mr120">
-          <span class="tip">车牌号</span>
-          <span class="text">{{ carInfo.carCode }}</span>
-        </div>
-        <div class="car-group mr120">
-          <span class="tip">车位号</span>
-          <span class="text">{{ carInfo.spaceNo }}</span>
+        <div class="row">
+          <div class="car-group mr120" style="width: 330px">
+            <div class="tip">车牌号</div>
+            <div class="text">{{ carInfo.carCode }}浙B88888</div>
+          </div>
+          <div class="car-group">
+            <div class="tip">车位号</div>
+            <div class="text">{{ carInfo.spaceNo }}S-B1-001-102区</div>
+          </div>
         </div>
-        <div v-if="carInfo.parkingTime" class="car-group">
-          <span class="tip">停车时长</span>
-          <span class="text">{{ carInfo.parkingTime }}</span>
+        <div class="row" style="margin-top: 60px">
+          <div class="car-group mr120" style="width: 330px">
+            <div class="tip">停车时长</div>
+            <div class="text">{{ carInfo.parkingTime }}1小时30分钟</div>
+          </div>
+          <div class="car-group">
+            <div class="tip">停车费用</div>
+            <div class="text">{{ carInfo.spaceNo }}30元</div>
+          </div>
         </div>
       </div>
-      <div class="go" @click="go">
-        <svg class="go-icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M28.9853 7.64401L23.6663 26.259L19.1063 17.139L10.6508 13.7565L28.9853 7.64401ZM32.0843 3.45001L3.87533 12.852C3.72933 12.9004 3.60174 12.9925 3.50985 13.1159C3.41796 13.2392 3.36621 13.3878 3.36163 13.5416C3.35705 13.6953 3.39984 13.8467 3.48422 13.9754C3.5686 14.104 3.69047 14.2035 3.83333 14.2605L16.9328 19.5L23.5703 32.775C23.6379 32.9102 23.7447 33.0218 23.8767 33.0953C24.0088 33.1687 24.16 33.2005 24.3104 33.1866C24.4609 33.1726 24.6037 33.1136 24.72 33.0171C24.8363 32.9206 24.9208 32.7913 24.9623 32.646L33.0428 4.36651C33.0803 4.23513 33.0811 4.09603 33.0453 3.96421C33.0094 3.83239 32.9382 3.71286 32.8394 3.61853C32.7406 3.5242 32.6179 3.45865 32.4846 3.42895C32.3513 3.39925 32.2123 3.40653 32.0828 3.45001H32.0843Z"
-            fill="white"
-          />
-        </svg>
-        <div class="line"></div>
-        GO
+      <div class="close-icon" @click="close">
+        <img src="@/assets/images/shopDetail/close.svg" alt="" />
       </div>
-      <svg class="close-icon" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" @click="close">
-        <rect width="100" height="100" rx="50" fill="#C7C2B7" />
-        <path
-          d="M50 47.172L59.9 37.272L62.728 40.1L52.828 50L62.728 59.9L59.9 62.728L50 52.828L40.1 62.728L37.272 59.9L47.172 50L37.272 40.1L40.1 37.272L50 47.172Z"
-          fill="white"
-        />
-      </svg>
     </div>
   </div>
 </template>
@@ -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%);
-    }
-  }
 }
 </style>

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