From 66aa21085ea45ee1a8f3cbb46da30b238a486dc0 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Sat, 23 Aug 2025 11:44:58 +0800
Subject: [PATCH] 1
---
pages.json | 12 +-
pages/profile/profile.vue | 944 ++++++++++++++++++++++----------------
2 files changed, 545 insertions(+), 411 deletions(-)
diff --git a/pages.json b/pages.json
index f2161e2..84d66a9 100644
--- a/pages.json
+++ b/pages.json
@@ -283,12 +283,12 @@
"iconPath": "static/tabbar/assistant.png",
"selectedIconPath": "static/tabbar/assistant-active.png"
},
- {
- "pagePath": "pages/review/review",
- "text": "评测",
- "iconPath": "static/tabbar/review.png",
- "selectedIconPath": "static/tabbar/review-active.png"
- },
+// {
+// "pagePath": "pages/review/review",
+// "text": "评测",
+// "iconPath": "static/tabbar/review.png",
+// "selectedIconPath": "static/tabbar/review-active.png"
+// },
{
"pagePath": "pages/adoption/adoption",
"text": "领养",
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index acafb98..9f4a68f 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -27,18 +27,15 @@
{{ userInfo.nickName ? '已登录' : '未登录' }}
已使用 {{ loginDays }} 天
-
- ⚙️
-
+
@@ -111,45 +118,20 @@
-
+
+
-
-
- 🔔
- 消息通知
-
-
- {{ notificationCount }}
- →
-
-
-
-
- 🔒
- 隐私设置
-
-
- →
-
-
-
+
💬
意见反馈
-
- →
-
-
-
-
- ℹ️
- 关于我们
-
-
- →
-
@@ -158,35 +140,37 @@
-
- 头像
+
+ 选择头像
- 点击选择头像
@@ -196,15 +180,17 @@
v-model="tempUserInfo.nickName"
placeholder="请输入昵称"
class="nickname-input"
- :class="{ 'error': nicknameError }"
- maxlength="20"
- @input="onNicknameInput"
- @blur="onNicknameBlur"
- @focus="onNicknameFocus"
/>
-
- {{ nicknameTips }}
-
+
+
+
+
+
@@ -226,7 +212,6 @@ export default {
})
const loginDays = ref(0)
- const notificationCount = ref(3)
// 用户信息设置模态框相关数据
const showUserInfoModal = ref(false)
@@ -235,10 +220,7 @@ export default {
avatarUrl: ''
})
- // 昵称输入相关状态
- const nicknameTips = ref('')
- const nicknameError = ref(false)
- const lastValidNickname = ref('')
+
// 宠物统计数据
const petStats = reactive({
@@ -249,7 +231,9 @@ export default {
// 家庭统计数据
const familyStats = reactive({
- memberCount: 1
+ memberCount: 1,
+ sharedPets: 0,
+ activityCount: 0
})
// 领养统计数据
@@ -307,8 +291,10 @@ export default {
petStats.reminderCount = pendingReminders.length
// 加载家庭数据
- const familyData = uni.getStorageSync('familyData') || { members: [] }
+ const familyData = uni.getStorageSync('familyData') || { members: [], activities: [] }
familyStats.memberCount = familyData.members.length || 1
+ familyStats.sharedPets = Math.min(petStats.petCount, familyStats.memberCount > 1 ? petStats.petCount : 0)
+ familyStats.activityCount = familyData.activities ? familyData.activities.length : 0
// 加载领养数据
const adoptionData = uni.getStorageSync('adoptionData') || {
@@ -318,11 +304,6 @@ export default {
adoptionStats.publishedCount = adoptionData.published.length
adoptionStats.applicationCount = adoptionData.applications.length
- // 加载通知数量
- const notifications = uni.getStorageSync('notifications') || []
- const unreadNotifications = notifications.filter(n => !n.read)
- notificationCount.value = unreadNotifications.length
-
} catch (error) {
console.error('加载用户统计数据失败:', error)
// 设置默认值
@@ -330,6 +311,8 @@ export default {
petStats.recordCount = 0
petStats.reminderCount = 0
familyStats.memberCount = 1
+ familyStats.sharedPets = 0
+ familyStats.activityCount = 0
adoptionStats.publishedCount = 0
adoptionStats.applicationCount = 0
}
@@ -358,10 +341,7 @@ export default {
avatarUrl: ''
}
- // 重置昵称相关状态
- nicknameTips.value = ''
- nicknameError.value = false
- lastValidNickname.value = ''
+
// 显示用户信息设置模态框
showUserInfoModal.value = true
@@ -455,27 +435,7 @@ export default {
return num.toString()
}
- // 检查是否有新功能提示
- const checkNewFeatures = () => {
- const lastVersion = uni.getStorageSync('lastAppVersion') || '1.0.0'
- const currentVersion = '1.1.0' // 当前版本
- if (lastVersion !== currentVersion) {
- // 显示新功能提示
- setTimeout(() => {
- uni.showModal({
- title: '发现新功能',
- content: '新增了家庭共享和领养管理功能，快来体验吧！',
- confirmText: '去看看',
- success: (res) => {
- if (res.confirm) {
- uni.setStorageSync('lastAppVersion', currentVersion)
- }
- }
- })
- }, 2000)
- }
- }
// 头像选择处理
const onChooseAvatar = async (e) => {
@@ -601,15 +561,6 @@ export default {
return
}
- // 验证昵称格式
- if (!validateNickname(tempUserInfo.value.nickName)) {
- uni.showToast({
- title: '昵称格式不正确',
- icon: 'none'
- })
- return
- }
-
// 验证头像
if (!tempUserInfo.value.avatarUrl) {
uni.showToast({
@@ -645,14 +596,11 @@ export default {
// 关闭模态框
showUserInfoModal.value = false
- // 重置临时数据和状态
+ // 重置临时数据
tempUserInfo.value = {
nickName: '',
avatarUrl: ''
}
- nicknameTips.value = ''
- nicknameError.value = false
- lastValidNickname.value = ''
// 显示成功提示
uni.showToast({
@@ -696,96 +644,18 @@ export default {
nickName: '',
avatarUrl: ''
}
- // 重置昵称状态
- nicknameTips.value = ''
- nicknameError.value = false
- lastValidNickname.value = ''
}
- // 昵称输入处理
- const onNicknameInput = (e) => {
- const value = e.detail.value
- tempUserInfo.value.nickName = value
- // 实时验证昵称
- validateNickname(value)
- }
- // 昵称获得焦点
- const onNicknameFocus = () => {
- nicknameTips.value = '支持中文、英文、数字，2-20个字符'
- nicknameError.value = false
- }
-
- // 昵称失去焦点
- const onNicknameBlur = () => {
- const currentNickname = tempUserInfo.value.nickName
-
- // 保存当前有效昵称，以备安全检测失败时恢复
- if (currentNickname && !nicknameError.value) {
- lastValidNickname.value = currentNickname
- }
-
- // 微信会在失去焦点时进行内容安全检测
- // 如果检测不通过，内容会被自动清空
- setTimeout(() => {
- // 检查是否被清空（安全检测失败）
- if (lastValidNickname.value && !tempUserInfo.value.nickName) {
- nicknameTips.value = '昵称内容不符合规范，已自动清空'
- nicknameError.value = true
- } else if (tempUserInfo.value.nickName) {
- // 内容未被清空，验证通过
- nicknameTips.value = '昵称可用'
- nicknameError.value = false
- }
- }, 100)
- }
-
- // 昵称验证
- const validateNickname = (nickname) => {
- if (!nickname) {
- nicknameTips.value = ''
- nicknameError.value = false
- return true
- }
-
- // 长度检查
- if (nickname.length < 2) {
- nicknameTips.value = '昵称至少需要2个字符'
- nicknameError.value = true
- return false
- }
-
- if (nickname.length > 20) {
- nicknameTips.value = '昵称不能超过20个字符'
- nicknameError.value = true
- return false
- }
-
- // 字符格式检查（中文、英文、数字、部分特殊字符）
- const validPattern = /^[\u4e00-\u9fa5a-zA-Z0-9_\-\s]+$/
- if (!validPattern.test(nickname)) {
- nicknameTips.value = '昵称只能包含中文、英文、数字、下划线和连字符'
- nicknameError.value = true
- return false
- }
-
- // 验证通过
- nicknameTips.value = '昵称格式正确'
- nicknameError.value = false
- return true
- }
-
- // 初始化时检查新功能
+ // 页面初始化
onMounted(() => {
initPage()
- checkNewFeatures()
})
return {
userInfo,
loginDays,
- notificationCount,
petStats,
familyStats,
adoptionStats,
@@ -803,14 +673,7 @@ export default {
tempUserInfo,
onChooseAvatar,
saveUserInfo,
- cancelUserInfo,
- // 昵称输入相关
- nicknameTips,
- nicknameError,
- onNicknameInput,
- onNicknameFocus,
- onNicknameBlur,
- validateNickname
+ cancelUserInfo
}
},
@@ -986,25 +849,19 @@ export default {
align-items: center;
margin-bottom: 24rpx;
- .stats-title {
- font-size: 32rpx;
- font-weight: 600;
- color: #333333;
- }
-
- .stats-action {
+ .header-left {
display: flex;
align-items: center;
- .action-text {
- font-size: 24rpx;
- color: #FF8A80;
- margin-right: 8rpx;
+ .card-icon {
+ font-size: 36rpx;
+ margin-right: 16rpx;
}
- .action-arrow {
- font-size: 24rpx;
- color: #FF8A80;
+ .card-title {
+ font-size: 32rpx;
+ font-weight: 600;
+ color: #333333;
}
}
}
@@ -1088,9 +945,46 @@ export default {
margin-right: 8rpx;
}
- .action-arrow {
- font-size: 24rpx;
+
+ }
+ }
+
+ .family-stats {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20rpx;
+ margin-bottom: 32rpx;
+
+ .stat-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 24rpx 16rpx;
+ background: rgba(255, 138, 128, 0.05);
+ border-radius: 16rpx;
+ transition: all 0.3s ease;
+ cursor: pointer;
+
+ &:active {
+ transform: scale(0.95);
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ .stat-number {
+ font-size: 36rpx;
+ font-weight: 600;
color: #FF8A80;
+ margin-bottom: 8rpx;
+ }
+
+ .stat-label {
+ font-size: 24rpx;
+ color: #666666;
+ margin-bottom: 8rpx;
+ }
+
+ .stat-icon {
+ font-size: 28rpx;
}
}
}
@@ -1160,10 +1054,7 @@ export default {
}
.header-right {
- .action-arrow {
- font-size: 24rpx;
- color: #FF8A80;
- }
+ /* 悬浮指示器样式已在通用样式中定义 */
}
}
@@ -1225,72 +1116,7 @@ export default {
}
}
-/* 设置功能卡片 */
-.settings-card {
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(20rpx);
- margin: 0 30rpx 24rpx 30rpx;
- border-radius: 24rpx;
- box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
- border: 1rpx solid rgba(255, 255, 255, 0.3);
- overflow: hidden;
- .settings-list {
- .setting-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 32rpx;
- border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
- transition: all 0.3s ease;
-
- &:last-child {
- border-bottom: none;
- }
-
- &:active {
- background: rgba(255, 138, 128, 0.05);
- }
-
- .setting-left {
- display: flex;
- align-items: center;
-
- .setting-icon {
- font-size: 32rpx;
- margin-right: 16rpx;
- }
-
- .setting-text {
- font-size: 30rpx;
- color: #333333;
- font-weight: 500;
- }
- }
-
- .setting-right {
- display: flex;
- align-items: center;
-
- .setting-badge {
- background: #FF8A80;
- color: white;
- font-size: 20rpx;
- padding: 4rpx 12rpx;
- border-radius: 20rpx;
- margin-right: 12rpx;
- min-width: 32rpx;
- text-align: center;
- }
-
- .setting-arrow {
- font-size: 24rpx;
- color: #FF8A80;
- }
- }
- }
- }
-}
/* 响应式设计 */
@media (max-width: 375px) {
@@ -1320,6 +1146,27 @@ export default {
}
}
+ .family-stats {
+ gap: 16rpx;
+ margin-bottom: 24rpx;
+
+ .stat-item {
+ padding: 20rpx 12rpx;
+
+ .stat-number {
+ font-size: 32rpx;
+ }
+
+ .stat-label {
+ font-size: 22rpx;
+ }
+
+ .stat-icon {
+ font-size: 24rpx;
+ }
+ }
+ }
+
.family-actions {
gap: 12rpx;
@@ -1362,12 +1209,118 @@ export default {
}
}
+/* 悬浮指示器通用样式 */
+.floating-indicator {
+ position: relative;
+ cursor: pointer;
+
+ &::after {
+ content: '';
+ position: absolute;
+ right: 16rpx;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 12rpx;
+ height: 12rpx;
+ background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+ border-radius: 50%;
+ animation: pulse 2s infinite;
+ transition: all 0.3s ease;
+ opacity: 0.8;
+ }
+
+ &:hover::after {
+ width: 16rpx;
+ height: 16rpx;
+ box-shadow: 0 0 0 6rpx rgba(255, 138, 128, 0.2);
+ opacity: 1;
+ }
+
+ &:active::after {
+ transform: translateY(-50%) scale(0.8);
+ }
+}
+
+/* 设置与帮助卡片 */
+.settings-card {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(20rpx);
+ margin: 0 30rpx 24rpx 30rpx;
+ border-radius: 24rpx;
+ box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
+ border: 1rpx solid rgba(255, 255, 255, 0.3);
+ overflow: hidden;
+
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 32rpx;
+ border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
+
+ .header-left {
+ display: flex;
+ align-items: center;
+
+ .card-icon {
+ font-size: 36rpx;
+ margin-right: 16rpx;
+ }
+
+ .card-title {
+ font-size: 32rpx;
+ font-weight: 600;
+ color: #333333;
+ }
+ }
+ }
+
+ .settings-list {
+ .setting-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 32rpx;
+ transition: all 0.3s ease;
+
+ &:active {
+ background: rgba(255, 138, 128, 0.05);
+ }
+
+ .setting-left {
+ display: flex;
+ align-items: center;
+
+ .setting-icon {
+ font-size: 32rpx;
+ margin-right: 16rpx;
+ }
+
+ .setting-text {
+ font-size: 30rpx;
+ color: #333333;
+ font-weight: 500;
+ }
+ }
+
+ .setting-right {
+ /* 悬浮指示器样式已在通用样式中定义 */
+ }
+ }
+ }
+}
+
/* 用户信息设置模态框样式 */
.user-info-form {
- padding: 40rpx 20rpx;
+ padding: 40rpx 32rpx 20rpx 32rpx;
opacity: 0;
transform: translateY(20rpx);
transition: all 0.3s ease;
+ background: linear-gradient(135deg, rgba(255, 138, 128, 0.02), rgba(255, 182, 193, 0.02));
+ border-radius: 24rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
&.form-animate {
opacity: 1;
@@ -1376,6 +1329,14 @@ export default {
.form-item {
margin-bottom: 40rpx;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
.form-label {
display: block;
@@ -1383,128 +1344,208 @@ export default {
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
+ text-align: center;
}
+ }
- .avatar-selector {
- display: flex;
- flex-direction: column;
- align-items: center;
+ .avatar-form-item {
+ margin-bottom: 44rpx;
- .avatar-button {
- position: relative;
- background: none;
+ }
+
+ .avatar-selector {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .avatar-button {
+ position: relative;
+ background: none;
+ border: none;
+ padding: 0;
+ margin-bottom: 24rpx;
+ border-radius: 50%;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+ &::after {
border: none;
+ }
+
+ &:hover {
+ transform: scale(1.05);
+ }
+
+ &:active {
+ transform: scale(0.95);
+ }
+
+ .avatar-container {
+ position: relative;
padding: 8rpx;
- margin-bottom: 20rpx;
border-radius: 50%;
- transition: all 0.3s ease;
-
- &::after {
- border: none;
- }
-
- &:hover {
- background: rgba(255, 138, 128, 0.1);
- transform: scale(1.05);
- }
-
- &:active {
- transform: scale(0.95);
- }
+ background: linear-gradient(135deg, rgba(255, 138, 128, 0.1), rgba(255, 182, 193, 0.1));
+ box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.15);
.avatar-edit-overlay {
position: absolute;
- bottom: 4rpx;
- right: 4rpx;
- width: 36rpx;
- height: 36rpx;
- background: linear-gradient(135deg, #FF8A80, #FFB6C1);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 4rpx 12rpx rgba(255, 138, 128, 0.4);
- border: 2rpx solid white;
+ bottom: 8rpx;
+ right: 8rpx;
- .edit-icon {
- font-size: 20rpx;
- color: white;
- font-weight: bold;
+ .edit-icon-wrapper {
+ width: 40rpx;
+ height: 40rpx;
+ background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
+ border: 3rpx solid white;
+
+ .edit-icon {
+ font-size: 22rpx;
+ color: white;
+ }
}
}
}
-
- .avatar-tips {
- font-size: 26rpx;
- color: #666;
- background: rgba(255, 138, 128, 0.1);
- padding: 8rpx 16rpx;
- border-radius: 20rpx;
- border: 1rpx solid rgba(255, 138, 128, 0.2);
- }
}
- .nickname-input {
- width: 100%;
- height: 88rpx;
- padding: 0 28rpx;
- border: 2rpx solid #E8E8E8;
- border-radius: 16rpx;
- font-size: 32rpx;
- color: #333;
- background: #FAFAFA;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ .avatar-tips {
+ font-size: 28rpx;
+ color: #666;
+ background: linear-gradient(135deg, rgba(255, 138, 128, 0.08), rgba(255, 182, 193, 0.08));
+ padding: 12rpx 24rpx;
+ border-radius: 24rpx;
+ border: 1rpx solid rgba(255, 138, 128, 0.15);
+ box-shadow: 0 2rpx 8rpx rgba(255, 138, 128, 0.1);
+ }
+
+ }
+
+ .nickname-input {
+ width: 80%;
+ max-width: 400rpx;
+ height: 96rpx;
+ padding: 0 32rpx;
+ border: 2rpx solid rgba(255, 138, 128, 0.2);
+ border-radius: 24rpx;
+ font-size: 32rpx;
+ color: #333;
+ background: linear-gradient(135deg, rgba(255, 138, 128, 0.03), rgba(255, 182, 193, 0.03));
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ text-align: center;
+ box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.08);
+ box-sizing: border-box;
+
+ &:focus {
+ border-color: #FF8A80;
+ background: white;
+ box-shadow: 0 0 0 8rpx rgba(255, 138, 128, 0.12), 0 8rpx 24rpx rgba(255, 138, 128, 0.15);
+ transform: translateY(-2rpx);
+ }
+
+ &::placeholder {
+ color: rgba(255, 138, 128, 0.6);
+ font-size: 30rpx;
+ }
+ }
+}
+
+/* 自定义保存按钮样式 */
+.custom-button-area {
+ width: 100%;
+ margin-top: 24rpx;
+ display: flex;
+ justify-content: center;
+ padding: 0 32rpx 8rpx 32rpx;
+
+ .custom-save-button {
+ position: relative;
+ width: 80%;
+ max-width: 400rpx;
+ height: 72rpx;
+ border: none;
+ border-radius: 24rpx;
+ background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+ box-shadow: 0 6rpx 20rpx rgba(255, 138, 128, 0.3);
+ overflow: hidden;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ box-sizing: border-box;
+
+ &::after {
+ border: none;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ .button-content {
position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ gap: 8rpx;
- &:focus {
- border-color: #FF8A80;
- background: white;
- box-shadow: 0 0 0 6rpx rgba(255, 138, 128, 0.12);
- transform: translateY(-2rpx);
+ .button-icon {
+ font-size: 24rpx;
+ color: white;
+ transition: transform 0.3s ease;
}
- &::placeholder {
- color: #BDBDBD;
- font-size: 30rpx;
- }
-
- &.error {
- border-color: #FF5722;
- background: rgba(255, 87, 34, 0.05);
-
- &:focus {
- box-shadow: 0 0 0 6rpx rgba(255, 87, 34, 0.12);
- }
+ .button-text {
+ font-size: 28rpx;
+ font-weight: 600;
+ color: white;
+ letter-spacing: 0.5rpx;
}
}
- .nickname-tips {
- margin-top: 16rpx;
- padding: 8rpx 12rpx;
- border-radius: 8rpx;
- background: rgba(102, 102, 102, 0.08);
+ .button-shine {
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ transform: translateX(-100%) translateY(-100%) rotate(45deg);
+ transition: transform 0.6s ease;
+ }
- .tips-text {
- font-size: 24rpx;
- color: #666;
- line-height: 1.5;
- display: flex;
- align-items: center;
+ &:hover {
+ background: linear-gradient(135deg, #FF7A70, #FFA6B1);
+ transform: translateY(-3rpx) scale(1.02);
+ box-shadow: 0 12rpx 32rpx rgba(255, 138, 128, 0.4);
- &::before {
- content: 'ℹ️';
- margin-right: 8rpx;
- font-size: 20rpx;
- }
-
- &.error {
- color: #FF5722;
-
- &::before {
- content: '⚠️';
- }
- }
+ &::before {
+ opacity: 1;
}
+
+ .button-content .button-icon {
+ transform: scale(1.1) rotate(5deg);
+ }
+
+ .button-shine {
+ transform: translateX(100%) translateY(100%) rotate(45deg);
+ }
+ }
+
+ &:active {
+ transform: translateY(-1rpx) scale(0.98);
+ box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
+ transition: all 0.1s ease;
}
}
}
@@ -1536,6 +1577,18 @@ export default {
}
}
+/* 悬浮指示器脉冲动画 */
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 0.7;
+ transform: translateY(-50%) scale(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: translateY(-50%) scale(1.2);
+ }
+}
+
@keyframes breathe {
0%, 100% {
opacity: 0.3;
@@ -1565,7 +1618,7 @@ export default {
/* 响应式设计 */
@media screen and (max-width: 750rpx) {
.user-info-form {
- padding: 32rpx 16rpx;
+ padding: 32rpx 24rpx 16rpx 24rpx;
.form-item {
margin-bottom: 32rpx;
@@ -1574,18 +1627,54 @@ export default {
font-size: 30rpx;
margin-bottom: 16rpx;
}
+ }
+
+ .avatar-form-item {
+ margin-bottom: 36rpx;
.avatar-selector {
+ .avatar-button {
+ .avatar-container {
+ padding: 6rpx;
+ }
+ }
+
.avatar-tips {
- font-size: 24rpx;
- padding: 6rpx 12rpx;
+ font-size: 26rpx;
+ padding: 10rpx 20rpx;
}
}
+ }
- .nickname-input {
- height: 80rpx;
- font-size: 30rpx;
- padding: 0 24rpx;
+ .nickname-input {
+ width: 90%;
+ height: 88rpx;
+ font-size: 30rpx;
+ padding: 0 28rpx;
+ box-sizing: border-box;
+ }
+ }
+
+ // 小屏幕自定义按钮优化
+ .custom-button-area {
+ margin-top: 20rpx;
+ padding: 0 24rpx 6rpx 24rpx;
+
+ .custom-save-button {
+ width: 90%;
+ height: 64rpx;
+ border-radius: 24rpx;
+
+ .button-content {
+ gap: 6rpx;
+
+ .button-icon {
+ font-size: 20rpx;
+ }
+
+ .button-text {
+ font-size: 24rpx;
+ }
}
}
}
@@ -1593,22 +1682,67 @@ export default {
@media screen and (min-width: 1200rpx) {
.user-info-form {
- padding: 48rpx 32rpx;
- max-width: 600rpx;
+ padding: 48rpx 40rpx 24rpx 40rpx;
+ max-width: 640rpx;
margin: 0 auto;
.form-item {
margin-bottom: 48rpx;
.form-label {
- font-size: 34rpx;
+ font-size: 36rpx;
margin-bottom: 24rpx;
}
+ }
- .nickname-input {
- height: 96rpx;
- font-size: 34rpx;
- padding: 0 32rpx;
+ .avatar-form-item {
+ margin-bottom: 52rpx;
+
+ .avatar-selector {
+ .avatar-button {
+ margin-bottom: 28rpx;
+
+ .avatar-container {
+ padding: 12rpx;
+ }
+ }
+
+ .avatar-tips {
+ font-size: 30rpx;
+ padding: 14rpx 28rpx;
+ }
+ }
+ }
+
+ .nickname-input {
+ width: 70%;
+ height: 104rpx;
+ font-size: 36rpx;
+ padding: 0 40rpx;
+ box-sizing: border-box;
+ }
+ }
+
+ // 大屏幕自定义按钮优化
+ .custom-button-area {
+ margin-top: 32rpx;
+ padding: 0 40rpx 12rpx 40rpx;
+
+ .custom-save-button {
+ width: 70%;
+ height: 80rpx;
+ border-radius: 24rpx;
+
+ .button-content {
+ gap: 10rpx;
+
+ .button-icon {
+ font-size: 28rpx;
+ }
+
+ .button-text {
+ font-size: 32rpx;
+ }
}
}
}