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.
543 lines
15 KiB
543 lines
15 KiB
2 years ago
|
<template>
|
||
|
|
<view class="oliout">
|
||
|
|
<cu-custom style="" class="main-totextbar bg-main-oil" :backCard = 'true' :isBack="true" bgColor="bg-main-oil">
|
||
|
|
<block slot="backText">返回</block>
|
||
|
|
<block slot="content">油卡转出</block>
|
||
|
|
</cu-custom>
|
||
|
|
<view class="olibgclass"></view>
|
||
|
|
<view :style="'background-image: url('+imgURL+ ');'" class="new_card">
|
||
|
|
<view class="new_card_flexone">
|
||
|
|
<text>外请公司油卡</text>
|
||
|
|
</view>
|
||
|
|
<view class="new_card_flexone">
|
||
|
|
<text style="font-size: 44rpx; ">{{handle(cardData.accountCardCode)}}</text>
|
||
|
|
</view>
|
||
|
|
<view style="" class="new_card_flexone company">
|
||
|
|
<text>{{cardData.companyName}}</text>
|
||
|
|
</view>
|
||
|
|
<view style="position: relative;" class="new_card_flexone">
|
||
|
|
<text style="">账户余额： <text style="font-size: 36rpx;font-weight: 600;">{{cardData.balance}}</text>
|
||
|
|
元</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="card_body" style="">
|
||
|
|
<view class="company_phone" style="">
|
||
|
|
<view class="new_input">
|
||
|
|
<text style="margin-right: 10rpx;" class="cuIcon-search"></text>
|
||
|
|
<input v-model="seachPhone" style="width: 80%;" placeholder="请输入对方手机号" type="number" />
|
||
|
|
</view>
|
||
|
|
<text @click="searchFn">搜索</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view v-if="tip" class="card_tiop">请认真核对对方手机号码姓名，一旦转出无法追回</view>
|
||
|
|
<view v-if="!tip" style="color: red;" class="card_tiop">请输入正确手机号格式</view>
|
||
|
|
<view class="name_card" style="">
|
||
|
|
<view v-if="giveData!==null" class="company_user"
|
||
|
|
:style="'background-image: url('+(giveData.headPhoto?giveData.headPhoto:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-xq/default-avator.png')+ ');'">
|
||
|
|
</view>
|
||
|
|
<view v-if="giveData!==null" style="margin-left: 20rpx;">
|
||
|
|
<view class="newcard_title">{{giveData.userName}} <text
|
||
|
|
v-if="giveData.createUser">（{{giveData.createUser}}）</text> </view>
|
||
|
|
<view>{{giveData.phone}}</view>
|
||
|
|
</view>
|
||
|
|
<view style="margin: 0 auto; color:#999999;" v-if="giveData===null">{{seachText}}</view>
|
||
|
|
</view>
|
||
|
|
<view style="padding: 15rpx 15rpx; 0 15rpx">
|
||
|
|
<view class="newcard_title">转出金额</view>
|
||
|
|
<view style="display: flex; align-items: center; ">
|
||
|
|
<text style="font-size: 80rpx;">
|
||
|
|
￥
|
||
|
|
</text>
|
||
|
|
<input v-model="sendData.occurAmount" class="card_input" style=" margin-left: 10rpx;"
|
||
|
|
:placeholder=" '最多可以转出'+ cardData.balance + '元'" type="digit" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="width: 90vw; margin: 0 auto;">
|
||
|
|
<view class="newcard_title zc">
|
||
|
|
转出说明
|
||
|
|
<view class="tiao"></view>
|
||
|
|
</view>
|
||
|
|
<view class="text" style="">1、转出油费实时到账，本页非任何法律文件，转出钱请认真核对
|
||
|
|
转出人，转出金额，如遇纠纷问题，请联系当事人解决处理。 </view>
|
||
|
|
</view>
|
||
|
|
<button @click="open" class="oliout_butten" style="">立即转出</button>
|
||
|
|
<!-- 弹窗 uini ui -->
|
||
|
|
<uni-popup @change='changefn' ref="popup" type="center">
|
||
|
|
<view v-if="giveData!==null" class="poput_tip">
|
||
|
|
<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">短信身份验证</view>
|
||
|
|
<view style="margin: 20rpx auto;width: 90%;">转出验证：本次转出需要短信确认，验证码 已发送至您的手机 {{phoneHandle(this.phone)}}</view>
|
||
|
|
<xt-verify-code class="code" v-model="verifyCode" @confirm="confirm"></xt-verify-code>
|
||
|
|
<button @click="send" class="oliout_butten"
|
||
|
|
style="width:60%; border-radius: 50rpx;">{{time===0?'重新发送验证码':time+'S'}}
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
<uni-popup ref="popupt" type="center">
|
||
|
|
<view class="poput_tip">
|
||
|
|
<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">温馨提示</view>
|
||
|
|
<view style="margin: 20rpx auto;width: 90%;text-align: center;">
|
||
|
|
<view class="container_img">
|
||
|
|
<image class="success_img" src="../../../static/img/success.png"></image>
|
||
|
|
</view>
|
||
|
|
转出成功!
|
||
|
|
</view>
|
||
|
|
<button @click="close" class="oliout_butten" style="width:60%; border-radius: 50rpx;">确认</button>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
<uni-popup ref="dialog" type="dialog">
|
||
|
|
<uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="dialogClose"
|
||
|
|
@confirm="dialogClose">{{errText}}</uni-popup-dialog>
|
||
|
|
</uni-popup>
|
||
|
|
<!-- <uni-popup ref="tip" type="dialog">
|
||
|
|
<uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="dialogClose"
|
||
|
|
@confirm="dialogClose">发送成功</uni-popup-dialog>
|
||
|
|
</uni-popup> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import accountApi from '@/api/account.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
imgURL: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/card.png',
|
||
|
|
popupbg: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/popupbg.png',
|
||
|
|
seachText: "",
|
||
|
|
verifyCode: '',
|
||
|
|
value: '',
|
||
|
|
time: 0,
|
||
|
|
seachPhone: '',
|
||
|
|
userPhone: '',
|
||
|
|
balance: 980.50,
|
||
|
|
errText:'',
|
||
|
|
cardData: '',
|
||
|
|
giveData: null,
|
||
|
|
tip: true,
|
||
|
|
phone:'',
|
||
|
|
sendData: {
|
||
|
|
giveCustomerId: '', //赠送司机ID （与givePhone二选一必填）
|
||
|
|
givePhone: '', //赠送司机手机（与giveCustomerId二选一必填）
|
||
|
|
companyId: '', //公司id
|
||
|
|
code: '', //短信验证码
|
||
|
|
verifyCodeToken: '', //验证码Token
|
||
|
|
occurAmount: '' ,//交易金额（不得小于定义最小金额）,
|
||
|
|
createSource:'XOIL_DRIVER_WECHAT_APPLET',
|
||
|
|
billType:'OIL_DONATION',
|
||
|
|
payerCustomerId:''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(card) {
|
||
|
|
if (card) {
|
||
|
|
this.cardData = JSON.parse(card.card)
|
||
|
|
console.log(this.cardData,'-------------------')
|
||
|
|
}
|
||
|
|
this.phone = uni.getStorageSync('user').userPhone
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/*
|
||
|
|
this.$refs.(弹窗绑定的ref).open() 打开
|
||
|
|
this.$refs.(弹窗绑定的ref).close() 关闭
|
||
|
|
*/
|
||
|
|
//校验手机号
|
||
|
|
isPoneAvailable(poneInput) {
|
||
|
|
var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
||
|
|
if (!myreg.test(poneInput)) {
|
||
|
|
if (poneInput == '') {
|
||
|
|
this.tip = true
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
this.tip = true
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//搜索函数
|
||
|
|
searchFn() {
|
||
|
|
/*
|
||
|
|
this.giveData绑定的值
|
||
|
|
this.giveData.globalEnabl 0 是已停用
|
||
|
|
this.seachText 提示文字
|
||
|
|
this.seachPhone 搜索的手机号
|
||
|
|
*/
|
||
|
|
//校验手机号
|
||
|
|
if (this.isPoneAvailable(this.seachPhone)) {
|
||
|
|
//搜索前清空
|
||
|
|
this.giveData = null
|
||
|
|
//手机号没问题请求接口
|
||
|
|
accountApi.getByPhone(this.seachPhone).then(res => {
|
||
|
|
console.log(res, '---')
|
||
|
|
//赠送对象赋值
|
||
|
|
if (res.data === null) {
|
||
|
|
//如果返回的是null 在下一步发送转账请求的时候 后台会自动创建 一个账号 前台做一个假数据 给赠送对象一些默认值
|
||
|
|
this.giveData = {}
|
||
|
|
this.giveData.userName = '将为您创建一个新的账号'
|
||
|
|
this.giveData.phone = this.seachPhone
|
||
|
|
this.giveData.headPhoto =
|
||
|
|
'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-xq/default-avator.png'
|
||
|
|
} else {
|
||
|
|
// 如果有数据 给数据绑定的值 赋值，设置提示 如果停用，清空搜索对象，修改提示文字
|
||
|
|
this.giveData = res.data
|
||
|
|
if (this.giveData.globalEnable === 0) {
|
||
|
|
this.seachText = '用户已停用'
|
||
|
|
this.giveData = null
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.seachText = '亲暂无搜索记录哦~~'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
//如果手机号校验不通过 清空搜索对象
|
||
|
|
this.giveData = null
|
||
|
|
this.tip = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//卡号数据格式处理函数
|
||
|
|
handle(e) {
|
||
|
|
return e.replace(/(.{4})/g, '$1 ')
|
||
|
|
},
|
||
|
|
//手机号处理函数
|
||
|
|
phoneHandle(e) {
|
||
|
|
return e.substr(0,3)+"****"+e.substr(7);
|
||
|
|
},
|
||
|
|
//关闭弹窗函数
|
||
|
|
dialogClose() {
|
||
|
|
this.$refs.dialog.close()
|
||
|
|
},
|
||
|
|
//监听弹窗状态函数
|
||
|
|
changefn(e) {
|
||
|
|
console.log(e, '监听')
|
||
|
|
},
|
||
|
|
//开始记时函数
|
||
|
|
timefn() {
|
||
|
|
/*
|
||
|
|
this.time 时间值
|
||
|
|
this.time --
|
||
|
|
*/
|
||
|
|
if (this.time !== 0) {
|
||
|
|
this.time--
|
||
|
|
setTimeout(() => {
|
||
|
|
this.timefn()
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//发送验证码函数
|
||
|
|
send() {
|
||
|
|
//如果计时器不等于 0 back 否则进入下一步
|
||
|
|
if (this.time === 0) {
|
||
|
|
this.verifyCode = ''
|
||
|
|
this.sendData.verifyCodeToken=''
|
||
|
|
let phone = uni.getStorageSync('user').userPhone
|
||
|
|
// 调用接口
|
||
|
|
accountApi.giveCard({
|
||
|
|
phone: phone
|
||
|
|
}).then(res => {
|
||
|
|
// 接口返回2000 正常 表明验证码已经发送
|
||
|
|
// if (res.code === 20000) {
|
||
|
|
// 开启设置计时器时间
|
||
|
|
console.log(res,'验证')
|
||
|
|
this.time = 60
|
||
|
|
//获取验证码token
|
||
|
|
this.sendData.verifyCodeToken = res.data.verifyCodeToken
|
||
|
|
// 开启计时器
|
||
|
|
this.timefn()
|
||
|
|
// 打开提示
|
||
|
|
this.$refs.popup.open('center')
|
||
|
|
// }else{
|
||
|
|
// this.$refs.popup.open('center')
|
||
|
|
// }
|
||
|
|
})
|
||
|
|
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请等待'+this.time+'秒后再转账',
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 校验 验证码 发送转账请求
|
||
|
|
givefn(e) {
|
||
|
|
/*
|
||
|
|
userData : 登录用户数据;
|
||
|
|
giveData : 转出对象参数;
|
||
|
|
cardData:卡参数
|
||
|
|
拿到需要的值 companyId accountCardCode code
|
||
|
|
拷贝一份 发送的参数 因为不拷贝一份数据，第二次会报错
|
||
|
|
合并数据
|
||
|
|
回显数据
|
||
|
|
*/
|
||
|
|
console.log(e,'givefn')
|
||
|
|
let userData = uni.getStorageSync('user')
|
||
|
|
console.log(this.giveData, '转出对象参数')
|
||
|
|
console.log(userData, '用户数据参数')
|
||
|
|
console.log(this.cardData, '卡参数')
|
||
|
|
// 拷贝
|
||
|
|
let sen = JSON.parse(JSON.stringify(this.sendData));
|
||
|
|
// 合并数据
|
||
|
|
({companyId:sen.companyId,accountCardCode:sen.accountCardCode} = this.cardData);
|
||
|
|
({id:sen.payerCustomerId}=userData);
|
||
|
|
// 数据key的操作
|
||
|
|
if(this.giveData.id===undefined){
|
||
|
|
sen.givePhone = this.giveData.phone
|
||
|
|
delete sen.giveCustomerId
|
||
|
|
}else{
|
||
|
|
sen.giveCustomerId = this.giveData.id
|
||
|
|
delete sen.givePhone
|
||
|
|
}
|
||
|
|
console.log('处理好的对象',sen)
|
||
|
|
accountApi.oilCustomerAccountRecord(sen).then(res=>{
|
||
|
|
if(res.code===20000){
|
||
|
|
this.$refs.popup.close()
|
||
|
|
this.$refs.popupt.open('center')
|
||
|
|
this.time=0
|
||
|
|
accountApi.getUserAccount().then(res=>{
|
||
|
|
// 回显
|
||
|
|
res.data.forEach(itme=>{
|
||
|
|
if(this.cardData.id===itme.id){
|
||
|
|
this.cardData = Object.assign(this.cardData,itme)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
// this.sendData.code = e
|
||
|
|
// this.sendData.companyId = this.cardData.companyId
|
||
|
|
// this.giveData
|
||
|
|
//
|
||
|
|
},
|
||
|
|
//打开弹窗 转number
|
||
|
|
open() {
|
||
|
|
/*
|
||
|
|
this.sendData.occurAmount 交易金额（不得小于定义最小金额）
|
||
|
|
this.giveData 转出对象参数
|
||
|
|
判断 金额不能为空，金额为数字，金额不为为0，金额不能大于余额，转出人不能为空
|
||
|
|
this.errText 报错提示
|
||
|
|
*/
|
||
|
|
console.log( Number(this.sendData.occurAmount))
|
||
|
|
if(this.sendData.occurAmount === ''|| Number(this.sendData.occurAmount)<5){
|
||
|
|
this.errText = '转出金额不能为空或不能低于五元'
|
||
|
|
this.$refs.dialog.open()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(isNaN(Number(this.sendData.occurAmount))){
|
||
|
|
this.errText = '请输入正确金额'
|
||
|
|
this.$refs.dialog.open()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(Number(this.cardData.balance)<Number(this.sendData.occurAmount)){
|
||
|
|
this.errText = '转出金额不能大于卡余额'
|
||
|
|
this.$refs.dialog.open()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(this.giveData == null){
|
||
|
|
this.errText = '转出人不能为空'
|
||
|
|
this.$refs.dialog.open()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(this.seachPhone!==this.giveData.phone){
|
||
|
|
this.errText = '检测到搜索手机号有变动，请先确认转出人'
|
||
|
|
this.$refs.dialog.open()
|
||
|
|
this.searchFn()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
//条件符合转number
|
||
|
|
this.sendData.occurAmount = Number(this.sendData.occurAmount)
|
||
|
|
// 打开发送验证码弹窗
|
||
|
|
this.send()
|
||
|
|
|
||
|
|
},
|
||
|
|
//验证码填写完毕的回调
|
||
|
|
confirm(e) {
|
||
|
|
// this.givefn(e)
|
||
|
|
console.log('confirm',e)
|
||
|
|
if(this.sendData.verifyCodeToken===''){
|
||
|
|
this.verifyCode=''
|
||
|
|
return
|
||
|
|
}else{
|
||
|
|
this.sendData.code = e
|
||
|
|
this.givefn(e)
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
//关闭弹窗
|
||
|
|
close() {
|
||
|
|
this.$refs.popupt.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.poput_tip {
|
||
|
|
width: 85vw;
|
||
|
|
height: 40vh;
|
||
|
|
background-color: #F8F8F8;
|
||
|
|
border-radius: 15rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success_img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container_img {
|
||
|
|
height: 100rpx;
|
||
|
|
width: 100rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 50rpx;
|
||
|
|
margin-bottom: 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.xt__verify-code .xt__input-ground .xt__box-box.data-v-e4b72d00 {
|
||
|
|
height: 100rpx !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.xt__verify-code {
|
||
|
|
width: 90% !important;
|
||
|
|
margin: 0 auto !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup_header {
|
||
|
|
height: 20%;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #FE0505;
|
||
|
|
color: white;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-size: 100% 30vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
color: #666666;
|
||
|
|
font-size: 23rpx;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oliout_butten {
|
||
|
|
width: 90vw;
|
||
|
|
margin: 0 auto;
|
||
|
|
background-color: #FE0505;
|
||
|
|
margin-top: 60rpx;
|
||
|
|
color: #F0F0F0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card_input {
|
||
|
|
width: 80%;
|
||
|
|
height: 80rpx;
|
||
|
|
font-size: 40rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.company_user {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
background-color: #FF6D6E;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.company_phone {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.company {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oliout .bg-main-oil {
|
||
|
|
background-color: #FE0505 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name_card {
|
||
|
|
display: flex;
|
||
|
|
height: 250rpx;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15rpx;
|
||
|
|
border-bottom: 1px solid #F0F0F0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tiao {
|
||
|
|
height: 5px;
|
||
|
|
width: 100%;
|
||
|
|
background: -webkit-linear-gradient(left, rgb(254, 5, 5, 1), rgb(254, 5, 5, .2), rgb(254, 5, 5, 0));
|
||
|
|
}
|
||
|
|
|
||
|
|
.zc {
|
||
|
|
width: max-content;
|
||
|
|
/* border-image: linear-gradient(to left, rgb(254,5,5,0),rgb(254,5,5,.2),rgb(254,5,5,1)) 1; */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.newcard_title {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card_tiop {
|
||
|
|
border-bottom: 1px solid #F0F0F0;
|
||
|
|
padding: 20rpx 15rpx;
|
||
|
|
color: #999999;
|
||
|
|
font-size: 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card_body {
|
||
|
|
width: 90vw;
|
||
|
|
margin: 30rpx auto;
|
||
|
|
border: 1px solid #F0F0F0;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
box-shadow: 0 0 5px 3px #F0F0F0;
|
||
|
|
padding: 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.new_input {
|
||
|
|
width: 80%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
border: 1px solid #f0f0f0;
|
||
|
|
padding: 15rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.new_card_flexone {
|
||
|
|
width: 100%;
|
||
|
|
height: max-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.new_card {
|
||
|
|
width: 90vw;
|
||
|
|
height: 20vh;
|
||
|
|
position: relative;
|
||
|
|
background-color: #FE0505;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 50rpx;
|
||
|
|
z-index: 99;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 40rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.olibgclass {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
background-color: #FE0505;
|
||
|
|
width: 100vw;
|
||
|
|
height: 12vh;
|
||
|
|
border-radius: 0 0 35% 35%;
|
||
|
|
}
|
||
|
|
</style>
|