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>0000</span>
					</view>
					<view class="item-font">
						持币地址数：
						<span>0000</span>
					</view>
					<view class="item-font">
						当前质押：
						<span>0000</span>
					</view>
					<view class="item-font">
						昨日销毁量：
						<span>0000</span>
					</view>
				</view>
				<view class="right">
					<view class="item-font">
						当天价格：
						<span>0000</span>
					</view>
					<view class="item-font">
						节点数：
						<span>0000</span>
					</view>
					<view class="item-font">
						合伙人数：
						<span>0000</span>
					</view>
					<view class="item-font">
						累计销毁量：
						<span>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">拼团数：0000</view>
					<view class="item-font">业 绩：0000</view>
					<view class="item-font">参与人数：0000</view>
					<view class="item-font">转账手续费：0000</view>
				</view>
				<view class="right">
					<view class="item-font">门票数：0000</view>
					<view class="item-font">问票销毁数：0000</view>
					<view class="item-font">门票分红：0000</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">拼团数：0000</view>
					<view class="item-font">总业绩：0000</view>
					<view class="item-font">参与人数：0000</view>
					<view class="item-font">转账手续费：0000</view>
					<view class="item-font">转账销毁数：0000</view>
				</view>
				<view class="right">
					<view class="item-font">门票数：0000</view>
					<view class="item-font">问票销毁数：0000</view>
					<view class="item-font">门票分红：0000</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="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.合约地址查询</view>
			<view class="item">2.销毁池查询</view>
			<view class="item">3.持币地址查询</view>
			<view class="item">4.流动池地址查询</view>
			<view class="item">4.1质押挖矿池</view>
			<view class="item">4.2流动性挖矿池</view>
			<view class="item">4.3交易挖矿矿池</view>
			<view class="item">4.4平台社区</view>
			<view class="item">4.5推广挖矿</view>
			<view class="item">4.6团队池</view>
			<view class="item">4.7节点合伙人池</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list:[
				{
					name:'质押挖矿池',
					num: '3.2亿',
					bi:'16%',
					now:'2亿',
					bian:'10%',
					time:'2021-8-16'
				},
				{
					name:'质押挖矿池',
					num: '3.2亿',
					bi:'16%',
					now:'2亿',
					bian:'10%',
					time:'2021-8-16'
				},
			]
		}
	}
}
</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;
		.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;
	}
}
.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: 147rpx!important;
		}
		.two {
			width: 134rpx!important;
		}
		.three {
			width: 65rpx!important;
		}
		.four {
			width: 110rpx!important;
		}
		.five {
			width: 64rpx!important;
		}
		.six {
			width: 170rpx!important;
		}
	}
}
</style>