refactor: 抽取调整样式到公共

src/assets/styles/views/src/manage-forms.scss

@@ -11,7 +11,7 @@
 
   .common-bg {
     padding: 10px 15px;
-    background: rgba(14, 95, 255, 0.2);
+    background: rgba(14, 95, 255, 0.20);
   }
 
   .title {

src/assets/styles/views/src/smart-parking.scss

@@ -0,0 +1,35 @@
+.smart-parking {
+  width: 100%;
+  height: 100%;
+
+  .arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+
+    img {
+      width: 65px;
+    }
+  }
+
+  .smart-parking-common-card-container {
+    width: 380px;
+    height: 650px;
+    background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
+    background-size: cover;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+
+    .smart-parking-common-title {
+      width: 218px;
+      height: 59px;
+      background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
+      background-size: cover;
+
+      h1 {
+        font-size: 18px;
+      }
+    }
+  }
+}

src/assets/styles/views/views.scss

@@ -1 +1,2 @@
-@use "@/assets/styles/views/src/manage-forms";
+@use "@/assets/styles/views/src/smart-parking";
+@use "@/assets/styles/views/src/manage-forms";

src/views/smart-parking/components/parking-content/index.vue

@@ -11,25 +11,3 @@ import TruckMonitor from '@/views/smart-parking/components/parking-content/truck
     <traffic-overview />
   </main>
 </template>
-
-<style lang="scss" scoped>
-.card-container {
-  width: 380px;
-  height: 650px;
-  background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
-  background-size: cover;
-  transition: transform 0.8s;
-  transform-style: preserve-3d;
-
-  ::v-deep(.road-condition) {
-    width: 218px;
-    height: 59px;
-    background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
-    background-size: cover;
-
-    h1 {
-      font-size: 18px;
-    }
-  }
-}
-</style>

src/views/smart-parking/components/parking-content/road-condition.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="card-container">
+  <div class="smart-parking-common-card-container">
     <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
       <!-- 路况 -->
-      <div class="road-condition">
+      <div class="smart-parking-common-title">
         <h1 class="c-white">实时道路情况</h1>
       </div>
 
@@ -46,7 +46,7 @@
 </template>
 
 <style lang="scss" scoped>
-.card-container {
+.smart-parking-common-card-container {
   margin: 0 20px 0 0;
   transform: rotateY(180deg);
 

src/views/smart-parking/components/parking-content/traffic-overview.vue

@@ -11,10 +11,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="card-container ml-[20px]">
+  <div class="smart-parking-common-card-container ml-[20px]">
     <div class="pt-[55px] pl-[25px]">
       <!-- 路况 -->
-      <div class="road-condition">
+      <div class="smart-parking-common-title">
         <h1 class="c-white">近7天车流量概览</h1>
       </div>
 

src/views/smart-parking/index.vue

@@ -4,7 +4,7 @@ import ParkingFooter from '@/views/smart-parking/components/parking-footer/index
 </script>
 
 <template>
-  <div class="layout">
+  <div class="smart-parking">
     <div class="arrow left-[38px]">
       <img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-left.png" />
     </div>
@@ -15,21 +15,3 @@ import ParkingFooter from '@/views/smart-parking/components/parking-footer/index
     </div>
   </div>
 </template>
-
-<style scoped>
-.layout {
-  width: 100%;
-  height: 100%;
-
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-
-    img {
-      width: 65px;
-    }
-  }
-}
-</style>