feat(profile): 重构个人中心页面布局和功能
- 简化用户信息展示,移除冗余字段 - 重新设计统计数据和快捷操作区域 - 优化菜单项结构和导航功能 - 更新页面样式和交互体验
Showing
2 changed files
with
178 additions
and
385 deletions
| 1 | +/* | ||
| 2 | + * @Date: 2025-07-01 17:55:08 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-07-02 14:44:50 | ||
| 5 | + * @FilePath: /jgdl/src/pages/profile/index.config.js | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | + */ | ||
| 1 | export default { | 8 | export default { |
| 2 | - navigationBarTitleText: '首页' | 9 | + navigationBarTitleText: '我的' |
| 3 | } | 10 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <view class="profile-page"> | 2 | <view class="profile-page"> |
| 3 | - <!-- 用户信息卡片 --> | 3 | + <!-- User Profile Section --> |
| 4 | - <view class="user-card"> | 4 | + <view class="user-profile-section"> |
| 5 | - <view class="user-info"> | 5 | + <image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" /> |
| 6 | - <image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" /> | 6 | + <text class="user-name">{{ userInfo.name }}</text> |
| 7 | - <view class="user-details"> | 7 | + <text class="user-phone">{{ userInfo.phone }}</text> |
| 8 | - <text class="user-name">{{ userInfo.name }}</text> | 8 | + <nut-button class="edit-profile-btn" @click="onEditProfile"> |
| 9 | - <text class="user-school">{{ userInfo.school }}</text> | 9 | + 编辑资料 |
| 10 | - <view class="user-stats"> | 10 | + </nut-button> |
| 11 | - <text class="stat-item">信用分: {{ userInfo.creditScore }}</text> | 11 | + |
| 12 | - <text class="stat-item">成交: {{ userInfo.dealCount }}笔</text> | 12 | + <!-- Stats Row --> |
| 13 | - </view> | 13 | + <view class="stats-row"> |
| 14 | + <view class="stat-item"> | ||
| 15 | + <text class="stat-number">{{ userStats.following }}</text> | ||
| 16 | + <text class="stat-label">关注</text> | ||
| 14 | </view> | 17 | </view> |
| 15 | - </view> | 18 | + <view class="stat-item" @click="onOrderManagement"> |
| 16 | - <view class="edit-btn" @click="onEditProfile"> | 19 | + <text class="stat-number">{{ userStats.orders }}</text> |
| 17 | - <Edit size="20" color="#f97316" /> | 20 | + <text class="stat-label">订单</text> |
| 18 | - </view> | ||
| 19 | - </view> | ||
| 20 | - | ||
| 21 | - <!-- 我的车辆 --> | ||
| 22 | - <view class="section"> | ||
| 23 | - <view class="section-header"> | ||
| 24 | - <text class="section-title">我的车辆</text> | ||
| 25 | - </view> | ||
| 26 | - <view class="vehicle-stats"> | ||
| 27 | - <view class="stat-card" @click="onMyVehicles('selling')"> | ||
| 28 | - <text class="stat-number">{{ vehicleStats.selling }}</text> | ||
| 29 | - <text class="stat-label">在售</text> | ||
| 30 | - </view> | ||
| 31 | - <view class="stat-card" @click="onMyVehicles('sold')"> | ||
| 32 | - <text class="stat-number">{{ vehicleStats.sold }}</text> | ||
| 33 | - <text class="stat-label">已售</text> | ||
| 34 | </view> | 21 | </view> |
| 35 | - <view class="stat-card" @click="onMyFavorites"> | 22 | + <view class="stat-item"> |
| 36 | - <text class="stat-number">{{ vehicleStats.favorites }}</text> | 23 | + <text class="stat-number">{{ userStats.followers }}</text> |
| 37 | - <text class="stat-label">收藏</text> | 24 | + <text class="stat-label">被关注</text> |
| 38 | </view> | 25 | </view> |
| 39 | </view> | 26 | </view> |
| 40 | </view> | 27 | </view> |
| 41 | 28 | ||
| 42 | - <!-- 功能菜单 --> | 29 | + <!-- Quick Actions --> |
| 43 | - <view class="menu-section"> | 30 | + <view class="quick-actions"> |
| 44 | - <view class="menu-item" @click="onOrderManagement"> | 31 | + <view class="action-item" @click="onMyFavorites"> |
| 45 | - <view class="menu-icon"> | 32 | + <Heart size="22" color="#6b7280" /> |
| 46 | - <Cart size="20" color="#f97316" /> | 33 | + <text class="action-text">我的关注</text> |
| 47 | - </view> | ||
| 48 | - <text class="menu-text">订单管理</text> | ||
| 49 | - <Right size="16" color="#9ca3af" /> | ||
| 50 | </view> | 34 | </view> |
| 51 | - | 35 | + <view class="action-item" @click="onOrderManagement"> |
| 52 | - <view class="menu-item" @click="onCertification"> | 36 | + <Clock size="22" color="#6b7280" /> |
| 53 | - <view class="menu-icon"> | 37 | + <text class="action-text">我的订单</text> |
| 54 | - <Service size="20" color="#f97316" /> | ||
| 55 | - </view> | ||
| 56 | - <text class="menu-text">车辆认证</text> | ||
| 57 | - <view class="certification-badge"> | ||
| 58 | - <text class="badge-text">{{ userInfo.isCertified ? '已认证' : '未认证' }}</text> | ||
| 59 | - </view> | ||
| 60 | - <Right size="16" color="#9ca3af" /> | ||
| 61 | - </view> | ||
| 62 | - | ||
| 63 | - <view class="menu-item" @click="onWallet"> | ||
| 64 | - <view class="menu-icon"> | ||
| 65 | - <Shop size="20" color="#f97316" /> | ||
| 66 | - </view> | ||
| 67 | - <text class="menu-text">我的钱包</text> | ||
| 68 | - <text class="wallet-balance">¥{{ userInfo.balance }}</text> | ||
| 69 | - <Right size="16" color="#9ca3af" /> | ||
| 70 | - </view> | ||
| 71 | - | ||
| 72 | - <view class="menu-item" @click="onAddress"> | ||
| 73 | - <view class="menu-icon"> | ||
| 74 | - <Location size="20" color="#f97316" /> | ||
| 75 | - </view> | ||
| 76 | - <text class="menu-text">收货地址</text> | ||
| 77 | - <Right size="16" color="#9ca3af" /> | ||
| 78 | </view> | 38 | </view> |
| 79 | </view> | 39 | </view> |
| 80 | 40 | ||
| 81 | - <!-- 服务菜单 --> | 41 | + <!-- Menu Items --> |
| 82 | <view class="menu-section"> | 42 | <view class="menu-section"> |
| 83 | - <view class="menu-item" @click="onCustomerService"> | 43 | + <view class="menu-item" @click="onMessages"> |
| 84 | - <view class="menu-icon"> | 44 | + <Notice size="20" color="#6b7280" /> |
| 85 | - <Voice size="20" color="#f97316" /> | 45 | + <text class="menu-text">我的消息</text> |
| 86 | - </view> | 46 | + <Right size="18" color="#9ca3af" /> |
| 87 | - <text class="menu-text">客服中心</text> | ||
| 88 | - <Right size="16" color="#9ca3af" /> | ||
| 89 | </view> | 47 | </view> |
| 90 | - | 48 | + |
| 49 | + <view class="menu-item" @click="onMySoldVehicles"> | ||
| 50 | + <Cart size="20" color="#6b7280" /> | ||
| 51 | + <text class="menu-text">我卖的车</text> | ||
| 52 | + <Right size="18" color="#9ca3af" /> | ||
| 53 | + </view> | ||
| 54 | + | ||
| 91 | <view class="menu-item" @click="onFeedback"> | 55 | <view class="menu-item" @click="onFeedback"> |
| 92 | - <view class="menu-icon"> | 56 | + <Message size="20" color="#6b7280" /> |
| 93 | - <Message size="20" color="#f97316" /> | ||
| 94 | - </view> | ||
| 95 | <text class="menu-text">意见反馈</text> | 57 | <text class="menu-text">意见反馈</text> |
| 96 | - <Right size="16" color="#9ca3af" /> | 58 | + <Right size="18" color="#9ca3af" /> |
| 97 | </view> | 59 | </view> |
| 98 | - | 60 | + |
| 99 | - <view class="menu-item" @click="onAbout"> | 61 | + <view class="menu-item" @click="onHelpCenter"> |
| 100 | - <view class="menu-icon"> | 62 | + <Tips size="20" color="#6b7280" /> |
| 101 | - <Tips size="20" color="#f97316" /> | 63 | + <text class="menu-text">帮助中心</text> |
| 102 | - </view> | 64 | + <Right size="18" color="#9ca3af" /> |
| 103 | - <text class="menu-text">关于我们</text> | ||
| 104 | - <Right size="16" color="#9ca3af" /> | ||
| 105 | </view> | 65 | </view> |
| 106 | - </view> | ||
| 107 | 66 | ||
| 108 | - <!-- 设置菜单 --> | ||
| 109 | - <view class="menu-section"> | ||
| 110 | <view class="menu-item" @click="onSettings"> | 67 | <view class="menu-item" @click="onSettings"> |
| 111 | - <view class="menu-icon"> | 68 | + <Setting size="20" color="#6b7280" /> |
| 112 | - <Setting size="20" color="#f97316" /> | ||
| 113 | - </view> | ||
| 114 | <text class="menu-text">设置</text> | 69 | <text class="menu-text">设置</text> |
| 115 | - <Right size="16" color="#9ca3af" /> | 70 | + <Right size="18" color="#9ca3af" /> |
| 116 | </view> | 71 | </view> |
| 117 | </view> | 72 | </view> |
| 118 | 73 | ||
| 119 | - <!-- 退出登录 --> | ||
| 120 | - <view class="logout-section"> | ||
| 121 | - <button class="logout-btn" @click="onLogout">退出登录</button> | ||
| 122 | - </view> | ||
| 123 | - | ||
| 124 | <!-- 自定义TabBar --> | 74 | <!-- 自定义TabBar --> |
| 125 | <TabBar /> | 75 | <TabBar /> |
| 126 | </view> | 76 | </view> |
| ... | @@ -128,9 +78,8 @@ | ... | @@ -128,9 +78,8 @@ |
| 128 | 78 | ||
| 129 | <script setup> | 79 | <script setup> |
| 130 | import { ref } from 'vue' | 80 | import { ref } from 'vue' |
| 131 | -import { | 81 | +import { |
| 132 | - Edit, Right, Cart, Service, Shop, Location, | 82 | + Heart, Clock, Notice, Cart, Message, Tips, Setting, Right |
| 133 | - Voice, Message, Tips, Setting | ||
| 134 | } from '@nutui/icons-vue-taro' | 83 | } from '@nutui/icons-vue-taro' |
| 135 | import Taro from '@tarojs/taro' | 84 | import Taro from '@tarojs/taro' |
| 136 | import TabBar from '@/components/TabBar.vue' | 85 | import TabBar from '@/components/TabBar.vue' |
| ... | @@ -138,19 +87,15 @@ import TabBar from '@/components/TabBar.vue' | ... | @@ -138,19 +87,15 @@ import TabBar from '@/components/TabBar.vue' |
| 138 | // 用户信息 | 87 | // 用户信息 |
| 139 | const userInfo = ref({ | 88 | const userInfo = ref({ |
| 140 | name: '张同学', | 89 | name: '张同学', |
| 141 | - school: '清华大学', | 90 | + phone: '138****8888', |
| 142 | - avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop&crop=face', | 91 | + avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop&crop=face' |
| 143 | - creditScore: 95, | ||
| 144 | - dealCount: 12, | ||
| 145 | - isCertified: true, | ||
| 146 | - balance: 1580.50 | ||
| 147 | }) | 92 | }) |
| 148 | 93 | ||
| 149 | -// 车辆统计 | 94 | +// 用户统计 |
| 150 | -const vehicleStats = ref({ | 95 | +const userStats = ref({ |
| 151 | - selling: 3, | 96 | + following: 12, |
| 152 | - sold: 8, | 97 | + orders: 8, |
| 153 | - favorites: 15 | 98 | + followers: 24 |
| 154 | }) | 99 | }) |
| 155 | 100 | ||
| 156 | /** | 101 | /** |
| ... | @@ -163,17 +108,7 @@ const onEditProfile = () => { | ... | @@ -163,17 +108,7 @@ const onEditProfile = () => { |
| 163 | } | 108 | } |
| 164 | 109 | ||
| 165 | /** | 110 | /** |
| 166 | - * 我的车辆 | 111 | + * 我的关注 |
| 167 | - * @param {string} type - 车辆类型 | ||
| 168 | - */ | ||
| 169 | -const onMyVehicles = (type) => { | ||
| 170 | - Taro.navigateTo({ | ||
| 171 | - url: `/pages/my-vehicles/index?type=${type}` | ||
| 172 | - }) | ||
| 173 | -} | ||
| 174 | - | ||
| 175 | -/** | ||
| 176 | - * 我的收藏 | ||
| 177 | */ | 112 | */ |
| 178 | const onMyFavorites = () => { | 113 | const onMyFavorites = () => { |
| 179 | Taro.navigateTo({ | 114 | Taro.navigateTo({ |
| ... | @@ -191,62 +126,29 @@ const onOrderManagement = () => { | ... | @@ -191,62 +126,29 @@ const onOrderManagement = () => { |
| 191 | } | 126 | } |
| 192 | 127 | ||
| 193 | /** | 128 | /** |
| 194 | - * 车辆认证 | 129 | + * 我的消息 |
| 195 | - */ | ||
| 196 | -const onCertification = () => { | ||
| 197 | - if (userInfo.value.isCertified) { | ||
| 198 | - Taro.navigateTo({ | ||
| 199 | - url: '/pages/certification-status/index' | ||
| 200 | - }) | ||
| 201 | - } else { | ||
| 202 | - Taro.navigateTo({ | ||
| 203 | - url: '/pages/certification-apply/index' | ||
| 204 | - }) | ||
| 205 | - } | ||
| 206 | -} | ||
| 207 | - | ||
| 208 | -/** | ||
| 209 | - * 我的钱包 | ||
| 210 | */ | 130 | */ |
| 211 | -const onWallet = () => { | 131 | +const onMessages = () => { |
| 212 | Taro.navigateTo({ | 132 | Taro.navigateTo({ |
| 213 | - url: '/pages/wallet/index' | 133 | + url: '/pages/messages/index' |
| 214 | }) | 134 | }) |
| 215 | } | 135 | } |
| 216 | 136 | ||
| 217 | /** | 137 | /** |
| 218 | - * 收货地址 | 138 | + * 我卖的车 |
| 219 | */ | 139 | */ |
| 220 | -const onAddress = () => { | 140 | +const onMySoldVehicles = () => { |
| 221 | Taro.navigateTo({ | 141 | Taro.navigateTo({ |
| 222 | - url: '/pages/address/index' | 142 | + url: '/pages/my-sold-vehicles/index' |
| 223 | }) | 143 | }) |
| 224 | } | 144 | } |
| 225 | 145 | ||
| 226 | /** | 146 | /** |
| 227 | - * 客服中心 | 147 | + * 帮助中心 |
| 228 | */ | 148 | */ |
| 229 | -const onCustomerService = () => { | 149 | +const onHelpCenter = () => { |
| 230 | - Taro.showActionSheet({ | 150 | + Taro.navigateTo({ |
| 231 | - itemList: ['在线客服', '电话客服', '常见问题'], | 151 | + url: '/pages/help-center/index' |
| 232 | - success: (res) => { | ||
| 233 | - if (res.tapIndex === 0) { | ||
| 234 | - // 在线客服 | ||
| 235 | - Taro.navigateTo({ | ||
| 236 | - url: '/pages/online-service/index' | ||
| 237 | - }) | ||
| 238 | - } else if (res.tapIndex === 1) { | ||
| 239 | - // 电话客服 | ||
| 240 | - Taro.makePhoneCall({ | ||
| 241 | - phoneNumber: '400-123-4567' | ||
| 242 | - }) | ||
| 243 | - } else if (res.tapIndex === 2) { | ||
| 244 | - // 常见问题 | ||
| 245 | - Taro.navigateTo({ | ||
| 246 | - url: '/pages/faq/index' | ||
| 247 | - }) | ||
| 248 | - } | ||
| 249 | - } | ||
| 250 | }) | 152 | }) |
| 251 | } | 153 | } |
| 252 | 154 | ||
| ... | @@ -260,15 +162,6 @@ const onFeedback = () => { | ... | @@ -260,15 +162,6 @@ const onFeedback = () => { |
| 260 | } | 162 | } |
| 261 | 163 | ||
| 262 | /** | 164 | /** |
| 263 | - * 关于我们 | ||
| 264 | - */ | ||
| 265 | -const onAbout = () => { | ||
| 266 | - Taro.navigateTo({ | ||
| 267 | - url: '/pages/about/index' | ||
| 268 | - }) | ||
| 269 | -} | ||
| 270 | - | ||
| 271 | -/** | ||
| 272 | * 设置 | 165 | * 设置 |
| 273 | */ | 166 | */ |
| 274 | const onSettings = () => { | 167 | const onSettings = () => { |
| ... | @@ -276,241 +169,134 @@ const onSettings = () => { | ... | @@ -276,241 +169,134 @@ const onSettings = () => { |
| 276 | url: '/pages/settings/index' | 169 | url: '/pages/settings/index' |
| 277 | }) | 170 | }) |
| 278 | } | 171 | } |
| 279 | - | ||
| 280 | -/** | ||
| 281 | - * 退出登录 | ||
| 282 | - */ | ||
| 283 | -const onLogout = () => { | ||
| 284 | - Taro.showModal({ | ||
| 285 | - title: '确认退出', | ||
| 286 | - content: '确定要退出登录吗?', | ||
| 287 | - success: (res) => { | ||
| 288 | - if (res.confirm) { | ||
| 289 | - // 清除用户数据 | ||
| 290 | - Taro.clearStorageSync() | ||
| 291 | - | ||
| 292 | - // 跳转到登录页 | ||
| 293 | - Taro.redirectTo({ | ||
| 294 | - url: '/pages/auth/index' | ||
| 295 | - }) | ||
| 296 | - | ||
| 297 | - Taro.showToast({ | ||
| 298 | - title: '已退出登录', | ||
| 299 | - icon: 'success' | ||
| 300 | - }) | ||
| 301 | - } | ||
| 302 | - } | ||
| 303 | - }) | ||
| 304 | -} | ||
| 305 | </script> | 172 | </script> |
| 306 | 173 | ||
| 307 | <style lang="less"> | 174 | <style lang="less"> |
| 308 | .profile-page { | 175 | .profile-page { |
| 309 | min-height: 100vh; | 176 | min-height: 100vh; |
| 310 | - background-color: #f9fafb; | 177 | + background-color: #f8fafc; |
| 311 | - padding-bottom: 100px; | 178 | + padding-bottom: 240rpx; |
| 312 | } | 179 | } |
| 313 | 180 | ||
| 314 | -.user-card { | 181 | +.header { |
| 315 | - background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); | 182 | + background: #fb923c; |
| 316 | - padding: 24px 16px; | 183 | + padding: 64rpx 0 32rpx; |
| 317 | - display: flex; | 184 | + position: relative; |
| 318 | - justify-content: space-between; | ||
| 319 | - align-items: center; | ||
| 320 | -} | ||
| 321 | 185 | ||
| 322 | -.user-info { | 186 | + .header-content { |
| 323 | - display: flex; | 187 | + padding: 0 48rpx; |
| 324 | - align-items: center; | 188 | + display: flex; |
| 325 | - flex: 1; | 189 | + justify-content: space-between; |
| 326 | -} | 190 | + align-items: center; |
| 327 | 191 | ||
| 328 | -.user-avatar { | 192 | + .header-title { |
| 329 | - width: 64px; | 193 | + font-size: 40rpx; |
| 330 | - height: 64px; | 194 | + font-weight: 700; |
| 331 | - border-radius: 50%; | 195 | + color: white; |
| 332 | - object-fit: cover; | 196 | + } |
| 333 | - border: 3px solid rgba(255, 255, 255, 0.3); | 197 | + } |
| 334 | - margin-right: 16px; | ||
| 335 | -} | ||
| 336 | - | ||
| 337 | -.user-details { | ||
| 338 | - flex: 1; | ||
| 339 | -} | ||
| 340 | - | ||
| 341 | -.user-name { | ||
| 342 | - font-size: 20px; | ||
| 343 | - font-weight: 600; | ||
| 344 | - color: #ffffff; | ||
| 345 | - display: block; | ||
| 346 | - margin-bottom: 4px; | ||
| 347 | -} | ||
| 348 | - | ||
| 349 | -.user-school { | ||
| 350 | - font-size: 14px; | ||
| 351 | - color: rgba(255, 255, 255, 0.8); | ||
| 352 | - display: block; | ||
| 353 | - margin-bottom: 8px; | ||
| 354 | -} | ||
| 355 | - | ||
| 356 | -.user-stats { | ||
| 357 | - display: flex; | ||
| 358 | - gap: 16px; | ||
| 359 | -} | ||
| 360 | - | ||
| 361 | -.stat-item { | ||
| 362 | - font-size: 12px; | ||
| 363 | - color: rgba(255, 255, 255, 0.9); | ||
| 364 | - background-color: rgba(255, 255, 255, 0.2); | ||
| 365 | - padding: 4px 8px; | ||
| 366 | - border-radius: 12px; | ||
| 367 | -} | ||
| 368 | - | ||
| 369 | -.edit-btn { | ||
| 370 | - width: 40px; | ||
| 371 | - height: 40px; | ||
| 372 | - background-color: rgba(255, 255, 255, 0.2); | ||
| 373 | - border-radius: 50%; | ||
| 374 | - display: flex; | ||
| 375 | - align-items: center; | ||
| 376 | - justify-content: center; | ||
| 377 | - transition: all 0.2s; | ||
| 378 | -} | ||
| 379 | - | ||
| 380 | -.edit-btn:active { | ||
| 381 | - transform: scale(0.95); | ||
| 382 | - background-color: rgba(255, 255, 255, 0.3); | ||
| 383 | -} | ||
| 384 | - | ||
| 385 | -.section { | ||
| 386 | - background-color: #ffffff; | ||
| 387 | - margin: 12px 16px; | ||
| 388 | - border-radius: 12px; | ||
| 389 | - padding: 20px; | ||
| 390 | -} | ||
| 391 | - | ||
| 392 | -.section-header { | ||
| 393 | - margin-bottom: 16px; | ||
| 394 | -} | ||
| 395 | - | ||
| 396 | -.section-title { | ||
| 397 | - font-size: 18px; | ||
| 398 | - font-weight: 600; | ||
| 399 | - color: #111827; | ||
| 400 | - display: block; | ||
| 401 | -} | ||
| 402 | - | ||
| 403 | -.vehicle-stats { | ||
| 404 | - display: grid; | ||
| 405 | - grid-template-columns: repeat(3, 1fr); | ||
| 406 | - gap: 16px; | ||
| 407 | } | 198 | } |
| 408 | 199 | ||
| 409 | -.stat-card { | 200 | +.user-profile-section { |
| 201 | + background: white; | ||
| 202 | + padding: 64rpx 48rpx; | ||
| 203 | + margin-bottom: 32rpx; | ||
| 410 | text-align: center; | 204 | text-align: center; |
| 411 | - padding: 16px 8px; | ||
| 412 | - background-color: #fef7ed; | ||
| 413 | - border-radius: 8px; | ||
| 414 | - border: 1px solid #fed7aa; | ||
| 415 | - transition: all 0.2s; | ||
| 416 | -} | ||
| 417 | 205 | ||
| 418 | -.stat-card:active { | 206 | + .user-avatar { |
| 419 | - transform: scale(0.95); | 207 | + width: 160rpx; |
| 420 | - background-color: #fef3e2; | 208 | + height: 160rpx; |
| 421 | -} | 209 | + border-radius: 80rpx; |
| 210 | + margin-bottom: 32rpx; | ||
| 211 | + } | ||
| 422 | 212 | ||
| 423 | -.stat-number { | 213 | + .user-name { |
| 424 | - font-size: 24px; | 214 | + font-size: 40rpx; |
| 425 | - font-weight: 700; | 215 | + font-weight: 600; |
| 426 | - color: #f97316; | 216 | + color: #1e293b; |
| 427 | - display: block; | 217 | + margin-bottom: 8rpx; |
| 428 | - margin-bottom: 4px; | 218 | + display: block; |
| 429 | -} | 219 | + } |
| 430 | 220 | ||
| 431 | -.stat-label { | 221 | + .user-phone { |
| 432 | - font-size: 14px; | 222 | + font-size: 28rpx; |
| 433 | - color: #6b7280; | 223 | + color: #64748b; |
| 434 | - display: block; | 224 | + margin-bottom: 40rpx; |
| 435 | -} | 225 | + display: block; |
| 226 | + } | ||
| 436 | 227 | ||
| 437 | -.menu-section { | 228 | + .edit-profile-btn { |
| 438 | - background-color: #ffffff; | 229 | + background-color: #f1f5f9; |
| 439 | - margin: 12px 16px; | 230 | + color: #475569; |
| 440 | - border-radius: 12px; | 231 | + border: none; |
| 441 | - overflow: hidden; | 232 | + border-radius: 40rpx; |
| 442 | -} | 233 | + padding: 16rpx 48rpx; |
| 234 | + font-size: 28rpx; | ||
| 235 | + margin-bottom: 48rpx; | ||
| 236 | + } | ||
| 443 | 237 | ||
| 444 | -.menu-item { | 238 | + .stats-row { |
| 445 | - display: flex; | 239 | + display: flex; |
| 446 | - align-items: center; | 240 | + justify-content: space-around; |
| 447 | - padding: 16px 20px; | ||
| 448 | - border-bottom: 1px solid #f3f4f6; | ||
| 449 | - transition: background-color 0.2s; | ||
| 450 | -} | ||
| 451 | 241 | ||
| 452 | -.menu-item:last-child { | 242 | + .stat-item { |
| 453 | - border-bottom: none; | 243 | + text-align: center; |
| 454 | -} | ||
| 455 | 244 | ||
| 456 | -.menu-item:active { | 245 | + .stat-number { |
| 457 | - background-color: #f9fafb; | 246 | + font-size: 36rpx; |
| 458 | -} | 247 | + font-weight: 600; |
| 248 | + color: #1e293b; | ||
| 249 | + display: block; | ||
| 250 | + margin-bottom: 8rpx; | ||
| 251 | + } | ||
| 459 | 252 | ||
| 460 | -.menu-icon { | 253 | + .stat-label { |
| 461 | - width: 40px; | 254 | + font-size: 24rpx; |
| 462 | - height: 40px; | 255 | + color: #64748b; |
| 463 | - background-color: #fef7ed; | 256 | + } |
| 464 | - border-radius: 8px; | 257 | + } |
| 465 | - display: flex; | 258 | + } |
| 466 | - align-items: center; | ||
| 467 | - justify-content: center; | ||
| 468 | - margin-right: 12px; | ||
| 469 | } | 259 | } |
| 470 | 260 | ||
| 471 | -.menu-text { | 261 | +.quick-actions { |
| 472 | - flex: 1; | 262 | + background: white; |
| 473 | - font-size: 16px; | 263 | + padding: 40rpx 48rpx; |
| 474 | - color: #374151; | 264 | + margin-bottom: 32rpx; |
| 475 | -} | 265 | + display: flex; |
| 266 | + justify-content: space-around; | ||
| 476 | 267 | ||
| 477 | -.certification-badge { | 268 | + .action-item { |
| 478 | - margin-right: 8px; | 269 | + display: flex; |
| 479 | -} | 270 | + flex-direction: column; |
| 271 | + align-items: center; | ||
| 272 | + gap: 16rpx; | ||
| 480 | 273 | ||
| 481 | -.badge-text { | 274 | + .action-text { |
| 482 | - font-size: 12px; | 275 | + font-size: 24rpx; |
| 483 | - color: #059669; | 276 | + color: #64748b; |
| 484 | - background-color: #d1fae5; | 277 | + } |
| 485 | - padding: 4px 8px; | 278 | + } |
| 486 | - border-radius: 12px; | ||
| 487 | } | 279 | } |
| 488 | 280 | ||
| 489 | -.wallet-balance { | 281 | +.menu-section { |
| 490 | - font-size: 16px; | 282 | + background: white; |
| 491 | - font-weight: 600; | ||
| 492 | - color: #f97316; | ||
| 493 | - margin-right: 8px; | ||
| 494 | -} | ||
| 495 | 283 | ||
| 496 | -.logout-section { | 284 | + .menu-item { |
| 497 | - margin: 24px 16px; | 285 | + display: flex; |
| 498 | -} | 286 | + align-items: center; |
| 287 | + padding: 32rpx 48rpx; | ||
| 288 | + border-bottom: 1px solid #f1f5f9; | ||
| 289 | + gap: 32rpx; | ||
| 499 | 290 | ||
| 500 | -.logout-btn { | 291 | + &:last-child { |
| 501 | - width: 100%; | 292 | + border-bottom: none; |
| 502 | - padding: 16px; | 293 | + } |
| 503 | - background-color: #ffffff; | ||
| 504 | - border: 1px solid #f87171; | ||
| 505 | - border-radius: 12px; | ||
| 506 | - color: #ef4444; | ||
| 507 | - font-size: 16px; | ||
| 508 | - font-weight: 500; | ||
| 509 | - transition: all 0.2s; | ||
| 510 | -} | ||
| 511 | 294 | ||
| 512 | -.logout-btn:active { | 295 | + .menu-text { |
| 513 | - background-color: #fef2f2; | 296 | + flex: 1; |
| 514 | - transform: scale(0.98); | 297 | + font-size: 32rpx; |
| 298 | + color: #1e293b; | ||
| 299 | + } | ||
| 300 | + } | ||
| 515 | } | 301 | } |
| 516 | -</style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 302 | +</style> | ... | ... |
-
Please register or login to post a comment