jingcai/pages/index/entertainment.vue

<template>
	<view class="all">
		<view class="padding-t-30"></view>
		<view class="tab">
			<view class="flex-start">
				<view class="tab-item " @click="changeTab(item,ind)" :class="{action:actionIndex==ind}"
					v-for="(item,ind) in gameList">
					{{item.name}}
				</view>
			</view>
			<l-echart class="top" ref="chart"></l-echart>
		</view>

		<view class="center flex">
			<!-- 左 -->
			<view class="le">
				<view class="tit flex-start">
					<view class="ti1">{{$t('enter.u1')}}</view>
					<view class="ti2">({{$t('enter.u2')}} {{history.base.max_bet*1}}U)</view>
				</view>
				<view class="he">
					<view class="numbox flex-start">
						<view class="he1 flex" @click="upOnBtnData.value=it" v-for="it in arMoneyList">
							<view class="wen">{{it}}</view>
						</view>
					</view>
				</view>
				<view class="yi flex-start">
					<!-- <image class="img" src="../../static/icon/le.png" mode=""></image> -->
					<view class="wz">{{$t('login.c4')}}</view>
					<view class="qx padding-l-10" v-if="history.list.length>0">{{history.next.no}}</view>
				</view>
				<view class="yi flex-start margin-t-10">
					<!-- <image class="img" src="../../static/icon/le.png" mode=""></image> -->
					<view class="wz">{{$t('login.c5')}}</view>
					<view class="qx padding-l-10" v-if="history.list.length>0">{{history.list[0].no}}</view>
				</view>
				<view class="shu" v-if="history.list.length>0">
					{{history.list[0].result_info.c}}
				</view>
			</view>
			<!--右 -->
			<view class="ri">
				<view class="ti flex-center">
					<view class="t1">{{$t('enter.u3')}}</view>
					<view class="t2 padding-l-10">{{history.base.timebar}}</view>
				</view>

				<view class="dh">
					<input class="input" :placeholder="'USDT'+$t('enter.a9')" type="number" v-model="upOnBtnData.value">
				</view>
				<view class="btn">
					<view class="bt flex">
						<view class="btnItem btnle" @click="onPayBet(2)">
							<image class="imag" src="../../static/icon/xia.png" mode=""></image>
							<text class="xia">{{$t('enter.u4')}}</text>
						</view>
						<view class="btnItem btnri" @click="onPayBet(1)">
							<image class="imag" src="../../static/icon/shang.png" mode=""></image>
							<text class="xia">{{$t('enter.u6')}}</text>
						</view>
					</view>
					<view class="bt flex">
						<view class="btnItem btnle" @click="onPayBet(3)">
							<view class="xia">{{$t('enter.u5')}}</view>
						</view>
						<view class="btnItem btnri" @click="onPayBet(4)">
							<view class="xia">{{$t('enter.u7')}}</view>
						</view>
					</view>
				</view>

				<view class="db flex">
					<view class="jl">{{$t('enter.u8')}}</view>
					<view class="sj">
						<text v-if="time.H<10">0</text>
						{{time.H}}
					</view>
					<view class="sj">
						<text v-if="time.M<10">0</text>
						{{time.M}}
					</view>
					<view class="sj">
						<text v-if="time.S<10">0</text>
						{{time.S}}
					</view>
				</view>
			</view>
		</view>
		<view class="kb"></view>

		<view class="last">
			<view class="flex">
				<text>{{$t('enter.u9')}}</text>
				<view class="flex" @click="nav(`/pages/game/history?id=${history.base.id}`)">
					<text>{{$t('enter.u10')}}</text>
					<image class="lb" src="../../static/icon/jt.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>

		<view class="bg">
			<view class="biaotou flex">
				<view class="biwe">{{$t('enter.u11')}}</view>
				<view class="biwe">{{$t('enter.u12')}}</view>
				<view class="biwe">{{$t('enter.u13')}}</view>
				<view class="biwe">{{$t('enter.u14')}}</view>
			</view>
			<view class="list flex" v-for="(item,ind) in betList.list" :key="ind">
				<view class="biwe flex-start">
					<view class="tr">{{history.base.token}}</view>
					<view class="nametip">{{history.base.timebar}}</view>
					<image v-if="item.bet==1" class="zz" src="../../static/icon/shang.png" mode="scaleToFill"></image>
					<image v-if="item.bet==2" class="zz" src="../../static/icon/xia.png" mode="scaleToFill"></image>
					<view v-if="item.bet==3" class="nametip red">{{$t('enter.u5')}}</view>
					<view v-if="item.bet==4" class="nametip green">{{$t('enter.u7')}}</view>
				</view>
				<view class="biwe">{{item.num*1}}</view>
				<view class="biwe">{{item.sexy}}</view>
				<view class="biwe flex-center">
					<view v-if="item.status==0" class="list-buttom primary margin-r-10">
						{{$t('enter.a4')}}
					</view>
					<view class="list-buttom red" v-if="item.result==1">
						{{$t('enter.a5')}}
					</view>
					<view class="list-buttom success" v-if="item.result===0">
						{{$t('enter.a6')}}
					</view>
					<view @click="alertDetailOpen(item)" class="list-buttom primary margin-l-10"
						v-if="item.result===0||item.result==1">
						{{$t('enter.u18')}}
					</view>
				</view>
			</view>
		</view>

		<view class="chz flex" @click="nav('/pages/user/money/recharge')">
			<view>
				<view class="yue padding-b-10">{{$t('enter.u15')}}</view>
				<view class="yes">{{userWallet}}U</view>
			</view>
			<view class="flex-start">
				<view class="quc">{{$t('enter.u16')}}</view>
				<image class="choz" src="../../static/icon/jt.png" mode="scaleToFill"></image>
			</view>
		</view>
		<uni-popup type="bottom" ref="popup" :mask-click="false" @maskClick='colsePayPassword'>
			<inputPassword @commit='KeyInfo' @colse='colsePayPassword'></inputPassword>
		</uni-popup>
		<uni-popup type="center" ref="popupDetail">
			<view class="alert-detail" v-if="alertDetail.room">
				<view class="padding-c-30 padding-t-30 padding-b-30" v-if="alertDetail.room.result_info">
					<!-- <view class="padding-c-30 padding-t-30 padding-b-30"> -->
					<view class="flex">
						<view class="type">
							{{$t('set.a7')}}{{alertDetail.room.no}}{{$t('set.a8')}}
						</view>
						<view class="num">
							<view class="lis" v-if="alertDetail.result === 1">
								<view class="liss green">{{$t('enter.a5')}}</view>
							</view>
							<view class="lis" v-if="alertDetail.result === 0">
								<view class="liss red">{{$t('enter.a6')}}</view>
							</view>
							<view class="lis" v-if="alertDetail.status === 0">
								<view class="liss primary">{{$t('enter.a4')}}</view>
							</view>
						</view>
					</view>
					<!-- <view class="flex">
						<view class="type">
							{{$t('gameList.a5')}}
						</view>
						<view class="num" v-if="alertDetail.result_info.ts">
							{{getTime(alertDetail.result_info.ts)}}
						</view>
					</view> -->
					<view class="flex">
						<view class="type">
							{{$t('gameList.a2')}}
						</view>
						<view class="num">
							{{alertDetail.room.game.timebar}}
						</view>
					</view>
					<view class="flex">
						<view class="type">
							{{$t('gameList.a4')}}
						</view>
						<view class="num">
							<!-- {{alertDetail.result_info.c}} -->
							{{alertDetail.num}}U
						</view>
					</view>
					<view class="flex">
						<view class="type">
							{{$t('gameList.a7')}}
						</view>
						<view class="num flex-start">
							<!-- {{alertDetail.result_info.l}} -->
							<view class="green" v-if="alertDetail.bet==1">{{ $t("enter.u6") }}</view>
							<view class="red" v-if="alertDetail.bet==2">{{ $t("enter.u4") }}</view>
							<view class="green" v-if="alertDetail.bet==3">{{ $t("enter.u5") }}</view>
							<view class="red" v-if="alertDetail.bet==4">{{ $t("enter.u7") }}</view>
						</view>
					</view>
					<view class="flex">
						<view class="type">
							{{$t('gameList.a10')}}
						</view>
						<view class="num">
							{{alertDetail.room.result_info.c}}
						</view>
					</view>
					<view class="flex">
						<view class="type">
							{{$t('gameList.a5')}}
						</view>
						<view class="num" v-if="alertDetail.room.open_time">
							<!-- {{alertDetail.result_info.h}} -->
							{{alertDetail.room.open_time}}
						</view>
					</view>
					<view class="flex">
						<view class="type">
							{{$t('gameList.a9')}}
						</view>
						<view class="num flex-start">
							<template v-for="it in alertDetail.room.arr " v-if="it.value==1">
								<view class="green" v-if="it.type==1">{{ $t("enter.u6") }}</view>
								<view class="green" v-if="it.type==3">{{ $t("enter.u5") }}</view>
								<view class="red" v-if="it.type==2">{{ $t("enter.u4") }}</view>
								<view class="red" v-if="it.type==4">{{ $t("enter.u7") }}</view>
							</template>
						</view>
					</view>
					<view class="flex">
						<view class="type">
							{{$t('gameList.a8')}}
						</view>
						<view class="num">
							<!-- {{alertDetail.result_info.h}} -->
							{{alertDetail.get}}
						</view>
					</view>

				</view>
				<button class="button" type="default" @click="$refs.popupDetail.close()"><text
						class="button-text">{{$t("safe.d7")}}</text></button>
			</view>
		</uni-popup>
		<taber tab='entertainment' v-if="!upOnBtnData.show"></taber>
	</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import {
		getGame,
		gameKline,
		getGameList,
		gameWallet,
		gameBetList,
		gameBetIn
	} from "@/api/game.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import taber from "@/components/footer/footer.vue";
	import {
		getTime
	} from '@/utils/rocessor.js';
	import inputPassword from "@/components/input-password/input-password.vue";
	export default {
		components: {
			taber,
			inputPassword
		},
		computed: {
			...mapState("user", ["hasLogin"]),
		},
		data() {
			return {
				arMoneyList: [
					1, 5, 10, 20, 50, 100
				],
				actionIndex: 0,
				// 当前游戏列表
				gameList: [],
				// 游戏信息
				history: {
					list: [], //游戏进行记录
					page: 1,
					limit: 10,
					// 基础数据
					base: {},
					next: "",
					now: {}
				},
				time: {
					H: 0,
					M: 0,
					S: 0,
					// 保存倒计时对象
					t: ''
				},
				// 游戏押注记录
				betList: {
					list: [], //游戏进行记录
					page: 1,
					limit: 5,
				},
				userWallet: 0,
				// 当前最新K线数据
				KlineList: {
					c: ''
				},

				upOnBtnData: {
					// 是否显示底部导航栏
					show: false,
					type: '',
					// 当前输入的密码
					passwordArr: '',
					value: '',
				},
				// 弹窗数据像晴
				alertDetail: {},
				// 保存获取下次游戏对象
				getNextTimeObj: '',
				// 判断是否当前页面中
				loadPage: false,
			};
		},
		onShow() {
			this.loadPage = true;
			if (!this.hasLogin) {
				uni.showModal({
					title: this.$t('enter.c4'),
					content: this.$t('enter.b5'),
					success: (e) => {
						// 判断是否点击确认按钮
						if (e.confirm) {
							// 保存当前页面地址
							saveUrl()
							// 跳转页面
							interceptor()
						}
					}
				})
				return
			}
			this.getUserWallet();
			this.gameInit();
			this.gameBetList()
		},
		// 关闭循环
		onHide() {
			this.loadPage = false;
			console.log('隐藏');
			// 倒计时清理
			this.initData();
		},
		methods: {
			getTime,
			// 弹窗详情
			alertDetailOpen(item) {
				this.alertDetail = item;
				console.log(this.alertDetail);
				const res = this.alertDetail.room;
				if (res.result_info) {
					res.result_info.c = Number(res.result_info.c).toFixed(res.game.decimal)
				}
				if (res.result) {
					let arr = [];
					const ar = res.result.split(",")
					for (let i = 0; i < ar.length; i++) {
						const s = ar[i].split(':');
						arr.push({
							type: s[0],
							value: s[1]
						})
					}
					res.arr = arr;
				}
				res.open_time = getTime(res.open_time);
				this.$refs.popupDetail.open();
			},
			// 倒计时清理
			initData() {
				const that = this
				// 关闭倒计时
				clearInterval(that.getNextTimeObj);
				clearInterval(that.time.t);
				// 清空倒计时对象
				that.getNextTimeObj = '';
				that.time = {
					H: 0,
					M: 0,
					S: 0,
					t: ''
				};
			},
			// 点击触发支付事件
			onPayBet(type) {
				if (!this.upOnBtnData.value) {
					uni.showToast({
						title: this.$t('enter.a9'),
						icon: "error"
					})
					return
				}
				if (!this.history.next) {
					uni.showModal({
						title: this.$t('enter.c4'),
						content: this.$t('enter.a3'),
						showCancel: false,
					});
					return
				}
				this.upOnBtnData.type = type;
				this.openPayPassword();
			},
			// 打开支付弹窗
			openPayPassword() {
				this.upOnBtnData.show = true;
				this.$refs.popup.open();
			},
			// 关闭支付弹窗
			colsePayPassword() {
				this.upOnBtnData.show = false;
				this.$refs.popup.close();
			},
			// 密码输入完成后调用下注
			KeyInfo(val) {
				const that = this;
				that.upOnBtnData.passwordArr = val;
				that.colsePayPassword();
				const typeList = [that.$t('enter.u6'), that.$t('enter.u4'), that.$t('enter.u5'), that.$t('enter.u7')];
				uni.showModal({
					title: that.$t('enter.c4'),
					content: `${that.$t('enter.a8')}${that.upOnBtnData.value}USDT${that.$t('enter.a10')}${that.history.next.no}${typeList[that.upOnBtnData.type-1]}`,
					success: res => {
						if (res.confirm) {
							that.gameBetIn();
						}
					},
				});
			},
			// 参与压住
			gameBetIn(type) {
				const that = this;
				const upData = {
					id: that.history.next.id,
					bet: that.upOnBtnData.type,
					num: that.upOnBtnData.value,
					trade_password: that.upOnBtnData.passwordArr
				};
				uni.showLoading({
					mask: true
				})
				that.upOnBtnData.value = '';
				gameBetIn(upData).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					});
					that.gameBetList();
					that.getUserWallet();
				}).catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg
					});
				})
			},
			// 获取用户余额信息
			getUserWallet() {
				gameWallet().then((res) => {
					const balance = Number(res.data.back.USDT.money.money);
					this.userWallet = balance.toFixed(2);
					// this.userWallet = +res.data.back.USDT.money.money
				})
			},
			// 开始倒计时
			async opTiem() {
				const that = this;
				try {
					// 判斷是否有游戲信息并且有正在進行中游戏
					if (that.history.base.id && that.history.next) {
						// console.log(that.history.base.id, that.history.next,
						// 	'that.history.base.id && that.history.next');
						that.time.t = setInterval(() => {
							that.getOutTime();
						}, 1000)
					}
				} catch (e) {
					console.log(e, '定时');
				}
			},
			// 获取倒计时时间
			getOutTime() {
				const that = this;
				const da = (new Date()).getTime();
				const timenum = that.history.next.open_time * 1000 - da;
				// console.log(timenum, that.history.next.open_time, da, '计算');
				if (timenum > 0) {
					that.time.H = Math.floor(timenum / 1000 / 60 / 60);
					that.time.S = Math.floor(timenum / 1000 % 60)
					that.time.M = Math.floor(timenum / 1000 / 60 % 60);
				}
				if (that.time.H == 0 && that.time.M == 0 && that.time.S == 0) {
					console.log('归0');
					clearInterval(that.time.t);
					// 延时调用防止数据重复加载
					setTimeout(() => {
						that.getGame(that.history.base.id)
						that.getGameKline();
					}, 2000)
				}

			},
			// 游戏tab切换
			changeTab(item, ind) {
				const that = this;
				if (ind != this.actionIndex) {
					that.actionIndex = ind;
					// 清理倒计时
					that.initData();
					// 重新加载数据
					that.gameDataInit(item.id);
				}
			},
			// 初始化
			async gameInit() {
				// 获取游戏列表
				await this.getGameList();
				// 加载游戏数据
				this.gameDataInit(this.history.base.id || this.gameList[0].id)

			},
			// 加载游戏列表
			getGameList() {
				return getGameList().then((res) => {
					this.gameList = res.data.list;
					// console.log('1111111111',this.gameList);
				})
			},
			// 重新加载基础游戏信息
			async gameDataInit(id, reload = true) {
				// 获取基础信息
				await this.getGame(id);
				//获取K线
				this.getGameKline(reload);
				// 获取游戏压住记录
				this.gameBetList();
			},
			// 获取游戏压住记录
			gameBetList() {
				const that = this;
				const lineNum = that.history.base.decimal;
				const list = that.betList.list;
				// return list;
				console.log('11111', list);
				gameBetList({
					page: 1,
					limit: 10,
					id: that.history.base.id,
				}).then(({
					data
				}) => {
					that.betList.list = data.bet_log.map((res) => {
						res.num = Number(res.num);
						res.get = Number(res.get);
						res.sexy = +(res.get - res.num).toFixed(2);
						if (res.room.result_info) {
							const obj = res.room.result_info
							obj.c = Number(obj.c).toFixed(lineNum)
							obj.o = Number(obj.o).toFixed(lineNum)
							obj.h = Number(obj.h).toFixed(lineNum)
							obj.l = Number(obj.l).toFixed(lineNum)
						}
						return res
					});
				})
				return list;
			},
			// 获取游戏K线信息
			getGameKline(reload = true) {
				const that = this;
				const lineNum = this.history.base.decimal;
				gameKline({
					page: 1,
					limit: 60
				}, that.history.base.id).then((res) => {
					that.KlineList = res.data.list[0];
					let list = res.data.list.reverse();
					// x轴记录
					let xarr = [];
					// 打点数据
					let linearr = [];
					for (let i = 0; i < list.length; i++) {
						const ll = list[i];
						const time = new Date(+ll.ts);
						const addar = [+(+ll.o).toFixed(lineNum), +(+ll.c).toFixed(lineNum), +(+ll.l).toFixed(
								lineNum), +(+ll.h)
							.toFixed(lineNum)
						];
						xarr.push(`${time.getHours()}:${time.getMinutes()}`)
						linearr.push(addar)
					}
					that.$nextTick(() => {
						// 判断是否要重载数据
						that.initKline({
							xarr,
							linearr
						}, reload)
					})
				})
			},
			// 获取当前项目信息
			getGame(id) {
				const that = this;
				return getGame({
					page: that.history.page,
					limit: that.history.limit
				}, id).then(({
					data
				}) => {
					
					that.history.base = data.game || {};
					that.history.next = data.next_game || '';
					that.history.now = data.now_game || '';
					if( data.list){
						that.history.list = data.list.map((res)=>{
							res.result_info.c = (+res.result_info.c).toFixed(data.game.decimal)
							return res
						});
					}else{
						that.history.list = [];
					}
					// 是否不存在启动中的活动并判断防止重复调用创建倒计时
					// 判断是否不存在游戏，并且没有倒计时对象，且在当前页面
					if (that.loadPage && !that.history.next && !that.getNextTimeObj) {
						that.getNextTimeObj = setInterval(() => {
							that.getGame(id)
						}, 1000)
						return
					}
					if (that.history.next && that.getNextTimeObj) {
						clearInterval(that.getNextTimeObj);
						// 清空倒计时对象
						that.getNextTimeObj = '';
					}
					// 判断是否有活动并且正在进行中
					if (that.history.next && !that.getNextTimeObj) {
						that.opTiem();
					}
				})
			},
			// 均值计算
			calculateMA(dayCount, data) {
				var result = [];
				for (var i = 0, len = data.linearr.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data.linearr[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(5));
				}
				return result;
			},
			// 重载K线
			async initKline(data, reload = true) {
				const that = this;
				try {
					const chart = await this.$refs.chart.init(echarts);
					if (reload) {
						const upColor = '#00da3c';
						const downColor = '#ec0000';
						chart.setOption(
							(this.option = {
								animation: false,
								legend: {
									top: 10,
									left: 10,
									data: ['MA5', 'MA10', 'MA20'],
									textStyle: {
										color: '#999999'
									}
								},
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'cross'
									},
									borderWidth: 1,
									borderColor: '#ccc',
									padding: 10,
									textStyle: {
										color: '#000'
									},
									position: function(pos, params, el, elRect, size) {
										const obj = {
											top: 10
										};
										obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 40;

										return obj;
									}
								},
								dataZoom: [{
									type: 'inside',
									xAxisIndex: 0,
									start: 50,
									end: 100
								}],
								grid: [{
									left: 10,
									right: 55,
									bottom: 20,
									top: 45
								}],
								xAxis: [{
									type: 'category',
									data: data.xarr,
									axisLine: {
										onZero: false
									},
									splitLine: {
										show: false
									},
									min: 'dataMin',
									max: 'dataMax',
									axisPointer: {
										z: 100
									}
								}],
								yAxis: [{
									scale: true,
									splitNumber: 4,
									position: 'right',
									axisTick: {
										show: false
									},
									splitLine: {
										show: false,
										lineStyle: {
											color: '#e3e3e3'
										}
									},
									axisLabel: {
										inside: false,
										formatter: '{value}\n',
										color: '#999999'
									}
								}],
								series: [{
										name: that.history.base.token + '-USDT',
										type: 'candlestick',
										data: data.linearr,
										itemStyle: {
											color: upColor,
											color0: downColor,
											borderColor: undefined,
											borderColor0: undefined
										}
									},
									{
										name: "MA5",
										smooth: true,
										type: 'line',
										data: that.calculateMA(5, data),
										showSymbol: false,
										lineStyle: {
											width: 1
										}
									},
									{
										name: "MA10",
										smooth: true,
										type: 'line',
										data: that.calculateMA(10, data),
										showSymbol: false,
										lineStyle: {
											width: 1
										}
									},
									{
										name: "MA20",
										smooth: true,
										type: 'line',
										data: that.calculateMA(20, data),
										showSymbol: false,
										lineStyle: {
											width: 1
										}
									},
								]
							}),
							true
						)
					} else {
						chart.setOption({
							xAxis: [{
								type: 'category',
								data: data.xarr,
							}],
							series: [{
									name: that.history.base.token + '-USDT',
									data: data.linearr,
								},
								{
									name: "MA5",
									data: that.calculateMA(5, data),
								},
								{
									name: "MA10",
									data: that.calculateMA(10, data),
								},
								{
									name: "MA20",
									data: that.calculateMA(20, data),
								},
							]
						})
					}


				} catch (e) {
					console.log(e, 'cuowu');
					//TODO handle the exception
				}

			},
			// 页面跳转
			nav(url) {
				console.log('tz');
				if (!this.hasLogin) {
					uni.showModal({
						title: this.$t('enter.c4'),
						content: this.$t('enter.b5'),
						success: (e) => {
							// 判断是否点击确认按钮
							if (e.confirm) {
								// 保存当前页面地址
								saveUrl()
								// 跳转页面
								interceptor()
							}
						}
					})
					return
				}
				uni.navigateTo({
					url,
					fail(err) {
						console.log(err);
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		/* height: 2500rpx; */
		height: 100%;
		padding-top: var(--status-bar-height);
		padding-bottom: 30rpx;
	}

	.tab {
		padding: 30rpx 20rpx;
		margin: 0 30rpx;
		background-color: #191A1F;
		border-radius: 20px;

		.tab-item {
			color: #FFF;
			font-size: $font-lg;
			padding: 0 20rpx;
			padding-bottom: 10rpx;

			&.action {
				color: #F5A944;
				border-bottom: 1px solid #F5A944;
			}
		}

		.top {
			height: 530rpx;
			width: 100%;
		}
	}

	.center {
		padding: 30rpx;
		line-height: 1;
		align-items: flex-start;

		.le,
		.ri {
			width: 50%;
		}

		.le {
			.tit {
				font-weight: bold;

				.ti1 {
					font-size: 26rpx;
					color: #ffffff;
				}

				.ti2 {
					font-size: 22rpx;
					padding-left: 10rpx;
					color: #999999;
				}
			}

			.he {
				padding-top: 40rpx;

				.numbox {
					flex-wrap: wrap;

					.he1 {
						background: #fdaf41;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						width: 84rpx;
						height: 84rpx;
						justify-content: center;

						.wen {
							font-size: 30rpx;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}

			.yi {
				color: #ffffff;
				font-size: $font-base;

				.img {
					width: 41rpx;
					height: 42rpx;
				}

				.wz {
					font-weight: bold;
				}
			}

			.shu {
				padding-top: 10rpx;
				font-size: 51rpx;
				font-weight: bold;
				color: #fdb242;
			}

		}

		.ri {
			.ti {
				font-size: 26rpx;
				font-weight: bold;

				.t1 {
					color: #ffffff;
				}

				.t2 {
					color: #fdaf41;
				}
			}

			.dh {
				width: 100%;
				padding: 20rpx 30rpx;
				margin-top: 30rpx;
				background: #efefef;
				border-radius: 10rpx;

				.te {
					font-size: 44rpx;
					font-weight: 800;
					color: #000000;
				}
			}

			.btn {
				padding-top: 30rpx;

				.bt {
					padding-bottom: 10rpx;

					.btnItem {
						width: 49%;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;

						.imag {
							width: 32rpx;
							height: 20rpx;
						}

						.xia {
							font-size: 28rpx;
							font-weight: 800;
							color: #ffffff;
						}

					}

					.btnle {
						border-radius: 50rpx 0 0 50rpx;
						background-color: #df5660;

					}

					.btnri {
						border-radius: 0 50rpx 50rpx 0;
						background-color: #5bb786;
					}
				}
			}

			.db {
				justify-content: flex-end;
				padding-top: 30rpx;

				.jl {
					font-size: $font-lg + 4rpx;
					font-weight: 400;
					color: #999999;
				}

				.sj {
					width: 40rpx;
					height: 40rpx;
					background: #bfbfbf;
					border-radius: 3rpx;
					text-align: center;
					line-height: 40rpx;
					margin-left: 10rpx;
				}

			}
		}
	}

	.kb {
		width: 750rpx;
		height: 20rpx;
		background-color: #191a1f;
	}

	.last {
		padding: 30rpx;
		line-height: 1;
		font-size: 24rpx;
		font-weight: 800;
		color: #fff;

		.lb {
			width: 14rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}

	}





	.bg {
		padding: 0 30rpx;
		background-color: #000000;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		padding-bottom: 30rpx;

		.biaotou {
			font-weight: 800;
			padding-bottom: 10rpx;
		}

		.biwe {
			width: 25%;

			.zz {
				width: 22rpx;
				height: 14rpx;
				margin-left: 8rpx;
			}

			.nametip {
				font-size: 18rpx;
				color: #999999;
				padding-left: 8rpx;

				&.green {
					color: #5bb786;
				}

				&.red {
					color: #df5660;
				}
			}
		}

		.biwe:nth-child(1) {
			flex-shrink: 0;
			text-align: left;
			align-items: flex-end;
		}

		.biwe:nth-child(4) {
			flex-shrink: 0;
			width: 200rpx;
		}

		.list {
			font-weight: bold;
			padding: 20rpx 0;
			border-bottom: 1px solid rgba(43, 42, 38, 0.52);
		}

		.list-buttom {
			width: 100rpx;
			border-radius: 30rpx;
			font-size: 16rpx;
			padding: 10rpx 0;

			&.success {
				background: $color-green;
			}

			&.red {
				background: $color-yellow;
			}

			&.primary {
				background: #01ebf6;
				color: #000000;
			}
		}
	}

	.chz {
		background: #191a1f;
		border-radius: 20rpx;
		margin: 0 30rpx;
		color: #ffffff;
		font-weight: bold;
		padding: 20rpx 30rpx;

		.yue {
			font-size: 28rpx;
		}

		.yes {
			color: #fdaf41;
		}

		.quc {
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.choz {
			width: 22rpx;
			height: 14rpx;
		}
	}

	.alert-detail {
		background-color: #FFF;
		border-radius: 10rpx;
		width: 600rpx;

		.red {
			color: #df5660;
		}

		.green {
			color: $color-green;
		}

		.flex {
			padding: 10rpx 0;
		}
	}

	.lisT {
		font-size: $font-lg;
		font-weight: bold;

		&.red {
			color: #df5660;
		}

		&.green {
			color: $color-green;
		}
	}

	.lis {
		.liss {
			border-radius: 5rpx;
			padding: 10rpx 20rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #FFF;
			&.red {
				background: $color-yellow;
			}

			&.green {
				background: $color-green;
			}

			&.primary {
				background: #01ebf6;
			}
		}
	}
</style>