This commit is contained in:
2025-11-12 18:25:07 +08:00
parent 3cd473bedb
commit 871087cc1c
5 changed files with 91 additions and 10 deletions

View File

@@ -10,7 +10,7 @@
<view class="info-content">
<!-- 顶部用户名区域 -->
<view class="top-user-name" :style="{'height': topHeight, 'line-height': topHeight}">
{{userInfo.nickName}}
{{userInfo?.nickName}}
</view>
<!-- 主要内容区域 -->
@@ -18,7 +18,7 @@
<!-- 头像区域 -->
<view class="avatar-section">
<view class="avatar-wrapper">
<image class="avatar-img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3285889616,2023536093&fm=253&gp=0.jpg'"></image>
<image class="avatar-img" :src="userInfo?.avatarUrl ? userInfo.avatarUrl : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3285889616,2023536093&fm=253&gp=0.jpg'"></image>
<view class="avatar-glow"></view>
</view>
</view>
@@ -28,11 +28,33 @@
<view class="welcome-card">
<view class="welcome-icon">🎯</view>
<view class="welcome-text">
<text class="greeting">你好{{userInfo.nickName}}</text>
<text class="greeting">你好{{userInfo?.nickName}}</text>
<text class="welcome-message">欢迎使用计分小程序</text>
</view>
</view>
</view>
<!-- 新增菜单区域 -->
<view class="menu-section">
<view class="menu-list">
<view class="menu-item">
<text class="menu-text">账号与安全</text>
<view class="menu-arrow"></view>
</view>
<view class="menu-item">
<text class="menu-text">会员管理</text>
<view class="menu-arrow"></view>
</view>
<view class="menu-item">
<text class="menu-text">个人收藏</text>
<view class="menu-arrow"></view>
</view>
<view class="menu-item">
<text class="menu-text">设置</text>
<view class="menu-arrow"></view>
</view>
</view>
</view>
</view>
</view>
</view>
@@ -87,7 +109,7 @@ onMounted(() => {
}
.user-info {
--user-height: 1000rpx; /* 增加整体高度确保内容不被遮挡 */
--user-height: 1500rpx; /* 增加整体高度确保内容不被遮挡 */
width: 750rpx;
height: var(--user-height);
background-color: #f5f5f5;
@@ -193,7 +215,7 @@ onMounted(() => {
box-sizing: border-box;
.welcome-card {
background: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.9);
border-radius: 24rpx;
padding: 40rpx 32rpx;
box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.1);
@@ -230,6 +252,46 @@ onMounted(() => {
}
}
}
/* 新增菜单区域样式 */
.menu-section {
margin-top: 60rpx;
width: 100%;
padding: 0 40rpx;
box-sizing: border-box;
.menu-list {
background: rgba(255, 255, 255, 0.95);
border-radius: 24rpx;
box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.1);
overflow: hidden;
backdrop-filter: blur(10rpx);
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 40rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
&:last-child {
border-bottom: none;
}
.menu-text {
font-size: 32rpx;
color: #000000;
font-weight: 500;
}
.menu-arrow {
font-size: 40rpx;
color: #999999;
font-weight: 300;
}
}
}
}
}
}
}
@@ -248,7 +310,7 @@ onMounted(() => {
/* 响应式调整 */
@media (max-width: 750rpx) {
.user-info {
--user-height: 560rpx;
--user-height: 800rpx; /* 增加高度以容纳菜单 */
}
}
</style>