|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="wrap">
|
|
|
+ <!-- <view class="wrap">
|
|
|
<image src="../../static/img/xcbg.png" mode="" class="bg"></image>
|
|
|
<view class="data-wrap">
|
|
|
<image src="../../static/img/cg-bg-t.png" mode=""></image>
|
|
|
@@ -48,7 +48,94 @@
|
|
|
下一关
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
+ <swiper style="position: absolute;width: 100%;height: 100%;" :current="current" @change="changee">
|
|
|
+ <swiper-item>
|
|
|
+ <view class="tab1" >
|
|
|
+ <view class="tit">
|
|
|
+ 第一关
|
|
|
+ </view>
|
|
|
+ <view class="status">
|
|
|
+ {{pool.one_pool_sum >= 4 ? '已激活': '未激活'}}
|
|
|
+ </view>
|
|
|
+ <view class="val-wrap">
|
|
|
+ {{pool.one_pool_sum || '0'}}<text>人</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item >
|
|
|
+ <view class="tab1 tab2" >
|
|
|
+ <view class="tip">
|
|
|
+ {{pool.two_pool? '恭喜进入': '未进入'}}
|
|
|
+ </view>
|
|
|
+ <view class="tit">
|
|
|
+ 第二关
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="btn-list">
|
|
|
+ <view class="btn" v-for="item in 4" v-if="(item-1) == (pool.three_pool - pool.three_pool_out -1)">
|
|
|
+ {{item - 1}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="val" v-if="pool.two_pool > 0">
|
|
|
+ 当前排队共<text class="num">{{pool.two_pool}}</text>单，前方等待出局<text
|
|
|
+ class="num">{{pool.two_pool - pool.two_pool_out -1}}</text>人
|
|
|
+ </view>
|
|
|
+ <view class="val" v-else>
|
|
|
+ 当前暂未进入第二关
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item >
|
|
|
+ <view class="tab1 tab2 tab3" >
|
|
|
+ <view class="tip">
|
|
|
+ {{pool.three_pool? '恭喜进入': '未进入'}}
|
|
|
+ </view>
|
|
|
+ <view class="tit">
|
|
|
+ 第三关
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="btn-list">
|
|
|
+ <view class="btn" v-for="item in 4" v-if="(item-1) == (pool.three_pool - pool.three_pool_out -1)">
|
|
|
+ {{item - 1}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="val" v-if="pool.three_pool> 0">
|
|
|
+ 当前排队共<text class="num">{{pool.three_pool}}</text>单，前方等待出局<text
|
|
|
+ class="num">{{pool.three_pool - pool.three_pool_out -1}}</text>人
|
|
|
+ </view>
|
|
|
+ <view class="val" v-else>
|
|
|
+ 当前暂未进入第二关
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item >
|
|
|
+ <view class="tab1 tab2 tab4" >
|
|
|
+ <view class="tip">
|
|
|
+ {{pool.for_pool? '恭喜进入': '未进入'}}
|
|
|
+ </view>
|
|
|
+ <view class="tit">
|
|
|
+ 第四关
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="btn-list">
|
|
|
+ <view class="btn" v-for="item in 4" v-if="(item-1) == (pool.for_pool - pool.for_pool_out -1)">
|
|
|
+ {{item - 1}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="val" v-if="pool.for_pool > 0">
|
|
|
+ 当前排队共<text class="num">{{pool.for_pool}}</text>单，前方等待出局<text
|
|
|
+ class="num">{{pool.for_pool - pool.for_pool_out -1}}</text>人
|
|
|
+ </view>
|
|
|
+ <view class="val" v-else>
|
|
|
+ 当前暂未进入第四关
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -64,7 +151,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- current: 1,
|
|
|
+ current: 0,
|
|
|
pool: {}
|
|
|
}
|
|
|
},
|
|
|
@@ -75,6 +162,10 @@
|
|
|
...mapState('user', ['userInfo'])
|
|
|
},
|
|
|
methods: {
|
|
|
+ changee(res) {
|
|
|
+ console.log(res);
|
|
|
+ this.current = res.detail.current
|
|
|
+ },
|
|
|
userPool() {
|
|
|
userPool().then(res => {
|
|
|
console.log(res);
|
|
|
@@ -92,7 +183,6 @@
|
|
|
page {
|
|
|
height: auto;
|
|
|
min-height: 100%;
|
|
|
- // background-color: red;
|
|
|
}
|
|
|
|
|
|
.wrap {
|
|
|
@@ -192,4 +282,106 @@
|
|
|
font-weight: bold;
|
|
|
padding: 0 10rpx;
|
|
|
}
|
|
|
+ .tab1 {
|
|
|
+ background-color: #f36c34;
|
|
|
+ // position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ .tit {
|
|
|
+ padding-top: 189rpx;
|
|
|
+ font-size: 124rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing:20rpx;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ display: inline-block;
|
|
|
+ margin: auto;
|
|
|
+ padding-top: 69rpx;
|
|
|
+ font-size: 66rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ border-bottom: 2px solid #fff;
|
|
|
+ }
|
|
|
+ .val-wrap {
|
|
|
+ width: 290rpx;
|
|
|
+ height: 290rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 5px solid #fff;
|
|
|
+ font-size: 96rpx;
|
|
|
+ line-height: 290rpx;
|
|
|
+ margin:92rpx auto 0;
|
|
|
+ text {
|
|
|
+ font-size: 52rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab2 {
|
|
|
+ background-color: #ede1a7;
|
|
|
+ color: #2543c7;
|
|
|
+ .tip {
|
|
|
+ font-size: 64rpx;
|
|
|
+ padding: 90rpx 0 110rpx;
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ .btn-list {
|
|
|
+ padding-top: 100rpx;
|
|
|
+ padding-bottom: 110rpx;
|
|
|
+ .btn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #2543c7;
|
|
|
+ line-height: 120rpx;
|
|
|
+ font-size: 62rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin:0 auto 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .val {
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #333333;
|
|
|
+ text {
|
|
|
+ color: #2543c7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab3 {
|
|
|
+ background-color: #030e8a;
|
|
|
+ color: #dbe045;
|
|
|
+ .btn-list {
|
|
|
+ .btn {
|
|
|
+ border-color: #dbe045;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .val {
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #fff;
|
|
|
+ text {
|
|
|
+ color: #dbe045;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab4 {
|
|
|
+ background-color:#ff310e;
|
|
|
+ color: #fff;
|
|
|
+ .btn-list {
|
|
|
+ .btn {
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .val {
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #fff;
|
|
|
+ text {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
