NFT/pages/assets/teamDetails.vue

<template>
	<view class="center">
		<view class="box">
			<view class="title">
				<view class="log"><image src="" mode=""></image></view>
				<view class="name">FilsCoin矿机拼购</view>
				<view class="lun">36轮</view>
				<view class="more">已开奖</view>
			</view>
			<view class="main">
				<view class="main-info rule">每轮限购1组，每组限购1份</view>
				<view class="main-info time">
					开奖时间：
					<text>2021-07-21 08:00:00</text>
				</view>
				<view class="main-info new">该轮预约1份，拼中1份，退回0份</view>
			</view>
		</view>
		<view class="box">
			<view class="allTitle">
				<view class="title-left">第1组 预约份数/总份数：11/11</view>
				<view class="title-right">未中奖</view>
			</view>
			<view class="yu-main">
				<view class="img"><image src="" mode=""></image></view>
				<view class="yu-info">
					<view class="info">
						<view class="yu-font">回退本金</view>
						<view class="yu-num">100USDT</view>
					</view>
					<view class="info">
						<view class="yu-font">收益</view>
						<view class="yu-num">3USDT</view>
					</view>
					<view class="info">
						<view class="yu-font">唯一凭证</view>
						<view class="yu-num">LALA122002552000</view>
					</view>
				</view>
			</view>
			<view class="boom">
				<view class="boom-font">当前组爆快</view>
				<view class="boom-num">
					LALA122002552000
					<br />
					LALA122002552000
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: ''
		};
	}
};
</script>

<style lang="scss">
.center,
page {
	height: 100%;
	background: #f7fbfe;
}
.box {
	margin: 30rpx 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;
	.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: 140rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #44969d;
		}
	}
	.main {
		margin-top: 26rpx;
		.main-info {
			padding-top: 16rpx;
		}
		.rule {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0f253a;
		}
		.time {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6d7c88;
			text {
				color: #0f253a;
			}
		}
		.new {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff4c4c;
		}
	}
}
.allTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title-left {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0f253a;
	}
	.title-right {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
	}
}
.yu-main {
	margin-top: 40rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.img {
		width: 180rpx;
		height: 155rpx;
		flex-shrink: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.yu-info {
		padding-top: 14rpx;
		margin-left: 20rpx;
		width: 100%;
		.info {
			display: flex;
			justify-content: space-between;
			.yu-font {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6d7c88;
			}
			.yu-num {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0f253a;
			}
		}
	}
}
.boom {
	padding-left: 14rpx;
	margin-top: 28rpx;
	display: flex;
	justify-content: space-between;
	.boom-font {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
	}
	.boom-num {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0f253a;
	}
}
</style>