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.
215 lines
3.8 KiB
215 lines
3.8 KiB
<template>
|
|
<view class="content">
|
|
<headerTopsTips></headerTopsTips>
|
|
<uni-nav-bar left-icon="left" title="充值" backgroundColor="#e6eafa" />
|
|
<view class="t_1">
|
|
<view class="">
|
|
<view class="per_rech">
|
|
<text>账户充值</text>
|
|
<text>支持绿色出行</text>
|
|
</view>
|
|
<view class="">
|
|
我的余额: -1元
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
|
|
</view>
|
|
</view>
|
|
<!-- -->
|
|
<view class="pro_line">
|
|
|
|
</view>
|
|
<view class="money">
|
|
充值金额
|
|
</view>
|
|
<!-- -->
|
|
<view class="money_number">
|
|
<view style="margin-right: 10rpx;">
|
|
<text>充300元</text>
|
|
<text>送300元</text>
|
|
</view>
|
|
<view style="margin-left: 10rpx;">
|
|
<text>充100元</text>
|
|
<text>送75元</text>
|
|
</view>
|
|
</view>
|
|
<view class="money_number" style="margin-top: 20rpx;">
|
|
<view style="margin-right: 10rpx;">
|
|
<text>充50元</text>
|
|
<text>送20元</text>
|
|
</view>
|
|
<view style="margin-left: 10rpx;">
|
|
<text>充20元</text>
|
|
<text>送5元</text>
|
|
</view>
|
|
</view>
|
|
<!-- -->
|
|
<view class="money">
|
|
选择支付方式
|
|
</view>
|
|
<view class="center_con">
|
|
<!-- -->
|
|
<view class="t_3">
|
|
<view style="display: flex; align-items: center;">
|
|
<view class="square">
|
|
</view>
|
|
<text style="margin-left: 15rpx; font-size: 12px;">支付宝支付</text>
|
|
</view>
|
|
<!-- <u-radio-group v-model="checkvalue">
|
|
<u-radio shape="circle">
|
|
</u-radio>
|
|
</u-radio-group> -->
|
|
</view>
|
|
<view class="t_3">
|
|
<view style="display: flex; align-items: center;">
|
|
<view class="square">
|
|
</view>
|
|
<text style="margin-left: 15rpx; font-size: 12px;">微信支付</text>
|
|
</view>
|
|
<!-- <u-radio-group v-model="checkvalue">
|
|
<u-radio shape="circle">
|
|
</u-radio>
|
|
</u-radio-group> -->
|
|
</view>
|
|
<view class="btn_bottom">
|
|
<button>立即充值</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import headerTopsTips from '@/pages/components/header_tops_tips.vue'
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
padding: 0 30rpx;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.t_1 {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
|
|
>view {
|
|
flex: 1;
|
|
height: 200rpx;
|
|
|
|
.per_rech {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
>view:first-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
>view:last-child {
|
|
background: #eeeeee;
|
|
}
|
|
}
|
|
|
|
.pro_line {
|
|
margin-top: 20rpx;
|
|
border: 1px solid #d9d9d9;
|
|
}
|
|
|
|
.money {
|
|
margin: 40rpx 0 20rpx 0;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.money_number {
|
|
display: flex;
|
|
|
|
// justify-content: space-between;
|
|
>view {
|
|
flex: 1;
|
|
height: 150rpx;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
>text:first-child {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
>text:last-child {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
|
|
>view:first-child {
|
|
background: #000000;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.center_con {
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.t_1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.deposi {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.t_2 {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
|
|
.t_3 {
|
|
border-bottom: 1px solid #ccc;
|
|
// height: 50rpx;
|
|
padding: 25rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.square {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background: #ccc;
|
|
}
|
|
}
|
|
|
|
.btn_depo {
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
.btn_bottom {
|
|
width: 100%;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 0;
|
|
button {
|
|
background: #000000;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 90rpx;
|
|
}
|
|
}
|
|
</style> |