741 lines
18 KiB
Vue
741 lines
18 KiB
Vue
|
<template>
|
|||
|
<view class="content">
|
|||
|
<view class="container">
|
|||
|
<headers :titles="titles"><u-icon name="arrow-left" color="#fff" size="22"></u-icon></headers>
|
|||
|
<view class="input-box">
|
|||
|
<view style="margin-right: 10px;">总收款金额</view>
|
|||
|
<view class="">{{AmountCollected}}</view>
|
|||
|
<!-- <input type="number" /> -->
|
|||
|
|
|||
|
</view>
|
|||
|
<view class="input-box">
|
|||
|
<view style="margin-right: 10px;">优惠后收款金额</view>
|
|||
|
<view class="">{{paymentAmount}}</view>
|
|||
|
<!-- <input type="number" /> -->
|
|||
|
</view>
|
|||
|
<view class="input-box">
|
|||
|
<view style="margin-right: 10px;">优惠金额</view>
|
|||
|
<view class="">{{DiscountAmount}}</view>
|
|||
|
<!-- <input type="number" /> -->
|
|||
|
|
|||
|
</view>
|
|||
|
<view class="input-box">
|
|||
|
<view style="margin-right: 10px;">储值卡消费金额</view>
|
|||
|
<view class="">{{balanceRedece}}</view>
|
|||
|
<!-- <input type="number" /> -->
|
|||
|
|
|||
|
</view>
|
|||
|
<!-- <view class="title_">选择油号</view>
|
|||
|
<view class="warp-box">
|
|||
|
<view class="w-box" :class="{ 'acv' : oilIndex == index }" @click="getoilIndex(index)"
|
|||
|
v-for="(item,index) in oilList" :key="index">
|
|||
|
{{item}}
|
|||
|
</view>
|
|||
|
|
|||
|
</view> -->
|
|||
|
<view class="title_">选择油枪</view>
|
|||
|
<view class="warp-box">
|
|||
|
<view class="w-box" :class="{ 'acv' : spearIndex == index }" v-for="(item,index) in spearList"
|
|||
|
:key="index" @click="getspearIndex(index,item)">
|
|||
|
{{item.gunName}}
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view style="width: 100%; height: 500px; "></view>
|
|||
|
<view class="bai-kuang">
|
|||
|
<view class="kuang-top">
|
|||
|
<view class="w-shi" @click="show = true">添加备注</view>
|
|||
|
<view style="color: #E8E8E8;"> | </view>
|
|||
|
<view class="w-shi" @click="gosearchVip()">{{userInfo ? userInfo.mobile : '搜索会员'}}</view>
|
|||
|
</view>
|
|||
|
<!-- 键盘区域 -->
|
|||
|
<view class="num-box">
|
|||
|
|
|||
|
<view class="k-box" v-for="(item,index) in keyboardList" :key="index" @click="KeyboardLogic(item)">
|
|||
|
<!-- pd- -->
|
|||
|
<view class="CentralLogic" v-if="item.type == 'num' ">
|
|||
|
{{item.value}}
|
|||
|
</view>
|
|||
|
<view class="Centralimg" v-if="item.type == 'img' ">
|
|||
|
<view class="icon-box">
|
|||
|
<image src="/static/imgs/smzf.png" v-if="item.value == 'smzf' " @click="scanQrcode()">
|
|||
|
</image>
|
|||
|
<image src="/static/imgs/skzf.png" v-if="item.value == 'skzf' " @click="swipeCard()">
|
|||
|
</image>
|
|||
|
<image src="/static/imgs/hyzf.png" v-if="item.value == 'hyzf' "
|
|||
|
@click="scanAppletQrCode()"></image>
|
|||
|
<image src="/static/imgs/xjzf.png" v-if="item.value == 'xjzf' " @click="cashPay()">
|
|||
|
</image>
|
|||
|
<image src="/static/imgs/scjian.png" style="height: 30px;" v-if="!item.value"></image>
|
|||
|
</view>
|
|||
|
<view class="icon-size" v-if="item.value == 'smzf' " @click="scanQrcode()">扫码支付</view>
|
|||
|
<view class="icon-size" v-if="item.value == 'skzf' " @click="swipeCard()">刷卡支付</view>
|
|||
|
<view class="icon-size" v-if="item.value == 'hyzf' " @click="scanAppletQrCode()">会员支付</view>
|
|||
|
<view class="icon-size" v-if="item.value == 'xjzf' " @click="cashPay()">现金支付</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
</view>
|
|||
|
<!-- 垫子 -->
|
|||
|
<view style="width: 100%; height: 25px; "></view>
|
|||
|
|
|||
|
</view>
|
|||
|
<u-popup :show="show" mode="bottom" :round="10" @close="close">
|
|||
|
<view class="bottom_box">
|
|||
|
<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
|
|||
|
<view
|
|||
|
style="width: 100%; display: flex;align-items: center;justify-content: space-around;margin-top: 20px; ">
|
|||
|
<view class="anniuq" @click="submitRemark()">确定</view>
|
|||
|
<view class="anniux" @click="close">取消</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</u-popup>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import request from "../../utils/request";
|
|||
|
import headers from '../../components/header/headers.vue'
|
|||
|
|
|||
|
export default {
|
|||
|
data() {
|
|||
|
return {
|
|||
|
value1: '',
|
|||
|
show: false,
|
|||
|
userId: "",
|
|||
|
userInfo: "",
|
|||
|
AmountCollected: "",
|
|||
|
paymentAmount: "",
|
|||
|
DiscountAmount: 0,
|
|||
|
balance: 0,
|
|||
|
balanceRedece: 0,
|
|||
|
// 是否使用囤油卡
|
|||
|
isOilStorageCard: false,
|
|||
|
authCode: "",
|
|||
|
oilName: "",
|
|||
|
tankId: "",
|
|||
|
oilPrice: "",
|
|||
|
oilGunNum: "",
|
|||
|
oilCardAmount: 0,
|
|||
|
levelAmount: 0,
|
|||
|
activeAmount: 0,
|
|||
|
// 支付订单信息
|
|||
|
oilOrder: {},
|
|||
|
titles: "收款",
|
|||
|
oilList: [
|
|||
|
"92#", "95#", "98#"
|
|||
|
],
|
|||
|
oilIndex: 0,
|
|||
|
spearList: [
|
|||
|
"1号枪", "2号枪", "3号枪"
|
|||
|
],
|
|||
|
spearIndex: 0,
|
|||
|
orderNo: "",
|
|||
|
preferentialData: {},
|
|||
|
// 键盘
|
|||
|
keyboardList: [{
|
|||
|
value: '1',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '2',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '3',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: 'smzf',
|
|||
|
type: 'img'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '4',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '5',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '6',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: 'skzf',
|
|||
|
type: 'img'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '7',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '8',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '9',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: 'hyzf',
|
|||
|
type: 'img'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '0',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: '.',
|
|||
|
type: 'num'
|
|||
|
},
|
|||
|
{
|
|||
|
value: null,
|
|||
|
type: 'img'
|
|||
|
},
|
|||
|
{
|
|||
|
value: 'xjzf',
|
|||
|
type: 'img'
|
|||
|
},
|
|||
|
]
|
|||
|
|
|||
|
}
|
|||
|
},
|
|||
|
onLoad(e) {
|
|||
|
if (e.userId) {
|
|||
|
this.userId = e.userId
|
|||
|
this.AmountCollected = e.AmountCollected
|
|||
|
this.getUser();
|
|||
|
}
|
|||
|
},
|
|||
|
onShow() {
|
|||
|
// this.actList = ["1", "1", "1", "1", "1", ]
|
|||
|
// this.status = "nomore" 底部刷新结束
|
|||
|
this.getOilGun()
|
|||
|
},
|
|||
|
onPullDownRefresh() {
|
|||
|
console.log("刷新");
|
|||
|
uni.stopPullDownRefresh()
|
|||
|
},
|
|||
|
onReachBottom() {
|
|||
|
// this.show = true
|
|||
|
setTimeout(() => {
|
|||
|
console.log("加载执行");
|
|||
|
}, 2000)
|
|||
|
},
|
|||
|
components: {
|
|||
|
headers
|
|||
|
},
|
|||
|
methods: {
|
|||
|
// 确定备注
|
|||
|
submitRemark() {
|
|||
|
this.show = false
|
|||
|
this.oilOrder.remark = this.value1
|
|||
|
},
|
|||
|
close() {
|
|||
|
this.show = false
|
|||
|
},
|
|||
|
|
|||
|
// 获取优惠信息
|
|||
|
getPaymentPreferential() {
|
|||
|
if (!this.AmountCollected || !this.userInfo) {
|
|||
|
return;
|
|||
|
}
|
|||
|
this.DiscountAmount = 0;
|
|||
|
let type = 0;
|
|||
|
if (this.balanceRedece == 0) {
|
|||
|
type = 2
|
|||
|
} else {
|
|||
|
type = 0
|
|||
|
}
|
|||
|
let map = {
|
|||
|
//支付类型 0:储值卡 1:囤油卡
|
|||
|
type: type,
|
|||
|
//支付金额
|
|||
|
amount: this.AmountCollected,
|
|||
|
//可用油品Id
|
|||
|
oilId: this.oilName,
|
|||
|
//店铺id
|
|||
|
storeId: uni.getStorageSync("storeId"),
|
|||
|
//会员等级
|
|||
|
mtUserLevel: this.userInfo.gradeId,
|
|||
|
//用户id
|
|||
|
userId: this.userInfo.id,
|
|||
|
}
|
|||
|
request({
|
|||
|
url: "business/marketingActivity/activeExchange/getPaymentActive",
|
|||
|
method: 'get',
|
|||
|
params: map,
|
|||
|
}).then((res) => {
|
|||
|
this.preferentialData = res.data
|
|||
|
if (res.data.memberFavorableAmount) {
|
|||
|
this.DiscountAmount += res.data.memberFavorableAmount
|
|||
|
this.oilOrder.levelAmount = res.data.memberFavorableAmount
|
|||
|
}
|
|||
|
if (res.data.cardFavorableAmount) {
|
|||
|
this.DiscountAmount += res.data.cardFavorableAmount
|
|||
|
}
|
|||
|
if (res.data.activeFavorableAmount) {
|
|||
|
this.DiscountAmount += res.data.activeFavorableAmount
|
|||
|
this.oilOrder.activeAmount = res.data.activeFavorableAmount
|
|||
|
}
|
|||
|
this.countAmount()
|
|||
|
})
|
|||
|
},
|
|||
|
// 获取用户信息
|
|||
|
getUser() {
|
|||
|
request({
|
|||
|
url: '/business/userManager/user/' + this.userId,
|
|||
|
method: 'get',
|
|||
|
}).then((res) => {
|
|||
|
this.userInfo = res.data
|
|||
|
this.balance = res.data.cardBalance
|
|||
|
this.getPaymentPreferential()
|
|||
|
})
|
|||
|
},
|
|||
|
// 计算收款金额
|
|||
|
countAmount() {
|
|||
|
if (this.balance >= (this.AmountCollected - this.DiscountAmount - this.oilCardAmount)) {
|
|||
|
this.balanceRedece = this.AmountCollected - this.DiscountAmount - this.oilCardAmount
|
|||
|
this.paymentAmount = 0
|
|||
|
} else {
|
|||
|
this.balanceRedece = this.balance
|
|||
|
this.paymentAmount = (this.AmountCollected - this.DiscountAmount - this.balance - this.oilCardAmount)
|
|||
|
.toFixed(2)
|
|||
|
}
|
|||
|
},
|
|||
|
// 二维码
|
|||
|
scanQrcode() {
|
|||
|
if (!this.AmountCollected) {
|
|||
|
uni.showToast({
|
|||
|
title: "请先输入收款金额",
|
|||
|
icon: "none"
|
|||
|
})
|
|||
|
return;
|
|||
|
}
|
|||
|
let _this = this
|
|||
|
uni.scanCode({
|
|||
|
onlyFromCamera: true,
|
|||
|
success: (res) => {
|
|||
|
console.log('扫描二维码成功,结果:' + JSON.stringify(res) + res.result);
|
|||
|
_this.authCode = res.result
|
|||
|
_this.payMent()
|
|||
|
},
|
|||
|
error: (res) => {
|
|||
|
console.log('扫描二维码出现错误')
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
// 扫描小程序会员码支付
|
|||
|
scanAppletQrCode() {
|
|||
|
if (!this.AmountCollected) {
|
|||
|
uni.showToast({
|
|||
|
title: "请先输入收款金额",
|
|||
|
icon: "none"
|
|||
|
})
|
|||
|
return;
|
|||
|
}
|
|||
|
this.oilOrder.payType = "APPLET_CODE"
|
|||
|
this.oilOrder.orderNo = this.orderNo
|
|||
|
this.oilOrder.orderAmount = this.AmountCollected
|
|||
|
this.oilOrder.payAmount = this.paymentAmount
|
|||
|
this.oilOrder.discountAmount = this.DiscountAmount
|
|||
|
this.oilOrder.balanceAmount = this.balanceRedece
|
|||
|
this.oilOrder.isOilStorageCard = this.isOilStorageCard
|
|||
|
this.oilOrder.isUseChildCard = this.isUseChildCard
|
|||
|
this.oilOrder.activeId = this.preferentialData.activeId
|
|||
|
this.oilOrder.cardFavorableId = this.preferentialData.cardFavorableId
|
|||
|
this.oilOrder.recordId = this.preferentialData.recordId
|
|||
|
this.oilOrder.type = this.preferentialData.type
|
|||
|
this.oilOrder.balanceAmountSale = this.balanceRedece
|
|||
|
this.oilOrder.levelAmount = this.levelAmount
|
|||
|
this.oilOrder.activeAmount = this.activeAmount
|
|||
|
this.oilOrder.oils = this.oilName
|
|||
|
this.oilOrder.tankId = this.tankId
|
|||
|
this.oilOrder.oilPrice = this.oilPrice
|
|||
|
this.oilOrder.oilCardAmount1 = this.oilCardAmount
|
|||
|
this.oilOrder.userId = this.userInfo.id
|
|||
|
this.oilOrder.oilGunNum = this.oilGunNum
|
|||
|
this.oilOrder.payUser = this.userInfo.mobile
|
|||
|
let _this = this
|
|||
|
uni.scanCode({
|
|||
|
onlyFromCamera: true,
|
|||
|
success: (res) => {
|
|||
|
console.log('扫描二维码成功,结果:' + JSON.stringify(res) + res.result);
|
|||
|
_this.authCode = res.result
|
|||
|
_this.oilOrder.authCode = _this.authCode
|
|||
|
request({
|
|||
|
url: '/business/oilOrder/scanAppletQrCodePos',
|
|||
|
method: 'post',
|
|||
|
data: _this.oilOrder
|
|||
|
}).then((resp) => {
|
|||
|
if (resp.data.success == 'success') {
|
|||
|
_this.reset()
|
|||
|
// uni.showToast({
|
|||
|
// title: "支付成功",
|
|||
|
// icon: "success"
|
|||
|
// })
|
|||
|
uni.navigateTo({
|
|||
|
url: "/pagesHome/PaymentResults/PaymentResults?orderNo=" +
|
|||
|
resp.data.orderNo
|
|||
|
})
|
|||
|
} else {
|
|||
|
uni.showToast({
|
|||
|
title: resp.data.error,
|
|||
|
icon: "none"
|
|||
|
})
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
error: (res) => {
|
|||
|
console.log('扫描二维码出现错误')
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
// 刷卡支付
|
|||
|
swipeCard() {
|
|||
|
uni.showToast({
|
|||
|
title: "暂未开发",
|
|||
|
icon: "error"
|
|||
|
})
|
|||
|
},
|
|||
|
// 现金支付
|
|||
|
cashPay() {
|
|||
|
if (!this.AmountCollected) {
|
|||
|
uni.showToast({
|
|||
|
title: "请先输入收款金额",
|
|||
|
icon: "none"
|
|||
|
})
|
|||
|
return;
|
|||
|
}
|
|||
|
this.oilOrder.payType = "CASH"
|
|||
|
this.payMent()
|
|||
|
},
|
|||
|
getOilCardAmount() {
|
|||
|
if (!this.userInfo) {
|
|||
|
return;
|
|||
|
}
|
|||
|
request({
|
|||
|
url: '/business/marketingActivity/cardFuelRecord/getRecordByUserId',
|
|||
|
method: 'get',
|
|||
|
params: {
|
|||
|
mtUserId: this.userInfo.id
|
|||
|
}
|
|||
|
}).then((res) => {
|
|||
|
res.data.forEach(item => {
|
|||
|
if (item.oilType == this.oilName) {
|
|||
|
let liters = this.AmountCollected / this.oilPrice
|
|||
|
this.oilCardAmount = item.lockupPrice * liters
|
|||
|
}
|
|||
|
})
|
|||
|
})
|
|||
|
},
|
|||
|
// 调用支付接口
|
|||
|
payMent() {
|
|||
|
this.oilOrder.orderNo = this.orderNo
|
|||
|
this.oilOrder.orderAmount = this.AmountCollected
|
|||
|
this.oilOrder.payAmount = this.paymentAmount
|
|||
|
this.oilOrder.discountAmount = this.DiscountAmount
|
|||
|
this.oilOrder.balanceAmount = this.balanceRedece
|
|||
|
this.oilOrder.isOilStorageCard = this.isOilStorageCard
|
|||
|
this.oilOrder.isUseChildCard = this.isUseChildCard
|
|||
|
this.oilOrder.activeId = this.preferentialData.activeId
|
|||
|
this.oilOrder.cardFavorableId = this.preferentialData.cardFavorableId
|
|||
|
this.oilOrder.recordId = this.preferentialData.recordId
|
|||
|
this.oilOrder.type = this.preferentialData.type
|
|||
|
this.oilOrder.balanceAmountSale = this.balanceRedece
|
|||
|
this.oilOrder.levelAmount = this.levelAmount
|
|||
|
this.oilOrder.activeAmount = this.activeAmount
|
|||
|
this.oilOrder.authCode = this.authCode
|
|||
|
this.oilOrder.oils = this.oilName
|
|||
|
this.oilOrder.tankId = this.tankId
|
|||
|
this.oilOrder.oilPrice = this.oilPrice
|
|||
|
this.oilOrder.oilCardAmount1 = this.oilCardAmount
|
|||
|
this.oilOrder.oilGunNum = this.oilGunNum
|
|||
|
if (this.userInfo) {
|
|||
|
this.oilOrder.userId = this.userInfo.id
|
|||
|
this.oilOrder.payUser = this.userInfo.mobile
|
|||
|
}
|
|||
|
|
|||
|
request({
|
|||
|
url: "business/oilOrder/addOrderPos",
|
|||
|
method: 'post',
|
|||
|
data: this.oilOrder
|
|||
|
}).then((res) => {
|
|||
|
this.orderNo = res.data.orderNo
|
|||
|
if (res.data.code == 1) {
|
|||
|
this.reset()
|
|||
|
// uni.showToast({
|
|||
|
// title: "支付成功",
|
|||
|
// icon: "success"
|
|||
|
// })
|
|||
|
|
|||
|
uni.navigateTo({
|
|||
|
url: "/pagesHome/PaymentResults/PaymentResults?orderNo=" + this.orderNo
|
|||
|
})
|
|||
|
} else if (res.data.code == 2) {
|
|||
|
uni.showToast({
|
|||
|
title: "请先配置商户号",
|
|||
|
icon: "none"
|
|||
|
})
|
|||
|
} else {
|
|||
|
uni.showToast({
|
|||
|
title: "支付失败,请联系管理员",
|
|||
|
icon: "none"
|
|||
|
})
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
// 重置
|
|||
|
reset() {
|
|||
|
this.userId = "";
|
|||
|
this.userInfo = "";
|
|||
|
this.AmountCollected = "";
|
|||
|
this.DiscountAmount = 0;
|
|||
|
this.balanceRedece = 0;
|
|||
|
this.isOilStorageCard = false;
|
|||
|
this.balanceRedece = 0;
|
|||
|
this.authCode = "";
|
|||
|
this.oilName = "";
|
|||
|
this.tankId = "";
|
|||
|
this.oilPrice = "";
|
|||
|
this.oilCardAmount = 0;
|
|||
|
this.paymentAmount = 0;
|
|||
|
this.levelAmount = 0;
|
|||
|
this.activeAmount = 0;
|
|||
|
this.getOilGun()
|
|||
|
},
|
|||
|
// 获取油枪信息
|
|||
|
getOilGun() {
|
|||
|
request({
|
|||
|
url: 'business/petrolStationManagement/oilGun/queryOilGunList',
|
|||
|
method: 'get',
|
|||
|
}).then((res) => {
|
|||
|
this.spearList = res.data
|
|||
|
if (this.spearList.length > 0) {
|
|||
|
this.oilGunNum = this.spearList[0].id
|
|||
|
this.oilName = this.spearList[0].oilName
|
|||
|
this.tankId = this.spearList[0].tankId
|
|||
|
this.oilPrice = this.spearList[0].oilPrice
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
// 跳会员
|
|||
|
gosearchVip() {
|
|||
|
uni.navigateTo({
|
|||
|
url: '/pagesHome/searchVip/searchVip?AmountCollected=' + this.AmountCollected
|
|||
|
})
|
|||
|
},
|
|||
|
// 键盘方法
|
|||
|
KeyboardLogic(data) {
|
|||
|
// console.log(data);
|
|||
|
if (data.type == 'num') {
|
|||
|
this.AmountCollected = this.AmountCollected + data.value
|
|||
|
if (!this.userInfo) this.paymentAmount = this.AmountCollected
|
|||
|
this.getPaymentPreferential()
|
|||
|
}
|
|||
|
if (data.type == 'img') {
|
|||
|
if (!data.value) {
|
|||
|
this.AmountCollected = this.AmountCollected.substring(0, this.AmountCollected.length - 1);
|
|||
|
}
|
|||
|
// if (data.value == 'skzf') {
|
|||
|
// uni.navigateTo({
|
|||
|
// url: '/pagesHome/CardPayment/CardPayment'
|
|||
|
// })
|
|||
|
|
|||
|
// }
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
getoilIndex(num) {
|
|||
|
this.oilIndex = num
|
|||
|
},
|
|||
|
getspearIndex(num, data) {
|
|||
|
this.spearIndex = num
|
|||
|
this.oilGunNum = data.id
|
|||
|
this.oilName = data.oilName
|
|||
|
this.tankId = data.tankId
|
|||
|
this.oilPrice = data.oilPrice
|
|||
|
this.getPaymentPreferential()
|
|||
|
},
|
|||
|
goback() {
|
|||
|
uni.navigateBack()
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style scoped lang="scss">
|
|||
|
.content {
|
|||
|
background: #0864e9;
|
|||
|
// background: linear-gradient(180deg, #B2D2FC 0%, #B2D2FC 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
|
|||
|
height: 100vh;
|
|||
|
}
|
|||
|
|
|||
|
.container {
|
|||
|
width: 100%;
|
|||
|
background: #0864e9;
|
|||
|
box-sizing: border-box;
|
|||
|
padding-top: 88px;
|
|||
|
}
|
|||
|
|
|||
|
.input-box {
|
|||
|
width: 95%;
|
|||
|
margin: 10px auto;
|
|||
|
border-bottom: 1px solid #fff;
|
|||
|
box-sizing: border-box;
|
|||
|
padding: 10px 0px;
|
|||
|
font-size: 20px;
|
|||
|
font-weight: bold;
|
|||
|
color: #fff;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
}
|
|||
|
|
|||
|
.title_ {
|
|||
|
font-weight: bold;
|
|||
|
font-size: 16px;
|
|||
|
color: #FFFFFF;
|
|||
|
width: 95%;
|
|||
|
margin: 10px auto;
|
|||
|
}
|
|||
|
|
|||
|
.warp-box {
|
|||
|
width: 95%;
|
|||
|
margin: 10px auto;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
flex-wrap: wrap;
|
|||
|
}
|
|||
|
|
|||
|
.w-box {
|
|||
|
width: 60px;
|
|||
|
height: 32px;
|
|||
|
background: #FFFFFF;
|
|||
|
border-radius: 6px 6px 6px 6px;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
font-weight: 500;
|
|||
|
font-size: 14px;
|
|||
|
color: #333333;
|
|||
|
margin-right: 10px;
|
|||
|
}
|
|||
|
|
|||
|
.acv {
|
|||
|
background: #E8F5FF !important;
|
|||
|
color: #0864E9 !important;
|
|||
|
}
|
|||
|
|
|||
|
.s-h-box {
|
|||
|
width: 100%;
|
|||
|
border-top: 1px solid #E8E8E8;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: space-between;
|
|||
|
}
|
|||
|
|
|||
|
.bai-kuang {
|
|||
|
width: 100%;
|
|||
|
position: fixed;
|
|||
|
bottom: 0px;
|
|||
|
left: 0px;
|
|||
|
background: #fff;
|
|||
|
border-radius: 18px 18px 0px 0px;
|
|||
|
overflow: hidden;
|
|||
|
}
|
|||
|
|
|||
|
.num-box {
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
flex-wrap: wrap;
|
|||
|
justify-content: space-between;
|
|||
|
}
|
|||
|
|
|||
|
.k-box {
|
|||
|
width: 24.5%;
|
|||
|
height: 80px;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
|
|||
|
border-right: 1px solid #E8E8E8;
|
|||
|
border-top: 1px solid #E8E8E8;
|
|||
|
}
|
|||
|
|
|||
|
.CentralLogic {
|
|||
|
font-weight: bold;
|
|||
|
font-size: 30px;
|
|||
|
color: #333333;
|
|||
|
}
|
|||
|
|
|||
|
.Centralimg {}
|
|||
|
|
|||
|
.icon-box {
|
|||
|
width: 40px;
|
|||
|
height: 40px;
|
|||
|
margin: 5px auto;
|
|||
|
|
|||
|
image {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.icon-size {
|
|||
|
font-size: 14px;
|
|||
|
color: #333333;
|
|||
|
text-align: center;
|
|||
|
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.kuang-top {
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: space-between;
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.w-shi {
|
|||
|
width: 50%;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
color: #0864E9;
|
|||
|
box-sizing: border-box;
|
|||
|
padding: 15px;
|
|||
|
}
|
|||
|
|
|||
|
.bottom_box {
|
|||
|
width: 100%;
|
|||
|
background: #fff;
|
|||
|
box-sizing: border-box;
|
|||
|
padding: 15px;
|
|||
|
border-radius: 10px 10px 0px 0px;
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.anniuq {
|
|||
|
width: 100px;
|
|||
|
height: 35px;
|
|||
|
background: #0864E9;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
color: #fff;
|
|||
|
border-radius: 50px;
|
|||
|
}
|
|||
|
|
|||
|
.anniux {
|
|||
|
width: 100px;
|
|||
|
height: 35px;
|
|||
|
background: #FD504E;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
color: #fff;
|
|||
|
border-radius: 50px;
|
|||
|
}
|
|||
|
</style>
|