fix: 修改个人履历和家庭成员的布局样式

src/App.vue

@@ -74,8 +74,8 @@
         >
           <template #input>
             <van-radio-group v-model="form.maritalStatus" direction="horizontal">
-              <van-radio name="1">已婚</van-radio>
               <van-radio name="2">未婚</van-radio>
+              <van-radio name="1">已婚</van-radio>
               <van-radio name="3">离异</van-radio>
             </van-radio-group>
           </template>
@@ -145,7 +145,7 @@
           :rules="[{ required: true, message: '请输入家庭地址' }]"
         >
           <template #extra>
-            <div class="extra">例如：**市**区**街道**小区*号楼*单位*0*（具体到门牌号，写现居住地址)</div>
+            <div class="extra">例如：**市**区**街道**小区*号楼*单元*0*（具体到门牌号，写现居住地址)</div>
           </template>
         </van-field>
         <van-field
@@ -260,117 +260,151 @@
         />
       </van-cell-group>
 
-      <van-cell-group inset>
+      <van-cell-group inset style="background: transparent; padding: 0;">
         <template #title>
-          <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
             <span>外部个人履历</span>
-            <span style="font-size: 12px; color: #969799; font-weight: normal;">滑动填写更多<van-icon name="arrow-double-right" /></span>
           </div>
         </template>
-        <div class="resume-table" v-if="form.externalResumeItems.length">
-          <div class="resume-row resume-header">
-            <div>开始年月</div>
-            <div>结束年月</div>
-            <div>单位名称</div>
-            <div>职务</div>
-            <div>操作</div>
-          </div>
-          <div class="resume-row" v-for="(item, i) in form.externalResumeItems" :key="i">
-            <div>
+        <div class="resume-list">
+          <div class="resume-card" v-for="(item, i) in form.externalResumeItems" :key="i">
+            <div class="resume-card-header">
+              <span class="index-badge">{{ i + 1 }}</span> 编辑履历
+            </div>
+            
+            <div class="form-item">
+              <div class="item-label">单位名称<span style="color: #ee0a24">*</span></div>
               <van-field 
-                v-model="item.startDate"
-                placeholder="开始年月"
-                readonly
-                is-link
-                @click="onResumeStartClick(i)"
+                v-model="item.company" 
+                class="custom-input" 
+                placeholder="请输入单位名称" 
+                :border="false" 
               />
             </div>
-            <div>
+
+            <div class="form-item">
+              <div class="item-label">担任职务<span style="color: #ee0a24">*</span></div>
               <van-field 
-                v-model="item.endDate"
-                placeholder="结束年月"
-                readonly
-                is-link
-                @click="onResumeEndClick(i)"
+                v-model="item.position" 
+                class="custom-input" 
+                placeholder="请输入担任职务" 
+                :border="false" 
               />
             </div>
-            <div>
-              <van-field v-model="item.company" placeholder="单位名称" />
+
+            <div class="form-row-2col">
+              <div class="form-col">
+                <div class="item-label">开始年月<span style="color: #ee0a24">*</span></div>
+                <div class="date-input-box" @click="onResumeStartClick(i)">
+                  <span>{{ item.startDate || '请选择' }}</span>
+                  <van-icon name="calendar-o" color="#969799" />
+                </div>
               </div>
-            <div>
-              <van-field v-model="item.position" placeholder="职务" />
+              <div class="form-col">
+                <div class="item-label">结束年月<span style="color: #ee0a24">*</span></div>
+                <div class="date-input-box" @click="onResumeEndClick(i)">
+                  <span>{{ item.endDate || '请选择' }}</span>
+                  <van-icon name="calendar-o" color="#969799" />
                 </div>
-            <div>
-              <van-button size="small" type="danger" plain @click="removeResumeItem(i)">删除</van-button>
               </div>
             </div>
+
+            <div class="delete-btn-wrapper">
+              <van-button 
+                block 
+                color="#feecec" 
+                style="color: #ee0a24; border: none;" 
+                icon="delete-o" 
+                @click="removeResumeItem(i)"
+              >
+                删除这段履历
+              </van-button>
             </div>
-        <div class="resume-actions">
-          <van-button block type="success" icon="newspaper" @click="addResumeItem">新增履历</van-button>
+          </div>
+        </div>
+        <div class="resume-actions" style="margin-top: 12px;">
+          <van-button block type="primary" plain icon="newspaper-o" @click="addResumeItem">新增履历</van-button>
         </div>
       </van-cell-group>
 
-      <van-cell-group inset>
+      <van-cell-group inset style="background: transparent; padding: 0;">
         <template #title>
-          <div style="display: flex; justify-content: space-between; align-items: center;">
-            <span>家庭主要成员</span>
-            <span style="font-size: 12px; color: #969799; font-weight: normal;">滑动填写更多<van-icon name="arrow-double-right" /></span>
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <span style="font-size: 16px; font-weight: 600; color: #323233;">家庭主要成员</span>
           </div>
         </template>
-        <div class="family-table" v-if="form.familyMembers.length">
-          <div class="family-row family-header">
-            <div>关系</div>
-            <div>姓名</div>
-            <div>出生年月</div>
-            <div>工作单位职务</div>
-            <div>联系方式</div>
-            <div>紧急联系人</div>
-            <div>操作</div>
-          </div>
-          <div
-            class="family-row"
-            v-for="(fm, i) in form.familyMembers"
-            :key="i"
-          >
-          <div>
-            <van-field
-              v-model="fm.relation"
-              placeholder="请选择关系"
-              readonly
-              is-link
-              @click="onFamilyRelationClick(i)"
-            />
+        
+        <div class="family-list">
+          <div class="family-card" v-for="(fm, i) in form.familyMembers" :key="i">
+            <!-- Header -->
+            <div class="family-card-header">
+              <div class="avatar-wrapper">
+                <div class="avatar">{{ fm.relation ? fm.relation.charAt(0) : '无' }}</div>
+                <span class="name">{{ fm.name || '姓名' }}</span>
               </div>
-            <div>
-              <van-field v-model="fm.name" placeholder="姓名" />
+              <van-icon name="delete-o" size="20" color="#969799" @click="removeFamilyMember(i)" />
             </div>
-            <div>
-              <van-field
-                v-model="fm.birthDate"
-                placeholder="请选择"
-                is-link
-                readonly
-                @click="onFamilyBirthClick(i)"
-              />
+
+            <!-- Row 1 -->
+            <div class="form-row-2col">
+              <div class="form-col">
+                <div class="item-label">关系 <span style="color: #ee0a24">*</span></div>
+                <div class="custom-input dropdown-input" @click="onFamilyRelationClick(i)">
+                  <span style="color: #323233">{{ fm.relation || '请选择' }}</span>
+                  <van-icon name="arrow-down" color="#969799" size="12" />
                 </div>
-            <div>
-              <van-field v-model="fm.companyAndJob" placeholder="单位与职务" />
               </div>
-            <div>
-              <van-field v-model="fm.contact" type="tel" placeholder="手机号" />
+              <div class="form-col">
+                <div class="item-label">姓名 <span style="color: #ee0a24">*</span></div>
+                <div class="custom-input">
+                  <input v-model="fm.name" placeholder="姓名" class="native-input" />
                 </div>
-            <div>
-              <van-radio-group v-model="form.familyEmergencyIndex">
-                <van-radio :name="i">是</van-radio>
-              </van-radio-group>
               </div>
-            <div>
-              <van-button size="small" type="danger" plain @click="removeFamilyMember(i)">删除</van-button>
             </div>
+
+            <!-- Row 2 -->
+            <div class="form-item">
+              <div class="item-label">出生年月</div>
+              <div class="date-input-box" @click="onFamilyBirthClick(i)">
+                <span>{{ fm.birthDate || 'YYYY-MM-DD' }}</span>
+                <van-icon name="calendar-o" color="#969799" />
+              </div>
+            </div>
+
+            <!-- Row 3 -->
+            <div class="form-item">
+              <div class="item-label">工作单位及职务</div>
+              <div class="custom-input">
+                <input v-model="fm.companyAndJob" placeholder="单位与职务" class="native-input" />
               </div>
             </div>
-        <div class="family-actions">
-          <van-button block type="success" icon="friends" @click="addFamilyMember">新增家庭成员</van-button>
+
+            <!-- Row 4 -->
+            <div class="form-item">
+              <div class="item-label">联系方式</div>
+              <div class="custom-input">
+                <input v-model="fm.contact" type="tel" placeholder="手机号" class="native-input" />
+              </div>
+            </div>
+
+            <!-- Row 5 -->
+            <div class="emergency-row">
+              <div class="emergency-text">
+                <div class="e-title">设为紧急联系人</div>
+                <div class="e-desc">该成员将作为主要紧急联系对象</div>
+              </div>
+              <van-switch 
+                :model-value="form.familyEmergencyIndex === i" 
+                @update:model-value="(val) => { if(val) form.familyEmergencyIndex = i; }"
+                size="24px"
+                active-color="#1989fa"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="family-actions" style="margin-top: 16px;">
+          <van-button block type="success" plain icon="friends-o" @click="addFamilyMember">新增家庭成员</van-button>
         </div>
       </van-cell-group>
 
@@ -823,6 +857,15 @@ async function onSubmit() {
         externalResumeValue += `${item.startDate}-${item.endDate} 在${item.company}担任${item.position}职务；\n`;
       }
     }
+    if (form.familyMembers && form.familyMembers.length > 0) {
+      for (const item of form.familyMembers) {
+        if (!item.name || !item.relation) {
+          showFailToast('家庭成员信息不全！');
+          submitting.value = false;
+          return;
+        }
+      }
+    }
     const payload = {
       name: form.name,
       phoneNumber: form.phoneNumber,
@@ -932,29 +975,170 @@ void [phoneRules, idRules];
   padding-left: 4px;
 }
 
-.family-table { 
-  overflow-x: auto;
-  margin-bottom: 8px;
+.family-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.family-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  border: 1px solid #ebedf0;
 }
-.family-row {
-  display: grid;
-  grid-template-columns: 88px 90px 128px 160px 110px 100px 50px;
-  gap: 8px;
+
+.family-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.avatar-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #eef2ff;
+  color: #1989fa;
+  display: flex;
   align-items: center;
-  padding: 6px 0;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323233;
+}
+
+.native-input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  color: #323233;
 }
-.family-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
 
-.resume-table {
-  overflow-x: auto;
+.dropdown-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.emergency-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f5f6f7;
+}
+
+.emergency-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.e-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #323233;
+  margin-bottom: 4px;
+}
+
+.e-desc {
+  font-size: 12px;
+  color: #969799;
+}
+
+.resume-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.resume-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  border: 1px solid #ebedf0;
+}
+
+.resume-card-header {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.index-badge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #eef2ff;
+  color: #4b7aff;
+  font-size: 12px;
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+.form-item {
+  margin-bottom: 16px;
+}
+
+.item-label {
+  font-size: 14px;
+  color: #646566;
   margin-bottom: 8px;
 }
-.resume-row {
-  display: grid;
-  grid-template-columns: 110px 110px 160px 120px 60px;
-  gap: 8px;
+
+.custom-input {
+  background-color: #f7f8fa;
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.form-row-2col {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.form-col {
+  flex: 1;
+}
+
+.date-input-box {
+  background-color: #f7f8fa;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 14px;
+  color: #323233;
+  display: flex;
+  justify-content: space-between;
   align-items: center;
-  padding: 6px 0;
 }
-.resume-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
+
+.delete-btn-wrapper {
+  margin-top: 20px;
+}
 </style>