feat: 添加车牌的搭建

components/AddCarCrad/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="add-car-card" @click="handleConfirm">
+    <view class="header-image">
+      <image
+        class="header-img"
+        src="./images/add_car_crad.png"
+        mode="aspectFill"
+      />
+    </view>
+
+    <view class="content">
+      <view class="title">请输入车牌号</view>
+      <view class="description">
+        请绑定真实有效的车牌号，否则将无法正常使用车牌付费等功能
+      </view>
+    </view>
+
+    <view class="confirm-btn">
+      <text class="confirm-text">进入绑定</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { navigateTo } from "@/router/index";
+
+const props = defineProps({
+  toolCall: {
+    type: Object,
+    default: {},
+  },
+});
+
+// 确认绑定事件
+const handleConfirm = () => {
+  navigateTo(props.toolCall.url);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

components/AddCarCrad/styles/index.scss

@@ -0,0 +1,51 @@
+.add-car-card {
+  display: flex;
+  flex-direction: column;
+
+  .header-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: -24rpx -24rpx 0 -24rpx;
+
+    .header-img {
+      width: 100%;
+      height: 150px;
+    }
+  }
+
+  .content {
+    display: flex;
+    align-items: start;
+    flex-direction: column;
+    padding: 24rpx 0;
+  }
+
+  .title {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .description {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.5;
+  }
+
+  .confirm-btn {
+    height: 88rpx;
+    background: linear-gradient(135deg, #1898ff 0%, #77e5f9 100%);
+    border-radius: 44rpx;
+    margin-bottom: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .confirm-text {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+}