个人中心静态界面0.9
This commit is contained in:
parent
bedd88216c
commit
bcd9df3fdf
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user