NFT/pages/assets/myPing.vue

<template>
	<view class="center">
		<view class="bg"></view>
		<view class="zong flex">
			<view class="info">
				<view class="info-num">{{happy || '0.00' }}</view>
				<view class="info-font">福气值</view>
			</view>
			<view class="info">
				<view class="info-num">{{luck || '0.00' }}</view>
				<view class="info-font">幸运值</view>
			</view>
			<view class="info">
				<view class="info-num">{{honor || '0.00' }}</view>
				<view class="info-font">荣誉值</view>
			</view>
		</view>
		<view class="money flex">
			<view class="money-box">
				<view class="money-num">{{usdt || '0.00' }}</view>
				<view class="money-font">昨日USDT分红池</view>
			</view>
			<view class="money-box" >
				<view class="money-num" style="text-align: right;">{{fil || '0.00' }}</view>
				<view class="money-font">昨日FIL分红池</view>
			</view>
		</view>
		<view class="join">
			<view class="xian"></view>
			<view class="join-font">参与记录</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadData">
			<view v-for="(item,index) in list" :key="index" class="box" @click="nav(item)">
				<view class="title">
					<view class="log"><image src="" mode=""></image></view>
					<view class="name">{{item.name}}</view>
					<view class="lun">{{item.lun}}</view>
					<view class="more">详情</view>
				</view>
				<view class="main">
					<view class="main-info">
						<view class="main-left">参与份数</view>
						<view class="main-right">{{item.fen}}人份</view>
					</view>
					<view class="main-info">
						<view class="main-left">参与金额</view>
						<view class="main-right">{{item.money}}USDT</view>
					</view>
					<view class="main-info">
						<view class="main-left">参与时间</view>
						<view class="main-right">{{item.time}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			happy: '0.00',
			luck: '0.00',
			honor: '0.00',
			usdt: '0.00',
			fil: '0.00',
			list: [
				{
					name: 'FilsCoin矿机拼购',
					lun: '36轮',
					fen: 1,
					money: 100,
					time: '2021-07-23 14:00:20'
				},
				{
					name: 'FilsCoin矿机拼购',
					lun: '36轮',
					fen: 1,
					money: 100,
					time: '2021-07-23 14:00:20'
				},
				{
					name: 'FilsCoin矿机拼购',
					lun: '36轮',
					fen: 1,
					money: 100,
					time: '2021-07-23 14:00:20'
				},
			],
			loadtype: '',
			page: 1,
			limit: 10,
		}
	},
	methods:{
		nav(e) {
			uni.navigateTo({
				url: '/pages/assets/teamDetails'
			})
		},
	}
}
</script>

<style lang="scss">
.center,page {
	height: 100%;
	background: #F7FBFE;
}
.bg {
	width: 750rpx;
	height: 248rpx;
	background: #000000;
	border-bottom-left-radius: 150rpx;
	border-bottom-right-radius: 150rpx;
}
.zong {
	width: 690rpx;
	height: 181rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	margin: -150rpx auto 0;
	justify-content: space-between;
	padding: 0rpx 36rpx;
	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		.info-num {
			font-size: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0F253A;
		}
		.info-font {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6D7C88;
		}
	}
}
.money {
	width: 690rpx;
	height: 143rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	margin: 10rpx auto 0;
	justify-content: space-between;
	padding: 0rpx 36rpx;
	.money-box {
		display: flex;
		flex-direction: column;
		.money-num {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0F253A;
		}
		.money-font {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6D7C88;
		}
	}
}
.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;
	}
}
.box:first-child {
	margin-top: 34rpx;
}
.box {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	padding: 26rpx 36rpx 30rpx 30rpx;
	position: relative;
	.title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.log {
			width: 48rpx;
			height: 46rpx;
			background: #00BCD4;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.name {
			padding-left: 12rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0F253A;
		}
		.lun {
			padding-left: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6D7C88;
		}
		.more {
			padding-left: 158rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #44969D;
		}
	}
	.main {
		margin-top: 26rpx;
		.main-info{
			padding-top: 16rpx;
			display: flex;
			justify-content: space-between;
			.main-left {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6D7C88;
			}
			.main-right {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0F253A;
			}
		}
	}
}
</style>