fix: 录入信息样式

src/views/old_mini/entry_information/components/baInformation.vue

@@ -1,17 +1,95 @@
 <template>
     <div class="ba-information">
         <div class="ba-information__content">
-            <!-- 基本信息 -->
-            基本信息
+            <div class="page-header">
+                <div class="page-title">完善个人信息</div>
+                <div class="page-subtitle">请确保您的个人信息无误</div>
+            </div>
+
+            <div class="info-card">
+                <div class="section-title">
+                    <span class="title-icon"></span>
+                    <span>基本信息</span>
+                </div>
+
+                <el-form
+                    ref="formRef"
+                    :model="form"
+                    :rules="rules"
+                    label-position="left"
+                    label-width="72px"
+                    class="info-form"
+                    require-asterisk-position="right"
+                >
+                    <el-form-item label="姓名" prop="name">
+                        <el-input
+                            v-model="form.name"
+                            placeholder="请输入名字"
+                            maxlength="20"
+                            clearable
+                        />
+                    </el-form-item>
+                    <el-form-item label="手机号" prop="phone">
+                        <el-input
+                            v-model="form.phone"
+                            placeholder="请输入手机号"
+                            maxlength="11"
+                            clearable
+                            type="tel"
+                        />
+                    </el-form-item>
+                </el-form>
+
+                <div class="location-block">
+                    <div class="location-label">常驻点位</div>
+                    <div class="map-placeholder">
+                        <div class="map-placeholder__mask">点击地图选择常驻点位</div>
+                    </div>
+                </div>
+            </div>
         </div>
+
         <div class="custom-bottom-fixed-btns">
-            <div class="bottom-btn primary-btn" @click="emit('next')">下一步 (1/3)</div>
+            <div class="bottom-btn primary-btn" @click="handleNext">下一步 (1/3)</div>
         </div>
     </div>
 </template>
 
 <script setup>
+import { reactive, ref } from "vue";
+
 const emit = defineEmits(["next"]);
+
+const formRef = ref(null);
+const form = reactive({
+    name: "",
+    phone: "",
+});
+
+const rules = {
+    name: [
+        { required: true, message: "请输入名字", trigger: "blur" },
+        { min: 1, max: 20, message: "姓名长度不超过20个字", trigger: "blur" },
+    ],
+    phone: [
+        { required: true, message: "请输入手机号", trigger: "blur" },
+        {
+            pattern: /^1[3-9]\d{9}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur",
+        },
+    ],
+};
+
+const handleNext = async () => {
+    if (!formRef.value) return;
+    try {
+        await formRef.value.validate();
+        emit("next", { ...form });
+    } catch {
+        // 校验未通过
+    }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -25,15 +103,156 @@ const emit = defineEmits(["next"]);
     &__content {
         flex: 1;
         overflow-y: auto;
+        padding: 8px 16px 20px;
+    }
+
+    .page-header {
+        padding: 8px 4px 16px;
+
+        .page-title {
+            font-size: 26px;
+            color: #005599;
+            font-family: "PangMenZhengDao";
+            line-height: 36px;
+        }
+
+        .page-subtitle {
+            margin-top: 4px;
+            font-size: 14px;
+            color: rgba(46, 46, 46, 0.4);
+            line-height: 20px;
+        }
+    }
+
+    .info-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 16px 14px 8px;
+        box-shadow: 0 2px 12px rgba(33, 153, 248, 0.08);
+    }
+
+    .section-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+
+        .title-icon {
+            position: relative;
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+
+            &::before,
+            &::after {
+                content: "";
+                position: absolute;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+            }
+
+            &::before {
+                left: 0;
+                top: 2px;
+                background: #2199f8;
+                opacity: 0.85;
+            }
+
+            &::after {
+                right: 0;
+                top: 0;
+                background: #7ec8ff;
+                opacity: 0.9;
+            }
+        }
+    }
+
+    .info-form {
+        :deep(.el-form-item) {
+            margin-bottom: 0;
+            padding: 10px 0;
+        }
+
+        :deep(.el-form-item__label) {
+            color: #1a1a1a;
+            font-size: 15px;
+            font-weight: 400;
+            padding: 0;
+            line-height: 32px;
+            height: 32px;
+        }
+
+        :deep(.el-form-item__content) {
+            justify-content: flex-end;
+            line-height: 32px;
+        }
+
+        :deep(.el-form-item__error) {
+            padding-top: 4px;
+            text-align: right;
+        }
+
+        :deep(.el-input__wrapper) {
+            box-shadow: none;
+            background: transparent;
+            padding: 0;
+
+            .el-input__inner {
+                text-align: right;
+                color: #1a1a1a;
+                font-size: 15px;
+
+                &::placeholder {
+                    color: rgba(0, 0, 0, 0.25);
+                }
+            }
+        }
+    }
+
+    .location-block {
+        padding: 10px 0 8px;
+
+        .location-label {
+            font-size: 15px;
+            color: #1a1a1a;
+            margin-bottom: 10px;
+        }
+
+        .map-placeholder {
+            position: relative;
+            width: 100%;
+            height: 140px;
+            border-radius: 8px;
+            overflow: hidden;
+            background: linear-gradient(135deg, #e8eef3 0%, #d4dde6 100%);
+
+            &__mask {
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                padding: 8px 12px;
+                background: rgba(0, 0, 0, 0.45);
+                color: #fff;
+                font-size: 13px;
+                text-align: center;
+            }
+        }
     }
 
     .custom-bottom-fixed-btns {
-        background: transparent;
-        box-shadow: none;
+        background: #FFF;
+        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
 
         .bottom-btn {
-            flex: 1;
-            padding: 12px 0;
+            // flex: 1;
+            padding: 0 30px;
+            height: 40px;
+            line-height: 40px;
             font-size: 16px;
             border-radius: 25px;
         }

src/views/old_mini/entry_information/index.vue

@@ -39,8 +39,9 @@ const handleConfirm = () => {
 .entry-information-page {
     min-height: 100vh;
     // background: #e8f4ff;
-    background: linear-gradient(180deg, #57B5FF 0%, #BBE1FF 10%, #F6F6F6 100%),
-linear-gradient(270deg, rgba(218, 195, 255, 0.59) 0%, #E6F2FF 0.01%, #8FC5FE 100%);
+    // background: linear-gradient(180deg, #57B5FF 0%, #BBE1FF 11.5%, #F6F6F6 100%);
+
+    background: linear-gradient(270deg, rgba(218, 195, 255, 0.59) 0%, #E6F2FF 0.01%, #8FC5FE 100%);
     display: flex;
     flex-direction: column;
 }