2021-7-27

pages/index/index.vue

@@ -3,7 +3,6 @@
 		<view class="box-title">
 			<image src="../../static/img/index7.png" mode=""></image>
 		</view>
-
 		<view class="box-body">
 			<view class="navBox">
 				<view class="navBox-left">
@@ -95,9 +94,10 @@
 </script>
 <style lang="scss">
 	.center {
-		height: 100%;
+		height: auto;
+		min-height: 100%;
 		background-color: #FFFFFF;
-
+		padding-bottom: var(--window-bottom);
 		.box-title {
 			position: relative;
 			z-index: 1;

pages/index/node.vue

@@ -8,7 +8,7 @@
 				:height="70"
 				:show-bar="false"
 				active-color="#44969D"
-				inactive-color='#6D7C88'
+				inactive-color="#6D7C88"
 				:list="tabList"
 				:current="current"
 				@change="tabsChange"
@@ -17,23 +17,56 @@
 		</view>
 		<swiper class="tabSwiper" :current="current" @animationfinish="transition">
 			<swiper-item class="swiper-item">
-				<scroll-view scroll-y @scrolltolower="onreachBottom">
-					<view class="boxItem">
-						<view class="item" v-for="ls in tabList[0].list">
-							<view class="flex title">
-								<view class="tip"></view>
-								<view class="name">{{ ls.name }}</view>
+				<scroll-view class="boxItem" scroll-y @scrolltolower="onreachBottom">
+					<view class="item" v-for="ls in tabList[0].list">
+						<view class="flex title">
+							<view class="tip"></view>
+							<view class="name">{{ ls.name }}</view>
+						</view>
+						<view class="itemConetnt">
+							<view class="ls">
+								认购份额：
+								<text class="text">{{ ls.num + ls.type }}</text>
+							</view>
+							<view class="ls">
+								认
+								<text class="textInterval "></text>
+								购
+								<text class="textInterval "></text>
+								价：
+								<text class="text">1{{ ls.moneyType + '=' + ls.ratio + ls.type }}</text>
 							</view>
-							<view class="itemConetnt">
-								
+							<view class="ls">
+								认购名额：
+								<text class="text">{{ ls.limited }}</text>
+							</view>
+							<view class="ls">
+								认购总额：
+								<text class="text">{{ ls.allMoney + ls.moneyType }}</text>
 							</view>
 						</view>
+						<view class="lsButtom">立即认购</view>
 					</view>
 					<u-loadmore :status="tabList[0].loding"></u-loadmore>
 				</scroll-view>
 			</swiper-item>
 			<swiper-item class="swiper-item">
-				<scroll-view scroll-y @scrolltolower="onreachBottom"><u-loadmore :status="tabList[1].loding"></u-loadmore></scroll-view>
+				<scroll-view scroll-y @scrolltolower="onreachBottom">
+					<view class="boxItem flex" style=" flex-wrap: wrap;">
+						<view class="item1" v-for="ls in tabList[1].list">
+							<view class="rightTip">进行中</view>
+							<view class="ls1">
+								<view class="name1">{{ ls.name }}</view>
+								<view class="title1">{{ ls.mask }}</view>
+								<view class="title1">
+									认购份额:{{ls.allMoney+ls.type}}
+									<text></text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<u-loadmore :status="tabList[1].loding"></u-loadmore>
+				</scroll-view>
 			</swiper-item>
 		</swiper>
 	</view>
@@ -51,7 +84,7 @@ export default {
 							name: '节点认购第一期',
 							num: 1000, //认购份额
 							type: 'LALA', //认购货币类型
-							ratio: 10, //认购名额
+							ratio: 10, //认购比例
 							limited: 20, //限购名额
 							allMoney: 20, //认购总额
 							moneyType: 'USDT' //兑换比例金额
@@ -65,7 +98,36 @@ export default {
 					name: '我的认购',
 					pages: 1,
 					limit: 10,
-					list: [],
+					list: [
+						{
+							name: '节点认购第一期',
+							num: 1000, //认购份额
+							type: 'LALA', //认购货币类型
+							allMoney: 20 ,//认购总额
+							mask:'当前第六关'
+						},
+						{
+							name: '节点认购第一期',
+							num: 1000, //认购份额
+							type: 'LALA', //认购货币类型
+							allMoney: 20 ,//认购总额
+							mask:'当前第六关'
+						},
+						{
+							name: '节点认购第一期',
+							num: 1000, //认购份额
+							type: 'LALA', //认购货币类型
+							allMoney: 20 ,//认购总额
+							mask:'当前第六关'
+						},
+						{
+							name: '节点认购第一期',
+							num: 1000, //认购份额
+							type: 'LALA', //认购货币类型
+							allMoney: 20 ,//认购总额
+							mask:'当前第六关'
+						}
+					],
 					loding: 'loadmore' //loading加载中 nomore没有数据
 				}
 			]
@@ -118,24 +180,81 @@ export default {
 			.item {
 				background-color: #ffffff;
 				line-height: 1;
-				padding:  30rpx;
+				padding: 30rpx;
+				margin-bottom: 30rpx;
 				.title {
 					justify-content: flex-start;
 					padding-bottom: 30rpx;
 					align-items: stretch;
+					.tip {
+						width: 7rpx;
+						border-radius: 99rpx;
+						background-color: $base-color;
+					}
+					.name {
+						margin-left: 20rpx;
+						font-size: 30rpx;
+						font-weight: bold;
+						color: $font-color-dark;
+					}
+				}
+				.itemConetnt {
+					padding: 20rpx 0;
+					font-weight: bold;
+					font-size: 28rpx;
 					border-bottom: 1px solid $border-color-light;
+					border-top: 1px solid $border-color-light;
+					.ls {
+						padding: 10rpx 0;
+						color: $font-color-light;
+						.textInterval {
+							width: 0.5em;
+						}
+						.text {
+							color: $font-color-dark;
+						}
+					}
 				}
-				.tip {
-					width: 7rpx;
+				.lsButtom {
+					font-size: 30rpx;
+					background-image: $bg-green-gradual;
+					text-align: center;
+					color: $font-color-white;
+					padding: 30rpx 0;
 					border-radius: 99rpx;
-					background-color: $base-color;
+					margin: 20rpx 30rpx 0rpx 30rpx;
 				}
-				.name{
-					margin-left: 20rpx;
-					font-size: 30rpx;
+			}
+			.item1:nth-child(odd){
+				margin-right: 30rpx;
+			}
+			.item1 {
+				line-height: 1;
+				.ls1{
 					font-weight: bold;
-					color: $font-color-dark;
+					.name1{
+						color: $font-color-dark;
+						font-size: $font-base;
+						margin-top: -10rpx;
+					}
+					.title1{
+						margin-top: 15rpx;
+						color: $font-color-light;
+						font-size: 22rpx;
+					}
+				}
+				.rightTip{
+				  color:$uni-color-primary ;
+				  text-align: right;
+				  font-size: 24rpx;
 				}
+				flex-grow: 1;
+				min-width: 40%;
+				margin-bottom: 30rpx;
+				border-radius: 10rpx;
+				background-color: #FFFFFF;
+				border: 1px solid $uni-color-primary;
+				padding: 10rpx 10rpx 30rpx 30rpx;
 			}
 		}
 	}

uni.scss

@@ -45,7 +45,7 @@ $box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3;
 // 圆角
 $border-radius-sm: 15rpx;
 // 渐变背景颜色
-$bg-green-gradual: linear-gradient(-90edg #60bab0, #45969b);
+$bg-green-gradual: linear-gradient(90deg, #60BAB0, #45969B);
 /* 功能栏字体大小 */
 %font-title {
 	font-size: $font-lg + 2rpx;