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>
	</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;
	}
}
</style>