Skip to content

W
walk_daka_h5
Commit a40b97d8 by 穆启卓
Options

时间转换倒计时

parent e9b1408a
Showing with 547 additions and 536 deletions
src/components/axios/fetch.js
......@@ -18,7 +18,7 @@ export function fetch(options) {
headers: {
'Content-Type': 'application/json',
// 'Authorization': window['userData']?window['userData'].token:''
'Authorization':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAiLCJvcGVuX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsInVuaW9uX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsImV4cCI6MTU1NDMxMTMzMH0.4UEG6I9K0JARU5KDMW-Xwx13DMniYelsmI-qWd97e_c"
'Authorization':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAiLCJvcGVuX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsInVuaW9uX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsImV4cCI6MTU1NDMxNzM0NH0.3yWRj-qm-Rk1PcCc7KrifJiuExlzETSBznBxrtYA3dU"
// 'token_in_header': global_.token,//token从全局变量那里传过来
},
timeout: 30 * 1000 // 30秒超时
......
src/views/ChallengeDetail.vue
......@@ -147,45 +147,6 @@
closeShareModal () {
this.showShareModal = false
},
//倒计时
countDown (times) {
clearInterval(grabStartTimer)
grabStartTimer = null
grabStartTimer = setInterval(function () {
let day = 0,
hour = 0,
minute = 0,
second = 0//时间默认值
// console.log('times:' + times)
if (times > 0) {
day = Math.floor(times / (60 * 60 * 24))
hour = Math.floor(times / (60 * 60)) - (day * 24)
minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60)
second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
if (day < 1) day = ''
else day = day + '天'
if (hour <= 9) hour = '0' + hour
if (minute <= 9) minute = '0' + minute
if (second <= 9) second = '0' + second
this. grabTimer = (day + hour + '时' + minute + '分' + second + '秒')
} else {
clearInterval(grabStartTimer)
// that.setData({
// redpack: {
// ...that.data.redpack,
// redpackStatus: 2
// }
// })
}
times--
//
//console.log(day + "天:" + hour + "小时：" + minute + "分钟：" + second + "秒");
}, 1000)
}
}
}
</script>
......
src/views/HaveJoinedGame.vue
<template>
<div class="have-joined-game-page">
<Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title>
<div class="game-bonus-container">
<div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-amount">{{bet_bonus}}</div>
</div>
<div class="game-title">{{target_steps}}步三日耐力赛</div>
<div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
<div class="target-people-container">
<img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<div class="target-people-text">每日{{target_steps}}步达标</div>
<img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="target-people-text">已有{{total_signup}}人参赛</div>
</div>
<div class="hr"></div>
<swiper :options="swiperOption" class="game-scroll-container">
<swiper-slide v-for="(item,index) in record_list" :key="index">
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第{{item.days}}天</div>
<div :class="item.status===0?'item-status0':item.status===1?'item-status1':item.status===2?'item-status2':'item-status2'">
{{item.status===0?'未开始':item.status===1?'比赛中':item.status===2?'已结束':'已淘汰'}}
</div>
</div>
<div class="item-income" :style="item.status===1?'':'visibility: hidden;'">
<div class="item-amount">{{item.money}}</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-progress-num">
<div class="item-num" v-if="item.status===0">还有{{item.tsp}}开始</div>
<!-- <div class="item-num" v-if="item.status===0">还有01天03小时56秒开始</div> -->
<template v-else>
<div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'"></div>
<div class="item-num">{{item.step_num}}/{{target_steps}}步</div>
</template>
</div>
</div>
</swiper-slide>
</swiper>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
<div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div>
<!-- 报名成功弹框 -->
<div class="game-status-popup" v-if="false">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1"><span>每日24点前</span>打开「运动打卡」小程序，手动提交今日步数，否则可能导致无法分钱哦！</div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
<div class="have-joined-game-page">
<Title
class="page-title"
@goback="goback"
show_back="true"
v-if="currentPage()==='HaveJoinedGame'"
></Title>
<div class="game-bonus-container">
<div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-amount">{{bet_bonus}}</div>
</div>
<div class="game-title">{{target_steps}}步三日耐力赛</div>
<div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
<div class="target-people-container">
<img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<div class="target-people-text">每日{{target_steps}}步达标</div>
<img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="target-people-text">已有{{total_signup}}人参赛</div>
</div>
<div class="hr"></div>
<swiper :options="swiperOption" class="game-scroll-container">
<swiper-slide v-for="(item,index) in record_list" :key="index">
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第{{item.days}}天</div>
<div
:class="item.status===0?'item-status0':item.status===1?'item-status1':item.status===2?'item-status2':'item-status2'"
>{{item.status===0?'未开始':item.status===1?'比赛中':item.status===2?'已结束':'已淘汰'}}</div>
</div>
<div class="item-income" :style="item.status===1?'':'visibility: hidden;'">
<div class="item-amount">{{item.money}}</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-progress-num">
<div class="item-num" v-if="item.status===0">还有{{item.format_tsp || '0秒'}}开始</div>
<template v-else>
<div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'"></div>
<div class="item-num">{{item.step_num}}/{{target_steps}}步</div>
</template>
</div>
</div>
</swiper-slide>
</swiper>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
<div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div>
<!-- 报名成功弹框 -->
<div class="game-status-popup" v-if="false">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1">
<span>每日24点前</span>打开「运动打卡」小程序，手动提交今日步数，否则可能导致无法分钱哦！
</div>
<!-- 恭喜达标弹框 -->
<div class="game-status-popup" v-if="popupData.window && popupData.daka_done">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
<div class="status-date">第{{popupData.days}}日达标</div>
<div class="status-money">
<div class="popup-text3">返还契约金</div>
<div class="popup-text4">{{popupData.money}}<span>元</span></div>
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
</div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-btn1 green-btn">炫耀一下</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div>
<!-- 恭喜达标弹框 -->
<div class="game-status-popup" v-if="popupData.window && popupData.daka_done">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
<div class="status-date">第{{popupData.days}}日达标</div>
<div class="status-money">
<div class="popup-text3">返还契约金</div>
<div class="popup-text4">
{{popupData.money}}
<span>元</span>
</div>
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
</div>
<!-- 你已被淘汰弹框 -->
<div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
<div class="status-date">第{{popupData.days}}日未达标</div>
<div class="status-money">
<div class="popup-text3">扣除契约金</div>
<div class="popup-text4">{{popupData.money}}<span>元</span></div>
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
</div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div>
<div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-btn1 green-btn">炫耀一下</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div>
</div>
<!-- 你已被淘汰弹框 -->
<div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
<div class="status-date">第{{popupData.days}}日未达标</div>
<div class="status-money">
<div class="popup-text3">扣除契约金</div>
<div class="popup-text4">
{{popupData.money}}
<span>元</span>
</div>
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
</div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div>
<div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div>
</div>
</div>
</template>
<script>
import Title from "@/components/Title.vue";
import {daka_status_detail, pop_up_windows} from "@/components/axios/api";
import "swiper/dist/css/swiper.css";
import {swiper, swiperSlide} from "vue-awesome-swiper";
export default {
name: "HaveJoinedGame",
components: {
Title,
swiper,
swiperSlide
import Title from "@/components/Title.vue";
import { daka_status_detail, pop_up_windows } from "@/components/axios/api";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: "HaveJoinedGame",
components: {
Title,
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 10
},
bet_bonus: "0.00",
next_signup: false,
period_end: "",
period_start: "",
total_signup: 0,
target_steps: 0,
record_list: [],
popupData: {}
};
},
created() {
this.getPageData();
this.isPopup();
},
methods: {
joinNextGame() {
this.$router.push({
name: "PartakeChallenge",
query: {
nextGame: true
}
});
},
data() {
return {
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 10,
},
bet_bonus: '0.00',
next_signup: false,
period_end: '',
period_start: '',
total_signup: 0,
target_steps: 0,
record_list: [],
popupData: {}
}
closePopup() {
this.popupData.window = false;
},
created() {
this.getPageData();
this.isPopup();
goback() {
history.go(-1);
},
methods: {
joinNextGame() {
this.$router.push({
name: 'PartakeChallenge',
query: {
nextGame: true
}
});
},
closePopup() {
this.popupData.window = false;
},
goback() {
history.go(-1);
},
goOtherPage(pageName) {
this.$router.push({name: pageName});
},
currentPage() {
return this.$router.history.current.name;
},
getPageData() {
let grade = 2;
if (sessionStorage.getItem('bushuType')) {
grade = sessionStorage.getItem('bushuType');
}
daka_status_detail(this.$route.query.week, grade).then(res => {
goOtherPage(pageName) {
this.$router.push({ name: pageName });
},
currentPage() {
return this.$router.history.current.name;
},
getPageData() {
let grade = 2;
if (sessionStorage.getItem("bushuType")) {
grade = sessionStorage.getItem("bushuType");
}
daka_status_detail(this.$route.query.week = 20190401, grade).then(res => {
if (res.code === 0) {
const pageData = res.data;
if (res.code === 0) {
this.bet_bonus = pageData.bet_bonus;
this.next_signup = pageData.next_signup;
this.period_end = pageData.period_end;
this.period_start = pageData.period_start;
this.total_signup = pageData.total_signup;
this.target_steps = pageData.target_steps;
this.record_list = pageData.record_list;
}
})
},
isPopup() {
pop_up_windows().then(res => {
if (res.code === 0) {
this.popupData = res.data;
if (pageData.record_list && pageData.record_list.length) {
pageData.record_list.forEach((item, index) => {
if (item.status === 0) {
item.format_tsp = this.countDown('interval'+index, parseInt((item.tsp * 1000 - Date.now()) / 1000), index);
}
});
}
})
}
this.bet_bonus = pageData.bet_bonus;
this.next_signup = pageData.next_signup;
this.period_end = pageData.period_end;
this.period_start = pageData.period_start;
this.total_signup = pageData.total_signup;
this.target_steps = pageData.target_steps;
this.record_list = pageData.record_list;
}
});
},
isPopup() {
pop_up_windows().then(res => {
if (res.code === 0) {
this.popupData = res.data;
}
});
},
//倒计时
countDown(intervalName, times, index) {
clearInterval(this[intervalName]);
this[intervalName] = null;
this[intervalName] = setInterval(() => {
let day = 0,
hour = 0,
minute = 0,
second = 0;
if (times > 0) {
day = Math.floor(times / (60 * 60 * 24));
hour = Math.floor(times / (60 * 60)) - day * 24;
minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60;
second = Math.floor(times) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
if (day < 1) day = "";
else day = day + "天";
if (hour <= 9) hour = "0" + hour;
if (minute <= 9) minute = "0" + minute;
if (second <= 9) second = "0" + second;
this.record_list[index].format_tsp = day + hour + "时" + minute + "分" + second + "秒";
} else {
this.getPageData();
clearInterval(this[intervalName]);
}
times--;
// console.log('gagagag',intervalName, day + hour + "时" + minute + "分" + second + "秒")
// console.log('gagagag',times)
// console.log('gagagag',this.format_tsp)
}, 1000);
}
}
};
</script>
<style lang="less" scoped>
.swiper-container {
/*margin-left: 0 !important;*/
}
.swiper-container {
/*margin-left: 0 !important;*/
}
.swiper-slide {
width: 5.1rem;
height: 2.68rem;
}
.swiper-slide {
width: 5.1rem;
height: 2.68rem;
}
.swiper-slide img {
width: 5.1rem;
height: 2.68rem;
}
.swiper-slide img {
width: 5.1rem;
height: 2.68rem;
}
.have-joined-game-page {
// width: 100%;
min-height: 100vh;
background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center top;
.have-joined-game-page {
// width: 100%;
min-height: 100vh;
background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center top;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
padding-bottom: 34px;
.page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.game-bonus-container {
width: 6.4rem;
padding: 0.3rem 0;
box-sizing: border-box;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#1a285a,
rgba(255, 255, 255, 0)
);
margin-top: 2.38rem;
.bonus-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: 0.64rem;
line-height: 0.8;
color: #ffe253;
text-align: center;
margin-top: 0.26rem;
}
}
.game-title {
font-size: 0.36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: 0.4rem;
}
.game-time {
font-size: 0.24rem;
line-height: 1;
color: #d6dfff;
padding: 0.12rem 0.38rem;
border-radius: 0.48rem;
background: #556cb6;
margin-top: 0.14rem;
}
.target-people-container {
display: flex;
margin-top: 0.34rem;
.target-img {
width: 0.3rem;
height: 0.26rem;
}
.people-img {
width: 0.28rem;
height: 0.24rem;
margin-left: 0.5rem;
}
.target-people-text {
font-size: 0.26rem;
line-height: 1;
color: #fff;
margin-left: 0.08rem;
}
}
.hr {
width: 3rem;
height: 0.01rem;
background: #6f82c3;
margin-top: 0.5rem;
}
.game-scroll-container {
width: 100%;
height: 2.68rem;
margin-top: 0.4rem;
padding: 0 0.3rem;
box-sizing: border-box;
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
.game-scroll-item {
width: 5.1rem;
height: 2.68rem;
background-image: url(../images/HaveJoinedGame/img_card.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 0.24rem;
box-sizing: border-box;
margin-left: 0.2rem;
display: inline-block;
vertical-align: top;
&:first-child {
margin-left: 0;
}
.item-title-status {
width: 100%;
padding: 0 0.24rem 0 0.3rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
padding-bottom: 34px;
.page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.game-bonus-container {
width: 6.4rem;
padding: 0.3rem 0;
box-sizing: border-box;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#1a285a,
rgba(255, 255, 255, 0)
);
margin-top: 2.38rem;
.bonus-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: 0.64rem;
line-height: 0.8;
color: #ffe253;
text-align: center;
margin-top: 0.26rem;
}
justify-content: space-between;
.item-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
}
.game-title {
font-size: 0.36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: 0.4rem;
.item-status0 {
padding: 0 0.16rem;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.4);
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
.game-time {
font-size: 0.24rem;
line-height: 1;
color: #d6dfff;
padding: 0.12rem 0.38rem;
border-radius: 0.48rem;
background: #556cb6;
margin-top: 0.14rem;
.item-status1 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #fcf776;
font-size: 0.26rem;
line-height: 0.42rem;
color: #703e0b;
}
.target-people-container {
display: flex;
margin-top: 0.34rem;
.target-img {
width: 0.3rem;
height: 0.26rem;
}
.people-img {
width: 0.28rem;
height: 0.24rem;
margin-left: 0.5rem;
}
.target-people-text {
font-size: 0.26rem;
line-height: 1;
color: #fff;
margin-left: 0.08rem;
}
.item-status2 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #a5a5a5;
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
.hr {
width: 3rem;
height: 0.01rem;
background: #6f82c3;
margin-top: 0.5rem;
}
.item-income {
width: 100%;
padding-left: 0.3rem;
box-sizing: border-box;
margin-top: 0.4rem;
display: flex;
align-items: flex-end;
.item-amount {
font-size: 0.48rem;
line-height: 0.8;
color: #fcf776;
}
.game-scroll-container {
width: 100%;
height: 2.68rem;
margin-top: 0.4rem;
padding: 0 0.3rem;
box-sizing: border-box;
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
.game-scroll-item {
width: 5.1rem;
height: 2.68rem;
background-image: url(../images/HaveJoinedGame/img_card.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 0.24rem;
box-sizing: border-box;
margin-left: 0.2rem;
display: inline-block;
vertical-align: top;
&:first-child {
margin-left: 0;
}
.item-title-status {
width: 100%;
padding: 0 0.24rem 0 0.3rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.item-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
}
.item-status0 {
padding: 0 0.16rem;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.4);
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
.item-status1 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #fcf776;
font-size: 0.26rem;
line-height: 0.42rem;
color: #703e0b;
}
.item-status2 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #a5a5a5;
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
}
.item-income {
width: 100%;
padding-left: 0.3rem;
box-sizing: border-box;
margin-top: 0.4rem;
display: flex;
align-items: flex-end;
.item-amount {
font-size: 0.48rem;
line-height: 0.8;
color: #fcf776;
}
.item-text {
font-size: 0.26rem;
line-height: 1;
color: #dbf3ff;
margin-left: 0.1rem;
}
}
.item-progress-num {
width: 100%;
padding: 0 0.3rem;
box-sizing: border-box;
margin-top: 0.58rem;
display: flex;
align-items: center;
justify-content: space-between;
.item-progress {
height: 0.06rem;
background: #fff;
position: relative;
&:after {
content: "";
width: 2.46rem;
height: 0.06rem;
background: rgba(255, 255, 255, 0.5);
position: absolute;
}
}
.item-num {
font-size: 0.26rem;
line-height: 1;
color: #fff;
}
}
}
.item-text {
font-size: 0.26rem;
line-height: 1;
color: #dbf3ff;
margin-left: 0.1rem;
}
.func-btn {
width: 5.6rem;
border-radius: 0.92rem;
background: #fabd21;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
}
.item-progress-num {
width: 100%;
padding: 0 0.3rem;
box-sizing: border-box;
margin-top: 0.58rem;
display: flex;
align-items: center;
justify-content: space-between;
.item-progress {
height: 0.06rem;
background: #fff;
position: relative;
&:after {
content: "";
width: 2.46rem;
height: 0.06rem;
background: rgba(255, 255, 255, 0.5);
position: absolute;
}
}
.next-func-btn {
width: 5.6rem;
border-radius: 0.92rem;
background: #0ebfdf;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: .3rem;
.item-num {
font-size: 0.26rem;
line-height: 1;
color: #fff;
}
}
}
}
.func-btn {
width: 5.6rem;
border-radius: 0.92rem;
background: #fabd21;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
}
.next-func-btn {
width: 5.6rem;
border-radius: 0.92rem;
background: #0ebfdf;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.3rem;
}
}
.game-status-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
.game-status-container {
width: 6rem;
background: #fff;
border-radius: 0.08rem;
padding-bottom: 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.status-icon {
width: 5.08rem;
height: 2.58rem;
margin-top: -1.29rem;
}
.join-success-banner {
width: 5.44rem;
height: 3.18rem;
margin-top: 0.3rem;
}
.status-date {
font-size: 0.36rem;
line-height: 1;
color: #333;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.status-money {
width: 5.04rem;
height: 2.84rem;
background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
background-size: 100%;
margin-top: 0.42rem;
.popup-text3 {
font-size: 0.3rem;
line-height: 1;
color: #463a2c;
text-align: center;
margin-top: 0.42rem;
}
.popup-text4 {
font-size: 1.2rem;
line-height: 0.8;
color: #fabd21;
text-align: center;
margin-top: 0.24rem;
span {
font-size: 0.3rem;
line-height: 1;
vertical-align: bottom;
}
}
.popup-text5 {
font-size: 0.24rem;
line-height: 1;
color: #b3aea2;
text-align: center;
margin-top: 0.42rem;
}
}
.popup-text1 {
width: 5.34rem;
font-size: 0.26rem;
line-height: 0.42rem;
color: #333;
text-align: center;
margin-top: 0.16rem;
span {
color: #fabd21;
}
}
.popup-text2 {
font-size: 0.24rem;
line-height: 1;
color: #a5a5a5;
text-align: center;
margin-top: 0.32rem;
}
.popup-text6 {
font-size: 0.26rem;
line-height: 1;
color: #bfbfbf;
text-align: center;
margin: 0.4rem 0 0.34rem;
}
.popup-text7 {
font-size: 0.26rem;
line-height: 1;
color: #8e5b29;
text-align: center;
}
.popup-btn1 {
width: 4.6rem;
height: 0.8rem;
border-radius: 0.8rem;
font-size: 0.36rem;
line-height: 0.8rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.green-btn {
background: #1fdbb1;
}
.yellow-btn {
background: #fabd21;
}
.close-btn {
width: 0.58rem;
height: 0.58rem;
position: absolute;
bottom: -1.08rem;
left: 50%;
transform: translateX(-50%);
}
.game-status-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
.game-status-container {
width: 6rem;
background: #fff;
border-radius: 0.08rem;
padding-bottom: 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.status-icon {
width: 5.08rem;
height: 2.58rem;
margin-top: -1.29rem;
}
.join-success-banner {
width: 5.44rem;
height: 3.18rem;
margin-top: 0.3rem;
}
.status-date {
font-size: 0.36rem;
line-height: 1;
color: #333;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.status-money {
width: 5.04rem;
height: 2.84rem;
background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
background-size: 100%;
margin-top: 0.42rem;
.popup-text3 {
font-size: 0.3rem;
line-height: 1;
color: #463a2c;
text-align: center;
margin-top: 0.42rem;
}
.popup-text4 {
font-size: 1.2rem;
line-height: 0.8;
color: #fabd21;
text-align: center;
margin-top: 0.24rem;
span {
font-size: 0.3rem;
line-height: 1;
vertical-align: bottom;
}
}
.popup-text5 {
font-size: 0.24rem;
line-height: 1;
color: #b3aea2;
text-align: center;
margin-top: 0.42rem;
}
}
.popup-text1 {
width: 5.34rem;
font-size: 0.26rem;
line-height: 0.42rem;
color: #333;
text-align: center;
margin-top: 0.16rem;
span {
color: #fabd21;
}
}
.popup-text2 {
font-size: 0.24rem;
line-height: 1;
color: #a5a5a5;
text-align: center;
margin-top: 0.32rem;
}
.popup-text6 {
font-size: 0.26rem;
line-height: 1;
color: #bfbfbf;
text-align: center;
margin: 0.4rem 0 0.34rem;
}
.popup-text7 {
font-size: 0.26rem;
line-height: 1;
color: #8e5b29;
text-align: center;
}
.popup-btn1 {
width: 4.6rem;
height: 0.8rem;
border-radius: 0.8rem;
font-size: 0.36rem;
line-height: 0.8rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.green-btn {
background: #1fdbb1;
}
.yellow-btn {
background: #fabd21;
}
.close-btn {
width: 0.58rem;
height: 0.58rem;
position: absolute;
bottom: -1.08rem;
left: 50%;
transform: translateX(-50%);
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment