|
|
@@ -5,34 +5,37 @@
|
|
|
|
|
|
<block>
|
|
|
<view class="container" :style="containerStyle">
|
|
|
- <view class="header flex-column">
|
|
|
- <view class="flex-grow flex-center">
|
|
|
+ <view class="header">
|
|
|
+ <view class="flex-center">
|
|
|
<image
|
|
|
src="/static/user/round.png"
|
|
|
mode="heightFix"
|
|
|
- style="width: 12orpx;height: 120rpx"/>
|
|
|
+ style="width: 120rpx;height: 120rpx"/>
|
|
|
</view>
|
|
|
- <view class="main flex-shrink">
|
|
|
+ <view class="main">
|
|
|
<image
|
|
|
class="avatar"
|
|
|
src='/static/iconfont/me.svg'>
|
|
|
</image>
|
|
|
- <view class="phone fs-40 fw-500">{{ user.mobilePhone }}</view>
|
|
|
-
|
|
|
- <view class="money" @click="toPage({path: '/pages-user/wallet/index'})">
|
|
|
- <view class="money-left">
|
|
|
- <uv-icon name="coupon" size="24" color="#C6171E"></uv-icon>
|
|
|
-<!-- <image src="/static/iconfont/chongzhi.svg" mode="widthFit" style="width: 40rpx;height: 40rpx"></image>-->
|
|
|
-<!-- <uv-icon name="red-packet" size="24" color="#C6171E"></uv-icon>-->
|
|
|
- <view style="font-size: 16px;margin-left: 10rpx;">钱包 | 充值</view>
|
|
|
- </view>
|
|
|
+ <view class="phone fw-500">{{ user.mobilePhone }}</view>
|
|
|
|
|
|
- <view class="money-right">
|
|
|
+ <view class="money-box">
|
|
|
+ <view class="money" @click="toPage({path: '/pages-user/wallet/index'})">
|
|
|
+ <view class="money-left">
|
|
|
+ <uv-icon name="coupon" size="24" color="#C6171E"></uv-icon>
|
|
|
+ <!-- <image src="/static/iconfont/chongzhi.svg" mode="widthFit" style="width: 40rpx;height: 40rpx"></image>-->
|
|
|
+ <!-- <uv-icon name="red-packet" size="24" color="#C6171E"></uv-icon>-->
|
|
|
+ <view style="font-size: 16px;margin-left: 10rpx;">钱包 | 充值</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="money-right_balance"> ¥ {{ ((user.balance || 0) / 100).toFixed(2) }}</view>
|
|
|
- </view>
|
|
|
+ <view class="money-right">
|
|
|
+
|
|
|
+ <view class="money-right_balance"> ¥ {{ ((user.balance || 0) / 100).toFixed(2) }}</view>
|
|
|
+ </view>
|
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -258,14 +261,16 @@ page{
|
|
|
.header {
|
|
|
//height: 400rpx;
|
|
|
width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
.main {
|
|
|
//height: 234rpx;
|
|
|
- padding: 60rpx auto;
|
|
|
+ //padding: 60rpx auto;
|
|
|
background: rgba(254, 255, 255, 0.7);
|
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
+ z-index: 999;
|
|
|
|
|
|
.avatar {
|
|
|
position: absolute;
|
|
|
@@ -275,58 +280,71 @@ page{
|
|
|
width: 110rpx;
|
|
|
height: 110rpx;
|
|
|
border: 2rpx solid #ffffff;
|
|
|
- filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
|
|
|
+ //filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
|
|
|
background-size: cover;
|
|
|
background-repeat: no-repeat;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.phone {
|
|
|
- padding-top: 78rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ //padding-top: 78rpx;
|
|
|
color: #000;
|
|
|
+ //padding: 30rpx auto;
|
|
|
+ font-size: 40rpx;
|
|
|
}
|
|
|
|
|
|
- .money {
|
|
|
- //position: absolute;
|
|
|
- //left: 0;
|
|
|
- //bottom: 0;
|
|
|
- width: 600rpx;
|
|
|
- //height: 98rpx;
|
|
|
- background: rgba(221, 82, 77, 0.3);
|
|
|
- border-radius: 120rpx;
|
|
|
- margin: 130rpx auto 40rpx auto;
|
|
|
- //color: #000000;
|
|
|
- padding: 20rpx;
|
|
|
- font-size: 22px;
|
|
|
+ .money-box{
|
|
|
+ background: #EEB9BB;
|
|
|
+ padding: 60rpx 20rpx;
|
|
|
display: flex;
|
|
|
- align-content: center;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
+ align-content: center;
|
|
|
|
|
|
- &-left {
|
|
|
- opacity: 1;
|
|
|
- color: $uni-color-primary;
|
|
|
- display: inline-flex;
|
|
|
- align-items: flex-end;
|
|
|
+ .money {
|
|
|
+ //position: absolute;
|
|
|
+ //left: 0;
|
|
|
+ //bottom: 0;
|
|
|
+ width: 600rpx;
|
|
|
+ //height: 98rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 120rpx;
|
|
|
+ //margin: 130rpx auto 40rpx auto;
|
|
|
+ //color: #000000;
|
|
|
+ padding: 20rpx;
|
|
|
font-size: 22px;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ opacity: 1;
|
|
|
+ color: $uni-color-primary;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
|
|
|
- &-right {
|
|
|
- font-size: 22px;
|
|
|
- opacity: 1;
|
|
|
- color: $uni-color-primary;
|
|
|
- display: inline-flex;
|
|
|
- align-items: flex-end;
|
|
|
-
|
|
|
- &_balance {
|
|
|
- padding-left: 5px;
|
|
|
- font-size: 26px;
|
|
|
- font-weight: 600;
|
|
|
- margin-right: 10px;
|
|
|
+ &-right {
|
|
|
+ font-size: 22px;
|
|
|
+ opacity: 1;
|
|
|
+ color: $uni-color-primary;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ &_balance {
|
|
|
+ padding-left: 5px;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|