NFT/pages/index/info.vue

<template>
	<view class="center">
		<view class="bg"></view>
		<view class="box first">
			<view class="top flex">
				<view class="top-bg"><image src="../../static/img/index4.png"></image></view>
				<view class="top-font">汇总数据</view>
			</view>
			<view class="title">总发行量：20亿</view>
			<view class="item flex">
				<view class="left">
					<view class="item-font">
						流通量：
						<span>{{ hui_zong_shu_ju.liu_tong_liang || '0000' }}</span>
					</view>
					<view class="item-font">
						持币地址数：
						<span>{{ hui_zong_shu_ju.chi_bi_di_zhi_shu || '0000' }}</span>
					</view>
					<view class="item-font">
						当前质押：
						<span>{{ hui_zong_shu_ju.dang_qian_zhi_ya_liang || '0' }}</span>
					</view>
					<view class="item-font">
						昨日销毁量：
						<span>{{ hui_zong_shu_ju.zuo_ri_xiao_hui_liang * 1 || '0000' }}</span>
					</view>
				</view>
				<view class="right">
					<view class="item-font">
						当天价格：
						<span>{{ hui_zong_shu_ju.dang_tian_jia_ge * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						节点数：
						<span>{{ hui_zong_shu_ju.jie_dian_shu * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						合伙人数：
						<span>{{ hui_zong_shu_ju.he_huo_ren_shu || '0000' }}</span>
					</view>
					<view class="item-font">
						累计销毁量：
						<span>{{ hui_zong_shu_ju.lei_ji_xiao_hui_liang * 1 || '0000' }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="top flex">
				<view class="top-bg"><image src="../../static/img/index4.png"></image></view>
				<view class="top-font">昨日经营数据</view>
			</view>
			<view class="item flex">
				<view class="left">
					<view class="item-font">
						拼团数：
						<span>{{ zuo_ri_jing_ying.pin_tuan_shu || '0' }}</span>
					</view>
					<view class="item-font">
						业 绩：
						<span>{{ zuo_ri_jing_ying.ye_ji * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						参与人数：
						<span>{{ zuo_ri_jing_ying.can_yu_ren_shu * 1 || '0' }}</span>
					</view>
					<view class="item-font">
						转账手续费：
						<span>{{ zuo_ri_jing_ying.zhuan_zhang_shou_xu_fei || '0' }}</span>
					</view>
					<view class="item-font">
						转账销毁数：
						<span>{{ zuo_ri_jing_ying.zhuan_zhang_xiao_hui_shu || '0' }}</span>
					</view>
				</view>
				<view class="right">
					<view class="item-font">
						门票数：
						<span>{{ zuo_ri_jing_ying.men_piao_shu * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						门票销毁数：
						<span>{{ zuo_ri_jing_ying.men_piao_xiao_hui_shu * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						门票分红：
						<span>{{ (zuo_ri_jing_ying.men_piao_fen_hong * 1).toFixed(2) || '0000' }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="top flex">
				<view class="top-bg"><image src="../../static/img/index4.png"></image></view>
				<view class="top-font">累计经营数据</view>
			</view>
			<view class="item flex">
				<view class="left">
					<view class="item-font">
						拼团数：
						<span>{{ le_ji_jing_ying.pin_tuan_shu || '0' }}</span>
					</view>
					<view class="item-font">
						总业绩：
						<span>{{ le_ji_jing_ying.ye_ji * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						参与人数：
						<span>{{ le_ji_jing_ying.can_yu_ren_shu * 1 || '0' }}</span>
					</view>
					<view class="item-font">
						转账手续费：
						<span>{{ le_ji_jing_ying.zhuan_zhang_shou_xu_fei || '0' }}</span>
					</view>
					<view class="item-font">
						转账销毁数：
						<span>{{ le_ji_jing_ying.zhuan_zhang_xiao_hui_shu || '0' }}</span>
					</view>
				</view>
				<view class="right">
					<view class="item-font">
						门票数：
						<span>{{ le_ji_jing_ying.men_piao_shu * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						门票销毁数：
						<span>{{ le_ji_jing_ying.men_piao_xiao_hui_shu * 1 || '0000' }}</span>
					</view>
					<view class="item-font">
						门票分红：
						<span>{{ (le_ji_jing_ying.men_piao_fen_hong * 1).toFixed(2) || '0000' }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="join">
			<view class="xian"></view>
			<view class="join-font">流动池数据</view>
		</view>
		<view class="tabBox">
			<view class="tabBox-top flex">
				<view class="tabBox-item one">矿池类型</view>
				<view class="tabBox-item two">初始量</view>
				<view class="tabBox-item three">占比</view>
				<view class="tabBox-item four">当前量</view>
				<view class="tabBox-item five">变动</view>
				<view class="tabBox-item six">变动时间</view>
			</view>
			<view v-for="(item, index) in list" class="tabBox-top flex">
				<view class="tabBox-item one">{{ item.name }}</view>
				<view class="tabBox-item two">{{ item.num }}</view>
				<view class="tabBox-item three">{{ item.bi }}</view>
				<view class="tabBox-item four">{{ item.now }}</view>
				<view class="tabBox-item five">{{ item.bian }}</view>
				<view class="tabBox-item six">{{ item.time }}</view>
			</view>
		</view>

		<view class="join">
			<view class="xian"></view>
			<view class="join-font">通证模型</view>
		</view>
		<view class="image"><image src="../../static/img/info-image.png" mode=""></image></view>
		<view class="box">
			<view class="top flex">
				<view class="top-bg"><image src="../../static/img/index4.png"></image></view>
				<view class="top-font">链上数据查询</view>
			</view>
			<view class="item">1.合伙池：<text class="address">TXECLF5VPQ52pvyUAa9KiPpEYcxmMtQFVN</text> </view>
			<view class="item">2.质押池：<text class="address">TL1Z9aBSWw6A1NkxQRvdWAnfyPJ6QYKFzF</text></view>
			<view class="item">3.流动池：<text class="address">TJQ9A51MsnK3pkXpSqAjjw69yDUfE6tB62</text></view>
			<view class="item">4.交易池：<text class="address">TWb36FhVHZKeTKHVi9nkz1cwGNPGKuWMDd</text></view>
			<view class="item">5.链商池：<text class="address">TAbsEXijPaN4PXSAodnVJnzxxkynGgNQ7x</text></view>
			<view class="item">6.平台池：<text class="address">TX8MBniPxdyebmhcT4Yej4GffZoN6DfyH2</text></view>
			<view class="item">7.推广池：<text class="address">TCPH6ZXQrCQ2LetXuMd5X6EUmmTMUC1R7h</text> </view>
			<view class="item">8.团队池：<text class="address">TJq5kwQPZczw5LjKdVw3Hg6FwKgQZe4Dp9</text></view>
		</view>
	</view>
</template>

<script>
import { finance } from '@/api/wallet';
export default {
	data() {
		return {
			list: [
				{
					name: '质押挖矿池',
					num: '3.2亿',
					bi: '16%',
					now: ' ',
					bian: '%',
					time: ''
				},
				{
					name: '流动性挖矿池',
					num: '6.4亿',
					bi: '32%',
					now: ' ',
					bian: '%',
					time: ''
				},
				{
					name: '交易挖矿矿池',
					num: '3.2亿',
					bi: '16%',
					now: ' ',
					bian: '%',
					time: ''
				},
				{
					name: '链商挖矿',
					num: '3.2亿',
					bi: '16%',
					now: ' ',
					bian: '%',
					time: ''
				},
				{
					name: '平台社区',
					num: '1.6亿',
					bi: '8%',
					now: ' ',
					bian: '%',
					time: ''
				},
				{
					name: '推广挖矿',
					num: '0.4亿',
					bi: '2%',
					now: ' ',
					bian: '%',
					time: ''
				},
				{
					name: '团队池',
					num: '1亿',
					bi: '5%',
					now: ' ',
					bian: '%',
					time: ''
				},
				{
					name: '节点合伙人池',
					num: '1亿',
					bi: '5%',
					now: '',
					bian: '%',
					time: ''
				}
			],
			hui_zong_shu_ju: '',
			le_ji_jing_ying: '',
			zuo_ri_jing_ying: ''
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			finance().then(({ data }) => {
				console.log(data);
				this.hui_zong_shu_ju = data.hui_zong_shu_ju;
				this.le_ji_jing_ying = data.le_ji_jing_ying;
				this.zuo_ri_jing_ying = data.zuo_ri_jing_ying;
				uni.hideLoading();
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	height: 100%;
	background: #f7fbfe;
}
.bg {
	width: 750rpx;
	height: 248rpx;
	background: linear-gradient(90deg, #60bab0, #60bab0, #45969b);
	border-bottom-left-radius: 150rpx;
	border-bottom-right-radius: 150rpx;
}
.first {
	margin-top: -160rpx !important;
}
.box {
	width: 690rpx;
	height: auto;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 17rpx 0rpx rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	margin: 20rpx auto 0;
	padding: 33rpx 55rpx 45rpx 30rpx;
	.top {
		justify-content: flex-start;
		align-items: center;
		.top-bg {
			width: 48rpx;
			height: 46rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.top-font {
			margin-left: 11rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
		}
	}
	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #44969d;
		margin-top: 30rpx;
	}
	.item {
		align-items: flex-start;
		margin-top: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
		text-align: left;
		.address {
			display: inline;
			
		}
		.item-font {
			margin-top: 20rpx;
			span {
				color: #0f253a;
			}
		}
	}
}
.join {
	margin-top: 44rpx;
	padding-left: 30rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.xian {
		width: 6rpx;
		height: 30rpx;
		background: #0f253a;
		border-radius: 4rpx;
	}
	.join-font {
		padding-left: 16rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0f253a;
	}
}
.image {
	width: 690rpx;
	height: 489rpx;
	border-radius: 20rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	margin: 26rpx auto 0;
	image {
		border-radius: 20rpx;
		width: 690rpx;
		height: 480rpx;
	}
}
.tabBox {
	margin: 30rpx auto 0;
	width: 690rpx;
	height: auto;
	background: #ffffff;
	border: 2rpx solid #44969d;
	box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	border-radius: 20rpx;
	.tabBox-top:last-child {
		border-bottom: none;
	}
	.tabBox-top {
		justify-content: flex-start;
		overflow: hidden;
		width: 100%;
		height: 70rpx;
		border-bottom: 2rpx solid #44969d;
		.tabBox-item:last-child {
			border-right: none;
		}
		.tabBox-item {
			overflow: hidden;
			text-align: center;
			line-height: 70rpx;
			border-right: 2rpx solid #44969d;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
		}
		.one {
			width: 160rpx !important;
		}
		.two {
			width: 134rpx !important;
		}
		.three {
			width: 65rpx !important;
		}
		.four {
			height: 70rpx;
			width: 110rpx !important;
		}
		.five {
			width: 64rpx !important;
		}
		.six {
			width: 170rpx !important;
		}
	}
}
</style>