|
@@ -9,13 +9,20 @@
|
|
|
</u-navbar>
|
|
|
<view class="panel">
|
|
|
<view class="title">个人余额(元)</view>
|
|
|
- <view class="number">{{memberInfo.balance}}</view>
|
|
|
- <u-button text="立即充值" @click="$u.route('/center/recharge')"></u-button>
|
|
|
+ <view class="number-wrap">
|
|
|
+ ¥ <text class="number">{{memberInfo.balance}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn-wrap">
|
|
|
+ <text class="btn" @click="$u.route('/center/recharge')">充值</text>
|
|
|
+ </view>
|
|
|
+ <view class="shape shape1"></view>
|
|
|
+ <view class="shape shape2"></view>
|
|
|
</view>
|
|
|
|
|
|
<u-cell-group>
|
|
|
<u-cell @click="$u.route('/center/dealList')" icon="order" title="交易明细" :isLink="true"></u-cell>
|
|
|
- <u-cell @click="$u.route('/center/setPaypass',{fromPage:'reset'})" icon="setting-fill" title="支付设置" :isLink="true"></u-cell>
|
|
|
+ <u-cell @click="$u.route('/center/setPaypass',{fromPage:'reset'})" icon="setting-fill" title="支付密码" :isLink="true"></u-cell>
|
|
|
+ <u-cell @click="$u.route('/center/findpaypass')" icon="fingerprint" title="找回支付密码" :isLink="true"></u-cell>
|
|
|
</u-cell-group>
|
|
|
|
|
|
</view>
|
|
@@ -58,16 +65,55 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.panel{
|
|
|
- text-align: center;
|
|
|
+ // min-height: 284rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
background-color: #ddd;
|
|
|
- padding: 20rpx;
|
|
|
+ padding: 40rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin-bottom: 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient(147deg, #00D35A 0%, #01A447 100%);
|
|
|
.title{
|
|
|
-
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 37rpx;
|
|
|
}
|
|
|
- .number{
|
|
|
-
|
|
|
+ .number-wrap{
|
|
|
+ font-size: 24rpx;
|
|
|
+ .number{
|
|
|
+ font-size: 58rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 81rpx;
|
|
|
+ margin-bottom: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-wrap{
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ text-align: right;
|
|
|
+ .btn{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 7rpx 20rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background: rgba(255,255,255,0.16);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shape{
|
|
|
+ width: 326rpx;
|
|
|
+ height: 372rpx;
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 50% 50%;
|
|
|
+ top: -50rpx;
|
|
|
+ }
|
|
|
+ .shape1{
|
|
|
+ background: rgba(255,255,255,0.1);
|
|
|
+ right: -50rpx;
|
|
|
+ }
|
|
|
+ .shape2{
|
|
|
+ background: rgba(255,255,255,0.2);
|
|
|
+ right: -170rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|