You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.4 KiB
153 lines
3.4 KiB
<template>
|
|
<view>
|
|
<view class="nav_area"></view>
|
|
<view class="rechargePage">
|
|
<view>当前余额：<text style="color: #4976FF;">10000.00</text></view>
|
|
<view class="">请选择充值金额</view>
|
|
<view class="selec_area">
|
|
<view v-for="(item,index) in dataList" :key="index" class="selec_item">
|
|
￥{{item}}
|
|
</view>
|
|
<view class="input_box">
|
|
<view class="icon"></view>
|
|
<input type="text" v-model="amount" placeholder="请输入充值金额" placeholder-style="color: #999;" />
|
|
</view>
|
|
</view>
|
|
<view class="">支付方式</view>
|
|
<view class="selec2_area" @click="ZFBselected=!ZFBselected">
|
|
<image src="../../static/user/ze-alipay@2x.png" mode=""></image>
|
|
<view style="flex: 1;">
|
|
<view style="color: #101010;">支付宝支付</view>
|
|
<view style="color: #999999;">数亿用户都在用，安全可托付</view>
|
|
</view>
|
|
<view class="selected" v-if="ZFBselected"></view>
|
|
<view class="no-select" v-else></view>
|
|
</view>
|
|
<view class="submitBtn">充值</view>
|
|
<view class="explain">
|
|
充值说明：<br />
|
|
为了防止恶意套现和洗钱，您在本平台充值金额只能用于消费
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dataList: [10,50,100,200,500,1000],
|
|
amount: '',
|
|
ZFBselected: true
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav_area {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 99;
|
|
background-color: #fff;
|
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
width: 700rpx;
|
|
padding: 0px 25rpx;
|
|
/* #ifdef H5 */
|
|
height: 88rpx;padding-top: var(--status-bar-height);
|
|
/* #endif */
|
|
/* #ifdef APP-PLUS */
|
|
height: 2px;
|
|
/* #endif */
|
|
box-sizing: content-box;
|
|
color: #b0b0b0;
|
|
font-size: 14px;
|
|
}
|
|
.rechargePage{
|
|
padding: 20rpx 40rpx;
|
|
color: #444;
|
|
line-height: 80rpx;
|
|
}
|
|
.selec_area {
|
|
width: 610rpx;
|
|
margin: 10px auto 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.selec_item{
|
|
width: 160rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border: 1px solid #ededed;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.input_box{
|
|
width: 610rpx;
|
|
height: 80rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
border: 1px solid #ededed;
|
|
display: flex;
|
|
|
|
.icon{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
background-image: url("../../static/user/ze-gold-coin-o@2x.png");
|
|
background-size: contain;
|
|
margin: 20rpx;
|
|
}
|
|
input{
|
|
height: 76rpx;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
.selec2_area{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
line-height: 18px;
|
|
font-size: 12px;
|
|
|
|
image{
|
|
width: 60rpx;height: 60rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.selected{
|
|
width: 48rpx;height: 48rpx;
|
|
background-image: url("../../static/user/check-circle@2x.png");
|
|
background-size: contain;
|
|
}
|
|
.no-select{
|
|
width: 48rpx;height: 48rpx;
|
|
background-image: url("../../static/user/check-circle-n.png");
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.submitBtn{
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 5px;
|
|
margin: 40rpx auto;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #E33837;
|
|
}
|
|
.explain{
|
|
font-size: 14px;
|
|
color: #999;
|
|
line-height: 28px;
|
|
text-align:justify;/*文字两端对齐*/
|
|
}
|
|
|
|
</style>
|
|
|