个人中心静态界面0.9

This commit is contained in:
minimaxagent1 2025-08-13 17:17:49 +08:00
parent bedd88216c
commit bcd9df3fdf

View File

@ -8,23 +8,23 @@
<view class="avatar">
<text class="avatar-text"></text>
</view>
<view class="user-details">
<text class="user-name">昵称</text>
<text class="user-id">123****8912</text>
<view class="share-btn">
<image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
<text class="share-text">分享推广</text>
</view>
</view>
<view class="user-details">
<text class="user-name">昵称</text>
<text class="user-id">123****8912</text>
<view class="settings-icon">
<image :src="commonEnum.SET" class="settings-img" mode="aspectFit"></image>
</view>
</view>
<view class="share-btn">
<image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
<text class="share-text">分享推广</text>
</view>
</view>
<!-- 财务摘要 -->
<view class="financial-summary">
<image :src="commonEnum.COIN_BACKGROUND" class="coin-background" mode="aspectFill"></image>
<image :src="commonEnum.COIN_BACKGROUND" class="coin-background" mode="width"></image>
<view class="main-amount">
<text class="amount-number">18079.29</text>
<text class="amount-label">可提现()</text>
@ -184,51 +184,67 @@ export default {
.user-info {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
.avatar {
width: 100rpx;
height: 100rpx;
width: 160rpx;
height: 160rpx;
background: #817f7f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30rpx;
.avatar-text {
font-size: 40rpx;
font-size: 60rpx;
font-weight: bold;
color: #130000;
color: #ffffff;
}
}
.user-details {
flex: 1;
.share-btn {
background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
padding: 20rpx 30rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
.user-name {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #3d3d3d;
margin-bottom: 10rpx;
.share-img {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.user-id {
font-size: 28rpx;
color: #817f7f;
.share-text {
font-size: 24rpx;
color: #722b03;
}
}
}
.user-details {
display: flex;
padding-left: 20rpx;
justify-content: space-between;
.user-name {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #3d3d3d;
margin-bottom: 10rpx;
}
.user-id {
font-size: 28rpx;
color: #817f7f;
}
.settings-icon {
margin-top: 50rpx;
width: 60rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.settings-img {
width: 40rpx;
@ -236,28 +252,6 @@ export default {
}
}
}
.share-btn {
position: absolute;
top: 40rpx;
right: 40rpx;
background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
padding: 20rpx 30rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
.share-img {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.share-text {
font-size: 24rpx;
color: #722b03;
}
}
}
//
@ -268,6 +262,7 @@ export default {
color: #fff;
position: relative;
overflow: hidden;
border: 1px red solid;
.coin-background {
position: absolute;