hx/pages/index/index.vue

<template>
	<view class="content">
		<image class="bg" src="../../static/img/index-bg.png" mode=""></image>
		<view class="top flex">
			<image class="top-bg" src="../../static/img/login.png" mode=""></image>
			<view class="login-index flex" @click="foxlogin">
				<image class="address" src="../../static/img/login-user.png" mode=""></image>
				<view class="address-font clamp">{{ address }}</view>
			</view>
		</view>
		<view class="title">流量王</view>
		<view class="all">
			<view class="all-title">
				<image class="all-bg" src="../../static/img/all-bg.png" mode=""></image>
				<view class="all-font">奖池总量</view>
			</view>
			<view class="all-box" @click="nav('/pages/index/bonus')">
				<view class="all-sun">
					<view class="all-num">
						{{ lake * 1 }}
						<text>枚</text>
					</view>
					<image class="all-back" src="../../static/img/all-back.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="title-address">您的邀请地址</view>
		<view class="share-box">
			<view class="share-sun flex">
				<view class="share-font clamp">{{ address | addFile }}</view>
				<view class="share-btn" @click="copy(address)">复制</view>
			</view>
		</view>
		<view class="share-box">
			<view class="share-sun flex">
				<view class="share-font clamp" v-if="!userInfo.spread"><input type="text" v-model="recommend" value="" /></view>
				<view class="share-font clamp" v-if="userInfo.spread">{{ userInfo.spread.address | addFile }}</view>
				<view class="share-btn" v-if="!userInfo.spread" @click="spare()">加入流量</view>
				<view class="share-btn" v-if="userInfo.spread">上级流量</view>
			</view>
		</view>
		<view class="feature">
			<view class="feature-sun">
				<view class="feature-top flex">
					<view class="feature-item" @click="join(0)">
						<image class="item-bg" src="../../static/img/jhll.png" mode=""></image>
						<view class="feature-font">激活流量</view>
					</view>
					<view class="feature-item" @click="join(2)">
						<image class="item-bg" src="../../static/img/sjll.png" mode=""></image>
						<view class="feature-font">升级流量</view>
					</view>
					<!-- <view class="feature-item">
						<image class="item-bg" src="../../static/img/dbsj.png" mode=""></image>
						<view class="feature-font">打包升级</view>
					</view> -->
				</view>
				<view class="feature-bottom flex" @click="nav('/pages/index/explain')">
					<view class="bottom-font">粉丝激活升级说明</view>
					<image class="wen" src="../../static/img/wen.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="title-address">您的流量信息</view>
		<view class="my-box flex">
			<view class="my-item" style="margin-top: 0;">
				<view class="my-sun flex">
					<image class="my-bg" src="../../static/img/dqlljb.png" mode=""></image>
					<view class="my-font">
						当前流量
						<br />
						级别
					</view>
					<view class="my-num">{{ userInfo.point_level || 0 }}</view>
				</view>
			</view>
			<view class="my-item" style="margin-top: 0;">
				<view class="my-sun flex">
					<image class="my-bg" src="../../static/img/zjtjlls.png" mode=""></image>
					<view class="my-font">
						直接推荐
						<br />
						流量数
					</view>
					<view class="my-num">{{ userInfo.spread_count || 0 }}</view>
				</view>
			</view>
			<view class="my-item" style="margin-top: 0;">
				<view class="my-sun flex">
					<image class="my-bg" src="../../static/img/zjtjyxlls.png" mode=""></image>
					<view class="my-font">
						直接推荐
						<br />
						有效流量数
					</view>
					<view class="my-num">{{ userInfo.spread_activate_count }}</view>
				</view>
			</view>
			<view class="my-item">
				<view class="my-sun flex">
					<image class="my-bg" src="../../static/img/zjtjjj.png" mode=""></image>
					<view class="my-font">
						直接推荐
						<br />
						奖金
					</view>
					<view class="my-num">{{ userInfo.recommend || 0 }}</view>
				</view>
			</view>
			<view class="my-item">
				<view class="my-sun flex">
					<image class="my-bg" src="../../static/img/jcjj.png" mode=""></image>
					<view class="my-font">
						奖池
						<br />
						奖金
					</view>
					<view class="my-num">{{ userInfo.lake || 0 }}</view>
				</view>
			</view>
			<view class="my-item">
				<view class="my-sun flex">
					<image class="my-bg" src="../../static/img/qyefh.png" mode=""></image>
					<view class="my-font">
						历史
						<br />
						领取
					</view>
					<view class="my-num">{{ userInfo.history || 0 }}</view>
				</view>
			</view>
		</view>
		<view class="history">
			<view class="history-sun flex">
				<view class="history-left">
					<image class="history-bg" src="../../static/img/history.png" mode=""></image>
					<view class="history-font">待领取收益</view>
				</view>
				<view class="history-right">
					<view class="history-num">{{ userInfo.USDT * 1 }}U</view>
					<view class="history-btn" v-if="userInfo.USDT != 0" @click="paybnb()">领取</view>
				</view>
			</view>
		</view>
		<view class="history">
			<view class="history-sun flex" @click="join(1)">
				<view class="history-left">
					<image class="level-bg" src="../../static/img/level.png" mode=""></image>
					<view class="level-font">
						<view class="level-title">升级可领奖金</view>
						<view class="level-tip">提升级别拿更多奖金奖励</view>
					</view>
				</view>
				<image class="back" src="../../static/img/all-back.png" mode=""></image>
			</view>
		</view>
		<view class="network flex">
			<view class="network-left">您的网络信息</view>
			<view class="network-right" @click="nav('/pages/index/network')">
				<view class="netRight-font">网络信息明细</view>
				<image class="n-back" src="../../static/img/back.png" mode=""></image>
			</view>
		</view>
		<view class="network-box">
			<view class="network-sun">
				<view class="network-top flex">
					<view class="nTop-left">
						<image class="nTop-bg" src="../../static/img/network.png" mode=""></image>
						<view class="nTop-font">流量级别奖励</view>
					</view>
					<view class="nTop-btn" @click="join(2)">升级</view>
				</view>
				<view class="network-bottom flex">
					<view class="bottom-item">
						已领取
						<text>{{ userInfo.level }}</text>
					</view>
					<view class="bottom-item">
						待领取
						<text>{{ userInfo.level_wait }}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<image class="popup-bg" src="../../static/img/popup-bg.png" mode=""></image>
				<view class="popup-title">{{ type == 0 ? '激活粉丝' : '升级领奖' }}</view>
				<view class="popup-main">
					<view class="quan"><image class="ling" src="../../static/img/ling.png" mode=""></image></view>
					<view class="popup-info" v-if="type == 0">
						是否消耗{{ mention }}{{ mentionType }}
						<br />
						激活粉丝身份
					</view>
					<view class="popup-info" v-else>
						请先提升级别
						<br />
						能拿更多奖金奖励哦
					</view>
				</view>
				<view class="btn-box" v-if="type == 0">
					<view class="btn-ok" @click="pay()" v-if="userInfo.approve == 0 && userInfo.approve_check == null">授权</view>
					<view class="btn-ok" style="background: #b4b4b4;" v-if="userInfo.approve == 0 && userInfo.approve_check != null">授权审核中</view>
					<view class="btn-ok" style="background: #b4b4b4;" v-if="userInfo.activity == 0 && userInfo.activate_check != null">激活审核中</view>
					<view class="btn-ok" @click="activate('activate')" v-if="userInfo.approve == 1 && userInfo.activity == 0 && userInfo.activate_check == null">激活</view>
					<view class="btn-qx" @click="quxiao">取消</view>
				</view>
				<view class="popup-btn" @click="quxiao" v-else>知道了</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="center">
			<view class="popup">
				<image class="popup-bg" src="../../static/img/popup-bg.png" mode=""></image>
				<view class="popup-title">升级领奖</view>
				<view class="popup-main">
					<view class="quan"><image class="ling" src="../../static/img/ling.png" mode=""></image></view>
					<view class="popup-info" v-if="type == 0">
						是否消耗{{ mention }}{{ mentionType }}
						<br />
						升级粉丝身份
					</view>
				</view>
				<view class="btn-box">
					<view class="btn-ok" @click="activate('level')" v-if="userInfo.level_check == null">升级</view>
					<view class="btn-ok" style="background: #b4b4b4;" v-if="userInfo.level_check != null">升级审核中</view>
					<view class="btn-qx" @click="quxiao">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import MetaMaskOnboarding from '@metamask/onboarding';
import { mapState, mapMutations } from 'vuex';
import { logins, userinfo, logout } from '@/api/login.js';
import { addSpread, index } from '@/api/index.js';
import { activateUser, transferDate, approveUser, approveDate, extractCaculator, extractUSDT, levelUp } from '@/api/money.js';
import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
export default {
	computed: {
		...mapState('user', ['address', 'hasLogin', 'userInfo'])
	},
	components: {
		uniPopup
	},
	filters: {
		addFile(provider) {
			if (provider.length >= 19) {
				var subStr1 = provider.substr(0, 18);
				var subStr2 = provider.substr(provider.length - 8, 8);
				var subStr = subStr1 + '...' + subStr2;
				provider = subStr;
			}
			return provider;
		}
	},
	onShow() {
		index().then(({ data }) => {
			console.log(data);
			this.lake = data.lake;
			this.mention = data.activateNumber;
			this.mentionType = data.activateToken;
			this.level_price = JSON.parse(data.level_price);
		});
		userinfo().then(({ data }) => {
			this.setUserInfo(data.data);
		});
	},
	data() {
		return {
			type: 0, //0是激活1是升级
			num: '', //领取的数量
			recommend: '', //推荐人地址
			lake: 1, //奖金池数量
			mention: 0, //激活(升级)数量
			mentionType: '', //激活单位
			level_price: '' //升级价格
		};
	},
	methods: {
		...mapMutations('user', ['setAddress', 'setUserInfo', 'login']),
		nav(url) {
			uni.navigateTo({
				url
			});
		},
		spare() {
			const obj = this;
			if (this.recommend == '') {
				this.$api.msg('请填写要加入流量的地址');
				return;
			}

			uni.showModal({
				title: '提示',
				content: '您是否要绑定到改流量（' + this.recommend + '）',
				success: function(res) {
					if (res.confirm) {
						addSpread({ address: obj.recommend }).then(e => {
							console.log(e, '123468');
							if (e.code == 1) {
								obj.$api.msg('绑定成功');
								window.location.reload();
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		join(e) {
			const obj = this;
			if (e != 2) {
				this.type = e;
				if(e == 0){
					if(this.userInfo.activity == 1){
						obj.$api.msg('账号已激活');
						return;
					}
				}
				this.$refs.popup.open();
			} else {
				if (obj.userInfo.activity == 0 && obj.userInfo.activate_check == null) {
					obj.$api.msg('账号未激活请先去激活');
					return;
				}
				if (obj.userInfo.activity == 0 && obj.userInfo.activate_check != null) {
					obj.$api.msg('账号激活还在审核，请耐心等待');
					return;
				}
				if (obj.userInfo.point_level >= 9) {
					obj.$api.msg('已升到最高等级');
					return;
				}
				Object.keys(obj.level_price).forEach(e => {
					if (obj.userInfo.point_level + 1 == e) {
						obj.mention = obj.level_price[e];
						console.log(obj.mention, '123');
					}
				});
				this.$refs.popup1.open();
			}
		},
		copy(value) {
			let obj = this;
			let content = value; //需要复制的内容
			console.log('复制的内容:', content);
			// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
			const result = uniCopy(content);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		},
		quxiao() {
			this.$refs.popup.close();
			this.$refs.popup1.close();
		},
		foxlogin() {
			const isMetaMaskInstalled = this.isMetaMaskInstalled();
			if (!isMetaMaskInstalled) {
				const forwarderOrigin = 'http://flow.frp.liuniu946.com/index/#/';
				const onboarding = new MetaMaskOnboarding({ forwarderOrigin });
				onboarding.startOnboarding();
			} else {
				try {
					ethereum.request({ method: 'eth_requestAccounts' });
					this.getaccount();
				} catch (error) {
					console.log(error, '1234556');
				}
			}
		},
		async getaccount() {
			const obj = this;
			const accounts = await ethereum.request({ method: 'eth_accounts' });
			if (accounts[0] == undefined) {
				this.foxlogin();
			} else {
				console.log(accounts[0]);
				this.setAddress(accounts[0]);
				this.changeAddress();
				logins({ address: obj.address }).then(({ data }) => {
					obj.login();
					uni.setStorageSync('token', data.userinfo.token);
					userinfo().then(({ data }) => {
						console.log(data);
						obj.setUserInfo(data.data);
					});
				});
			}
		},
		async changeAddress() {
			try {
				await ethereum.request({
					method: 'wallet_switchEthereumChain',
					params: [{ chainId: '0x38' }]
				});
			} catch (switchError) {
				console.log(switchError, 'erro');
				// This error code indicates that the chain has not been added to MetaMask.
				if (switchError.code === 4902) {
					try {
						await ethereum.request({
							method: 'wallet_addEthereumChain',
							params: [
								{
									chainId: '0x38',
									chainName: 'BSC主网络',
									rpcUrls: ['https://bsc-dataseed1.binance.org/'] /* ... */,
									blockExplorerUrls: ['https://bscscan.com/'],
									nativeCurrency: {
										name: 'BNB',
										symbol: 'BNB',
										decimals: 18
									}
								}
							]
						});
					} catch (addError) {}
				}
			}
		},
		isMetaMaskInstalled() {
			const { ethereum } = window;
			return Boolean(ethereum && ethereum.isMetaMask);
		},
		paybnb() {
			uni.showLoading({
				title: '加载中...'
			});
			const obj = this;
			obj.num = obj.userInfo.USDT;
			console.log(obj.num);
			extractCaculator({
				number: obj.num
			})
				.then(e => {
					let gas = '0x' + (e.data.gas * 1).toString(16);
					let to = e.data.to;
					const params = [
						{
							from: obj.address,
							to: to,
							value: gas,
							data: ''
						}
					];
					console.log(params, '123456789');
					ethereum
						.request({
							method: 'eth_sendTransaction',
							params
						})
						.then(result => {
							console.log(result, 'result');
							uni.hideLoading();
							extractUSDT({
								transactionHash: result
							}).then(e => {
								obj.shua();
								obj.num = 0;
								obj.$api.msg(e.msg);
								console.log(e, 'zhuanqian');
							});
						})
						.catch(error => {
							uni.hideLoading();
							console.log(error, 'error');
						});
				})
				.catch(e => {
					uni.hideLoading();
					console.log(e);
				});
		},
		//授权
		pay() {
			uni.showLoading({
				title: '加载中...'
			});
			const obj = this;
			console.log(11);
			obj.show = false;
			approveDate({ to: '', amount: 0 }).then(e => {
				console.log(e, 'datajm');
				const params = [
					{
						from: obj.address,
						to: '0xaea66e42faf4c4dcfd400233b5e640f40ad4904b',
						// to: '0x90934fee7a274225d3e8864da725f13b3cd11aab',
						data: e.data.data
					}
				];
				ethereum
					.request({
						method: 'eth_sendTransaction',
						params
					})
					.then(result => {
						console.log(result, 'result');
						uni.hideLoading();
						approveUser({
							transactionHash: result
						}).then(e => {
							obj.shua();
							obj.$api.msg(e.msg);
						});
					})
					.catch(error => {
						uni.hideLoading();
						console.log(error, 'error');
					});
			});
		},
		shua() {
			window.location.reload();
		},
		//激活
		activate(type) {
			uni.showLoading({
				title: '加载中...'
			});
			const obj = this;
			console.log(11);
			obj.show = false;
			transferDate({ to: '', amount: obj.mention, type: type }).then(e => {
				console.log(e, 'datajm');
				const params = [
					{
						from: obj.address,
						to: '0xaea66e42faf4c4dcfd400233b5e640f40ad4904b',
						// to: '0x90934fee7a274225d3e8864da725f13b3cd11aab',
						data: e.data.data
					}
				];
				obj.$refs.popup.close();
				obj.$refs.popup1.close();
				ethereum
					.request({
						method: 'eth_sendTransaction',
						params
					})
					.then(result => {
						console.log(result, 'result');
						uni.hideLoading();
						if (type == 'activate') {
							activateUser({
								number: obj.mention,
								transactionHash: result
							}).then(e => {
								obj.shua();
								obj.$api.msg(e.msg);
							});
						}
						if (type == 'level') {
							levelUp({
								number: obj.mention,
								transactionHash: result
							}).then(e => {
								obj.shua();
								obj.$api.msg(e.msg);
							});
						}
					})
					.catch(error => {
						uni.hideLoading();
						console.log(error, 'error');
					});
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: auto;
	min-height: 100%;
}
.bg {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	left: 0;
	width: 750rpx;
	height: 3476rpx;
}
.top {
	position: absolute;
	top: 50rpx;
	right: 30rpx;
	align-items: center;
	.top-bg {
		width: 50rpx;
		height: 50rpx;
	}
}
.login-index {
	position: relative;
	z-index: 10;
	margin-left: 24rpx;
	width: 213rpx;
	height: 69rpx;
	background: #ffffff;
	border-radius: 10rpx;
	justify-content: flex-start;
	padding: 0 20rpx;
	.address {
		width: 46rpx;
		height: 44rpx;
		flex-shrink: 0;
	}
	.address-font {
		margin-left: 10rpx;
		font-size: 27rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0c1732;
	}
}
.title {
	font-size: 151rpx;
	font-family: Microsoft YaHei UI;
	font-weight: bold;
	color: #eeeeee;
	padding-top: 190rpx;
	position: relative;
	z-index: 2;
	text-align: center;
}
.all {
	margin-top: 400rpx;
	.all-title {
		position: relative;
		z-index: 3;
		width: 300rpx;
		height: 100rpx;
		margin: 0 auto;
		.all-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
		}
		.all-font {
			position: relative;
			z-index: 20;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0c1732;
			line-height: 100rpx;
			text-align: center;
		}
	}
	.all-box {
		position: relative;
		z-index: 2;
		width: 670rpx;
		height: 204rpx;
		box-sizing: border-box;
		padding: 6rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 0px 30rpx 0px 30rpx;
		background-image: linear-gradient(0deg, #6456fb, #45f8f8);
		margin: -50rpx auto 0;
		.all-sun {
			width: 100%;
			height: 100%;
			border-radius: 0px 30rpx 0px 30rpx;
			background-color: #ffffff;
			.all-num {
				padding-top: 92rpx;
				text-align: center;
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0c1732;
				text {
					font-size: 33rpx;
				}
			}
		}
		.all-back {
			position: absolute;
			top: 80rpx;
			right: 28rpx;
			width: 42rpx;
			height: 42rpx;
		}
	}
}
.title-address {
	position: relative;
	z-index: 2;
	margin: 50rpx 0 0 50rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.share-box {
	position: relative;
	z-index: 2;
	width: 670rpx;
	height: 100rpx;
	padding: 6rpx;
	box-sizing: border-box;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 0px 30rpx 0px 30rpx;
	background-image: linear-gradient(0deg, #6456fb, #45f8f8);
	margin: 40rpx auto 0;
	.share-sun {
		width: 100%;
		height: 100%;
		border-radius: 0px 30rpx 0px 30rpx;
		background-color: #ffffff;
		.share-font {
			width: 480rpx;
			padding-left: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0c1732;
		}
		.share-btn {
			width: 160rpx;
			height: 100%;
			background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04b8ff, #375afe);
			border-radius: 0px 20rpx 0px 0;
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
.feature {
	position: relative;
	z-index: 2;
	margin: 50rpx auto 0;
	width: 670rpx;
	height: 390rpx;
	padding: 6rpx;
	box-sizing: border-box;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 0px 30rpx 0px 30rpx;
	background-image: linear-gradient(0deg, #6456fb, #45f8f8);
	.feature-sun {
		width: 100%;
		height: 100%;
		border-radius: 0px 30rpx 0px 30rpx;
		background-color: #ffffff;
		.feature-top {
			justify-content: space-around;
			width: 100%;
			padding-top: 68rpx;
			.feature-item {
				display: flex;
				width: 33%;
				flex-direction: column;
				align-items: center;
				.item-bg {
					width: 102rpx;
					height: 128rpx;
				}
				.feature-font {
					margin-top: 20rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0c1732;
				}
			}
		}
		.feature-bottom {
			margin-top: 55rpx;
			justify-content: center;
			.bottom-font {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #375afe;
				padding-right: 10rpx;
			}
			.wen {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}
.my-box {
	position: relative;
	z-index: 2;
	margin: 40rpx;
	flex-wrap: wrap;
	.my-item {
		margin-top: 40rpx;
		width: 210rpx;
		background: #ffffff;
		padding: 6rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 0px 30rpx 0px 30rpx;
		background-image: linear-gradient(0deg, #6456fb, #45f8f8);
		.my-sun {
			width: 100%;
			height: 100%;
			border-radius: 0px 30rpx 0px 30rpx;
			background-color: #ffffff;
			align-items: center;
			flex-direction: column;
			justify-content: flex-start;
			padding: 24rpx 20rpx 24rpx;
			.my-bg {
				flex-shrink: 0;
				width: 60rpx;
				height: 60rpx;
			}
			.my-font {
				text-align: center;
				margin-top: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0c1732;
				line-height: 36rpx;
			}
			.my-num {
				margin-top: 50rpx;
				padding-bottom: 6rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0c1732;
			}
			.num-box {
				margin-top: 50rpx;
				justify-content: space-between;
				width: 100%;
				.num-item {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					.num-num {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #0c1732;
					}
					.num-font {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}
	}
}
.history {
	position: relative;
	z-index: 2;
	width: 670rpx;
	padding: 6rpx;
	box-sizing: border-box;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 0px 30rpx 0px 30rpx;
	background-image: linear-gradient(0deg, #6456fb, #45f8f8);
	margin: 40rpx auto 0;
	.history-sun {
		width: 100%;
		height: 100%;
		border-radius: 0px 30rpx 0px 30rpx;
		background-color: #ffffff;
		padding: 20rpx 26rpx 20rpx 20rpx;
		.history-left {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		.history-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.history-bg {
			width: 60rpx;
			height: 60rpx;
			align-items: center;
		}
		.history-font {
			margin-left: 14rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0c1732;
		}
		.history-num {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0c1732;
		}
		.history-btn {
			margin-left: 10rpx;
			width: 100rpx;
			height: 50rpx;
			background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04b8ff, #375afe);
			border-radius: 10rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 50rpx;
		}
		.level-bg {
			flex-shrink: 0;
			width: 158rpx;
			height: 106rpx;
		}
		.back {
			width: 42rpx;
			height: 42rpx;
		}
		.level-font {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.level-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0c1732;
			}
			.level-tip {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
}
.network {
	position: relative;
	z-index: 2;
	margin: 50rpx 50rpx 0 56rpx;
	.network-left {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	.network-right {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.netRight-font {
			margin-right: 8rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.n-back {
			width: 13rpx;
			height: 22rpx;
		}
	}
}
.network-box {
	position: relative;
	z-index: 2;
	width: 670rpx;
	height: 178rpx;
	padding: 6rpx;
	box-sizing: border-box;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 0px 30rpx 0px 30rpx;
	background-image: linear-gradient(0deg, #6456fb, #45f8f8);
	margin: 40rpx auto 0;
	.network-sun {
		width: 100%;
		height: 100%;
		border-radius: 0px 30rpx 0px 30rpx;
		background-color: #ffffff;
		padding: 26rpx 24rpx 0 20rpx;
		.network-top {
			.nTop-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.nTop-bg {
					width: 60rpx;
					height: 60rpx;
				}
				.nTop-font {
					margin-left: 14rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0c1732;
				}
			}
			.nTop-btn {
				width: 100rpx;
				height: 50rpx;
				background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04b8ff, #375afe);
				border-radius: 10rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 50rpx;
			}
		}
		.network-bottom {
			padding: 16rpx 0 0 78rpx;
			.bottom-item {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				text {
					display: inline-block;
					margin-left: 6rpx;
					color: #000000;
					font-size: 30rpx;
				}
			}
		}
	}
}
.popup {
	position: relative;
	width: 600rpx;
	height: 780rpx;
	background: #ffffff;
	border-radius: 10rpx;

	.popup-bg {
		position: absolute;
		width: 600rpx;
		height: 370rpx;
	}
	.popup-title {
		padding-top: 90rpx;
		text-align: center;
		position: relative;
		font-size: 60rpx;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: #fdfaf9;
		text-shadow: 0px 9rpx 10rpx rgba(113, 103, 247, 0.48);
	}
	.popup-main {
		position: relative;
		width: 510rpx;
		height: 364rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0px 10rpx 10rpx #f5f5f5;
		margin: 60rpx auto 0;
		.quan {
			position: relative;
			width: 183rpx;
			height: 183rpx;
			background: #ffffff;
			box-shadow: 0px 9rpx 32rpx 0px rgba(55, 90, 254, 0.2);
			border-radius: 50%;
			position: relative;
			top: -34rpx;
			margin: 0 auto;
			.ling {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				width: 120rpx;
				height: 120rpx;
			}
		}
		.popup-info {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.btn-box {
		margin: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn-ok {
			width: 234rpx;
			height: 78rpx;
			background: #375afe;
			border-radius: 40rpx;
			line-height: 78rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.btn-qx {
			width: 234rpx;
			height: 78rpx;
			border: 1px solid #375afe;
			border-radius: 40rpx;
			line-height: 78rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #375afe;
		}
	}
	.popup-btn {
		margin: 50rpx;
		width: 504rpx;
		height: 78rpx;
		background: #375afe;
		border-radius: 40px;
		text-align: center;
		line-height: 78rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}
</style>