|
|
@@ -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;
|
|
|
}
|
|
|
}
|
|
|
}
|
