|
@@ -3,10 +3,9 @@
|
|
|
<!-- 用户信息卡片 -->
|
|
<!-- 用户信息卡片 -->
|
|
|
<view class="user-card">
|
|
<view class="user-card">
|
|
|
<view class="user-avatar">
|
|
<view class="user-avatar">
|
|
|
- <image class="avatar-icon" src="/static/icons/user.svg" mode="aspectFit"></image>
|
|
|
|
|
|
|
+ <view class="avatar-icon-modern"></view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="user-details">
|
|
<view class="user-details">
|
|
|
- <view class="user-name">{{ displayName }}</view>
|
|
|
|
|
<view class="user-phone">{{ displayPhone }}</view>
|
|
<view class="user-phone">{{ displayPhone }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -116,9 +115,9 @@ import { clearAuth, getUserInfo as getStoredUserInfo } from '../../utils/auth';
|
|
|
const userInfo = ref<any>(null);
|
|
const userInfo = ref<any>(null);
|
|
|
const availableCouponCount = ref(0);
|
|
const availableCouponCount = ref(0);
|
|
|
|
|
|
|
|
-// 显示用户名
|
|
|
|
|
|
|
+// 显示用户名(已隐藏,仅显示手机号)
|
|
|
const displayName = computed(() => {
|
|
const displayName = computed(() => {
|
|
|
- return userInfo.value?.nickname || '微信用户';
|
|
|
|
|
|
|
+ return '';
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 显示手机号(脱敏)
|
|
// 显示手机号(脱敏)
|
|
@@ -267,25 +266,54 @@ const handleLogout = () => {
|
|
|
/* ========== 用户信息卡片 ========== */
|
|
/* ========== 用户信息卡片 ========== */
|
|
|
.user-card {
|
|
.user-card {
|
|
|
background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
|
|
background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
|
|
|
- padding: $spacing-xxl $spacing-lg $spacing-xl;
|
|
|
|
|
|
|
+ padding: $spacing-lg $spacing-lg;
|
|
|
|
|
+ padding-bottom: $spacing-md;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
animation: slideDown 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
animation: slideDown 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
|
|
|
|
|
|
.user-avatar {
|
|
.user-avatar {
|
|
|
- width: 120rpx;
|
|
|
|
|
- height: 120rpx;
|
|
|
|
|
|
|
+ width: 88rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
border-radius: $radius-circle;
|
|
border-radius: $radius-circle;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- margin-right: $spacing-lg;
|
|
|
|
|
- box-shadow: $shadow-md;
|
|
|
|
|
|
|
+ margin-right: $spacing-md;
|
|
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
|
|
- .avatar-icon {
|
|
|
|
|
- width: 72rpx;
|
|
|
|
|
- height: 72rpx;
|
|
|
|
|
|
|
+ .avatar-icon-modern {
|
|
|
|
|
+ width: 44rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
|
|
+ background: linear-gradient(135deg, $color-primary-light, $color-primary);
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ &::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ width: 20rpx;
|
|
|
|
|
+ height: 20rpx;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ top: 6rpx;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ height: 24rpx;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ border-radius: 18rpx 18rpx 0 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -293,16 +321,10 @@ const handleLogout = () => {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .user-name {
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
|
|
+ .user-phone {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
color: $color-text-primary;
|
|
color: $color-text-primary;
|
|
|
- margin-bottom: $spacing-xs;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .user-phone {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: rgba(44, 44, 44, 0.7);
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|