123456

pages/index/rg.vue

@@ -1,7 +1,32 @@
 <template>
 	<view class="content">
 		<view class="top"><image src="../../static/img/rg.png" mode=""></image></view>
-		<view class="main" v-for="(item, index) in 10"></view>
+		<view class="main" v-for="(item, index) in 1" @click="navTo()">
+			<view class="main-top flex">
+				<view class="main-icon"><image src="../../static/img/b1.png" mode=""></image></view>
+				<view class="main-top-info">
+					<view class="main-title">TTC幣第二期認購</view>
+					<view class="main-btype">認購幣種：GCB</view>
+					<view class="main-time">開始時間：2021-12-05 00:00:00</view>
+					<view class="main-time">結束時間：2021-12-25 00:00:00</view>
+				</view>
+			</view>
+			<view class="xian"><u-line-progress active-color="#2979ff" :percent="100"></u-line-progress></view>
+			<view class="main-bottom flex">
+				<view class="main-bottom-item first">
+					<view class="main-bottom-item-font">發行總量</view>
+					<view class="main-bottom-item-num">30000000.000000</view>
+				</view>
+				<view class="main-bottom-item">
+					<view class="main-bottom-item-font">認購單價</view>
+					<view class="main-bottom-item-num">1.200000 usdt</view>
+				</view>
+				<view class="main-bottom-item">
+					<view class="main-bottom-item-font">鎖倉時間</view>
+					<view class="main-bottom-item-num">120天</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -12,17 +37,80 @@ export default {
 	},
 	onLoad() {},
 	onShow() {},
-	methods: {}
+	methods: {
+		navTo() {
+			this.$api.msg('認購時間未到，暫不能認購');
+		}
+	}
 };
 </script>
 
 <style lang="scss">
 .top {
+	margin: auto;
 	width: 750rpx;
-	height: 750rpx;
+	height: 300rpx;
 	image {
 		width: 100%;
 		height: 100%;
 	}
 }
+.main {
+	background: #fff;
+	margin-top: 20rpx;
+	padding: 16rpx 20rpx 24rpx;
+	.main-top {
+		justify-content: flex-start;
+		align-items: center;
+		.main-icon {
+			width: 250rpx;
+			height: 250rpx;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.main-top-info {
+			margin-left: 10rpx;
+			.main-title {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #707a8a;
+			}
+			.main-btype {
+				margin-top: 6rpx;
+				font-size: 28rpx;
+				color: #707a8a;
+			}
+			.main-time {
+				margin-top: 6rpx;
+				font-size: 28rpx;
+				color: #707a8a;
+			}
+		}
+	}
+	.xian {
+		margin-top: 20rpx;
+	}
+	.main-bottom {
+		padding: 28rpx 16rpx;
+		.first {
+			align-items: flex-start !important;
+		}
+		.main-bottom-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.main-bottom-item-font {
+				font-size: 28rpx;
+				color: #707a8a;
+			}
+			.main-bottom-item-num {
+				margin-top: 10rpx;
+				font-size: 28rpx;
+				color: #707a8a;
+			}
+		}
+	}
+}
 </style>