WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

个人中心静态界面1.0

Browse Source
This commit is contained in:
minimaxagent1 2025-08-13 17:34:14 +08:00
parent d92525b2f6
commit 93348e9d89
1 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
pages/profile/profile.vue
View File

@ -4,10 +4,10 @@
<!-- 头部用户信息 --> <!-- 头部用户信息 -->
<view class="user-header"> <view class="user-header">
<view class="avatar">
<text class="avatar-text">昵</text>
</view>
<view class="user-info"> <view class="user-info">
<view class="avatar">
<text class="avatar-text">昵</text>
</view>
<view class="share-btn"> <view class="share-btn">
<image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image> <image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
<text class="share-text">分享推广</text> <text class="share-text">分享推广</text>
@ -175,34 +175,39 @@ export default {
// 用户头部 // 用户头部
.user-header { .user-header {
padding: 40rpx; padding: 40rpx 40rpx 40rpx 40rpx;
margin: 270rpx 20rpx 20rpx 20rpx; margin: 270rpx 20rpx 20rpx 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
position: relative; position: relative;
background: #ffffff; background: #ffffff;
.avatar {
position: absolute;
top: -80rpx; // 头像向上偏移，一半在容器外
left: 40rpx;
width: 160rpx;
height: 160rpx;
background: #817f7f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10; // 确保头像在最上层
.avatar-text {
font-size: 60rpx;
font-weight: bold;
color: #ffffff;
}
}
.user-info { .user-info {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end; // 分享按钮靠右对齐
margin-bottom: 30rpx; margin-bottom: 30rpx;
.avatar {
width: 160rpx;
height: 160rpx;
background: #817f7f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.avatar-text {
font-size: 60rpx;
font-weight: bold;
color: #ffffff;
}
}
.share-btn { .share-btn {
background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%); background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
@ -225,8 +230,8 @@ export default {
.user-details { .user-details {
display: flex; display: flex;
padding-left: 20rpx;
justify-content: space-between; justify-content: space-between;
align-items: flex-start;
.user-name { .user-name {
display: block; display: block;
@ -245,6 +250,7 @@ export default {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
padding: 10rpx;
.settings-img { .settings-img {
width: 40rpx; width: 40rpx;