From da5bf8733edd87663c25f763274f25005fb4a7df Mon Sep 17 00:00:00 2001
From: weicw1996 <weicw1996@qq.com>
Date: Sun, 11 Oct 2026 20:47:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(visit):=20=E5=AE=A2=E6=88=B7=E6=8B=9C?=
 =?UTF-8?q?=E8=AE=BF=E9=A1=B5=E6=8C=89=E6=96=B0=E5=8E=9F=E5=9E=8B=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E4=B8=BA=E5=A4=9A=E5=8D=A1=E7=89=87=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

参照设计稿将 pages/visit/index 拆分为 4 张表单卡片 + 历史记录卡片：
- 我的信息：姓名，进页面自动带出账号 realName，可编辑
- 拜访对象：类型（门店/门店经理/其他 胶囊 tab）、姓名/门店、连锁
- 拜访信息：定位信息（点击重新定位 + 经纬度副行）、拜访日期（默认当天）
- 其他信息：沟通内容（500 字 + 实时计数）、拍照上传、活动小结

一并修复：
- 必填星号原用 ::before 伪元素，小程序对 <text> 伪元素支持不稳，改为
  显式 <text class="field-star">
- 必填标签原复用全局类名 .required，而 common.scss 中的 .required 经
  @extend .pos-a 带上 position:absolute / left:-9px / top:15px，导致标签
  脱离文档流堆叠到卡片左上角。改用 .is-required 并在样式处加注释说明。

配色沿用项目主题变量，未照搬设计稿颜色。历史记录展开详情增加拜访
类型与拜访日期两行。
---
 pages/visit/index.vue | 541 ++++++++++++++++++++++++++++++------------
 1 file changed, 391 insertions(+), 150 deletions(-)

diff --git a/pages/visit/index.vue b/pages/visit/index.vue
index 85360dd..dbceda3 100644
--- a/pages/visit/index.vue
+++ b/pages/visit/index.vue
@@ -3,88 +3,195 @@
     <view class="page-hero">
       <AppNavbar title="客户拜访" show-back/>
       <view class="intro-card">
-        <view class="card-title">
-          <view class="title-bar"></view>
-          <text>培训拜访</text>
+        <view class="tip-icon">
+          <u-icon name="info-circle-fill" size="40rpx" :color="brandColor"/>
+        </view>
+        <view class="tip-body">
+          <text class="tip-title">温馨提示</text>
+          <text class="tip-text">请如实填写本次拜访信息，系统将自动记录您的姓名，拜访对象请填写实际到访人员或门店/经理。</text>
         </view>
-        <text class="intro-text">记录培训拜访现场定位、沟通内容和照片，提交后可回看历史记录。</text>
       </view>
     </view>
 
+    <!-- 我的信息 -->
     <view class="card block">
-      <view class="section-title">新增拜访</view>
-      <view class="form">
-        <view class="form-row location-row">
-          <text>定位信息</text>
-          <view class="location-box">
-            <view class="picker-value location-text" :class="{placeholder: !visitForm.location}">
-              {{ visitForm.location || '定位中，或点击右侧重新定位' }}
-            </view>
-            <view class="location-meta">
-              <text>{{ formatCoordinate('纬度', visitForm.lat) }}</text>
-              <text>{{ formatCoordinate('经度', visitForm.lng) }}</text>
-            </view>
-          </view>
-          <view class="refresh-btn" @tap="fetchLocation(false, true)">重新定位</view>
+      <view class="form-card-head">
+        <view class="head-icon">
+          <u-icon name="account-fill" size="32rpx" :color="brandColor"/>
         </view>
+        <text class="head-title">我的信息</text>
+      </view>
+      <view class="field-row">
+        <text class="field-label is-required"><text class="field-star">*</text>姓名</text>
+        <view class="field-box">
+          <u-icon name="account" size="32rpx" color="#9aa7b8"/>
+          <input
+            v-model="visitForm.submitterName"
+            class="field-input"
+            type="text"
+            maxlength="30"
+            placeholder="请输入您的姓名"
+            placeholder-class="field-placeholder"
+          />
+        </view>
+      </view>
+    </view>
 
-        <view class="form-row">
-          <text>连锁</text>
-          <view class="selector-picker" @tap="openChainPicker">
-            <view class="picker-value" :class="{placeholder: !visitForm.chain}">
-              {{ visitForm.chain || (chainLoading ? '连锁加载中...' : '请选择连锁') }}
-            </view>
+    <!-- 拜访对象 -->
+    <view class="card block">
+      <view class="form-card-head">
+        <view class="head-icon">
+          <u-icon name="account" size="32rpx" :color="brandColor"/>
+        </view>
+        <text class="head-title">拜访对象</text>
+      </view>
+
+      <view class="field-row">
+        <text class="field-label is-required"><text class="field-star">*</text>类型</text>
+        <view class="type-tabs">
+          <view
+            v-for="tab in visitTypeTabs"
+            :key="tab.value"
+            :class="['type-tab', visitForm.visitType === tab.value ? 'active' : '']"
+            @tap="visitForm.visitType = tab.value"
+          >
+            <u-icon :name="tab.icon" size="28rpx" :color="visitForm.visitType === tab.value ? brandColor : '#9aa7b8'"/>
+            <text>{{ tab.label }}</text>
           </view>
         </view>
+      </view>
 
-        <view class="form-row">
-          <text>拜访人员</text>
-          <input v-model="visitForm.name" maxlength="30" placeholder="请输入拜访人员"/>
+      <view class="field-row">
+        <text class="field-label is-required"><text class="field-star">*</text>姓名/门店</text>
+        <view class="field-box">
+          <input
+            v-model="visitForm.name"
+            class="field-input"
+            type="text"
+            maxlength="30"
+            :placeholder="targetPlaceholder"
+            placeholder-class="field-placeholder"
+          />
+          <u-icon name="arrow-right" size="26rpx" color="#b6c2d1"/>
         </view>
+      </view>
 
-        <view class="form-row textarea-row">
-          <text>沟通内容</text>
+      <view class="field-row">
+        <text class="field-label is-required"><text class="field-star">*</text>连锁</text>
+        <view class="field-box" @tap="openChainPicker">
+          <text class="field-text" :class="{placeholder: !visitForm.chain}">
+            {{ visitForm.chain || (chainLoading ? '连锁加载中...' : '请选择连锁') }}
+          </text>
+          <u-icon name="arrow-right" size="26rpx" color="#b6c2d1"/>
+        </view>
+      </view>
+    </view>
+
+    <!-- 拜访信息 -->
+    <view class="card block">
+      <view class="form-card-head">
+        <view class="head-icon">
+          <u-icon name="map-fill" size="32rpx" :color="brandColor"/>
+        </view>
+        <text class="head-title">拜访信息</text>
+      </view>
+
+      <view class="field-row">
+        <text class="field-label is-required"><text class="field-star">*</text>定位信息</text>
+        <view class="field-box" @tap="fetchLocation(false, true)">
+          <u-icon name="map" size="32rpx" color="#9aa7b8"/>
+          <text class="field-text" :class="{placeholder: !visitForm.location}">
+            {{ visitForm.location || '请点击获取当前位置' }}
+          </text>
+          <u-icon name="reload" size="30rpx" color="#b6c2d1"/>
+        </view>
+      </view>
+      <view v-if="visitForm.lat || visitForm.lng" class="field-meta">
+        <text>{{ formatCoordinate('纬度', visitForm.lat) }}</text>
+        <text>{{ formatCoordinate('经度', visitForm.lng) }}</text>
+      </view>
+
+      <view class="field-row">
+        <text class="field-label is-required"><text class="field-star">*</text>拜访日期</text>
+        <view class="field-box" @tap="showVisitDatePicker = true">
+          <u-icon name="calendar" size="32rpx" color="#9aa7b8"/>
+          <text class="field-text" :class="{placeholder: !visitForm.visitDate}">
+            {{ visitForm.visitDate || '请选择拜访日期' }}
+          </text>
+          <u-icon name="arrow-right" size="26rpx" color="#b6c2d1"/>
+        </view>
+      </view>
+    </view>
+
+    <!-- 其他信息 -->
+    <view class="card block">
+      <view class="form-card-head">
+        <view class="head-icon">
+          <u-icon name="edit-pen-fill" size="32rpx" :color="brandColor"/>
+        </view>
+        <text class="head-title">其他信息</text>
+      </view>
+
+      <view class="field-row textarea-row">
+        <text class="field-label is-required"><text class="field-star">*</text>沟通内容</text>
+        <view class="field-box textarea-box">
           <textarea
             v-model="visitForm.content"
-            class="textarea-input"
-            maxlength="500"
-            auto-height
-            placeholder="请输入沟通内容"
+            class="field-textarea"
+            :maxlength="contentMaxLength"
+            placeholder="请输入沟通内容..."
+            placeholder-class="field-placeholder"
           />
+          <text class="counter">{{ (visitForm.content || '').length }}/{{ contentMaxLength }}</text>
         </view>
+      </view>
 
-        <view class="upload" @tap="uploadPhotos">
-          <view>
-            <view class="upload-title">拍照上传</view>
-            <view class="upload-meta">{{ photos.length ? `已上传 ${photos.length} 张，点击继续拍照` : '点击拍照上传，最多 9 张' }}</view>
-          </view>
-          <view class="chip">必填</view>
+      <view class="field-row">
+        <text class="field-label is-required"><text class="field-star">*</text>拍照上传</text>
+        <view class="field-box" @tap="uploadPhotos">
+          <u-icon name="camera-fill" size="32rpx" color="#9aa7b8"/>
+          <text class="field-text" :class="{placeholder: !photos.length}">
+            {{ photos.length ? `已上传 ${photos.length} 张，点击继续拍照` : '点击拍照上传，最多 9 张' }}
+          </text>
+          <u-icon name="arrow-right" size="26rpx" color="#b6c2d1"/>
         </view>
-
-        <view v-if="photos.length" class="photo-list">
-          <view class="photo-item" v-for="(photo, index) in photos" :key="`${photo}-${index}`">
-            <image class="photo-image" :src="photo" mode="aspectFill" @tap="previewPhoto(index)"/>
-            <view class="photo-remove" @tap.stop="removePhoto(index)">x</view>
-          </view>
+      </view>
+      <view v-if="photos.length" class="photo-list">
+        <view class="photo-item" v-for="(photo, index) in photos" :key="`${photo}-${index}`">
+          <image class="photo-image" :src="photo" mode="aspectFill" @tap="previewPhoto(index)"/>
+          <view class="photo-remove" @tap.stop="removePhoto(index)">x</view>
         </view>
+      </view>
 
-        <view class="form-row textarea-row">
-          <text>活动小结</text>
+      <view class="field-row textarea-row">
+        <text class="field-label is-required"><text class="field-star">*</text>活动小结</text>
+        <view class="field-box textarea-box">
           <textarea
             v-model="visitForm.summary"
-            class="textarea-input"
+            class="field-textarea"
             maxlength="300"
-            auto-height
             placeholder="请输入活动小结"
+            placeholder-class="field-placeholder"
           />
+          <text class="counter">{{ (visitForm.summary || '').length }}/300</text>
         </view>
+      </view>
+    </view>
 
-        <view class="primary-btn submit" @tap="submitVisit">提交拜访</view>
+    <view class="submit-wrap">
+      <view class="primary-btn submit" @tap="submitVisit">
+        <text>提交拜访</text>
+        <u-icon name="arrow-right" size="30rpx" color="#ffffff"/>
       </view>
     </view>
 
     <view class="card block">
-      <view class="section-title">历史记录</view>
+      <view class="form-card-head">
+        <view class="head-icon">
+          <u-icon name="list-dot" size="32rpx" :color="brandColor"/>
+        </view>
+        <text class="head-title">历史记录</text>
+      </view>
       <view v-if="loading" class="empty">加载中...</view>
       <view v-else-if="visitHistory.length === 0" class="empty">暂无记录</view>
       <view v-else>
@@ -100,6 +207,8 @@
             </view>
           </view>
           <view v-if="item.expanded" class="history-detail">
+            <view class="history-line">拜访类型：{{ item.visitType || '-' }}</view>
+            <view class="history-line">拜访日期：{{ item.visitDate || '-' }}</view>
             <view class="history-line">定位：{{ item.location || '-' }}</view>
             <view class="history-line">纬度：{{ item.lat || '-' }}</view>
             <view class="history-line">经度：{{ item.lng || '-' }}</view>
@@ -133,25 +242,43 @@
       @cancel="closeChainPicker"
       @close="closeChainPicker"
     />
+    <u-datetime-picker
+      :show="showVisitDatePicker"
+      :value="visitDatePickerValue"
+      mode="date"
+      @confirm="onVisitDateConfirm"
+      @cancel="showVisitDatePicker = false"
+      @close="showVisitDatePicker = false"
+    />
   </view>
 </template>
 
 <script>
+import dayjs from "dayjs";
 import AppNavbar from "@/components/AppNavbar.vue";
 import {chooseImg, getLocationOnly} from "@/util";
 import {visitAddReq, visitListReq} from "@/api/visit";
 import {merchantGroupByChainReq} from "@/api/shop";
+import {userInfoReq} from "@/api/user";
 
 export default {
   components: {AppNavbar},
   data() {
     return {
+      brandColor: '#2fc6a7',
+      contentMaxLength: 500,
+      visitTypeTabs: [
+        {label: '门店', value: '门店', icon: 'home'},
+        {label: '门店经理', value: '门店经理', icon: 'account'},
+        {label: '其他', value: '其他', icon: 'more-dot-fill'}
+      ],
       visitForm: this.buildForm(),
       photos: [],
       visitHistory: [],
       chainOptions: [],
       chainLoading: false,
       showChainPicker: false,
+      showVisitDatePicker: false,
       loading: false,
       locating: false,
     }
@@ -161,13 +288,22 @@ export default {
       if (!this.chainOptions.length) return [0]
       const idx = this.chainOptions.findIndex(item => String(item.id) === String(this.visitForm.chainId))
       return [idx < 0 ? 0 : idx]
+    },
+    visitDatePickerValue() {
+      return this.visitForm.visitDate ? dayjs(this.visitForm.visitDate).valueOf() : Date.now()
+    },
+    targetPlaceholder() {
+      if (this.visitForm.visitType === '门店经理') return '请输入门店经理姓名'
+      if (this.visitForm.visitType === '其他') return '请输入拜访人员姓名'
+      return '请输入拜访人员姓名 / 门店名称 / 经理姓名'
     }
   },
   async onShow() {
     await Promise.all([
       this.fetchLocation(true),
       this.fetchHistory(),
-      this.fetchChainOptions()
+      this.fetchChainOptions(),
+      this.fetchSubmitterName()
     ])
   },
   methods: {
@@ -179,10 +315,25 @@ export default {
         chainId: '',
         chain: '',
         name: '',
+        visitType: '门店',
+        visitDate: dayjs().format('YYYY-MM-DD'),
+        submitterName: '',
         content: '',
         summary: ''
       }
     },
+    async fetchSubmitterName() {
+      if (this.visitForm.submitterName) return
+      try {
+        const {data} = await userInfoReq()
+        const info = data || {}
+        const name = info.realName || info.real_name || info.nickname || info.name || ''
+        if (name && !this.visitForm.submitterName) {
+          this.visitForm.submitterName = name
+        }
+      } catch (err) {
+      }
+    },
     async fetchChainOptions() {
       this.chainLoading = true
       try {
@@ -212,6 +363,11 @@ export default {
       this.visitForm.chain = selected ? selected.text : ''
       this.showChainPicker = false
     },
+    onVisitDateConfirm(event) {
+      const raw = event && event.value !== undefined ? event.value : Date.now()
+      this.visitForm.visitDate = dayjs(raw).format('YYYY-MM-DD')
+      this.showVisitDatePicker = false
+    },
     formatCoordinate(label, value) {
       if (value === '' || value === null || value === undefined) return `${label}：-`
       return `${label}：${value}`
@@ -268,9 +424,23 @@ export default {
       })
     },
     async submitVisit() {
-      if (!this.visitForm.lat || !this.visitForm.lng || !this.visitForm.location) {
+      if (!String(this.visitForm.submitterName || '').trim()) {
         uni.showToast({
-          title: '请先获取定位',
+          title: '请填写您的姓名',
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.visitForm.visitType) {
+        uni.showToast({
+          title: '请选择拜访对象类型',
+          icon: 'none'
+        })
+        return
+      }
+      if (!String(this.visitForm.name || '').trim()) {
+        uni.showToast({
+          title: '请填写拜访对象姓名/门店',
           icon: 'none'
         })
         return
@@ -282,7 +452,21 @@ export default {
         })
         return
       }
-      if (!this.visitForm.name || !this.visitForm.content || !this.photos.length || !this.visitForm.summary) {
+      if (!this.visitForm.lat || !this.visitForm.lng || !this.visitForm.location) {
+        uni.showToast({
+          title: '请先获取定位',
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.visitForm.visitDate) {
+        uni.showToast({
+          title: '请选择拜访日期',
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.visitForm.content || !this.photos.length || !this.visitForm.summary) {
         uni.showToast({
           title: '请填写完整信息',
           icon: 'none'
@@ -297,6 +481,9 @@ export default {
           chainId: this.visitForm.chainId,
           chain: this.visitForm.chain,
           name: this.visitForm.name,
+          visitType: this.visitForm.visitType,
+          visitDate: this.visitForm.visitDate,
+          submitterName: this.visitForm.submitterName,
           content: this.visitForm.content,
           photos: JSON.stringify(this.photos),
           summary: this.visitForm.summary
@@ -305,16 +492,17 @@ export default {
           title: '提交成功',
           icon: 'success'
         })
-        const locationSnapshot = {
+        const snapshot = {
           lat: this.visitForm.lat,
           lng: this.visitForm.lng,
           location: this.visitForm.location,
           chainId: this.visitForm.chainId,
-          chain: this.visitForm.chain
+          chain: this.visitForm.chain,
+          submitterName: this.visitForm.submitterName
         }
         this.visitForm = {
           ...this.buildForm(),
-          ...locationSnapshot
+          ...snapshot
         }
         this.photos = []
         await this.fetchHistory()
@@ -362,6 +550,8 @@ export default {
         name: item.name || item.visitName || '',
         content: item.content || item.remark || '',
         summary: item.summary || item.result || '',
+        visitType: item.visitType || item.visit_type || '',
+        visitDate: item.visitDate || item.visit_date || '',
         location: item.location || item.address || '',
         lat: item.lat || item.latitude || '',
         lng: item.lng || item.longitude || '',
@@ -449,6 +639,7 @@ export default {
 .visit-page {
   min-height: 100vh;
   background: #f5f5f5;
+  padding-bottom: 40rpx;
 }
 
 .page-hero {
@@ -457,31 +648,35 @@ export default {
 
 .intro-card {
   margin: 18rpx 20rpx 0;
-  padding: 20rpx 18rpx;
+  padding: 22rpx 20rpx;
   border-radius: 20rpx;
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.94);
   box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
 }
 
-.card-title {
+.tip-icon {
+  flex-shrink: 0;
+  margin-top: 2rpx;
+}
+
+.tip-body {
+  flex: 1;
   display: flex;
-  align-items: center;
-  gap: 12rpx;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.tip-title {
   font-size: 28rpx;
   font-weight: 700;
   color: #1f2937;
 }
 
-.title-bar {
-  width: 6rpx;
-  height: 30rpx;
-  border-radius: 999rpx;
-  background: #2f78ff;
-}
-
-.intro-text {
-  margin-top: 12rpx;
-  font-size: 26rpx;
+.tip-text {
+  font-size: 25rpx;
   color: #6b7280;
   line-height: 1.6;
 }
@@ -490,124 +685,165 @@ export default {
   margin: 18rpx 20rpx 0;
 }
 
-.form {
+.form-card-head {
   display: flex;
-  flex-direction: column;
-  gap: 10rpx;
-}
-
-.form-row {
-  display: flex;
-  justify-content: space-between;
   align-items: center;
-  gap: 20rpx;
-  padding: 12rpx 0;
-  border-bottom: 1rpx solid #edf1f7;
+  gap: 14rpx;
+  padding-bottom: 20rpx;
+  margin-bottom: 6rpx;
+  border-bottom: 1rpx solid #eef2f7;
 }
 
-.form-row input {
-  flex: 1;
-  text-align: right;
+.head-icon {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(47, 198, 167, 0.12);
+}
+
+.head-title {
+  font-size: 30rpx;
+  font-weight: 700;
   color: var(--text-main);
 }
 
-.selector-picker {
-  flex: 1;
+.field-row {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 14rpx 0;
 }
 
-.selector-picker .picker-value {
-  text-align: right;
-}
-
-.location-row {
+.field-row.textarea-row {
   align-items: flex-start;
 }
 
-.location-box {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 8rpx;
-}
-
-.picker-value {
+.field-label {
+  flex-shrink: 0;
+  width: 158rpx;
+  font-size: 28rpx;
   color: var(--text-main);
-  font-weight: 600;
 }
 
-.picker-value.placeholder {
-  color: var(--text-sub);
+/* 注意：不要用 .required 作类名 —— 全局 common.scss 里的 .required
+   （经 uni.scss 全局引入）@extend 了 .pos-a，会带上 position:absolute /
+   left:-9px / top:15px，导致标签脱离文档流堆到卡片左上角。 */
+.field-label.is-required {
+  display: flex;
+  align-items: center;
 }
 
-.location-text {
+.field-star {
+  color: #ff3b30;
+  margin-right: 6rpx;
+  font-size: 26rpx;
+}
+
+.field-box {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  min-height: 80rpx;
+  padding: 0 20rpx;
+  border-radius: 16rpx;
+  background: #f5f7fa;
+}
+
+.textarea-box {
+  flex-direction: column;
+  align-items: stretch;
+  padding: 16rpx 20rpx;
+}
+
+.field-input {
+  flex: 1;
+  min-width: 0;
+  height: 80rpx;
+  font-size: 28rpx;
+  color: var(--text-main);
+}
+
+.field-textarea {
   width: 100%;
-  text-align: right;
+  min-height: 180rpx;
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: var(--text-main);
+}
+
+.field-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 28rpx;
+  color: var(--text-main);
   line-height: 1.5;
   word-break: break-all;
 }
 
-.location-meta {
+.field-text.placeholder,
+.field-placeholder {
+  color: #9aa7b8;
+}
+
+.counter {
+  align-self: flex-end;
+  margin-top: 6rpx;
+  font-size: 24rpx;
+  color: #9aa7b8;
+}
+
+.field-meta {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 4rpx;
+  margin: -6rpx 0 6rpx 178rpx;
   font-size: 22rpx;
   color: var(--text-sub);
 }
 
-.refresh-btn {
-  flex-shrink: 0;
-  margin-top: 2rpx;
-  padding: 8rpx 18rpx;
-  border-radius: 999rpx;
-  background: #eef4ff;
-  color: #2f78ff;
-  font-size: 22rpx;
-  font-weight: 700;
-}
-
-.textarea-row {
-  align-items: flex-start;
-  padding-top: 16rpx;
-}
-
-.textarea-input {
+.type-tabs {
   flex: 1;
-  min-height: 120rpx;
-  text-align: right;
-  font-size: 26rpx;
-  color: var(--text-main);
-}
-
-.upload {
   display: flex;
-  justify-content: space-between;
+  gap: 12rpx;
+}
+
+.type-tab {
+  flex: 1;
+  min-width: 0;
+  display: flex;
   align-items: center;
-  padding: 12rpx 0;
-  border-bottom: 1rpx solid #edf1f7;
-}
-
-.upload-title {
-  font-weight: 700;
-}
-
-.upload-meta {
+  justify-content: center;
+  gap: 6rpx;
+  height: 80rpx;
+  border-radius: 16rpx;
+  background: #f5f7fa;
   color: var(--text-sub);
-  font-size: 24rpx;
+  font-size: 25rpx;
+}
+
+.type-tab.active {
+  background: rgba(47, 198, 167, 0.14);
+  color: var(--brand-primary);
+  font-weight: 700;
 }
 
 .photo-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10rpx;
-  margin-top: 10rpx;
+  margin: 6rpx 0 6rpx 178rpx;
 }
 
 .photo-item {
   position: relative;
-  width: 160rpx;
-  height: 160rpx;
+  width: 150rpx;
+  height: 150rpx;
   border-radius: 12rpx;
   overflow: hidden;
   background: #f8fafc;
@@ -635,10 +871,15 @@ export default {
   line-height: 1;
 }
 
+.submit-wrap {
+  margin: 24rpx 20rpx 0;
+}
+
 .submit {
-  margin-top: 12rpx;
-  padding: 14rpx;
-  text-align: center;
+  gap: 10rpx;
+  padding: 24rpx 32rpx;
+  font-size: 32rpx;
+  font-weight: 700;
 }
 
 .history {