账号信息页

pages.json

@@ -45,9 +45,9 @@
       "navigationBarBackgroundColor": "transparent"
     }
   }, {
-    "path": "pages/mine/info/edit",
+    "path": "pages/mine/info/name",
     "style": {
-      "navigationBarTitleText": "编辑资料",
+      "navigationBarTitleText": "姓名",
       "navigationStyle": "custom"
     }
   }, {

pages/mine/about/index.vue

@@ -1,44 +1,51 @@
 <template>
-  <view class="about-container">
-    <view class="header-section text-center">
-      <image style="width: 150rpx;height: 150rpx;" src="/static/logo200.png" mode="widthFix">
-      </image>
-      <uni-title type="h2" title="若依移动端"></uni-title>
-    </view>
+  <view class="container" :style="{paddingTop: navbarHeight + 'rpx'}">
+    <!-- 顶部渐变背景 -->
+    <view class="top-gradient"></view>
 
-    <view class="content-section">
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>版本信息</view>
-            <view class="text-right">v{{version}}</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>官方邮箱</view>
-            <view class="text-right">ruoyi@xx.com</view>
-          </view>
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
+      <view class="navbar-content">
+        <view class="navbar-back" @click="handleBack">
+          <view class="iconfont icon-right back-icon"></view>
         </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>服务热线</view>
-            <view class="text-right">400-999-9999</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow">
-          <view class="menu-item-box">
-            <view>公司网站</view>
-            <view class="text-right">
-              <uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
-            </view>
-          </view>
+        <text class="navbar-title">关于我们</text>
+        <view class="navbar-placeholder"></view>
+      </view>
+    </view>
+
+    <!-- 应用信息区域 -->
+    <view class="app-info-section">
+      <!-- 应用图标 -->
+      <view class="app-icon-wrapper">
+        <view class="app-icon-placeholder">
+          <!-- 这里可以替换为实际的图标 -->
         </view>
       </view>
+      
+      <!-- 应用名称 -->
+      <view class="app-name">{{ appName }}</view>
+
+      <!-- 版本信息框 -->
+      <view class="version-box">
+        <text class="version-label">当前版本</text>
+        <text class="version-number">{{ version }}</text>
+      </view>
+    </view>
+
+    <!-- 法律协议区域 -->
+    <view class="legal-section">
+      <view class="legal-links">
+        <text class="legal-link" @click="handleUserAgreement">《用户协议》</text>
+        <text class="legal-separator">与</text>
+        <text class="legal-link" @click="handlePrivacyPolicy">《隐私协议》</text>
+      </view>
     </view>
 
-    <view class="copyright">
-      <view>Copyright &copy; 2025 ruoyi.vip All Rights Reserved.</view>
+    <!-- 版权信息 -->
+    <view class="copyright-section">
+      <view class="copyright-text">{{ copyright }}</view>
+      <view class="icp-text">{{ icpNumber }}</view>
     </view>
   </view>
 </template>
@@ -47,8 +54,61 @@
   export default {
     data() {
       return {
-        url: getApp().globalData.config.appInfo.site_url,
-        version: getApp().globalData.config.appInfo.version
+        statusBarHeight: 0,
+        appName: '占位软件名',
+        version: '1.0',
+        copyright: '爱丽恩严(大连)商务科技有限公司版权所有',
+        icpNumber: '辽ICP备2023008619号-4A'
+      }
+    },
+    onLoad() {
+      // 获取状态栏高度
+      const systemInfo = uni.getSystemInfoSync()
+      this.statusBarHeight = systemInfo.statusBarHeight || 0
+      
+      // 从配置中获取应用信息
+      const app = getApp()
+      if (app && app.globalData && app.globalData.config && app.globalData.config.appInfo) {
+        const appInfo = app.globalData.config.appInfo
+        if (appInfo.name) {
+          this.appName = appInfo.name
+        }
+        if (appInfo.version) {
+          this.version = appInfo.version
+        }
+      }
+    },
+    computed: {
+      navbarHeight() {
+        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(20rpx)
+        return (this.statusBarHeight * 2) + 88 + 20
+      }
+    },
+    methods: {
+      handleBack() {
+        uni.navigateBack()
+      },
+      handleUserAgreement() {
+        // 跳转到用户协议页面
+        const app = getApp()
+        if (app && app.globalData && app.globalData.config && app.globalData.config.appInfo) {
+          const agreements = app.globalData.config.appInfo.agreements
+          if (agreements && agreements.length > 1) {
+            const agreement = agreements[1] // 用户协议通常是第二个
+            this.$tab.navigateTo(`/pages/common/webview/index?title=${encodeURIComponent(agreement.title)}&url=${encodeURIComponent(agreement.url)}`)
+          }
+        }
+      },
+      handlePrivacyPolicy() {
+        // 跳转到隐私协议页面
+        const app = getApp()
+        if (app && app.globalData && app.globalData.config && app.globalData.config.appInfo) {
+          const agreements = app.globalData.config.appInfo.agreements
+          if (agreements && agreements.length > 0) {
+            const agreement = agreements[0] // 隐私协议通常是第一个
+            this.$tab.navigateTo(`/pages/common/webview/index?title=${encodeURIComponent(agreement.title)}&url=${encodeURIComponent(agreement.url)}`)
+          }
+        }
       }
     }
   }
@@ -56,20 +116,182 @@
 
 <style lang="scss" scoped>
   page {
-    background-color: #f8f8f8;
+    background-color: #ffffff;
+  }
+
+  .container {
+    min-height: 100vh;
+    padding: 0 30rpx 20rpx 30rpx;
+    background-color: #ffffff;
+    position: relative;
+
+    // 顶部渐变背景
+    .top-gradient {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 800rpx;
+      background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.05) 50%, transparent 100%);
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    // 自定义导航栏
+    .custom-navbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 999;
+      background-color: transparent;
+      pointer-events: none;
+
+      .navbar-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 88rpx;
+        pointer-events: auto;
+        position: relative;
+
+        .navbar-back {
+          position: absolute;
+          left: 30rpx;
+          width: 60rpx;
+          height: 60rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .back-icon {
+            font-size: 36rpx;
+            color: #000000;
+            transform: rotate(180deg);
+          }
+        }
+
+        .navbar-title {
+          font-size: 36rpx;
+          font-weight: 500;
+          color: #000000;
+        }
+
+        .navbar-placeholder {
+          position: absolute;
+          right: 30rpx;
+          width: 60rpx;
+          height: 60rpx;
+        }
+      }
+    }
+  }
+
+  // 应用信息区域
+  .app-info-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 80rpx;
+    padding-bottom: 60rpx;
+
+    .app-icon-wrapper {
+      margin-bottom: 40rpx;
+
+      .app-icon-placeholder {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 32rpx;
+        background-color: #007AFF;
+        // 如果需要显示实际图标，可以这样：
+        // background-image: url('/static/logo.png');
+        // background-size: cover;
+        // background-position: center;
+      }
+    }
+
+    .app-name {
+      font-size: 36rpx;
+      font-weight: 500;
+      color: #000000;
+      margin-bottom: 60rpx;
+    }
+
+    .version-box {
+      width: 100%;
+      background-color: #ffffff;
+      border-radius: 16rpx;
+      padding: 32rpx 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+      border: 1rpx solid #f0f0f0;
+
+      .version-label {
+        font-size: 32rpx;
+        color: #000000;
+        font-weight: 400;
+      }
+
+      .version-number {
+        font-size: 32rpx;
+        color: #999999;
+        font-weight: 400;
+      }
+    }
   }
 
-  .copyright {
-    margin-top: 50rpx;
-    text-align: center;
-    line-height: 60rpx;
-    color: #999;
+  // 法律协议区域
+  .legal-section {
+    padding: 40rpx 0;
+    display: flex;
+    justify-content: center;
+
+    .legal-links {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      .legal-link {
+        font-size: 28rpx;
+        color: #007AFF;
+        text-decoration: none;
+      }
+
+      .legal-separator {
+        font-size: 28rpx;
+        color: #666666;
+        margin: 0 10rpx;
+      }
+    }
   }
 
-  .header-section {
+  // 版权信息
+  .copyright-section {
+    position: fixed;
+    bottom: 100rpx;
+    left: 0;
+    right: 0;
     display: flex;
-    padding: 30rpx 0 0;
     flex-direction: column;
     align-items: center;
+    padding: 0 30rpx;
+
+    .copyright-text {
+      font-size: 24rpx;
+      color: #999999;
+      line-height: 1.6;
+      text-align: center;
+      margin-bottom: 20rpx;
+    }
+
+    .icp-text {
+      font-size: 24rpx;
+      color: #999999;
+      line-height: 1.6;
+      text-align: center;
+    }
   }
 </style>

pages/mine/index.vue

@@ -101,6 +101,17 @@
         </view>
       </view>
     </view>
+
+    <!-- 清理缓存确认对话框 -->
+    <view v-if="showClearCacheDialog" class="clear-cache-dialog-mask" @click="closeClearCacheDialog">
+      <view class="clear-cache-dialog" @click.stop>
+        <view class="cache-dialog-content">{{ clearCacheContent }}</view>
+        <view class="cache-dialog-buttons">
+          <view class="cache-dialog-btn cancel-btn" @click="closeClearCacheDialog">取消</view>
+          <view class="cache-dialog-btn confirm-btn" @click="confirmClearCache">确定</view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -115,7 +126,9 @@
       return {
         name: this.$store.state.user.name,
         statusBarHeight: 0,
-        showLogoutDialog: false
+        showLogoutDialog: false,
+        showClearCacheDialog: false,
+        clearCacheContent: ''
       }
     },
     onLoad() {
@@ -155,10 +168,47 @@
         this.$modal.showToast('模块建设中~')
       },
       handleClearCache() {
-        this.$modal.confirm('确定要清理本地缓存吗？').then(() => {
-          // 清理缓存的逻辑
-          uni.clearStorageSync()
-          this.$modal.msgSuccess('缓存清理成功')
+        // 计算当前缓存大小
+        const getCacheSize = () => {
+          try {
+            const storageInfo = uni.getStorageInfoSync()
+            let totalSize = 0
+            if (storageInfo.keys && storageInfo.keys.length > 0) {
+              storageInfo.keys.forEach(key => {
+                try {
+                  const value = uni.getStorageSync(key)
+                  // 计算存储数据的大小（字节）
+                  const size = JSON.stringify(value).length
+                  totalSize += size
+                } catch (e) {
+                  console.error('获取存储项失败:', key, e)
+                }
+              })
+            }
+            // 转换为KB，保留2位小数
+            const sizeKB = (totalSize / 1024).toFixed(2)
+            return parseFloat(sizeKB)
+          } catch (e) {
+            console.error('计算缓存大小失败:', e)
+            return 0
+          }
+        }
+
+        const cacheSize = getCacheSize()
+        this.clearCacheContent = cacheSize > 0 
+          ? `当前缓存 ${cacheSize} KB，确定清除？`
+          : '确定要清理本地缓存吗？'
+        this.showClearCacheDialog = true
+      },
+      closeClearCacheDialog() {
+        this.showClearCacheDialog = false
+      },
+      confirmClearCache() {
+        // 清理缓存的逻辑
+        uni.clearStorageSync()
+        this.showClearCacheDialog = false
+        uni.showToast({
+          title: '缓存清理成功'
         })
       },
       handleAbout() {
@@ -452,5 +502,73 @@
         }
       }
     }
+
+    // 清理缓存对话框
+    .clear-cache-dialog-mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .clear-cache-dialog {
+      width: 600rpx;
+      background-color: #ffffff;
+      border-radius: 24rpx;
+      padding: 60rpx 40rpx 40rpx;
+      box-sizing: border-box;
+      min-height: 280rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .cache-dialog-content {
+        font-size: 32rpx;
+        font-weight: 400;
+        color: #333333;
+        text-align: center;
+        line-height: 1.6;
+        padding: 20rpx 0;
+        min-height: 120rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .cache-dialog-buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 40rpx;
+        gap: 20rpx;
+
+        .cache-dialog-btn {
+          flex: 1;
+          height: 88rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 32rpx;
+          font-weight: 400;
+          background-color: transparent;
+          border: none;
+
+          &.cancel-btn {
+            color: #666666;
+          }
+
+          &.confirm-btn {
+            color: #2652C2;
+          }
+        }
+      }
+    }
   }
 </style>

pages/mine/info/index.vue

@@ -19,7 +19,7 @@
       <view class="info-item" @click="handleAvatar">
         <view class="item-label">头像</view>
         <view class="item-value">
-          <image v-if="user.avatar" :src="user.avatar" class="avatar-img" mode="aspectFill"></image>
+          <image v-if="user.headImg" :src="user.headImg" class="avatar-img" mode="aspectFill"></image>
           <view v-else class="avatar-placeholder">
             <view class="iconfont icon-people"></view>
           </view>
@@ -140,6 +140,9 @@
       // 获取状态栏高度
       const systemInfo = uni.getSystemInfoSync()
       this.statusBarHeight = systemInfo.statusBarHeight || 0
+    },
+    onShow() {
+      // 从其他页面返回时刷新数据
       this.getLawyerInfoData()
     },
     computed: {
@@ -165,7 +168,7 @@
         })
       },
       handleAvatar() {
-        const _this = this
+        const that = this
         uni.chooseImage({
           count: 1,
           sizeType: ['compressed'],
@@ -177,65 +180,92 @@
               title: '上传中...',
               mask: true
             })
-            
-            // 使用原本的上传方法
-            // upload({
-            //   url: '/file/upload',
-            //   name: 'avatarfile',
-            //   filePath: tempFilePath
-            // }).then(uploadRes => {
-            //   // 上传成功后，获取图片URL
-            //   let headImg = ''
-            //   if (uploadRes.url) {
-            //     headImg = uploadRes.url
-            //   } else if (uploadRes.fileName) {
-            //     headImg = config.baseUrl + uploadRes.fileName
-            //   } else if (uploadRes.data && uploadRes.data.url) {
-            //     headImg = uploadRes.data.url.startsWith('http') ? uploadRes.data.url : config.baseUrl + uploadRes.data.url
-            //   } else if (uploadRes.data) {
-            //     headImg = typeof uploadRes.data === 'string' ? uploadRes.data : uploadRes.data.url || uploadRes.data.imgUrl || ''
-            //   }
+
+            // 上传图片，使用 baseUrl1
+            upload({
+              url: '/file/upload',
+              filePath: tempFilePath,
+              name: 'file',
+              baseUrl: config.baseUrl1
+            }).then(response => {
+              console.log('上传响应:', response)
+              // 上传成功，更新用户头像
+              // 根据实际返回的数据结构处理
+              let headImg = null
+              if (response.data) {
+                // 如果 response.data 是字符串，直接使用
+                if (typeof response.data === 'string') {
+                  headImg = response.data
+                } 
+                // 如果 response.data 是对象，尝试获取 url 或 imgUrl
+                else if (response.data.url) {
+                  headImg = response.data.url
+                } else if (response.data.imgUrl) {
+                  headImg = response.data.imgUrl
+                }
+              } else if (response.url) {
+                headImg = response.url
+              } else if (response.imgUrl) {
+                headImg = response.imgUrl
+              }
+              
+              if (!headImg) {
+                throw new Error('上传失败，未返回图片地址')
+              }
+              
+              // 如果返回的是相对路径，需要拼接 baseUrl1
+              if (headImg.startsWith('/')) {
+                headImg = config.baseUrl1 + headImg
+              }
               
-            //   if (!headImg) {
-            //     throw new Error('获取图片URL失败')
-            //   }
+              // 使用 Vue.set 确保响应式更新
+              that.$set(that.user, 'headImg', headImg)
               
-            //   // 调用保存接口
-            //   return editLawyerUser({
-            //     id: 1,
-            //     headImg: headImg
-            //   }).then(saveRes => {
-            //     // 更新本地头像显示
-            //     if (saveRes.data && saveRes.data.headImg) {
-            //       _this.user.avatar = saveRes.data.headImg
-            //       _this.user.headImg = saveRes.data.headImg
-            //     } else {
-            //       // 如果返回数据中没有headImg，使用上传返回的URL
-            //       _this.user.avatar = headImg
-            //       _this.user.headImg = headImg
-            //     }
-            //     return saveRes
-            //   })
-            // }).then(saveRes => {
-            //   uni.hideLoading()
-            //   _this.$modal.msgSuccess('头像上传成功')
-            //   // 刷新数据
-            //   _this.getLawyerInfoData()
-            // }).catch(error => {
-            //   uni.hideLoading()
-            //   console.error('上传失败:', error)
-            //   _this.$modal.msgError('头像上传失败，请重试')
-            // })
+              // 调用API更新用户信息到服务器
+              let params={
+                id:that.user.id,
+                headImg: headImg
+              }      
+              editLawyerUser(params).then(response => {
+                console.log('更新响应:', response)
+              }).catch(error => {
+                console.error('更新失败:', error)
+              })
+
+            }).then(() => {
+              // 更新成功提示
+              uni.showToast({
+                title: '头像更新成功'
+              })
+            }).catch(error => {
+              uni.hideLoading()
+              console.error('上传头像失败:', error)
+              uni.showToast({
+                title: error.message || '上传失败，请重试',
+                icon: 'none'
+              })
+            })
           },
-          fail: function(err) {
-            console.error('选择图片失败:', err)
-            _this.$modal.msgError('选择图片失败')
+          fail: function(error) {
+            console.error('选择图片失败:', error)
+            uni.showToast({
+              title: '选择图片失败',
+              icon: 'none'
+            })
           }
         })
       },
       handleEdit(field) {
-        // 跳转到编辑页面或显示编辑弹窗
-        this.$tab.navigateTo('/pages/mine/info/edit')
+        // 根据字段类型跳转到不同的编辑页面
+        if (field === 'name') {
+          // 跳转到姓名编辑页面
+          const currentName = this.user.nickName || this.user.userName || ''
+          const userId = this.user.id || 1
+          this.$tab.navigateTo(`/pages/mine/info/name?name=${encodeURIComponent(currentName)}&userId=${userId}`)
+        } else {
+          // 其他字段跳转到通用编辑页面
+          this.$tab.navigateTo('/pages/mine/info/edit')
+        }
       },
       handleOrderStatusChange(e) {
         this.orderStatus = e.detail.value

pages/mine/info/name.vue

@@ -0,0 +1,247 @@
+<template>
+  <view class="container" :style="{paddingTop: navbarHeight + 'rpx'}">
+    <!-- 顶部渐变背景 -->
+    <view class="top-gradient"></view>
+
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
+      <view class="navbar-content">
+        <view class="navbar-back" @click="handleBack">
+          <view class="iconfont icon-right back-icon"></view>
+        </view>
+        <text class="navbar-title">姓名</text>
+        <view class="navbar-right" @click="handleConfirm">
+          <text class="confirm-text" :class="{ disabled: !canConfirm }">确定</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 输入区域 -->
+    <view class="input-container">
+      <view class="input-wrapper">
+        <input 
+          class="name-input" 
+          v-model="nameValue" 
+          placeholder="请输入姓名" 
+          maxlength="30"
+          @input="handleInput"
+        />
+        <view class="char-count">{{ nameValue.length }}/30</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { editLawyerUser } from "@/api/api"
+
+  export default {
+    data() {
+      return {
+        nameValue: '',
+        originalName: '',
+        statusBarHeight: 0,
+        userId: null
+      }
+    },
+    onLoad(options) {
+      // 获取状态栏高度
+      const systemInfo = uni.getSystemInfoSync()
+      this.statusBarHeight = systemInfo.statusBarHeight || 0
+      
+      // 获取传入的姓名和用户ID
+      if (options.name) {
+        this.nameValue = decodeURIComponent(options.name)
+        this.originalName = this.nameValue
+      }
+      if (options.userId) {
+        this.userId = options.userId
+      }
+    },
+    computed: {
+      navbarHeight() {
+        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(20rpx)
+        return (this.statusBarHeight * 2) + 88 + 20
+      },
+      canConfirm() {
+        // 有输入且与原始值不同时可以确认
+        return this.nameValue.trim().length > 0 && this.nameValue !== this.originalName
+      }
+    },
+    methods: {
+      handleInput(e) {
+        this.nameValue = e.detail.value
+      },
+      handleBack() {
+        uni.navigateBack()
+      },
+      handleConfirm() {
+        if (!this.canConfirm) {
+          return
+        }
+
+        const trimmedName = this.nameValue.trim()
+        if (trimmedName.length === 0) {
+          uni.showToast({
+            title: '请输入姓名',
+            icon: 'none'
+          })
+          return
+        }
+
+        // 显示加载提示
+        uni.showLoading({
+          title: '保存中...',
+          mask: true
+        })
+
+        // 调用API更新姓名
+        const params = {
+          id:  1, // 如果没有传入userId，使用默认值1
+          name: trimmedName
+        }
+
+        editLawyerUser(params).then(response => {
+          uni.hideLoading()
+          uni.showToast({
+            title: '保存成功',
+            icon: 'success'
+          })
+          // 延迟返回，让用户看到成功提示
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 1500)
+        }).catch(error => {
+          uni.hideLoading()
+          console.error('更新姓名失败:', error)
+          uni.showToast({
+            title: error.message || '保存失败，请重试',
+            icon: 'none'
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f5f5f5;
+  }
+
+  .container {
+    min-height: 100vh;
+    padding: 0 30rpx 20rpx 30rpx;
+    background-color: #f5f5f5;
+    position: relative;
+
+    // 顶部渐变背景
+    .top-gradient {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 800rpx;
+      background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.05) 50%, transparent 100%);
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    // 自定义导航栏
+    .custom-navbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 999;
+      background-color: transparent;
+      pointer-events: none;
+
+      .navbar-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 88rpx;
+        pointer-events: auto;
+        position: relative;
+
+        .navbar-back {
+          position: absolute;
+          left: 30rpx;
+          width: 60rpx;
+          height: 60rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .back-icon {
+            font-size: 36rpx;
+            color: #000000;
+            transform: rotate(180deg);
+          }
+        }
+
+        .navbar-title {
+          font-size: 36rpx;
+          font-weight: 500;
+          color: #000000;
+        }
+
+        .navbar-right {
+          position: absolute;
+          right: 30rpx;
+          height: 60rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .confirm-text {
+            font-size: 32rpx;
+            color: #007AFF;
+            font-weight: 400;
+
+            &.disabled {
+              color: #cccccc;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 输入区域
+  .input-container {
+    padding: 40rpx 0;
+    margin-top: 20rpx;
+  }
+
+  .input-wrapper {
+    position: relative;
+    background-color: #ffffff;
+    border-radius: 16rpx;
+    padding: 32rpx 30rpx;
+    min-height: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .name-input {
+    flex: 1;
+    font-size: 32rpx;
+    color: #000000;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .char-count {
+    font-size: 28rpx;
+    color: #999999;
+    margin-left: 20rpx;
+    white-space: nowrap;
+  }
+</style>
+