ZhaoYang
2 months ago
19 changed files with 1077 additions and 1057 deletions
-
BINpages/images/bj.png
-
BINpages/images/fkjy.png
-
BINpages/images/gywm.png
-
BINpages/images/smrz.png
-
BINpages/images/sz.png
-
BINpages/images/wdxx.png
-
BINpages/images/wz.png
-
10pages/login/login.js
-
55pages/map/map.js
-
3pages/map/map.wxml
-
3pages/map/map.wxss
-
493pages/personal/personal.js
-
201pages/personal/personal.wxml
-
815pages/personal/personal.wxss
-
174pagesA/pages/wzai/wzai.js
-
3pagesA/pages/wzai/wzai.json
-
24pagesA/pages/wzai/wzai.wxml
-
56pagesA/pages/wzai/wzai.wxss
-
13utils/api.js
|
After Width: 200 | Height: 200 | Size: 3.3 KiB |
|
After Width: 200 | Height: 200 | Size: 4.5 KiB |
|
After Width: 200 | Height: 200 | Size: 3.8 KiB |
|
After Width: 200 | Height: 200 | Size: 4.3 KiB |
|
After Width: 200 | Height: 200 | Size: 6.5 KiB |
|
After Width: 200 | Height: 200 | Size: 6.5 KiB |
|
After Width: 200 | Height: 200 | Size: 4.2 KiB |
@ -1,330 +1,265 @@ |
|||
Page({ |
|||
data: { |
|||
// 用户信息
|
|||
avatarUrl: '', |
|||
userInfo: { |
|||
avatar: '/assets/images/avatar.png', |
|||
nickname: '用户昵称', |
|||
phone: '138****8888', |
|||
isVerified: false, |
|||
isDoctor: false |
|||
nickName: '', |
|||
userId: '', |
|||
isVerified: false |
|||
}, |
|||
|
|||
// 功能模块
|
|||
modules: [ |
|||
{ |
|||
id: 'info', |
|||
icon: 'user-circle', |
|||
name: '个人管理', |
|||
items: [ |
|||
{ |
|||
id: 'profile', |
|||
name: '信息管理', |
|||
desc: '查看和编辑个人信息', |
|||
icon: 'profile', |
|||
badge: 0, |
|||
arrow: true |
|||
}, |
|||
{ |
|||
id: 'realname', |
|||
name: '实名认证', |
|||
desc: '通过输入身份信息', |
|||
icon: 'shield-check', |
|||
badge: 0, |
|||
arrow: true, |
|||
status: '未认证', // 认证状态
|
|||
statusColor: 'text-orange' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: 'security', |
|||
icon: 'lock', |
|||
name: '账户安全', |
|||
items: [ |
|||
{ |
|||
id: 'security_settings', |
|||
name: '账户安全', |
|||
desc: '设置账户密码和安全问题', |
|||
icon: 'settings', |
|||
badge: 0, |
|||
arrow: true |
|||
}, |
|||
{ |
|||
id: 'feedback', |
|||
name: '反馈建议', |
|||
desc: '向平台提交反馈和建议', |
|||
icon: 'message', |
|||
badge: 3, // 未读回复数
|
|||
arrow: true |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: 'notification', |
|||
icon: 'bell', |
|||
name: '消息通知', |
|||
items: [ |
|||
{ |
|||
id: 'notifications', |
|||
name: '消息通知', |
|||
desc: '问诊、问答、订单等消息', |
|||
icon: 'notification', |
|||
badge: 5, // 未读消息数
|
|||
arrow: true |
|||
}, |
|||
{ |
|||
id: 'privacy', |
|||
name: '隐私设置', |
|||
desc: '管理个人信息可见性', |
|||
icon: 'eye-off', |
|||
badge: 0, |
|||
arrow: true |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: 'support', |
|||
icon: 'help-circle', |
|||
name: '帮助与支持', |
|||
items: [ |
|||
{ |
|||
id: 'about', |
|||
name: '关于我们', |
|||
desc: '了解平台信息', |
|||
icon: 'info', |
|||
badge: 0, |
|||
arrow: true |
|||
}, |
|||
{ |
|||
id: 'service', |
|||
name: '客服中心', |
|||
desc: '7x24小时在线服务', |
|||
icon: 'headphones', |
|||
badge: 0, |
|||
arrow: true |
|||
}, |
|||
{ |
|||
id: 'agreement', |
|||
name: '用户协议', |
|||
desc: '查看平台使用条款', |
|||
icon: 'file-text', |
|||
badge: 0, |
|||
arrow: true |
|||
} |
|||
] |
|||
} |
|||
], |
|||
|
|||
// 统计数据
|
|||
stats: [ |
|||
{ |
|||
id: 'consultation', |
|||
name: '我的问诊', |
|||
value: '12', |
|||
icon: 'stethoscope', |
|||
color: '#07c160' |
|||
}, |
|||
{ |
|||
id: 'orders', |
|||
name: '我的订单', |
|||
value: '8', |
|||
icon: 'shopping-bag', |
|||
color: '#ff6b6b' |
|||
}, |
|||
{ |
|||
id: 'favorites', |
|||
name: '我的收藏', |
|||
value: '23', |
|||
icon: 'heart', |
|||
color: '#ff9f43' |
|||
}, |
|||
{ |
|||
id: 'coupons', |
|||
name: '我的优惠券', |
|||
value: '3', |
|||
icon: 'tag', |
|||
color: '#2e86de' |
|||
} |
|||
], |
|||
|
|||
// 快捷操作
|
|||
quickActions: [ |
|||
{ |
|||
id: 'health_record', |
|||
name: '健康档案', |
|||
icon: 'file-medical', |
|||
color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' |
|||
}, |
|||
{ |
|||
id: 'appointment', |
|||
name: '预约挂号', |
|||
icon: 'calendar', |
|||
color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' |
|||
}, |
|||
{ |
|||
id: 'medicine', |
|||
name: '我的药箱', |
|||
icon: 'pill', |
|||
color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' |
|||
}, |
|||
{ |
|||
id: 'report', |
|||
name: '检查报告', |
|||
icon: 'clipboard', |
|||
color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' |
|||
} |
|||
], |
|||
// 弹窗状态
|
|||
showFeedbackModal: false, |
|||
showNicknameModal: false, |
|||
showToast: false, |
|||
|
|||
// 系统信息
|
|||
systemInfo: { |
|||
version: '2.1.0', |
|||
lastLogin: '2024-01-15 14:30' |
|||
} |
|||
// 反馈相关
|
|||
feedbackContent: '', |
|||
canSubmit: false, |
|||
isSubmitting: false, |
|||
|
|||
// 编辑相关
|
|||
newNickname: '', |
|||
// 提示信息
|
|||
toastText: '' |
|||
}, |
|||
|
|||
onLoad() { |
|||
this.loadUserInfo() |
|||
this.checkNotifications() |
|||
this.loadUserInfo(); |
|||
}, |
|||
|
|||
onShow() { |
|||
// 每次显示页面时刷新数据
|
|||
this.refreshData() |
|||
|
|||
}, |
|||
|
|||
// 加载用户信息
|
|||
loadUserInfo() { |
|||
// 模拟API调用
|
|||
// 从缓存获取用户信息
|
|||
const userInfo = wx.getStorageSync('userInfo'); |
|||
const avatarUrl = wx.getStorageSync('avatarUrl'); |
|||
|
|||
if (userInfo) { |
|||
this.setData({ |
|||
userInfo, |
|||
avatarUrl |
|||
}); |
|||
} else { |
|||
// 首次使用，生成默认用户信息
|
|||
const defaultUserInfo = { |
|||
nickName: '微信用户', |
|||
isVerified: false |
|||
}; |
|||
|
|||
wx.setStorageSync('userInfo', defaultUserInfo); |
|||
this.setData({ userInfo: defaultUserInfo }); |
|||
} |
|||
}, |
|||
|
|||
|
|||
// 选择头像
|
|||
onChooseAvatar(e) { |
|||
const { avatarUrl } = e.detail; |
|||
|
|||
// 显示加载
|
|||
wx.showLoading({ |
|||
title: '更新中...', |
|||
mask: true |
|||
}); |
|||
|
|||
// 模拟上传过程
|
|||
setTimeout(() => { |
|||
this.setData({ avatarUrl }); |
|||
|
|||
// 保存到缓存
|
|||
wx.setStorageSync('avatarUrl', avatarUrl); |
|||
|
|||
wx.hideLoading(); |
|||
this.showToast('头像更新成功'); |
|||
}, 800); |
|||
}, |
|||
|
|||
|
|||
|
|||
// 编辑昵称
|
|||
editNickname() { |
|||
this.setData({ |
|||
'userInfo.nickname': '张小凡', |
|||
'userInfo.phone': '138****5678', |
|||
'userInfo.isVerified': true, |
|||
'userInfo.isDoctor': false |
|||
}) |
|||
}, 500) |
|||
showNicknameModal: true, |
|||
newNickname: this.data.userInfo.nickName |
|||
}); |
|||
}, |
|||
|
|||
// 检查通知
|
|||
checkNotifications() { |
|||
// 模拟检查未读消息
|
|||
const updatedModules = this.data.modules.map(module => { |
|||
return { |
|||
...module, |
|||
items: module.items.map(item => { |
|||
if (item.id === 'notifications') { |
|||
return { ...item, badge: Math.floor(Math.random() * 10) } |
|||
hideNicknameModal() { |
|||
this.setData({ showNicknameModal: false }); |
|||
}, |
|||
|
|||
onNicknameInput(e) { |
|||
this.setData({ newNickname: e.detail.value }); |
|||
}, |
|||
|
|||
saveNickname() { |
|||
const newNickname = this.data.newNickname.trim(); |
|||
|
|||
if (!newNickname) { |
|||
this.showToast('昵称不能为空'); |
|||
return; |
|||
} |
|||
return item |
|||
}) |
|||
|
|||
if (newNickname.length > 20) { |
|||
this.showToast('昵称不能超过20个字符'); |
|||
return; |
|||
} |
|||
}) |
|||
|
|||
this.setData({ modules: updatedModules }) |
|||
}, |
|||
// 更新用户信息
|
|||
const updatedUserInfo = { |
|||
...this.data.userInfo, |
|||
nickName: newNickname |
|||
}; |
|||
|
|||
// 刷新数据
|
|||
refreshData() { |
|||
// 刷新统计数据
|
|||
const updatedStats = this.data.stats.map(stat => ({ |
|||
...stat, |
|||
value: String(Math.floor(Math.random() * 20) + 5) |
|||
})) |
|||
this.setData({ |
|||
userInfo: updatedUserInfo, |
|||
showNicknameModal: false |
|||
}); |
|||
|
|||
this.setData({ stats: updatedStats }) |
|||
// 保存到缓存
|
|||
wx.setStorageSync('userInfo', updatedUserInfo); |
|||
|
|||
this.showToast('昵称修改成功'); |
|||
}, |
|||
|
|||
// 点击用户头像区域
|
|||
onTapUserInfo() { |
|||
// 查看问诊消息
|
|||
goToConsultation() { |
|||
wx.navigateTo({ |
|||
url: '/pages/profile/edit-profile' |
|||
}) |
|||
url: '' |
|||
}); |
|||
}, |
|||
|
|||
// 点击统计项
|
|||
onTapStat(e) { |
|||
const { id } = e.currentTarget.dataset |
|||
const urls = { |
|||
consultation: '/pages/consultation/my-consultation', |
|||
orders: '/pages/order/my-orders', |
|||
favorites: '/pages/favorites/favorites', |
|||
coupons: '/pages/coupon/my-coupons' |
|||
} |
|||
// 查看问答消息
|
|||
goToQA() { |
|||
wx.navigateTo({ |
|||
url: '' |
|||
}); |
|||
}, |
|||
|
|||
if (urls[id]) { |
|||
wx.navigateTo({ url: urls[id] }) |
|||
// 实名认证
|
|||
goToAuth() { |
|||
if (this.data.userInfo.isVerified) { |
|||
this.showToast('您已完成实名认证'); |
|||
return; |
|||
} |
|||
|
|||
wx.navigateTo({ |
|||
url: '/pages/auth/realname' |
|||
}); |
|||
}, |
|||
|
|||
// 点击快捷操作
|
|||
onTapQuickAction(e) { |
|||
const { id } = e.currentTarget.dataset |
|||
const urls = { |
|||
health_record: '/pages/health/record', |
|||
appointment: '/pages/appointment/list', |
|||
medicine: '/pages/medicine/medicine-box', |
|||
report: '/pages/report/list' |
|||
} |
|||
// 显示反馈弹窗
|
|||
showFeedback() { |
|||
this.setData({ |
|||
showFeedbackModal: true, |
|||
feedbackContent: '', |
|||
canSubmit: false, |
|||
isSubmitting: false |
|||
}); |
|||
}, |
|||
|
|||
if (urls[id]) { |
|||
wx.navigateTo({ url: urls[id] }) |
|||
} |
|||
hideFeedback() { |
|||
this.setData({ showFeedbackModal: false }); |
|||
}, |
|||
|
|||
// 点击功能项
|
|||
onTapMenuItem(e) { |
|||
const { moduleid, itemid } = e.currentTarget.dataset |
|||
console.log('点击:', moduleid, itemid) |
|||
|
|||
// 根据不同的itemid跳转到不同页面
|
|||
const pageMap = { |
|||
profile: '/pages/profile/edit-profile', |
|||
realname: '/pages/auth/realname-auth', |
|||
security_settings: '/pages/security/settings', |
|||
feedback: '/pages/feedback/feedback', |
|||
notifications: '/pages/notification/notification-center', |
|||
privacy: '/pages/privacy/settings', |
|||
about: '/pages/about/about', |
|||
service: '/pages/service/customer-service', |
|||
agreement: '/pages/agreement/user-agreement' |
|||
} |
|||
// 反馈内容输入
|
|||
onFeedbackInput(e) { |
|||
const content = e.detail.value; |
|||
const canSubmit = content.trim().length > 0; |
|||
|
|||
this.setData({ |
|||
feedbackContent: content, |
|||
canSubmit |
|||
}); |
|||
}, |
|||
|
|||
// 提交反馈
|
|||
submitFeedback() { |
|||
if (!this.data.canSubmit || this.data.isSubmitting) return; |
|||
|
|||
if (pageMap[itemid]) { |
|||
wx.navigateTo({ url: pageMap[itemid] }) |
|||
const content = this.data.feedbackContent.trim(); |
|||
if (content.length < 5) { |
|||
this.showToast('请填写详细的反馈内容'); |
|||
return; |
|||
} |
|||
|
|||
this.setData({ isSubmitting: true }); |
|||
|
|||
// 模拟提交到服务器
|
|||
setTimeout(() => { |
|||
console.log('提交反馈:', content); |
|||
|
|||
this.setData({ |
|||
isSubmitting: false, |
|||
showFeedbackModal: false |
|||
}); |
|||
|
|||
this.showToast('感谢您的反馈！'); |
|||
|
|||
// 这里应该是实际的API调用
|
|||
// wx.request({
|
|||
// url: 'https://your-api.com/feedback',
|
|||
// method: 'POST',
|
|||
// data: { content },
|
|||
// success: (res) => {
|
|||
// this.showToast('提交成功');
|
|||
// },
|
|||
// complete: () => {
|
|||
// this.setData({
|
|||
// isSubmitting: false,
|
|||
// showFeedbackModal: false
|
|||
// });
|
|||
// }
|
|||
// });
|
|||
}, 1500); |
|||
}, |
|||
|
|||
// 关于我们
|
|||
goToAbout() { |
|||
wx.navigateTo({ |
|||
url: '/pages/about/index' |
|||
}); |
|||
}, |
|||
|
|||
// 设置
|
|||
onTapSettings() { |
|||
goToSettings() { |
|||
wx.navigateTo({ |
|||
url: '/pages/settings/settings' |
|||
}) |
|||
url: '/pages/settings/index' |
|||
}); |
|||
}, |
|||
|
|||
// 退出登录
|
|||
onLogout() { |
|||
wx.showModal({ |
|||
title: '提示', |
|||
content: '确定要退出登录吗？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
// 清除登录状态
|
|||
wx.removeStorageSync('token') |
|||
wx.removeStorageSync('userInfo') |
|||
|
|||
// 跳转到登录页
|
|||
wx.reLaunch({ |
|||
url: '/pages/login/login' |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// 显示提示
|
|||
showToast(text) { |
|||
this.setData({ |
|||
toastText: text, |
|||
showToast: true |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ showToast: false }); |
|||
}, 2000); |
|||
}, |
|||
|
|||
// 下拉刷新
|
|||
onPullDownRefresh() { |
|||
this.loadUserInfo(); |
|||
this.checkUnreadMessages(); |
|||
|
|||
setTimeout(() => { |
|||
wx.stopPullDownRefresh(); |
|||
this.showToast('刷新成功'); |
|||
}, 1000); |
|||
}, |
|||
|
|||
// 分享
|
|||
onShareAppMessage() { |
|||
return { |
|||
title: '健康管理，从这里开始', |
|||
path: '/pages/index/index' |
|||
} |
|||
title: '健康守护 - 您的个人健康中心', |
|||
path: '/pages/personal-center/index' |
|||
}; |
|||
} |
|||
}) |
|||
}); |
|||
@ -1,147 +1,142 @@ |
|||
<view class="personal-center"> |
|||
<!-- 顶部背景 --> |
|||
<view class="header-bg"></view> |
|||
<!-- 用户信息区域 --> |
|||
<view class="user-section fade-in"> |
|||
<view class="user-card"> |
|||
<!-- 头像 --> |
|||
<button class="avatar-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"> |
|||
<image class="avatar" src="{{avatarUrl || '/pages/images/tx.png'}}" mode="aspectFill"></image> |
|||
</button> |
|||
|
|||
<!-- 用户信息卡片 --> |
|||
<view class="user-card" bindtap="onTapUserInfo"> |
|||
<!-- 用户信息 --> |
|||
<view class="user-info"> |
|||
<view class="avatar-section"> |
|||
<image class="avatar" src="{{userInfo.avatar || '/assets/images/avatar-default.png'}}" mode="aspectFill"></image> |
|||
<view class="avatar-badge" wx:if="{{userInfo.isVerified}}"> |
|||
<text class="iconfont icon-check-circle"></text> |
|||
</view> |
|||
<view class="nickname-section" bindtap="editNickname"> |
|||
<text class="nickname">{{userInfo.nickName || '微信用户'}}</text> |
|||
<image src="/pages/images/bj.png"></image> |
|||
</view> |
|||
|
|||
<view class="user-details"> |
|||
<view class="user-name"> |
|||
<text class="name">{{userInfo.nickname || '点击登录'}}</text> |
|||
<text class="iconfont icon-edit" wx:if="{{userInfo.nickname}}"></text> |
|||
<view class="user-meta"> |
|||
<view class="auth-tag {{userInfo.isVerified ? 'verified' : ''}}" bindtap="goToAuth"> |
|||
<text>{{userInfo.isVerified ? '已认证' : '未认证'}}</text> |
|||
</view> |
|||
|
|||
<view class="user-phone"> |
|||
<text class="iconfont icon-phone"></text> |
|||
<text>{{userInfo.phone || '未绑定手机号'}}</text> |
|||
</view> |
|||
|
|||
<view class="user-tags"> |
|||
<view class="tag" wx:if="{{userInfo.isDoctor}}"> |
|||
<text class="iconfont icon-stethoscope"></text> |
|||
<text>医生认证</text> |
|||
</view> |
|||
<view class="tag" wx:if="{{userInfo.isVerified}}"> |
|||
<text class="iconfont icon-shield-check"></text> |
|||
<text>已实名</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 消息通知 --> |
|||
<view class="section-card fade-in-delay-1"> |
|||
<view class="section-header"> |
|||
<text class="section-title">消息通知</text> |
|||
</view> |
|||
|
|||
<view class="card-arrow"> |
|||
<text class="iconfont icon-chevron-right"></text> |
|||
<view class="message-row"> |
|||
<view class="message-item" bindtap="goToConsultation"> |
|||
<view class="message-icon-wrapper"> |
|||
<image class="message-icon" src="/pages/images/wz.png" mode=""></image> |
|||
</view> |
|||
<text class="message-label">问诊消息</text> |
|||
</view> |
|||
|
|||
<!-- 统计数据 --> |
|||
<view class="stats-grid"> |
|||
<view |
|||
wx:for="{{stats}}" |
|||
wx:key="id" |
|||
class="stat-item" |
|||
bindtap="onTapStat" |
|||
data-id="{{item.id}}" |
|||
> |
|||
<view class="stat-icon" style="color: {{item.color}};"> |
|||
<text class="iconfont icon-{{item.icon}}"></text> |
|||
<view class="divider"></view> |
|||
|
|||
<view class="message-item" bindtap="goToQA"> |
|||
<view class="message-icon-wrapper"> |
|||
<image class="message-icon" src="/pages/images/wdxx.png" mode=""></image> |
|||
</view> |
|||
<text class="message-label">问答消息</text> |
|||
</view> |
|||
<view class="stat-value">{{item.value}}</view> |
|||
<view class="stat-name">{{item.name}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 快捷操作 --> |
|||
<view class="quick-actions"> |
|||
<view class="section-title"> |
|||
<text class="iconfont icon-zap"></text> |
|||
<text>快捷操作</text> |
|||
<!-- 功能列表 --> |
|||
<view class="section-card fade-in-delay-2"> |
|||
<view class="function-list"> |
|||
<!-- 实名认证 --> |
|||
<view class="function-item" bindtap="goToAuth"> |
|||
<view class="item-left"> |
|||
<image class="item-icon" src="/pages/images/smrz.png"></image> |
|||
<text class="item-title">实名认证</text> |
|||
</view> |
|||
<view class="actions-grid"> |
|||
<view |
|||
wx:for="{{quickActions}}" |
|||
wx:key="id" |
|||
class="action-item" |
|||
bindtap="onTapQuickAction" |
|||
data-id="{{item.id}}" |
|||
> |
|||
<view class="action-icon" style="background: {{item.color}};"> |
|||
<text class="iconfont icon-{{item.icon}}"></text> |
|||
<view class="item-status {{userInfo.isVerified ? 'verified' : ''}}"> |
|||
{{userInfo.isVerified ? '已认证' : '去认证'}} |
|||
</view> |
|||
<view class="action-name">{{item.name}}</view> |
|||
</view> |
|||
|
|||
<!-- 反馈建议 --> |
|||
<view class="function-item" bindtap="showFeedback"> |
|||
<view class="item-left"> |
|||
<image class="item-icon" src="/pages/images/fkjy.png"></image> |
|||
<text class="item-title">反馈建议</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 功能模块 --> |
|||
<view class="modules"> |
|||
<block wx:for="{{modules}}" wx:key="id"> |
|||
<view class="module-section"> |
|||
<view class="section-title"> |
|||
<text class="iconfont icon-{{item.icon}}"></text> |
|||
<text>{{item.name}}</text> |
|||
<!-- 关于我们 --> |
|||
<view class="function-item" bindtap="goToAbout"> |
|||
<view class="item-left"> |
|||
<image class="item-icon" src="/pages/images/gywm.png"></image> |
|||
<text class="item-title">关于我们</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="module-items"> |
|||
<view |
|||
wx:for="{{item.items}}" |
|||
wx:key="id" |
|||
class="module-item" |
|||
bindtap="onTapMenuItem" |
|||
data-moduleid="{{moduleId}}" |
|||
data-itemid="{{item.id}}" |
|||
> |
|||
<!-- 设置 --> |
|||
<view class="function-item" bindtap="goToSettings"> |
|||
<view class="item-left"> |
|||
<view class="item-icon"> |
|||
<text class="iconfont icon-{{item.icon}}"></text> |
|||
<image class="item-icon" src="/pages/images/sz.png"></image> |
|||
<text class="item-title">设置</text> |
|||
</view> |
|||
<view class="item-info"> |
|||
<view class="item-name">{{item.name}}</view> |
|||
<view class="item-desc">{{item.desc}}</view> |
|||
<view |
|||
class="item-status {{item.statusColor || ''}}" |
|||
wx:if="{{item.status}}" |
|||
> |
|||
{{item.status}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item-right"> |
|||
<view class="badge" wx:if="{{item.badge > 0}}"> |
|||
{{item.badge > 99 ? '99+' : item.badge}} |
|||
|
|||
|
|||
<!-- 反馈建议弹窗 --> |
|||
<view class="feedback-modal {{showFeedbackModal ? 'show' : ''}}"> |
|||
<view class="modal-mask" bindtap="hideFeedback"></view> |
|||
<view class="modal-content"> |
|||
<view class="modal-header"> |
|||
<text class="modal-title">反馈建议</text> |
|||
<view class="modal-close" bindtap="hideFeedback"> |
|||
<image src="/icons/close.png"></image> |
|||
</view> |
|||
<text class="iconfont icon-chevron-right" wx:if="{{item.arrow}}"></text> |
|||
</view> |
|||
|
|||
<view class="modal-body"> |
|||
<textarea class="feedback-input" placeholder="请输入您的反馈或建议..." placeholder-class="placeholder" value="{{feedbackContent}}" bindinput="onFeedbackInput" maxlength="200" auto-height></textarea> |
|||
<view class="char-count"> |
|||
<text class="current">{{feedbackContent.length}}</text> |
|||
<text class="total">/200</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="modal-footer"> |
|||
<button class="submit-btn {{canSubmit ? 'active' : ''}}" bindtap="submitFeedback" disabled="{{!canSubmit}}"> |
|||
{{isSubmitting ? '提交中...' : '提交'}} |
|||
</button> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
|
|||
<!-- 底部操作 --> |
|||
<view class="bottom-actions"> |
|||
<view class="system-info"> |
|||
<text>版本 {{systemInfo.version}}</text> |
|||
<text>最后登录 {{systemInfo.lastLogin}}</text> |
|||
</view> |
|||
|
|||
<view class="action-buttons"> |
|||
<button class="btn btn-setting" bindtap="onTapSettings"> |
|||
<text class="iconfont icon-settings"></text> |
|||
<text>设置</text> |
|||
</button> |
|||
<button class="btn btn-logout" bindtap="onLogout"> |
|||
<text class="iconfont icon-log-out"></text> |
|||
<text>退出登录</text> |
|||
</button> |
|||
<!-- 修改昵称弹窗 --> |
|||
<view class="nickname-modal {{showNicknameModal ? 'show' : ''}}"> |
|||
<view class="modal-mask" bindtap="hideNicknameModal"></view> |
|||
<view class="modal-content"> |
|||
<view class="modal-header"> |
|||
<text class="modal-title">修改昵称</text> |
|||
</view> |
|||
<view class="modal-body"> |
|||
<input class="nickname-input" type="text" placeholder="请输入昵称" value="{{newNickname}}" bindinput="onNicknameInput" maxlength="10" /> |
|||
<text class="input-tip">最多10个字符</text> |
|||
</view> |
|||
<view class="modal-footer"> |
|||
<button class="cancel-btn" bindtap="hideNicknameModal">取消</button> |
|||
<button class="confirm-btn" bindtap="saveNickname">确定</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提示信息 --> |
|||
<view class="toast {{showToast ? 'show' : ''}}"> |
|||
<text>{{toastText}}</text> |
|||
</view> |
|||
</view> |
|||
@ -1,441 +1,596 @@ |
|||
.personal-center { |
|||
.personal-center{ |
|||
min-height: 100vh; |
|||
background: linear-gradient(to bottom, #f5f7fa 0%, #e4e8f0 100%); |
|||
padding-bottom: 120rpx; |
|||
} |
|||
background: linear-gradient(180deg, #86D8D0 0%, #a9dfda 30%, #cfe9e7 60%, #ECF8F7 90%); |
|||
} |
|||
|
|||
/* 顶部背景 */ |
|||
.header-bg { |
|||
height: 300rpx; |
|||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1; |
|||
border-radius: 0 0 40rpx 40rpx; |
|||
|
|||
/* 淡入动画 */ |
|||
.fade-in { |
|||
animation: fadeIn 0.6s ease forwards; |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
} |
|||
|
|||
.fade-in-delay-1 { |
|||
animation: fadeIn 0.6s 0.2s ease forwards; |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
} |
|||
|
|||
.fade-in-delay-2 { |
|||
animation: fadeIn 0.6s 0.4s ease forwards; |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
} |
|||
|
|||
.fade-in-delay-3 { |
|||
animation: fadeIn 0.6s 0.6s ease forwards; |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
} |
|||
|
|||
@keyframes fadeIn { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* 用户信息卡片 */ |
|||
.user-card { |
|||
position: relative; |
|||
z-index: 2; |
|||
/* 用户信息区域 */ |
|||
.user-section { |
|||
padding: 40rpx 30rpx 30rpx; |
|||
} |
|||
|
|||
.user-card { |
|||
background: white; |
|||
margin: 40rpx; |
|||
border-radius: 24rpx; |
|||
padding: 40rpx; |
|||
box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.15); |
|||
padding: 40rpx 30rpx; |
|||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
animation: slideUp 0.6s ease; |
|||
} |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.user-info { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
.user-card:active { |
|||
transform: scale(0.99); |
|||
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.avatar-section { |
|||
.avatar-btn { |
|||
position: relative; |
|||
margin-right: 30rpx; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
margin-right: 30rpx; |
|||
flex-shrink: 0; |
|||
padding: 0; |
|||
background: transparent; |
|||
border: none; |
|||
border-radius: 50%; |
|||
border: 6rpx solid white; |
|||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
|
|||
.avatar-badge { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
background: #07c160; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
.avatar-btn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 3rpx solid white; |
|||
} |
|||
border: 4rpx solid white; |
|||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.avatar-badge .iconfont { |
|||
color: white; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.user-details { |
|||
.user-info { |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.user-name { |
|||
.nickname-section { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.user-name .name { |
|||
.nickname { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-right: 15rpx; |
|||
} |
|||
font-weight: 700; |
|||
color: #1e293b; |
|||
margin-right: 20rpx; |
|||
max-width: 300rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.user-name .iconfont { |
|||
color: #667eea; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.user-phone { |
|||
|
|||
.nickname-section image { |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.user-meta { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
flex-wrap: wrap; |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.user-phone .iconfont { |
|||
margin-right: 10rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.user-tags { |
|||
display: flex; |
|||
gap: 15rpx; |
|||
} |
|||
|
|||
.user-tags .tag { |
|||
background: rgba(102, 126, 234, 0.1); |
|||
padding: 6rpx 15rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 22rpx; |
|||
color: #667eea; |
|||
.auth-tag { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
padding: 6rpx 12rpx; |
|||
background: #fef3c7; |
|||
border-radius: 16rpx; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.user-tags .tag .iconfont { |
|||
font-size: 20rpx; |
|||
margin-right: 5rpx; |
|||
} |
|||
.auth-tag.verified { |
|||
background: #d1fae5; |
|||
} |
|||
|
|||
.card-arrow .iconfont { |
|||
color: #ccc; |
|||
font-size: 32rpx; |
|||
} |
|||
.auth-tag:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
/* 统计数据 */ |
|||
.stats-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
gap: 20rpx; |
|||
margin: 30rpx 40rpx; |
|||
animation: fadeIn 0.8s ease 0.2s both; |
|||
} |
|||
.auth-tag image { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
.stat-item { |
|||
.auth-tag text { |
|||
font-size: 22rpx; |
|||
color: #92400e; |
|||
} |
|||
|
|||
.auth-tag.verified text { |
|||
color: #065f46; |
|||
} |
|||
|
|||
/* 卡片样式 */ |
|||
.section-card { |
|||
background: white; |
|||
margin: 0 30rpx 30rpx; |
|||
border-radius: 20rpx; |
|||
padding: 30rpx 0; |
|||
text-align: center; |
|||
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05); |
|||
transition: all 0.3s ease; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.section-header { |
|||
padding: 30rpx 30rpx 20rpx; |
|||
border-bottom: 1rpx solid #f1f5f9; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.stat-item::before { |
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #1e293b; |
|||
position: relative; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.section-title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 4rpx; |
|||
background: var(--item-color); |
|||
opacity: 0; |
|||
transition: opacity 0.3s ease; |
|||
} |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 6rpx; |
|||
height: 24rpx; |
|||
background: linear-gradient(135deg, #667eea, #764ba2); |
|||
border-radius: 3rpx; |
|||
} |
|||
|
|||
.stat-item:active { |
|||
transform: translateY(-5rpx); |
|||
box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.stat-item:active::before { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.stat-icon .iconfont { |
|||
font-size: 44rpx; |
|||
margin-bottom: 15rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.stat-value { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #333; |
|||
margin-bottom: 5rpx; |
|||
} |
|||
|
|||
.stat-name { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 快捷操作 */ |
|||
.quick-actions { |
|||
margin: 30rpx 40rpx; |
|||
animation: fadeIn 0.8s ease 0.4s both; |
|||
} |
|||
|
|||
.section-title { |
|||
/* 消息行 */ |
|||
.message-row { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.section-title .iconfont { |
|||
margin-right: 15rpx; |
|||
font-size: 32rpx; |
|||
color: #667eea; |
|||
} |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.actions-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
gap: 20rpx; |
|||
} |
|||
.message-item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.action-item { |
|||
text-align: center; |
|||
} |
|||
.message-item:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.action-icon { |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
border-radius: 50%; |
|||
margin: 0 auto 20rpx; |
|||
.message-icon-wrapper { |
|||
position: relative; |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
margin-bottom: 16rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
font-size: 40rpx; |
|||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); |
|||
transition: transform 0.3s ease; |
|||
} |
|||
background: #f8fafc; |
|||
border-radius: 50%; |
|||
border: 1rpx solid #e2e8f0; |
|||
} |
|||
|
|||
.action-item:active .action-icon { |
|||
transform: scale(0.95); |
|||
} |
|||
.message-icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
} |
|||
|
|||
.action-name { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
/* 功能模块 */ |
|||
.modules { |
|||
margin: 30rpx 40rpx; |
|||
animation: fadeIn 0.8s ease 0.6s both; |
|||
} |
|||
.message-label { |
|||
font-size: 26rpx; |
|||
color: #475569; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.module-section { |
|||
background: white; |
|||
border-radius: 20rpx; |
|||
padding: 30rpx; |
|||
margin-bottom: 30rpx; |
|||
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
.divider { |
|||
width: 1rpx; |
|||
height: 60rpx; |
|||
background: #e2e8f0; |
|||
margin: 0 40rpx; |
|||
} |
|||
|
|||
.module-items { |
|||
margin-top: 20rpx; |
|||
} |
|||
/* 功能列表 */ |
|||
.function-list { |
|||
padding: 0 30rpx 20rpx; |
|||
} |
|||
|
|||
.module-item { |
|||
.function-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 30rpx 0; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
transition: background-color 0.2s ease; |
|||
} |
|||
|
|||
.module-item:active { |
|||
background-color: #f8f9fa; |
|||
} |
|||
border-bottom: 1rpx solid #f1f5f9; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.module-item:last-child { |
|||
.function-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.item-left { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
.function-item:active { |
|||
background: #f8fafc; |
|||
border-radius: 12rpx; |
|||
} |
|||
|
|||
.item-icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 15rpx; |
|||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|||
.item-left { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 25rpx; |
|||
} |
|||
} |
|||
|
|||
.item-icon .iconfont { |
|||
color: white; |
|||
.item-icon { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 20rpx; |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.item-title { |
|||
font-size: 30rpx; |
|||
} |
|||
color: #1e293b; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.item-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.item-name { |
|||
font-size: 30rpx; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
.item-status { |
|||
font-size: 26rpx; |
|||
color: #f59e0b; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.item-desc { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 5rpx; |
|||
} |
|||
.item-status.verified { |
|||
color: #10b981; |
|||
} |
|||
|
|||
.item-status { |
|||
font-size: 22rpx; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
background: rgba(255, 107, 107, 0.1); |
|||
display: inline-block; |
|||
} |
|||
|
|||
.text-orange { |
|||
color: #ff9f43; |
|||
background: rgba(255, 159, 67, 0.1); |
|||
} |
|||
.function-item:active .arrow { |
|||
opacity: 0.8; |
|||
transform: translateX(4rpx); |
|||
} |
|||
|
|||
.item-right { |
|||
|
|||
|
|||
/* 反馈弹窗 */ |
|||
.feedback-modal { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1000; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
justify-content: center; |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.badge { |
|||
background: #ff6b6b; |
|||
color: white; |
|||
font-size: 20rpx; |
|||
min-width: 36rpx; |
|||
.feedback-modal.show { |
|||
opacity: 1; |
|||
visibility: visible; |
|||
} |
|||
|
|||
.modal-mask { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
backdrop-filter: blur(4rpx); |
|||
} |
|||
|
|||
.modal-content { |
|||
position: relative; |
|||
width: 90%; |
|||
max-width: 660rpx; |
|||
background: white; |
|||
border-radius: 24rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.2); |
|||
transform: translateY(100rpx); |
|||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
|||
} |
|||
|
|||
.feedback-modal.show .modal-content { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.modal-header { |
|||
padding: 40rpx 40rpx 20rpx; |
|||
border-bottom: 1rpx solid #f1f5f9; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.modal-title { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #1e293b; |
|||
} |
|||
|
|||
.modal-close { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border-radius: 18rpx; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0 8rpx; |
|||
margin-right: 15rpx; |
|||
} |
|||
background: #f1f5f9; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.modal-close:active { |
|||
background: #e2e8f0; |
|||
transform: scale(0.9); |
|||
} |
|||
|
|||
.item-right .iconfont { |
|||
color: #ccc; |
|||
.modal-close image { |
|||
width: 18rpx; |
|||
height: 18rpx; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
/* 反馈输入框 */ |
|||
.modal-body { |
|||
padding: 40rpx; |
|||
} |
|||
|
|||
.feedback-input { |
|||
width: 100%; |
|||
min-height: 240rpx; |
|||
padding: 24rpx; |
|||
box-sizing: border-box; |
|||
background: #f8fafc; |
|||
border: 2rpx solid #e2e8f0; |
|||
border-radius: 16rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
line-height: 1.5; |
|||
color: #1e293b; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
/* 底部操作 */ |
|||
.bottom-actions { |
|||
margin: 30rpx 40rpx; |
|||
animation: fadeIn 0.8s ease 0.8s both; |
|||
} |
|||
.feedback-input:focus { |
|||
border-color: #667eea; |
|||
background: white; |
|||
box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1); |
|||
} |
|||
|
|||
.system-info { |
|||
text-align: center; |
|||
.placeholder { |
|||
color: #94a3b8; |
|||
} |
|||
|
|||
.char-count { |
|||
text-align: right; |
|||
margin-top: 12rpx; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 40rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
} |
|||
justify-content: flex-end; |
|||
align-items: baseline; |
|||
gap: 4rpx; |
|||
} |
|||
|
|||
.action-buttons { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
} |
|||
.char-count .current { |
|||
color: #1e293b; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
.char-count .total { |
|||
color: #94a3b8; |
|||
} |
|||
|
|||
.modal-footer { |
|||
padding: 0 40rpx 40rpx; |
|||
} |
|||
|
|||
.submit-btn { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background: #e2e8f0; |
|||
border-radius: 44rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #94a3b8; |
|||
border: none; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.submit-btn.active { |
|||
background: linear-gradient(135deg, #667eea, #764ba2); |
|||
color: white; |
|||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3); |
|||
} |
|||
|
|||
.submit-btn.active:active { |
|||
transform: scale(0.98); |
|||
opacity: 0.9; |
|||
} |
|||
|
|||
.submit-btn[disabled] { |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
/* 昵称修改弹窗 */ |
|||
.nickname-modal { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1000; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.nickname-modal.show { |
|||
opacity: 1; |
|||
visibility: visible; |
|||
} |
|||
|
|||
.nickname-modal .modal-content { |
|||
width: 600rpx; |
|||
background: white; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2); |
|||
transform: scale(0.8); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.nickname-modal.show .modal-content { |
|||
transform: scale(1); |
|||
} |
|||
|
|||
.nickname-modal .modal-header { |
|||
padding: 40rpx 40rpx 20rpx; |
|||
border-bottom: 1rpx solid #f1f5f9; |
|||
} |
|||
|
|||
.nickname-modal .modal-body { |
|||
padding: 40rpx; |
|||
} |
|||
|
|||
.nickname-input { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
background: #f8fafc; |
|||
border: 2rpx solid #e2e8f0; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
color: #1e293b; |
|||
text-align: center; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.nickname-input:focus { |
|||
border-color: #667eea; |
|||
background: white; |
|||
box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1); |
|||
} |
|||
|
|||
.input-tip { |
|||
display: block; |
|||
font-size: 24rpx; |
|||
color: #94a3b8; |
|||
text-align: center; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
.nickname-modal .modal-footer { |
|||
padding: 0 40rpx 40rpx; |
|||
display: flex; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.cancel-btn, |
|||
.confirm-btn { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
border-radius: 40rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
border: none; |
|||
transition: all 0.3s ease; |
|||
} |
|||
border: none; |
|||
} |
|||
|
|||
.btn:active { |
|||
transform: scale(0.98); |
|||
} |
|||
.cancel-btn { |
|||
background: #f1f5f9; |
|||
color: #64748b; |
|||
} |
|||
|
|||
.btn-setting { |
|||
background: white; |
|||
color: #667eea; |
|||
border: 2rpx solid #667eea; |
|||
} |
|||
.cancel-btn:active { |
|||
background: #e2e8f0; |
|||
} |
|||
|
|||
.btn-logout { |
|||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); |
|||
.confirm-btn { |
|||
background: linear-gradient(135deg, #667eea, #764ba2); |
|||
color: white; |
|||
box-shadow: 0 10rpx 20rpx rgba(255, 107, 107, 0.3); |
|||
} |
|||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3); |
|||
} |
|||
|
|||
.btn .iconfont { |
|||
margin-right: 10rpx; |
|||
.confirm-btn:active { |
|||
transform: scale(0.98); |
|||
opacity: 0.9; |
|||
} |
|||
|
|||
/* 提示信息 */ |
|||
.toast { |
|||
position: fixed; |
|||
top: 150rpx; |
|||
left: 50%; |
|||
transform: translateX(-50%) translateY(-100rpx); |
|||
background: rgba(30, 41, 59, 0.9); |
|||
backdrop-filter: blur(20rpx); |
|||
color: white; |
|||
padding: 20rpx 40rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
@keyframes slideUp { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(30rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
visibility: hidden; |
|||
transition: all 0.3s ease; |
|||
z-index: 1001; |
|||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
} |
|||
to { |
|||
.toast.show { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* 响应式调整 */ |
|||
@media (max-width: 375px) { |
|||
.user-card, |
|||
.stats-grid, |
|||
.quick-actions, |
|||
.modules, |
|||
.bottom-actions { |
|||
margin-left: 30rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
visibility: visible; |
|||
transform: translateX(-50%) translateY(0); |
|||
} |
|||
@ -1,5 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"AI问诊", |
|||
"navigationStyle": "custom", |
|||
"navigationBarTitleText":"AI智能问诊", |
|||
"usingComponents": {} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue