hx/pages/index/network.vue

<template>
	<view class="center">
		<image class="network-bg" src="../../static/img/network-bg.png" mode=""></image>
		<view class="table">
			<view class="table-top flex">
				<view class="title"></view>
				<view class="title">有效<br/>节点</view>
				<view class="title">空位<br/>节点</view>
				<view class="title">待领取<br/>奖励</view>
				<view class="title">已领取<br/>奖励</view>
				<view class="title">未生成<br/>奖励</view>
			</view>
			<view class="table-item flex" v-for="(item,index) in network">
				<view class="t-font">{{index+1}}级</view>
				<view class="t-font">{{ item.activate*1 }}</view>
				<view class="t-font">{{ item.invalid*1 }}</view>
				<view class="t-font">{{ item.wait*1 }}</view>
				<view class="t-font">{{ item.get*1 }}</view>
				<view class="t-font">{{ item.no*1 }}</view>
			</view>
		</view>
		<view class="bottom">
			
		</view>
	</view>
</template>

<script>
import { group } from '@/api/index.js';
export default {
	data() {
		return{
			network:[],
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		loadData() {
			uni.showLoading({
				title: '加载中...'
			});
			group({}).then(({ data }) =>{
				this.network = data
				uni.hideLoading();
			})
		}
	}
}
</script>

<style lang="scss">
page,.center {
	height: 100%;
	background: #f7f7f7;
}
.network-bg {
	margin: 20rpx 14rpx 0;
	width: 720rpx;
	height: 422rpx;
}
.table{
	width: 690rpx;
	margin: -10rpx auto 0;
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	.table-top {
		background: linear-gradient(0deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
		padding: 32rpx 0;
		justify-content: space-around;
	}
	.title{
		width: 114rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.table-item {
		padding: 22rpx 0;
		justify-content: space-around;
		.t-font {
			width: 98rpx;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4B596B;
		}
	}
}
.bottom {
	height: 30rpx;
}
</style>