车牌颜色根据选择的颜色进行显示

packages/park/index/index.css

@@ -3,16 +3,25 @@ page {
   padding-top: 20rpx;
 }
 
-
 /* 车辆信息容器样式 */
+.container-box{
+  height: 83vh;
+  overflow-y: auto;
+}
+
 .car-info-container {
-  width: 100%;
+  width: 92%;
   background-color: #ffffff;
   padding: 30rpx;
   border-bottom: 1rpx solid #eeeeee;
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
 
+.car-info{
+  display: flex;
+  justify-content: space-between;
+}
+
 /* 车牌样式 */
 .license-plate {
   display: flex;
@@ -27,6 +36,7 @@ page {
   border-radius: 8rpx;
 }
 
+
 .plate-type {
   background-color: #1890ff;
   color: white;
@@ -40,6 +50,62 @@ page {
   font-size: 32rpx;
   color: #333333;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding: 15rpx 30rpx;
+  border-radius: 10rpx;
+}
+
+/* 蓝色车牌样式 */
+.plate-color-blue {
+  background-color: #1890ff;
+  color: white;
+}
+
+/* 黄色车牌样式 */
+.plate-color-yellow {
+  background-color: #ffc53d;
+  color: black;
+}
+
+/* 黑色车牌样式 */
+.plate-color-black {
+  background-color: #333333;
+  color: white;
+}
+
+/* 白色车牌样式 */
+.plate-color-white {
+  background-color: white;
+  color: black;
+  border: 1rpx solid #dddddd;
+}
+
+/* 绿色车牌样式 */
+.plate-color-green {
+  background-color: #37bd75;
+  color: white;
+}
+
+/* 渐变绿底黑字车牌样式 */
+.plate-color-gradient-green {
+  background: linear-gradient(180deg, #ffffff 0%, #2fe259 100%);
+  color: black;
+}
+
+/* 黄绿双拼底黑字车牌样式 */
+.plate-color-yellow-green {
+  background: linear-gradient(90deg, #ffc53d 30%, #37bd75 0%);
+  color: black;
+}
+
+.plate-energy{
+  font-size: 24rpx;
+  padding: 7rpx 15rpx;
+  margin-left: 15rpx;
+  border-radius: 10rpx;
+  background-color: #f2f3f4;
+  color: #37bd75;
 }
 
 /* 添加车辆按钮样式 */

packages/park/index/index.vue

@@ -1,12 +1,28 @@
 <template>
   <view class="container">
     <!-- 车辆信息区域 -->
+    <view class="container-box">
       <view class="car-info-container" v-for="(item, index) in carList" :key="index">
+        <view class="car-info">
           <view class="license-plate">
             <view class="plate-type-box">
-          <text class="plate-type">{{ item.car_number_color }}</text>
+              <text class="plate-type" :class="{
+                'plate-color-blue': item.car_number_color === '蓝色',
+                'plate-color-yellow': item.car_number_color === '黄色',
+                'plate-color-black': item.car_number_color === '黑色',
+                'plate-color-white': item.car_number_color === '白色',
+                'plate-color-green': item.car_number_color === '绿色',
+                'plate-color-gradient-green': item.car_number_color === '渐变绿底黑字',
+                'plate-color-yellow-green': item.car_number_color === '黄绿双拼底黑字'
+              }">{{ item.car_number_color }}</text>
+            </view>
+            <view class="plate-number">
+              {{ item.car_number }}
+              <view class="plate-energy" v-if="getActualCarNumberLength(item.car_number) > 7">新能源</view>
+            </view>
+          </view>
+          <u-icon name="trash" size="45rpx" @click="deleteCar(item)"></u-icon>
         </view>
-        <text class="plate-number">{{ item.car_number }}</text>
       </view>
     </view>
 
@@ -40,6 +56,40 @@ export default {
         this.carList = res.car_list;
       })
     },
+    // 计算车牌号的实际长度，去除所有不可见字符
+    getActualCarNumberLength(carNumber) {
+      if (!carNumber) return 0;
+      // 去除所有空格和不可见字符
+      const actualNumber = carNumber.replace(/\s/g, '');
+      return actualNumber.length;
+    },
+
+
+
+    deleteCar(item) {
+      uni.showModal({
+        title: '提示',
+        content: '确定删除该车辆吗？',
+        success: (res) => {
+          if (res.confirm) {
+            const params = {
+              user_id: uni.getStorageSync('userId'),
+              car_id: item.car_id
+            }
+            request(apiArr.deleteCar, "POST", params).then((res) => {
+              if (res.code == 200) {
+                uni.showToast({
+                  title: '删除成功',
+                  icon: 'success',
+                  duration: 2000
+                });
+                this.getCarList();
+              }
+            })
+          }
+        }
+      })
+    },
     addCar() {
       // 跳转到添加车辆页面
       uni.navigateTo({