nzhbsr/pages/heyue/heyue.vue

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view class="vheight"></view>
		<!-- #endif -->
		<view class="usdtTitle flex">
			<view class="left flex">
				<image @click="alertShow = true" class="img margin-r-10" src="../../static/icon/hy02.png" mode="widthFix"></image>
				<view class="margin-r-10">{{ listOBj[actionList].name }}</view>
				<view :class="{ 'font-color-green': listOBj[actionList].bool, 'font-color-red': !listOBj[actionList].bool }">{{ listOBj[actionList].dcf }}</view>
			</view>
			<view class="right"><image class="img" src="../../static/icon/hy01.png" mode="widthFix"></image></view>
		</view>
		<view class="box  flex padding-t-20 padding-b-30">
			<view class="item" style="width: 65%;">
				<!-- <view class="itemName flex">
					<view class="itemMinName">
						当前價格
					</view>
					<view class="itemMinName">
						開盤價
					</view>
					<view class="itemMinName">
						最高價
					</view>
					<view class="itemMinName">
						最低價
					</view>
					<view class="itemMinName">
						成交數量
					</view>
				</view>
				<view class="itemList">
					<view class="list flex font-color-green">
						<view class="li top">
							{{listOBj[actionList].last}}
						</view>
						<view class="li top">
							{{listOBj[actionList].sodUtc0}}
						</view>
						<view class="li top">
							{{listOBj[actionList].high24h}}
						</view>
						<view class="li top">
							{{listOBj[actionList].low24h}}
						</view>
						<view class="li top">
							{{listOBj[actionList].volCcy24h|actionMoney}}
						</view>
					</view>
				</view> -->
				<view class="itemTitle margin-b-20">{{ $t('hy.jyfx') }}</view>
				<view class="buttomBox flex">
					<view @click="typeIndex = 1" class="buttom " :class="{ action: typeIndex == 1 }">{{ $t('hy.sz') }}</view>
					<view @click="typeIndex = 2" class="buttom " :class="{ action: typeIndex == 2, 'bg-danger': typeIndex == 2 }">{{ $t('hy.xd') }}</view>
				</view>
				<view class="tabType flex ">
					<view class="tab" @click="jyType = 1" :class="{ action: jyType == 1 }">{{ $t('hy.xjwt') }}</view>
					<view class="tab" @click="jyType = 2" :class="{ action: jyType == 2 }">{{ $t('hy.sjwt') }}</view>
				</view>
				<view class="inputBox margin-b-20 flex" v-if="jyType == 1">
					<input v-model="xzMoney" class="input" :placeholder="$t('hy.jg')" type="number" />
					<view @click="xzMoney = listOBj[actionList].last" class="buttomZd font-color-yellow">{{ $t('hy.djhq') }}</view>
				</view>
				<view class="itemTitle  margin-b-20">{{ $t('hy.jygs') }}</view>
				<view class="inputBox flex margin-b-20">
					<input v-model="payNum" class="input" :placeholder="$t('hy.jygs')" type="number" />
					<view class="rightInputBox flex">
						<image @click="payNum > 0 ? payNum-- : false" class="img" src="../../static/icon/hy04.png" mode="scaleToFill"></image>
						<view class="jg"></view>
						<image @click="payNum++" class="img" src="../../static/icon/hy03.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="itemTitle margin-b-20">{{ $t('hy.ggbs') }}</view>
				<view class="itemLeftList flex margin-b-20">
					<view class="ll" @click="changeGG(ind, ls)" :class="{ action: ind == ggIndex }" v-for="(ls, ind) in ggList">{{ ls.num }}</view>
				</view>
				<view class="inputBox flex margin-b-20"><input v-model="ggBs" class="input" :placeholder="$t('hy.qsrggbl')" type="number" /></view>
				<view class="flex margin-b-20">
					<view class="itemTitle">{{ $t('hy.zsj') }}</view>
					<view class="inputBox flex"><input v-model="zsMoney" :placeholder="$t('hy.zsj')" class="input" type="number" /></view>
				</view>
				<view class="flex margin-b-20">
					<view class="itemTitle">{{ $t('hy.zyj') }}</view>
					<view class="inputBox flex"><input v-model="zyMoney" :placeholder="$t('hy.zyj')" class="input" type="number" /></view>
				</view>
				<view class="flex margin-b-20">
					<view class="itemTitle">{{ $t('hy.bzj') }}</view>
					<view class="itemTitle">{{ bzjMoney }}</view>
				</view>
				<view class="flex margin-b-20">
					<view class="itemTitle">{{ $t('hy.kyhyye') }}</view>
					<view class="itemTitle">{{ userInfo.money }}</view>
				</view>
				<view class="flex margin-b-20">
					<view class="itemTitle">{{ $t('hy.sxf') }}</view>
					<view class="itemTitle">{{ sxfMoney }}</view>
				</view>
				<view class="buttomSubmit" :class="{ 'bg-success': typeIndex == 1, 'bg-danger': typeIndex == 2 }" @click="UpOrderHandle()">
					{{ typeIndex == 1 ? $t('hy.zd') : $t('hy.zk') }}
				</view>
			</view>
			<view class="right-wrap">
				<view class="line flex">
					<view class="">{{ $t('hy.jg') }}</view>
					<view class="">{{ $t('hy.sl') }}</view>
				</view>
				<!-- 買入 -->
				<view class="" style="height: 400rpx;">
					<view class="line flex" v-for="item in gmList" style="color: #0ecb81;">
						<view class="">{{ item.pri }}</view>
						<view class="">{{ item.num }}</view>
					</view>
				</view>

				<!-- 當前價格 -->
				<view class="new-price">{{ listOBj[actionList].last }}</view>
				<!-- 賣出 -->
				<view class="" style="height: 400rpx;">
					<view class="line flex" v-for="item in mcList" style="color: #f7465c;">
						<view class="">{{ item.pri }}</view>
						<view class="">{{ item.num }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box margin-t-30 padding-t-30 padding-b-30">
			<view class="flex listTitleBox">
				<view class="leftBottom flex">
					<view @click="ddTypeChage(0)" class="titleType margin-r-30" :class="{ action: ddType == 0 }">{{ $t('hy.xjwt') }}</view>
					<view @click="ddTypeChage(1)" class="titleType" :class="{ action: ddType == 1 }">{{ $t('hy.zc') }}</view>
				</view>
				<view class="rightBottom flex" @click="navto('/pages/heyue/tradlist')">
					<image class="img" src="../../static/icon/hy02.png" mode="widthFix"></image>
					<view class="more">{{ $t('hy.qbdd') }}</view>
				</view>
			</view>
			<view v-for="(item, ind) in loadData[ddType].list" class="usdtList padding-t-30 padding-b-30">
				<view class="flex">
					<view class="name">
						<text v-if="item.direction == 1" class="font-color-green">{{ $t('hy.zd') }}</text>
						<text v-if="item.direction == 2" class="font-color-red">{{ $t('hy.zk') }}</text>
						<text>{{ item.symbol }}</text>
						<text
							v-if="ddType == 1 && item.direction == 2"
							:class="{
								'font-color-green': +((item.price - listOBj[item.symbol.replace('/', '-')].last) * item.num) >= 0,
								'font-color-red': +((item.price - listOBj[item.symbol.replace('/', '-')].last) * item.num) < 0
							}"
						>
							<!-- {{+item.profit}} -->
							{{ ((item.price - listOBj[item.symbol.replace('/', '-')].last) * item.num).toFixed(2) || '' }}
						</text>
						<text
							v-if="ddType == 1 && item.direction == 1"
							:class="{
								'font-color-green': +((listOBj[item.symbol.replace('/', '-')].last - item.price) * item.num) >= 0,
								'font-color-red': +((listOBj[item.symbol.replace('/', '-')].last - item.price) * item.num) < 0
							}"
						>
							<!-- {{+item.profit}} -->
							{{ ((listOBj[item.symbol.replace('/', '-')].last - item.price) * item.num).toFixed(2) || '' }}
						</text>
					</view>
					<view @click="clearorder(item)" v-if="ddType == 0" class="usdtListButtom">{{ $t('hy.cx') }}</view>
					<view @click="closeorder(item)" v-if="ddType == 1" class="usdtListButtom">{{ $t('hy.pc') }}</view>
				</view>
				<view class="tip ">
					<text v-if="item.direction == 1">{{ $t('hy.wtsj') }}：{{ item.wttime }}</text>
					<text v-if="item.direction == 2">{{ $t('hy.kcsj') }}：{{ item.addtime }}</text>
				</view>
				<view class="flex" style="flex-wrap: wrap;">
					<view v-if="ddType == 0" class="tipList">
						<view class="nameTip">{{ $t('hy.wtjg') }}</view>
						<view class="text">{{ item.wt_price }}</view>
					</view>
					<view v-if="ddType == 1" class="tipList">
						<view class="nameTip">{{ $t('hy.kcdj') }}</view>
						<view class="text">{{ item.price }}</view>
					</view>

					<view class="tipList">
						<view class="nameTip">{{ $t('hy.bzj') }}</view>
						<view class="text">{{ item.bond }}</view>
					</view>
					<view class="tipList">
						<view class="nameTip">{{ $t('hy.jygs') }}</view>
						<view class="text">{{ item.num }}</view>
					</view>
					<view class="tipList">
						<view class="nameTip">{{ $t('hy.ggbs') }}</view>
						<view class="text">{{ item.ggan }}</view>
					</view>
					<template>
						<view class="tipList">
							<view class="nameTip">{{ $t('hy.zydj') }}</view>
							<view class="text">{{ item.zyprice }}</view>
						</view>
						<view class="tipList">
							<view class="nameTip">{{ $t('hy.zkdj') }}</view>
							<view class="text">{{ item.zsprice }}</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="alertBox" v-show="alertShow">
			<!-- #ifdef APP-PLUS -->
			<view class="vheight"></view>
			<!-- #endif -->
			<view class="reback"><image src="../../static/icon/reback.png" mode="" @click="alertShow = false"></image></view>
			<view class="list flex">
				<view class="type">{{ $t('hy.cp') }}</view>
				<view class="type">{{ $t('hy.ssjg') }}</view>
				<view class="type">{{ $t('hy.jrdz') }}</view>
			</view>
			<scroll-view scroll-y="true" style="min-height:500rpx;">
				<view class="itemlist flex" @click="changeData(ls)" v-for="ls in listOBj" v-if="ls.name != 'BCH/USDT'">
					<view class="type">
						<view class="name">{{ ls.name }}</view>
						<view class="tip">{{ $t('hy.yx') }}</view>
					</view>
					<view class="type money" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.last }}</view>
					<view class="type bfb" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.dcf }}</view>
				</view>
				<view class="itemlist flex" @click="changeData(ls)" v-for="ls in listOBj" v-if="ls.name == 'BCH/USDT'">
					<view class="type">
						<view class="name">{{ ls.name }}</view>
						<view class="tip">{{ $t('hy.yx') }}</view>
					</view>
					<view class="type money" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.last }}</view>
					<view class="type bfb" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.dcf }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { levertadeLaverorder, closeorder, clearorder, UpOrderHandle, bond } from '@/api/heyue.js';
import { scoketNew, scoketOpen } from '@/utils/socket.js';
import { geLevertade } from '@/api/index.js';
import { getUser } from '@/api/login.js';
export default {
	data() {
		return {
			// 是否显示弹窗
			alertShow: false,
			//保存幣種類型
			spList: [],
			// 右侧允许的最长长度
			listLength: 20,
			// 当前选中的对象数据列表
			// actionList: 'BCH-USDT',
			actionList: 'BTC-USDT',
			// 價格列表
			listOBj: {
				'BCH-USDT': {},
				'BTC-USDT': {}
			},
			// 当前选中的杠杆倍数
			ggIndex: 0,
			ggList: [
				{
					num: 5
				},
				{
					num: 10
				},
				{
					num: 20
				},
				{
					num: 50
				},
				{
					num: 100
				}
			],
			//当前选中的交易类别
			typeIndex: 1,
			// 交易类型
			jyType: 1,
			//交易数量
			payNum: 0,
			// 杠杆倍数
			ggBs: 0,
			// 限价委托价格
			xzMoney: 0,
			// 止损价格
			zsMoney: 0,
			// 止盈价格
			zyMoney: 0,
			// 保證金
			bzjMoney: 0,
			// 手續費
			sxfMoney: 0,
			ddType: 1, //1委托订单2持仓订单3成交订单
			loadData: [
				{
					state: 1,
					text: '限价委托',
					loadingType: 'more',
					list: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 2,
					text: '持仓',
					loadingType: 'more',
					list: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
			],
			setTimeoutObj: '',
			// 是否提交做多請求
			upDataLoding: false,
			gmList: [],
			mcList: [],
			gmobj: {},
			mcobj: {}
		};
	},
	watch: {
		ggBs(newValue, oldValue) {
			this.ggBs = newValue;
			this.bond();
		},
		payNum(newValue, oldValue) {
			this.payNum = newValue;
			this.bond();
		}
	},
	filters: {
		actionMoney: function(value) {
			let num = 0;
			if (+value > 10000000) {
				num = +(value / 10000000).toFixed(2) + '千萬';
			} else if (+value > 10000) {
				num = +(value / 10000).toFixed(2) + '萬';
			}

			return num;
		}
	},
	onLoad() {
		// 初始化保存BCH对象
		this.levertadeLaverorder();
	},
	onShow: function() {
		this.geLevertade();
		this.initListData();
	},
	onHide() {
		this.closeScoket();
		clearInterval(this.setTimeoutObj);
	},
	onReachBottom() {
		this.levertadeLaverorder();
	},
	onReady() {
		console.log(this.userInfo);
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	methods: {
		...mapMutations('user', ['login', 'setUserInfo']),
		// 提交訂單
		UpOrderHandle() {
			const that = this;
			if (this.upDataLoding) {
				return;
			}
			uni.showLoading({
				title: that.$t('hy.tjz'),
				mask: true
			});
			this.upDataLoding = true;
			that.bond()
				.then(() => {
					UpOrderHandle({
						direction: that.typeIndex,
						type: that.jyType,
						symbol: that.listOBj[that.actionList].name,
						mprice: that.jyType == 2 ? that.listOBj[that.actionList].last : that.xzMoney,
						ggan: that.ggBs,
						num: that.payNum,
						upbondmoney: that.bzjMoney,
						fee: that.sxfMoney,
						zyprice: that.zyMoney,
						zsprice: that.zsMoney
					})
						.then(e => {
							uni.hideLoading();
							that.upDataLoding = false;
							uni.showModal({
								title: that.$t('hy.ts'),
								content: that.jyType == 1 ? that.$t('hy.gdcg') : that.$t('hy.jycg'),
								confirmText: that.$t('hy.qr'),
								showCancel: false
							});
							obj.levertadeLaverorder();
						})
						.catch(() => {
							uni.hideLoading();
							that.upDataLoding = false;
						});
				})
				.catch(() => {
					uni.hideLoading();
					that.upDataLoding = false;
				});
		},
		// 修改当前选中的数据对象
		changeData(item) {
			console.log(item, 'qh');
			this.actionList = item.instId;
			this.gmList = [];
			this.mcList = [];
			this.alertShow = false;
		},
		// 獲取保證金
		bond() {
			const taht = this;
			return new Promise((resolve, rejact) => {
				bond({
					name: taht.actionList.split('-')[0],
					num: taht.payNum,
					gann: taht.ggBs
				})
					.then(e => {
						taht.sxfMoney = e.data.fee;
						taht.bzjMoney = e.data.bong ? e.data.bong : 0;
						console.log(e);
						resolve();
					})
					.catch(() => {
						rejact();
						console.log(e);
					});
			});
		},
		//循環獲取數據
		initListData() {
			this.setTimeoutObj = setInterval(() => {
				this.levertadeLaverorder();
			}, 2000);
		},
		// 獲取幣種列表
		geLevertade() {
			uni.showLoading({
				title: this.$t('hy.sjjzz') + '...',
				mask: true
			});
			const that = this;
			geLevertade().then(e => {
				that.spList = e.list;
				// 开启长连接
				that.onScoket();
			});
		},
		// 开始请求长连接
		onScoket() {
			const that = this;
			that.scoket = scoketNew('wss://wsaws.okx.com:8443/ws/v5/public');
			that.scoket.scoketOpen().then(res => {
				uni.hideLoading();
				const requestList = that.spList.map(e => {
					return {
						channel: 'tickers',
						instId: e.coinname.toUpperCase() + '-USDT'
					};
				});
				that.scoket
					.scoketSend({
						op: 'subscribe',
						args: requestList
					})
					.then(res => {
						console.log(res, '发送成功');
					});
				that.scoket.scoketMessage(res => {
					try {
						if (res.data) {
							// 判断是否已经有这个对象
							// console.log(res.arg.instId, 'id', that.listOBj);
							that.listOBj[res.arg.instId] = res.data[0];
							const item = that.listOBj[res.arg.instId];
							// 转为数字
							item.last = +item.last;
							item.sodUtc0 = +item.sodUtc0;
							// 保存收益情况
							item.bool = item.last - item.sodUtc0 > 0 ? true : false;
							// 算出收益率
							item.dcf = +(((item.last - item.sodUtc0) / item.sodUtc0) * 100).toFixed(2) + '%';
							item.name = item.instId.replace('-', '/');
							if (that.actionList == item.instId) {
								that.gmList.unshift({ pri: (item.bidPx * 1).toFixed(5), num: (item.bidSz * 1).toFixed(5) });
								that.gmList = that.gmList.slice(0, 9);
								that.mcList.unshift({ pri: (item.askPx * 1).toFixed(5), num: (item.askSz * 1).toFixed(5) });
								that.mcList = that.mcList.slice(0, 9);
							}

							that.listOBj = Object.assign({}, that.listOBj);
							console.log(that.listOBj, 'that.listOBj');
						}
					} catch (e) {
						console.log(res, res.data, '报错');
					}
				});
			});
		},
		closeScoket() {
			this.scoket.scoketClose();
		},
		// 平倉
		closeorder(item) {
			const that = this;
			uni.showModal({
				title: that.$t('hy.pc'),
				content: that.$t('hy.sfljpc'),
				confirmText: that.$t('hy.s'),
				cancelText: that.$t('hy.f'),
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: that.$t('hy.qqz') + '...',
							mask: true
						});
						closeorder({
							id: item.id
						})
							.then(e => {
								uni.hideLoading();
								uni.showToast({
									title: that.$t('hy.pccg'),
									icon: 'success'
								});
								that.ddTypeInit();
							})
							.catch(() => {
								uni.hideLoading();
							});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 撤銷
		clearorder(item) {
			const that = this;
			uni.showModal({
				title: that.$t('hy.cx'),
				content: that.$t('hy.ljcx'),
				confirmText: that.$t('hy.qr'),
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: that.$t('hy.qqz') + '...',
							mask: true
						});
						clearorder({
							id: item.id
						})
							.then(e => {
								uni.hideLoading();
								uni.showToast({
									title: that.$t('hy.cxcg'),
									icon: 'success'
								});
								that.ddTypeInit();
							})
							.catch(() => {
								uni.hideLoading();
							});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 获取订单商品
		levertadeLaverorder(source) {
			//这里是将订单挂载到tab列表下
			let index = this.ddType;
			let navItem = this.loadData[index];
			let state = navItem.state;
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			// if (navItem.loadingType === 'noMore') {
			// 	//防止重复加载
			// 	return;
			// }
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			// uni.showLoading({
			// 	title: '數據加載中',
			// 	mask: true
			// });
			levertadeLaverorder({
				type: state,
				page: navItem.page,
				limit: navItem.limit
			})
				.then(({ list }) => {
					// uni.hideLoading()
					let arr = list.map(e => {
						e.direction = +e.direction;
						e.bond = +e.bond;
						e.price = +e.price;
						e.wt_price = +e.wt_price;
						return e;
					});
					navItem.list = arr;
					navItem.loadingType = 'more';
					this.$set(navItem, 'loaded', true);
					this.getUser();
				})
				.catch(e => {
					// uni.hideLoading()
					console.log(e);
				});
		},
		// 修改杠杆倍数
		changeGG(ind, item) {
			this.ggBs = item.num;
			this.ggIndex = ind;
		},
		// 列表切换
		ddTypeChage(ind) {
			this.ddType = ind;
			this.levertadeLaverorder('tabChange');
		},
		// 初始化重新加載
		ddTypeInit() {
			// 初始化數據
			let item = this.loadData[this.ddType];
			item.loadingType = 'more';
			item.list = [];
			item.page = 1;
			item.limit = 10;
			item.loaded = false;
			this.levertadeLaverorder();
		},
		navto(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		},
		getUser() {
			getUser().then(re => {
				this.setUserInfo(re.data);
			});
		}
	}
};
</script>

<style lang="scss">
.usdtTitle,
.box {
	padding: 0 20rpx;
	width: 750rpx;
	background-color: #ffffff;
}

.usdtTitle {
	border-bottom: 1px solid $border-color-light;
	line-height: 1;

	.left {
		font-size: 32rpx;
		font-weight: bold;

		.img {
			width: 36rpx;
		}
	}

	.right {
		.img {
			width: 48rpx;
		}
	}
}

.box {
	line-height: 1;
	align-items: flex-start;

	.itemTitle {
		font-weight: bold;
		font-size: $font-sm;
	}

	.item {
		// flex-grow: 1;
		// width: 50%;
		flex-shrink: 0;
	}

	.buttomBox {
		font-size: $font-sm;

		.buttom {
			width: 350rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 10rpx;
			background-color: #f5f5f5;

			&.action {
				color: #ffffff;
				background-color: $color-green;
			}
		}
	}

	.tabType {
		justify-content: space-around;

		.tab {
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			color: #545d6f;
			font-size: $font-sm;
			font-weight: bold;

			&.action {
				color: $uni-color-warning;
			}
		}
	}

	.inputBox {
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border: 1px solid $border-color-light;

		.buttomZd {
			font-size: $font-sm;
		}

		.input {
			font-size: $font-sm;
			flex-grow: 1;
		}

		.rightInputBox {
			.jg {
				border: 1px solid $border-color-light;
				height: 50rpx;
				margin: 0 30rpx;
			}

			.img {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.itemLeftList {
		justify-content: space-around;

		.ll {
			border: 1px solid $border-color-light;
			width: 74rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			font-size: $font-sm;
			font-weight: bold;

			&.action {
				background-color: #f5f5f5;
			}
		}
	}

	.buttomSubmit {
		color: #ffffff;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: $font-sm;
		border-radius: 10rpx;
	}

	.itemName {
		.itemMinName {
			width: 20%;
			font-size: 22rpx;
			color: #5d6677;
		}
	}

	.itemList {
		.list {
			font-size: 20rpx;
			padding: 10rpx 0;

			.li {
				width: 20%;
			}
		}

		.llMax {
			padding: 30rpx 0;
			font-weight: bold;
			font-size: $font-lg;
		}
	}

	.listTitleBox {
		border-bottom: 1px solid $border-color-light;
		align-items: flex-start;

		.leftBottom {
			flex-shrink: 0;
			font-size: $font-lg;
			font-weight: bold;

			.action {
				border-bottom: 2px solid $uni-color-warning;
			}

			.titleType {
				padding-bottom: 20rpx;
			}
		}

		.rightBottom {
			font-size: $font-base;
			color: #707a8a;
			flex-shrink: 0;

			.img {
				width: 36rpx;
			}
		}
	}

	.usdtList {
		color: #707a8a;
		border-bottom: 1px solid $border-color-light;

		.name {
			font-size: $font-lg;
			font-weight: bold;
		}

		.usdtListButtom {
			font-size: $font-base;
			background-color: #f5f5f5;
			color: $uni-color-warning;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
		}

		.tip {
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			font-size: $font-base;
		}

		.tipList {
			font-size: $font-sm;
			text-align: center;
			width: 33%;
			padding-top: 20rpx;
			.nameTip {
				padding-bottom: 20rpx;
			}
		}
	}
}

.alertBox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	text-align: center;
	color: #707a8a;
	.reback {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		padding-left: 10rpx;
		padding-top: 10rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.type {
		width: 30%;
		flex-grow: 1;
	}

	.itemlist {
		padding-top: 40rpx;
		align-items: flex-start;
		.name {
			font-weight: 700;
			font-family: 'PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif, Droid Sans Fallback';
			padding-left: 20rpx;
			text-align: left;
			color: #000;
		}
		.tip {
			padding-left: 20rpx;
			text-align: left;
		}
	}

	.list {
		padding: 30rpx 0;
		border-bottom: 1px solid $border-color-light;

		.type {
			font-size: $font-lg;
			font-weight: bold;
		}
	}
}
.right-wrap {
	flex-grow: 1;
	padding: 0 10rpx;
	font-size: 24rpx;
	color: #707a8a;
	.line {
		view {
			padding: 10rpx 0;
		}
	}
}
.new-price {
	font-size: 36rpx;
	color: #0ecb81;
	padding: 20rpx;
}
.vheight {
	height: var(--status-bar-height);
}
</style>