Files
h5-uniapp/pages/index/c2c.vue
T
li 6b02df55ab feat: contract account tab, full i18n, male avatar, PC home stretch
- Asset page: add Contract account row + tab, show num_lh balance
- Total Assets = Spot + Contract + Fiat
- All Chinese text eliminated (z-paging, loadmore, colorui, pages)
- Password/payword pages use image captcha instead of OTP
- Home page PC: full-width stretch layout
- Register captcha input type fix, invite code lock
2026-04-05 13:05:27 +08:00

834 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view>
<view @click="checkclose()" v-if="isnum||ispay" class="mask1"></view>
<view @click="checkclose()" v-if="isnum||ispay" class="mask2"></view>
<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
:style="'background-color: '+theme.bg+';color: '+theme.text">
<!-- 下拉刷新 -->
<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
</custom-refresher>
<!-- 头部 -->
<view slot="top" class="width-750 relative flex align-center justify-center"
:style="{height: `calc(${statusBar}px + 358rpx)`}">
<view class="width-750 fixed1"
:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 358rpx)`}">
<!-- 标题 -->
<view class="width-750 height-110 padding-w-30 flex align-center justify-center">
<view @click.stop="_goback" class="cuIcon-back font-40 color-white"
style="position: absolute;left: 30rpx;"></view>
<text class="font-36 color-white weight-bold">{{i18n.c2c.title}}</text>
<view class="flex align-center" style="position: absolute;right: 30rpx;">
<view @click.stop="show=true" class="switchbox">
<text class="nummedium-font">{{faby}}</text>
<image class="width-34 height-34 margin-l-5" src="/static/imgs/index/change@2x.png" mode="">
</image>
</view>
</view>
</view>
<!-- 选择买或卖 -->
<view class="height-110 flex align-center padding-w-30">
<view class="flex-1 flex align-center">
<view @click.stop="changeisbuy(2)" class="flex-1" :class="isbuy==2?'onfont':'offfont'">
{{i18n.c2c.text1}}
</view>
<view @click.stop="changeisbuy(1)" class="flex-1" :class="isbuy==1?'onfont':'offfont'">
{{i18n.c2c.text2}}
</view>
<view @click.stop="router.push('/pages/index/releaseTrade')" class="flex-1 offfont">
{{i18n.c2c.text3}}
</view>
</view>
<view class="flex align-center justify-end">
<image @click.stop="router.push('/pages/index/orderRecord')" class="width-54 height-54"
src="/static/imgs/index/jilu@2x.png" mode=""></image>
<!-- <image @click.stop="typeshow=true" class="width-54 height-54"
src="/static/imgs/index/shoukuan@2x.png" mode=""></image> -->
</view>
</view>
<!-- 选择币种 -->
<view class="height-72 bj-0165EE">
<view class="height-72 flex align-center padding-w-30"
:style="'background-color: '+theme.bg+';color: '+theme.text"
style="border-radius: 20rpx 20rpx 0 0;">
<view class="width-100b height-100b">
<scroll-view scroll-x="true">
<view class="flex align-center">
<view @click.stop="setiscurr(item.id)" v-for="(item,index) in currlist"
class="height-72 padding-w-30 flex direction-column align-center justify-center relative">
<text :class="currid==item.id?'select':'noselect'">{{item.name}}</text>
<view v-if="currid==item.id" class="width-48 height-4 bj-0165EE"
style="position: absolute;bottom: 0;"></view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<!-- 筛选支付方式和金额 -->
<view class="height-70 flex align-center" :style="'background-color: '+theme.bg+';color: '+theme.text">
<!-- 支付方式 -->
<view @click.stop="changeispay" class="width-240 height-70 relative" >
<view class="width-240 height-70 flex align-center justify-center">
<text class="font-26 margin-r-10">{{payname}}</text>
<u-icon v-if="!ispay" name="arrow-down-fill" size="20"></u-icon>
<u-icon v-else name="arrow-up-fill" size="20"></u-icon>
</view>
<view @click.stop="" :class="ispay?'onbox':'offbox'" :style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="padding-w-30 padding-c-20 flex flex-wrap">
<view @click.stop="setpay(item)" v-for="(item,index) in paylist"
:class="payid==item.id?'selectpay':'noselectpay'">{{item.name}}</view>
</view>
</view>
</view>
<!-- 交易金额 -->
<view @click.stop="changeisnum" class="width-240 height-70 relative">
<view class="width-240 height-70 flex align-center justify-center">
<text class="font-26 margin-r-10">{{paypriceval}}</text>
<u-icon v-if="!isnum" name="arrow-down-fill"size="20"></u-icon>
<u-icon v-else name="arrow-up-fill" size="20"></u-icon>
</view>
<view @click.stop="" :class="isnum?'onbox1':'offbox1'" :style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="height-100 flex align-center padding-w-30">
<input class="inputbox" type="number" v-model="payprice" :placeholder="i18n.c2c.tos4"
placeholder-class="color-D1D3D8" />
</view>
<view class="height-100 padding-t-24 flex">
<view @click="resetpayprice"
class="flex-1 height-78 line-height-78 text-center bj-c3c3c3-02">
<text class="font-26 color-C3C3C3">{{i18n.c2c.text4}}</text>
</view>
<view @click="setpayprice"
class="flex-1 height-78 line-height-78 text-center bj-0165EE">
<text class="font-26 color-white">{{i18n.c2c.text5}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 身体 -->
<view class="width-750 padding-b-40" :style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="padding-t-18 padding-w-30">
<!-- 单一列表 -->
<view v-for="(item,index) in list" class="height-238 border-bottom">
<view class="flex align-center justify-between padding-t-22">
<view class="flex align-center">
<image class="width-48 height-48 radiu-24" :src="item.avatar" mode=""></image>
<text class="font-26 weight-bold margin-l-16">{{item.nickname}}</text>
</view>
<text class="font-24 color-C3C3C3">{{i18n.c2c.text6}}{{item.succ_num}}</text>
</view>
<view class="margin-c-10 flex align-center justify-between font-24 color-C3C3C3">
<view class="flex align-center">
<text>{{i18n.c2c.text7}}</text>
<text class="nummedium-font">{{item.residue_num}}</text>
</view>
<text>{{i18n.c2c.text8}}</text>
</view>
<view class="margin-c-10 flex align-center justify-between font-24 color-C3C3C3">
<view class="flex align-center">
<text>{{i18n.c2c.text9}}</text>
<text class="nummedium-font">{{item.symbol}}{{item.min_price}}-{{item.max_price}}</text>
</view>
<text class="font-30 color-0165EE numbold-font">{{item.symbol}}{{item.price}}</text>
</view>
<view class="flex align-center justify-between margin-t-10">
<image class="width-46 height-42" src="/static/imgs/index/yinhangka.png" mode=""></image>
<view @click.stop="openbuyshow(item)" :class="isbuy==2?'bj-0165EE':'bj-2E558A'"
class="width-140 height-52 radiu-10 line-height-52 text-center">
<text class="font-26 color-white">{{isbuy==2?i18n.c2c.text10:i18n.c2c.text11}}</text>
</view>
</view>
</view>
</view>
</view>
</z-paging>
<!-- 买卖弹窗 -->
<u-popup v-model="buyshow" mode="bottom" border-radius="20">
<view class="padding-w-30 padding-b-36"
:style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="height-101 flex align-center justify-center">
<text class="font-30 weight-bold">{{isbuy==2?i18n.c2c.text10:i18n.c2c.text11}}{{buyitem.curr_name}}</text>
<view @click.stop="buyshow=false" style="position: absolute;right: 30rpx;"
class="font-26 color-C3C3C3">
{{i18n.c2c.text12}}
</view>
</view>
<!-- 单价 -->
<view class="height-66 flex align-center">
<text class="font-30 margin-r-30">{{i18n.c2c.text8}}</text>
<text class="font-30 color-0165EE nummedium-font">{{buyitem.symbol}}{{buyitem.price}}</text>
</view>
<!-- 购买方式 -->
<view class="height-66 margin-t-28 flex align-center">
<text @click.stop="changetype(1)" :class="type==1?'font-30':'font-26 color-C3C3C3'"
class="margin-r-90">{{i18n.c2c.text13}}{{isbuy==2?i18n.c2c.text10:i18n.c2c.text11}}</text>
<text @click.stop="changetype(2)"
:class="type==2?'font-30':'font-26 color-C3C3C3'">{{i18n.c2c.text14}}{{isbuy==2?i18n.c2c.text10:i18n.c2c.text11}}</text>
</view>
<!-- 金额数量输入框 -->
<view class="margin-t-14">
<view class="numbox">
<input class="font-26 flex-1 padding-r-30 color-D1D3D8" type="number" v-model="number"
:placeholder="i18n.c2c.tos4" placeholder-class="color-D1D3D8" />
<view class="flex align-center font-26">
<text v-if="type==1" class="nummedium-font">{{buyitem.symbol}}</text>
<text v-if="type==2" class="nummedium-font">{{buyitem.curr_name}}</text>
<text class="margin-w-5"></text>
<text @click="all(buyitem)" class="font-30 color-0165EE">{{i18n.c2c.text15}}</text>
</view>
</view>
</view>
<!-- 限额 -->
<view class="font-26 color-C3C3C3 margin-t-8">
{{i18n.c2c.text9}}{{buyitem.symbol}}{{buyitem.min_price}}-{{buyitem.max_price}}
</view>
<!-- 交易数量 -->
<view class="height-66 flex align-center justify-between margin-t-22">
<text class="font-30 margin-r-30">{{i18n.c2c.text16}}</text>
<text v-if="type==1" class="font-30 color-0165EE nummedium-font">
{{(number/buyitem.price).toFixed(4)}} {{buyitem.curr_name}}
</text>
<text v-if="type==2" class="font-30 color-0165EE nummedium-font">
{{number==''?'0':number}} {{buyitem.curr_name}}
</text>
</view>
<!-- 实付款 -->
<view class="height-66 flex align-center justify-between margin-t-22">
<text class="font-30 margin-r-30">{{isbuy==2?i18n.c2c.text17:i18n.c2c.text18}}</text>
<text v-if="type==1" class="font-48 color-FF4040 nummedium-font">
{{buyitem.symbol}} {{number==''?'0.00':number}}
</text>
<text v-if="type==2" class="font-48 color-FF4040 nummedium-font">
{{buyitem.symbol}} {{(number*buyitem.price).toFixed(2)}}
</text>
</view>
<!-- 收款账户 -->
<view @click="show2=true" v-if="isbuy==1"
class="height-66 flex align-center justify-between margin-t-22">
<text class="font-30 margin-r-30">{{i18n.c2c.text19}}</text>
<view class="flex align-center font-30">
<text v-if="collecid!=''">{{collecdata.card_num|changestyle}}</text>
<u-icon name="arrow-right" color="#8B99A2" size="24"></u-icon>
</view>
</view>
<!-- 交易密码 -->
<view class="margin-t-22">
<text class="font-30 margin-r-30">{{i18n.c2c.text20}}</text>
<view class="numbox margin-t-25">
<input class="font-26 flex-1 color-D1D3D8" type="number" v-model="paypwd"
:placeholder="i18n.c2c.tos3" placeholder-class="color-D1D3D8" password />
</view>
</view>
<!-- 按钮 -->
<view class="margin-t-61 flex align-center justify-between">
<view @click.stop="buyshow=false"
class="width-305 height-96 radiu-10 bj-D1D3D8 line-height-96 text-center">
<text class="font-30 color-white">{{i18n.c2c.text12}}</text>
</view>
<view @click.stop="closebuyshow"
class="width-305 height-96 radiu-10 bj-0165EE line-height-96 text-center">
<text
class="font-30 color-white">{{i18n.c2c.text5}}{{isbuy==2?i18n.c2c.text10:i18n.c2c.text11}}</text>
</view>
</view>
</view>
</u-popup>
<!-- 法币弹窗 -->
<u-popup v-model="show" mode="bottom" border-radius="20">
<view class="padding-w-30 padding-b-36"
:style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="height-96 line-height-96 text-center relative">
<text class="font-30 weight-bold">{{i18n.c2c.text21}}</text>
<text @click.stop="show=false" class="font-26 color-C3C3C3 absolute"
style="right: 0;">{{i18n.c2c.text12}}</text>
</view>
<scroll-view scroll-y="true" class="height-450">
<view @click="setFaby(item)" v-for="(item,index) in fabylist"
class="height-96 flex align-center justify-between">
<view class="flex align-center">
<image class="width-48 height-48 radiu-24" :src="item.pay_image" mode=""></image>
<text class="font-28 margin-l-16">{{item.curr_name}}</text>
</view>
<image class="width-36 height-36" :src="fabyid==item.id?XZ:WX" mode=""></image>
</view>
</scroll-view>
</view>
</u-popup>
<!-- 收款账户弹窗 -->
<u-popup v-model="show2" mode="bottom" border-radius="20">
<view class="padding-w-30 padding-b-36"
:style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="height-96 line-height-96 text-center relative">
<text class="font-30 weight-bold">{{i18n.c2c.text19}}</text>
<text @click.stop="show2=false" class="font-26 color-C3C3C3 absolute"
style="right: 0;">{{i18n.c2c.text12}}</text>
</view>
<scroll-view scroll-y="true" class="height-450">
<view @click="setcollec(item)" v-for="(item,index) in collec"
:style="'background-color: '+theme.fu_bg+';color: '+theme.text"
class="height-96 flex align-center justify-between margin-b-10 radiu-10 padding-w-20">
<view class="flex-1 padding-r-24 height-96 flex direction-column justify-around">
<view class="flex align-center">
<text>{{item.username}}</text>
<text class="font-28 margin-l-16">{{item.card_num|changestyle}}</text>
</view>
<view class="font-24 color-C3C3C3">{{item.bank_name}}</view>
</view>
<image class="width-36 height-36" :src="collecid==item.id?XZ:WX" mode=""></image>
</view>
</scroll-view>
</view>
</u-popup>
<!-- 去实名 -->
<u-popup style="z-index: 5000;" border-radius="18" mode="center" v-model="TSShow">
<view class="width-600 padding-b-20"
:style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="width-100b height-220 padding-w-30 padding-c-40 flex direction-column align-center justify-between">
<image class="width-64 height-64" src="/static/imgs/quantify/tongzhi@2x.png" mode=""></image>
<view class="font-26 weight-bold text-center padding-w-20">{{i18n.c2c.text22}}
</view>
</view>
<view class="width-100b height-90 flex align-center justify-center">
<view @click="TSShow=false,router.push('/pages/my/safety/real')" class="qcbtn3">{{i18n.c2c.text23}}
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
statusBar: uni.getSystemInfoSync().statusBarHeight,
isbuy: 2, //2买,1卖
list: [],
page: 1,
state: 'more',
show: false, //法币弹窗
show1: false, //支付方式弹窗
buyshow: false, //购买弹窗
typeshow: false, //收款方式弹窗
type: 1, //1按金额购买,2按数量购买
currid: '', //当前币种id
currlist: [], //币种列表
faby: '', //法币
fabyid: '', //法币id
fabylist: [], //法币列表
WX: '/static/imgs/quantify/weixuanzhong@2x.png',
XZ: '/static/imgs/quantify/xuanzhong@2x.png',
ispay: false, //支付方式弹窗
payid: 0, //选择的支付方式
payname: 'Payment Method',
paylist: [{
id: 0,
name: 'All'
},
{
id: 1,
name: 'Bank Card'
}
],
isnum: false, //交易金额弹窗
payprice: '', //交易金额
paypriceval: 'Transaction Amount',
number: '',
paypwd: '',
buyitem: '', //购买对象
flag: true,
show2: false,
collec: [], //收款账户列表
collecid: '', //当前收款账户id
collecdata: '', //当前收款账户对象
TSShow: false,
theme: '',
}
},
onLoad() {
this.payname = this.i18n.c2c.text26
this.paypriceval = this.i18n.c2c.text24
this.paylist[0].name = this.i18n.c2c.text15
this.paylist[1].name = this.i18n.c2c.text25
},
computed: {
i18n() {
return this.$t('message');
}
},
onShow() {
if (uni.getStorageSync("theme") == "dark") {
this.theme = this.$store.state.darkTheme
} else {
this.theme = this.$store.state.lightTheme
}
this.getFabylist()
this.getCurrlist()
this.getcollection()
},
filters: {
changestyle(e) {
let str = e
var reg = /^(\d{4})\d+(\d{4})$/;
str = str.replace(reg, "$1 **** $2");
return str
}
},
methods: {
// 选择账户
setcollec(item) {
if (this.collecid != item.id) {
this.collecid = item.id
this.collecdata = item
this.show2 = false
}
},
// 获取收款账户列表
getcollection() {
this.post('/marketotc/get_collection').then(res => {
console.log('收款账户列表', res)
if (res.code == 1 && res.data && res.data.length > 0) {
this.collec = res.data
this.collecid = res.data[0].id
this.collecdata = res.data[0]
} else {
// 如果没有收款账户或数据为空,设置默认值或提示用户添加收款账户
this.collec = []
this.collecid = ''
this.collecdata = ''
}
})
},
// 挂单出售
getsell() {
if (this.number == '' && this.type == 1) return this.tos(this.i18n.c2c.tos1)
if (this.number == '' && this.type == 2) return this.tos(this.i18n.c2c.tos2)
if (this.paypwd == '') return this.tos(this.i18n.c2c.tos3)
if (!this.flag) {
return
} else {
this.flag = false
let obj = {
id: this.buyitem.id,
num: this.number,
pay_pwd: this.paypwd,
buy_type: this.type,
collection_id: this.collecid
}
this.post('/marketotc/order_sell', obj).then(res => {
console.log('下单返回', res)
this.flag = true
uni.hideLoading()
if (res.code == 1) {
this.tos(res.msg)
this.buyshow = false
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/orderRecord'
})
}, 500)
} else {
if (res.data.jump == 1) {
uni.hideToast()
this.buyshow = false
this.TSShow = true
}
}
})
}
},
// 挂单买入
getbuy() {
if (this.number == '' && this.type == 1) return this.tos(this.i18n.c2c.tos1)
if (this.number == '' && this.type == 2) return this.tos(this.i18n.c2c.tos2)
if (this.paypwd == '') return this.tos(this.i18n.c2c.tos3)
if (!this.flag) {
return
} else {
this.flag = false
let obj = {
id: this.buyitem.id,
num: this.number,
pay_pwd: this.paypwd,
buy_type: this.type
}
this.post('/marketotc/order_buy', obj).then(res => {
console.log('下单返回', res)
this.flag = true
uni.hideLoading()
if (res.code == 1) {
this.tos(res.msg)
this.buyshow = false
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/orderRecord'
})
}, 500)
} else {
if (res.data.jump == 1) {
uni.hideToast()
this.buyshow = false
this.TSShow = true
}
}
})
}
},
// 关闭买卖弹窗
closebuyshow() {
var that = this
uni.showLoading({
title: that.i18n.c2c.tos5,
mask: true
})
if (this.isbuy == 2) {
this.getbuy()
} else {
this.getsell()
}
},
// 全部
all(item) {
if (this.type == 1) {
this.number = item.money_fb
} else {
this.number = item.money_num
}
},
// 打开购买或出售弹窗
openbuyshow(item) {
console.log(item)
if (item.is_me) {
this.tos(this.i18n.c2c.tos6)
} else {
this.buyitem = item
this.number = ''
this.paypwd = ''
this.type = 1
this.buyshow = true
}
},
// 获取挂单列表
queryList(pageNo, pageSize) {
let obj = {
page:this.pageNo,
page_num: pageSize,
type: this.isbuy,
country_id: this.fabyid,
curr_id: this.currid,
payment: this.payid,
price: this.payprice
}
setTimeout(()=>{
this.post('/marketotc/market_list', obj).then(res => {
if (res.code == 1) {
console.log(res)
this.$refs.paging.complete(res.data.data);
}
})
},500)
},
// 重置交易金额
resetpayprice() {
this.paypriceval = this.i18n.c2c.text24
this.payprice = ''
this.isnum = !this.isnum
this.queryList(1,10)
},
// 设置交易金额
setpayprice() {
if (this.payprice != '' && this.payprice != 0) {
this.paypriceval = this.payprice
this.isnum = !this.isnum
this.queryList(1,10)
}
},
// 改变交易金额弹窗
changeisnum() {
if (this.ispay) {
this.ispay = !this.ispay
} else {
this.isnum = !this.isnum
}
},
// 改变支付方式弹窗
changeispay() {
if (this.isnum) {
this.isnum = !this.isnum
} else {
this.ispay = !this.ispay
}
},
// 检查支付方式和交易金额弹窗
checkclose() {
if (this.ispay) {
this.ispay = false
}
if (this.isnum) {
this.isnum = false
}
},
// 选择支付方式
setpay(item) {
if (this.payid != item.id) {
this.ispay = false
this.payid = item.id
this.queryList(1,10)
if (item.name == this.i18n.c2c.text15) {
this.payname = this.i18n.c2c.text26
} else {
this.payname = item.name
}
}
},
// 获取交易币种
getCurrlist() {
this.post('/marketotc/get_curr').then(res => {
console.log('币种列表', res)
if (res.code == 1) {
this.currlist = res.data
this.currid = res.data[0].id
}
})
},
// 选择法币
setFaby(item) {
this.faby = item.curr_name
this.fabyid = item.id
this.show = false
this.queryList(1,10)
},
// 获取法币列表
getFabylist() {
this.post('/marketotc/get_country').then(res => {
console.log('法币列表', res)
if (res.code == 1) {
this.fabylist = res.data
this.faby = res.data[0].curr_name
this.fabyid = res.data[0].id
}
})
},
// 选择币种
setiscurr(i) {
if (this.currid != i) {
this.currid = i
this.queryList(1,10)
}
},
// 选择金额或数量购买
changetype(i) {
if (this.type != i) {
this.type = i
this.number = ''
}
},
// 选择买或卖
changeisbuy(i) {
if (this.isbuy != i) {
this.isbuy = i
this.queryList(1,10)
}
},
}
}
</script>
<style lang="scss">
.transition1 {
overflow: hidden;
transition: 1s;
}
.fixed1 {
position: fixed;
top: 0;
z-index: 1000;
background: #06C38D;
}
.fabubox {
width: 180rpx;
height: 56rpx;
background: #FFFFFF;
border-radius: 28rpx 0rpx 0rpx 28rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #0165EE;
}
.onfont {
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
}
.offfont {
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
opacity: 0.5;
}
.select {
font-size: 28rpx;
font-family: "Bold" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #06C38D;
}
.noselect {
font-size: 26rpx;
font-family: "Medium" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #8B99A2;
}
.border-bottom {
border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);
}
.bj-c3c3c3-02 {
background-color: rgba(195, 195, 195, 0.2);
}
.numbox {
width: 690rpx;
height: 96rpx;
// background: #FFFFFF;
border: 1rpx solid #D1D3D8;
opacity: 1;
border-radius: 10rpx;
padding: 0 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.searchbox {
width: 610rpx;
height: 60rpx;
background: #F6F8FC;
border: 1rpx solid rgba(191, 195, 199, 0.2);
opacity: 1;
border-radius: 30rpx;
}
.offbox {
width: 750rpx;
height: 0rpx;
overflow: hidden;
// background-color: #FFFFFF;
transition: height 0.3s;
box-shadow: 0rpx 4rpx 10rpx #EBF0F6;
}
.onbox {
width: 750rpx;
height: 200rpx;
// background-color: #FFFFFF;
transition: height 0.3s;
box-shadow: 0rpx 4rpx 10rpx #EBF0F6;
}
.offbox1 {
width: 750rpx;
height: 0rpx;
overflow: hidden;
// background-color: #FFFFFF;
transition: height 0.3s;
position: absolute;
left: -240rpx;
}
.onbox1 {
width: 750rpx;
height: 200rpx;
// background-color: #FFFFFF;
transition: height 0.3s;
position: absolute;
left: -240rpx;
}
.selectpay {
width: 220rpx;
height: 46rpx;
border-radius: 23rpx;
border: 1rpx solid #06C38D;
line-height: 46rpx;
text-align: center;
font-size: 26rpx;
color: #06C38D;
margin: 0 20rpx 10rpx 0;
}
.noselectpay {
width: 220rpx;
height: 46rpx;
border-radius: 23rpx;
border: 1rpx solid #D1D3D8;
line-height: 46rpx;
text-align: center;
font-size: 26rpx;
color: #D1D3D8;
margin: 0 20rpx 10rpx 0;
}
.inputbox {
width: 100%;
height: 68rpx;
border-radius: 10rpx;
// background: #F6F8FC;
border: 1rpx solid rgba(195, 195, 195, 0.3);
font-size: 28rpx;
// color: #17181A;
padding: 0 24rpx;
}
.mask1 {
width: 100vh;
height: calc(var(--status-bar-height) + 292rpx);
position: fixed;
top: 0;
z-index: 10000;
// background: #007F0E;
}
.mask2 {
width: 100vh;
height: calc(100vh - var(--status-bar-height) - 558rpx);
position: fixed;
bottom: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.5);
}
.qcbtn3 {
width: 320rpx;
height: 86rpx;
background: #0165EE;
border-radius: 20rpx;
font-size: 28rpx;
font-weight: bold;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
</style>