157 lines
2.9 KiB
Vue
157 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<view class="main">
|
||
|
|
<view class="balance">
|
||
|
|
<view class="title">
|
||
|
|
可提现余额
|
||
|
|
</view>
|
||
|
|
<view class="balance-span site-flex">
|
||
|
|
<text class="fuhao">$</text>
|
||
|
|
<text>120.00.00</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="with">
|
||
|
|
<view class="tabs ">
|
||
|
|
<view class="tab" :class="[activeIndex == 0 ? 'activeTab': '']" @click="setIndex(0)">我要提现</view>
|
||
|
|
<view class="tab" :class="[activeIndex == 1 ? 'activeTab': '']" @click="setIndex(1)">提现记录</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="_input">
|
||
|
|
<!-- <u--input
|
||
|
|
placeholder="请输入提现金额"
|
||
|
|
class='_input'
|
||
|
|
border="surround"
|
||
|
|
v-model="value"
|
||
|
|
></u--input> -->
|
||
|
|
<input placeholder-style="font-size:32upx;" @focus="onfocus" v-model="number" placeholder="请输入提现金额"></input>
|
||
|
|
<text>全部提现</text>
|
||
|
|
</view>
|
||
|
|
<view class="card">
|
||
|
|
<BankCrad></BankCrad>
|
||
|
|
</view>
|
||
|
|
<view class="btn">
|
||
|
|
<u-button :circle="true" color="linear-gradient(to right, rgba(22, 104, 214, 1), rgba(88, 153, 235, 1))">立即提现</u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import BankCrad from "./component/Card.vue"
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
activeIndex:0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods:{
|
||
|
|
onfocus(e){
|
||
|
|
|
||
|
|
},
|
||
|
|
setIndex(e){
|
||
|
|
this.activeIndex = e
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
BankCrad
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page{
|
||
|
|
background:#fff !important
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
background:#fff !important
|
||
|
|
}
|
||
|
|
|
||
|
|
html{
|
||
|
|
background:#fff
|
||
|
|
}
|
||
|
|
@import "@/font.css";
|
||
|
|
.tabs{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding:20upx;
|
||
|
|
view{
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
color:#333;
|
||
|
|
border-radius: 20upx;
|
||
|
|
padding: 20upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.btn{
|
||
|
|
padding: 40upx;
|
||
|
|
}
|
||
|
|
._input{
|
||
|
|
padding:40upx;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
text{
|
||
|
|
color: #333 !important ;
|
||
|
|
font-size: 28upx;
|
||
|
|
margin-left: 10upx;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
input{
|
||
|
|
border-bottom: 2px solid #2963e2;
|
||
|
|
// border-bottom: 2px solid #333;
|
||
|
|
padding: 20upx;
|
||
|
|
flex: 1;
|
||
|
|
font-family: 'Product-Sans-Bold';
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 56upx;
|
||
|
|
|
||
|
|
}
|
||
|
|
input::focus{
|
||
|
|
border-bottom: 2px solid #2963e2 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.activeTab{
|
||
|
|
padding: 20upx;
|
||
|
|
font-weight: 500;
|
||
|
|
color:#fff !important;
|
||
|
|
background: #2963e2;
|
||
|
|
border-radius: 20upx;
|
||
|
|
}
|
||
|
|
.balance-span{
|
||
|
|
font-family: 'Product-Sans-Bold';
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 70upx;
|
||
|
|
padding-bottom: 80upx;
|
||
|
|
}
|
||
|
|
.fuhao{
|
||
|
|
font-size: 38upx;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
font-size: 30upx;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.card{
|
||
|
|
padding: 40upx;
|
||
|
|
}
|
||
|
|
.with{
|
||
|
|
margin-top: -20px;
|
||
|
|
background: #fff;
|
||
|
|
border-top-left-radius: 50upx;
|
||
|
|
border-top-right-radius: 50upx;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.balance{
|
||
|
|
padding: 15upx 20upx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
view{
|
||
|
|
margin: 10upx;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
background: #2963e2;
|
||
|
|
// border-bottom-left-radius: 20upx;
|
||
|
|
// border-bottom-right-radius: 20upx;
|
||
|
|
}
|
||
|
|
</style>
|