Skip to content

W
walk_daka_h5
Commit c3e8149b by Caiyijun
Options

Merge remote-tracking branch 'remotes/origin/mutou' into dev_yijun

parents 0bf7d45b b6d8d3c1
Showing with 767 additions and 735 deletions
src/components/NoticeBonus.vue
<template> <template>
<div class="notice_bonus" v-if="isShowNotice"> <div>
<img class="icon_container" src="../images/components/NoticeBonus/sy_guangbo.png" alt=""> <div class="notice_bonus" v-if="isShowNotice">
<div ref="container" class="msg_container"> <img class="icon_container" src="../images/components/NoticeBonus/sy_guangbo.png" alt="">
<!--<div class="notice_msg" v-for='item in notice_list'>--> <div ref="container" class="msg_container">
<!--{{item}}--> <!--<div class="notice_msg" v-for='item in notice_list'>-->
<!--</div>--> <!--{{item}}-->
<div ref="msg1" :class="['notice_msg', startAnimate?'msg1':'']">{{msg1}}</div> <!--</div>-->
<div :class="['notice_msg', startAnimate?'msg2':'']">{{msg2}}</div> <div ref="msg1" :class="['notice_msg', startAnimate?'msg1':'']">{{msg1}}</div>
<div :class="['notice_msg', startAnimate?'msg2':'']">{{msg2}}</div>
</div>
</div>
</div> </div>
</div>
</template> </template>
<style> <style>
.notice_bonus { .notice_bonus {
width: 3.6rem; width: 3.6rem;
height: .44rem; height: .44rem;
border-radius: .22rem; border-radius: .22rem;
background: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .2);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 .14rem; padding: 0 .14rem;
box-sizing: border-box; box-sizing: border-box;
} }
.icon_container {
width: .22rem;
height: .2rem;
flex-shrink: 0;
margin-right: .1rem;
}
.msg_container {
flex: 1;
height: .44rem;
transform-style: preserve-3d;
overflow: hidden;
}
.notice_msg {
font-size: .24rem;
color: #fff;
line-height: .44rem;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.msg1 { .icon_container {
transform: translate3d(0, 0.44rem, 0); width: .22rem;
animation: rowUp 10s infinite; height: .2rem;
/* transform: translateZ(35rpx); */ flex-shrink: 0;
} margin-right: .1rem;
}
.msg2 {
transform: translate3d(0, 0, 0);
animation: rowUp2 10s infinite;
/* transform: rotateX(90deg) translateZ(35rpx); */
}
/* .rotate-animation {
animation: rotate .3s linear 0s 1 normal forwards;
}
@keyframes rotate { .msg_container {
0% { flex: 1;
transform: rotateX(0deg); height: .44rem;
} transform-style: preserve-3d;
100% { overflow: hidden;
transform: rotateX(-90deg);
} }
} */
@keyframes rowUp { .notice_msg {
0% { font-size: .24rem;
-webkit-transform: translate3d(0, 0.44rem, 0); color: #fff;
transform: translate3d(0, 0.44rem, 0); line-height: .44rem;
} text-align: center;
10% { white-space: nowrap;
-webkit-transform: translate3d(0, 0, 0); text-overflow: ellipsis;
transform: translate3d(0, 0, 0); overflow: hidden;
} width: 100%;
40% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} }
50% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
}
100% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
}
}
@keyframes rowUp2 { .msg1 {
0% { transform: translate3d(0, 0.44rem, 0);
-webkit-transform: translate3d(0, 0, 0); animation: rowUp 10s infinite;
transform: translate3d(0, 0, 0); /* transform: translateZ(35rpx); */
} }
50% {
-webkit-transform: translate3d(0, 0, 0); .msg2 {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
animation: rowUp2 10s infinite;
/* transform: rotateX(90deg) translateZ(35rpx); */
} }
60% {
-webkit-transform: translate3d(0, -0.44rem, 0); /* .rotate-animation {
transform: translate3d(0, -0.44rem, 0); animation: rotate .3s linear 0s 1 normal forwards;
} }
90% {
-webkit-transform: translate3d(0, -0.32rem, 0); @keyframes rotate {
transform: translate3d(0, -0.44rem, 0); 0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
} */
@keyframes rowUp {
0% {
-webkit-transform: translate3d(0, 0.44rem, 0);
transform: translate3d(0, 0.44rem, 0);
}
10% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
}
100% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
}
} }
100% {
-webkit-transform: translate3d(0, -0.96rem, 0); @keyframes rowUp2 {
transform: translate3d(0, -0.96rem, 0); 0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
60% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
}
90% {
-webkit-transform: translate3d(0, -0.32rem, 0);
transform: translate3d(0, -0.44rem, 0);
}
100% {
-webkit-transform: translate3d(0, -0.96rem, 0);
transform: translate3d(0, -0.96rem, 0);
}
} }
}
</style> </style>
<script> <script>
import {gameInfo} from "@/components/axios/api"; import {gameInfo} from "@/components/axios/api"
export default { export default {
name: "NoticeBonus", name: "NoticeBonus",
data() { data() {
return { return {
isShowNotice:false, isShowNotice: false,
notice_list: [], notice_list: [],
gameInfo: { gameInfo: {
"fly_top": [], "fly_top": [],
"fly_bot": [] "fly_bot": []
}, },
canScroll: true, canScroll: true,
curIndex: 0, curIndex: 0,
startAnimate: false, startAnimate: false,
msg1: "", msg1: "",
msg2: "", msg2: "",
};
},
// props: ["notice_list"],
// computed: {
// notice() {
// return this.notice_list;
// }
// },
methods: {
stopScroll(e) {
console.log(e)
e.preventDefault();
},
getGameInfo(nonRefresh) {
gameInfo().then(result => {
console.log("result", result)
if (result.code == 0) {
let fly_bot = result.data.fly_bot
let fly_top = result.data.fly_top
let len = Math.max(fly_bot.length, fly_top.length)
let list = []
for (let i = 0; i < len; i++) {
fly_bot[i] && (list.push(fly_bot[i]))
fly_top[i] && (list.push(fly_top[i]))
} }
this.notice_list = list },
this.canScroll = true // props: ["notice_list"],
this.msg1 = this.notice_list[0] // computed: {
this.msg2 = this.notice_list[1] // notice() {
console.log("this.notice_list", this.notice_list) // return this.notice_list;
// }
// },
methods: {
stopScroll(e) {
console.log(e)
e.preventDefault()
},
getGameInfo(nonRefresh) {
gameInfo().then(result => {
console.log("result", result)
if (result.code == 0 && result.data.lenght > 0) {
let fly_bot = result.data.fly_bot
let fly_top = result.data.fly_top
let len = Math.max(fly_bot.length, fly_top.length)
let list = []
for (let i = 0; i < len; i++) {
fly_bot[i] && (list.push(fly_bot[i]))
fly_top[i] && (list.push(fly_top[i]))
}
this.notice_list = list
this.canScroll = true
this.msg1 = this.notice_list[0]
this.msg2 = this.notice_list[1]
console.log("this.notice_list", this.notice_list)
this.isShowNotice=true this.isShowNotice = true
} }
}) })
}, },
msgAnimate() { msgAnimate() {
setTimeout(() => { setTimeout(() => {
this.startAnimate = true this.startAnimate = true
}, 100) }, 100)
let timer = sessionStorage.getItem("timer") let timer = sessionStorage.getItem("timer")
if (timer) { if (timer) {
clearInterval(Number(timer)) clearInterval(Number(timer))
} }
let newTimer = setInterval(() => { let newTimer = setInterval(() => {
if (Math.abs(this.notice_list.length - this.curIndex) <= 2) { if (Math.abs(this.notice_list.length - this.curIndex) <= 2) {
this.curIndex = 0 this.curIndex = 0
if (window.location.hash == "#/Daka") { if (window.location.hash == "#/Daka") {
this.getGameInfo() this.getGameInfo()
}
} else {
this.curIndex += 2
}
this.msg1 = this.notice_list[this.curIndex]
this.msg2 = this.notice_list[this.curIndex + 1]
}, 10000)
sessionStorage.setItem("timer", newTimer + "")
} }
} else { },
this.curIndex += 2 created() {
} this.getGameInfo()
this.msg1 = this.notice_list[this.curIndex] },
this.msg2 = this.notice_list[this.curIndex + 1] mounted() {
}, 10000) this.msgAnimate()
sessionStorage.setItem("timer", newTimer + "") }
}
},
created() {
this.getGameInfo()
},
mounted() {
this.msgAnimate()
} }
};
</script> </script>
src/components/axios/fetch.js
...@@ -30,16 +30,16 @@ export function fetch(options) { ...@@ -30,16 +30,16 @@ export function fetch(options) {
resolve(response.data);//把请求到的数据发到引用请求的地方 resolve(response.data);//把请求到的数据发到引用请求的地方
}) })
.catch(error => { .catch(error => {
// console.log('请求异常信息：', error); console.log('请求异常信息：', error);
// console.log(error); console.log(error);
// if (error.response.status == 401) { if (error.response.status == 401) {
// localStorage.setItem('last_url', location.hash.slice(1)); localStorage.setItem('last_url', location.hash.slice(1));
// localStorage.setItem('walk_userData', ''); localStorage.setItem('walk_userData', '');
// location.replace('#/Author'); location.replace('#/Author');
// // this.$router.push({name:"Author"}) // this.$router.push({name:"Author"})
// } else { } else {
// reject(error); reject(error);
// } }
}); });
}); });
......
src/views/ChallengeDetail.vue
...@@ -189,12 +189,14 @@ ...@@ -189,12 +189,14 @@
width: 6.4rem; width: 6.4rem;
padding: 0.3rem 0; padding: 0.3rem 0;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient( background: url("../images/SignUp/shadow-bg.png") no-repeat center center;
90deg, background-size: contain;
rgba(255, 255, 255, 0), /*background: linear-gradient(*/
#1a285a, /* 90deg,*/
rgba(255, 255, 255, 0) /* rgba(255, 255, 255, 0),*/
); /* #1a285a,*/
/* rgba(255, 255, 255, 0)*/
/*);*/
margin-top: 2.38rem; margin-top: 2.38rem;
.bonus-title { .bonus-title {
font-size: 0.3rem; font-size: 0.3rem;
...@@ -279,7 +281,7 @@ ...@@ -279,7 +281,7 @@
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin-top: 2.24rem; margin-top: 1.1rem;
} }
} }
</style> </style>
src/views/HaveJoinedGame.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="bonus-title">本期累计奖励金（元）</div> <div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-amount">{{bet_bonus|moneyFormatter}}</div> <div class="bonus-amount">{{bet_bonus|moneyFormatter}}</div>
</div> </div>
<div class="game-title">{{target_steps}}步三日耐力赛</div> <div class="game-title">{{target_steps}}步3日耐力赛</div>
<div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div> <div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
<div class="target-people-container"> <div class="target-people-container">
<img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png"> <img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="target-people-text">已有{{total_signup}}人参赛</div> <div class="target-people-text">已有{{total_signup}}人参赛</div>
</div> </div>
<div class="hr"></div> <div class="hr"></div>
<!-- <div style="height: 2.68rem;">--> <!-- <div style="height: 2.68rem;">v-if="showSwiper" -->
<swiper :options="swiperOption" ref="mySwiper" class="game-scroll-container" v-if="showSwiper"> <swiper :options="swiperOption" ref="mySwiper" class="game-scroll-container" v-if="showSwiper">
<swiper-slide v-for="(item,index) in record_list" :key="index"> <swiper-slide v-for="(item,index) in record_list" :key="index">
<div class="game-scroll-item"> <div class="game-scroll-item">
...@@ -47,19 +47,22 @@ ...@@ -47,19 +47,22 @@
<!-- </div>--> <!-- </div>-->
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div> <div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
<div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</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-popup" v-if="userHavePaidGame">
<div class="game-status-container"> <div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png"> <img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png"> <img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1"> <div class="popup-text1">
<span>每日24点前</span>打开「运动打卡」小程序，手动提交今日步数，否则可能导致无法分钱哦！ <span>每日24点前</span>打开「步步运动赚」小程序，手动提交今日步数，否则可能导致无法分钱哦！
</div> </div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div> <div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div> <div class="popup-btn1 green-btn">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png"> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePayPopup()">
</div> </div>
</div> </div>
<!-- 恭喜达标弹框 --> <!-- 恭喜达标弹框 -->
<div class="game-status-popup" v-if="popupData.window && popupData.daka_done"> <div class="game-status-popup" v-if="popupData.window && popupData.daka_done">
<div class="game-status-container"> <div class="game-status-container">
...@@ -74,7 +77,7 @@ ...@@ -74,7 +77,7 @@
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div> <div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
</div> </div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div> <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-btn1 green-btn">炫耀一下</div> <div class="popup-btn1 green-btn">邀请好友来打卡</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()"> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div> </div>
</div> </div>
...@@ -101,561 +104,583 @@ ...@@ -101,561 +104,583 @@
</template> </template>
<script> <script>
import Title from "@/components/Title.vue" import Title from "@/components/Title.vue";
import {daka_status_detail, pop_up_windows} from "@/components/axios/api" import { daka_status_detail, pop_up_windows } from "@/components/axios/api";
import {swiper, swiperSlide} from "vue-awesome-swiper" import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css" import "swiper/dist/css/swiper.css";
export default { export default {
name: "HaveJoinedGame", name: "HaveJoinedGame",
components: { components: {
Title, Title,
swiper, swiper,
swiperSlide swiperSlide
}, },
data() { data() {
return { return {
swiperOption: { swiperOption: {
slidesPerView: "auto", slidesPerView: "auto",
centeredSlides: true, centeredSlides: true,
spaceBetween: 10, spaceBetween: 10,
notNextTick: true notNextTick: true,
}, loop: false,
showSwiper: false, autoplay: false
bet_bonus: "0.00", },
next_signup: false, showSwiper: false,
period_end: "", bet_bonus: "0.00",
period_start: "", next_signup: false,
total_signup: 0, period_end: "",
target_steps: 0, period_start: "",
record_list: [], total_signup: 0,
popupData: {}, target_steps: 0,
current_day: 0 record_list: [],
} popupData: {},
}, current_day: 0,
created() { userHavePaidGame: false
this.getPageData() };
this.isPopup() },
}, created() {
computed: { this.getPageData();
swiper() { this.isPopup();
// setTimeout(()=>{ if (sessionStorage.getItem("userHavePaidGame") === "true") {
return this.$refs.mySwiper.swiper sessionStorage.setItem("userHavePaidGame", "false");
// },800) this.userHavePaidGame = true;
} }
}, },
mounted() { computed: {
setTimeout(() => { swiper() {
this.swiper.slideTo(this.current_day, 1200, false) return this.$refs.mySwiper.swiper;
}, 800) }
}, },
methods: { mounted() {
joinNextGame() { setTimeout(() => {
this.$router.push({ this.swiper.slideTo(this.current_day, 1200, false);
name: "PartakeChallenge", }, 800);
query: { },
nextGame: true methods: {
} joinNextGame() {
}) this.$router.push({
}, name: "PartakeChallenge",
closePopup() { query: {
this.popupData.window = false nextGame: true
}, }
goback() { });
history.go(-1) },
}, closePayPopup() {
goOtherPage(pageName) { this.userHavePaidGame = false;
this.$router.push({name: pageName}) },
}, closePopup() {
currentPage() { this.popupData.window = false;
return this.$router.history.current.name },
}, goback() {
getPageData() { history.go(-1);
let grade = 1 },
if (sessionStorage.getItem("bushuType")) { goOtherPage(pageName) {
grade = sessionStorage.getItem("bushuType") this.$router.push({ name: pageName });
} },
daka_status_detail(this.$route.query.week, this.$route.query.week ? grade : '').then(res => { currentPage() {
if (res.code === 0) { return this.$router.history.current.name;
const pageData = res.data },
if (pageData.record_list && pageData.record_list.length) { getPageData() {
pageData.record_list.forEach((item, index) => { let grade = 1;
if (item.status === 0) { if (sessionStorage.getItem("bushuType")) {
item.format_tsp = this.countDown('interval' + index, parseInt((item.tsp * 1000 - Date.now()) / 1000), index) grade = sessionStorage.getItem("bushuType");
} }
}) daka_status_detail(
} this.$route.query.week,
this.bet_bonus = pageData.bet_bonus this.$route.query.week ? grade : ""
this.next_signup = pageData.next_signup ).then(res => {
this.period_end = pageData.period_end if (res.code === 0) {
this.period_start = pageData.period_start const pageData = res.data;
this.total_signup = pageData.total_signup if (pageData.record_list && pageData.record_list.length) {
this.target_steps = pageData.target_steps pageData.record_list.forEach((item, index) => {
this.record_list = pageData.record_list if (item.status === 0) {
this.current_day = pageData.current_day - 1 item.format_tsp = this.countDown(
this.showSwiper = true "interval" + index,
} parseInt((item.tsp * 1000 - Date.now()) / 1000),
}) index
}, );
isPopup() { }
pop_up_windows().then(res => { });
if (res.code === 0) { }
this.popupData = res.data 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;
countDown(intervalName, times, index) { this.target_steps = pageData.target_steps;
clearInterval(this[intervalName]) this.record_list = pageData.record_list;
this[intervalName] = null this.current_day = pageData.current_day - 1;
this[intervalName] = setInterval(() => { this.showSwiper = true;
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)
}
},
filters: {
moneyFormatter(val) {
if (val && !isNaN(val)) {
return Number(val).toFixed(2)
} else {
return "0.00"
}
}
} }
});
},
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);
}
},
filters: {
moneyFormatter(val) {
if (val && !isNaN(val)) {
return Number(val).toFixed(2);
} else {
return "0.00";
}
} }
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.swiper-container { .swiper-container {
/*margin-left: 0 !important;*/ /*margin-left: 0 !important;*/
}
.swiper-slide {
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;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
padding-bottom: 50px;
.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: url("../images/SignUp/shadow-bg.png") no-repeat center center;
background-size: contain;
/*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;
} }
.swiper-slide { .bonus-amount {
width: 5.1rem; font-size: 0.64rem;
height: 2.68rem; 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;
} }
.swiper-slide img { .people-img {
width: 5.1rem; width: 0.28rem;
height: 2.68rem; height: 0.24rem;
margin-left: 0.5rem;
} }
.have-joined-game-page { .target-people-text {
// width: 100%; font-size: 0.26rem;
min-height: 100vh; line-height: 1;
background-color: rgb(70, 88, 149); color: #fff;
background-image: url(../images/SignUp/sy_beijing.png); margin-left: 0.08rem;
background-repeat: no-repeat; }
background-size: 100%; }
background-position: center top;
.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; display: flex;
flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; justify-content: space-between;
position: relative;
padding-bottom: 50px;
.page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.game-bonus-container { .item-title {
width: 6.4rem; font-size: 0.3rem;
padding: 0.3rem 0; line-height: 1;
box-sizing: border-box; color: #fff;
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 { .item-status0 {
font-size: 0.36rem; padding: 0 0.16rem;
line-height: 1; box-sizing: border-box;
color: #fff; background: rgba(255, 255, 255, 0.4);
font-weight: bold; font-size: 0.26rem;
margin-top: 0.4rem; line-height: 0.42rem;
color: #fff;
} }
.game-time { .item-status1 {
font-size: 0.24rem; padding: 0 0.16rem;
line-height: 1; box-sizing: border-box;
color: #d6dfff; background: #fcf776;
padding: 0.12rem 0.38rem; font-size: 0.26rem;
border-radius: 0.48rem; line-height: 0.42rem;
background: #556cb6; color: #703e0b;
margin-top: 0.14rem;
} }
.target-people-container { .item-status2 {
display: flex; padding: 0 0.16rem;
margin-top: 0.34rem; box-sizing: border-box;
background: #a5a5a5;
.target-img { font-size: 0.26rem;
width: 0.3rem; line-height: 0.42rem;
height: 0.26rem; color: #fff;
}
.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-income {
width: 100%;
padding-left: 0.3rem;
box-sizing: border-box;
margin-top: 0.4rem;
display: flex;
align-items: flex-end;
.hr { .item-amount {
width: 3rem; font-size: 0.48rem;
height: 0.01rem; line-height: 0.8;
background: #6f82c3; color: #fcf776;
margin-top: 0.5rem;
} }
.game-scroll-container { .item-text {
width: 100%; font-size: 0.26rem;
height: 2.68rem; line-height: 1;
margin-top: 0.4rem; color: #dbf3ff;
padding: 0 0.3rem; margin-left: 0.1rem;
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;
}
}
}
} }
}
.func-btn { .item-progress-num {
width: 5.6rem; width: 100%;
border-radius: 0.92rem; padding: 0 0.3rem;
background: #fabd21; box-sizing: border-box;
font-size: 0.4rem; margin-top: 0.58rem;
line-height: 0.92rem; display: flex;
color: #fff; align-items: center;
font-weight: bold; justify-content: space-between;
text-align: center;
margin-top: 1.2rem; .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 { .item-num {
width: 5.6rem; font-size: 0.26rem;
border-radius: 0.92rem; line-height: 1;
background: #0ebfdf; color: #fff;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.3rem;
} }
}
}
}
.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;
} }
.game-status-popup { .join-success-banner {
position: fixed; width: 5.44rem;
left: 0; height: 3.18rem;
top: 0; margin-top: 0.3rem;
right: 0; }
bottom: 0;
z-index: 998; .status-date {
background: rgba(0, 0, 0, 0.5); font-size: 0.36rem;
display: flex; line-height: 1;
align-items: center; color: #333;
justify-content: center; font-weight: bold;
text-align: center;
.game-status-container { margin-top: 0.4rem;
width: 6rem; }
background: #fff;
border-radius: 0.08rem; .status-money {
padding-bottom: 0.4rem; width: 5.04rem;
display: flex; height: 2.84rem;
flex-direction: column; background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
align-items: center; background-size: 100%;
position: relative; margin-top: 0.42rem;
.status-icon { .popup-text3 {
width: 5.08rem; font-size: 0.3rem;
height: 2.58rem; line-height: 1;
margin-top: -1.29rem; color: #463a2c;
} text-align: center;
margin-top: 0.42rem;
.join-success-banner { }
width: 5.44rem;
height: 3.18rem; .popup-text4 {
margin-top: 0.3rem; font-size: 1.2rem;
} line-height: 0.8;
color: #fabd21;
.status-date { text-align: center;
font-size: 0.36rem; margin-top: 0.24rem;
line-height: 1;
color: #333; span {
font-weight: bold; font-size: 0.3rem;
text-align: center; line-height: 1;
margin-top: 0.4rem; vertical-align: bottom;
}
.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%);
}
} }
}
.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> </style>
src/views/PartakeChallenge.vue
...@@ -171,12 +171,15 @@ ...@@ -171,12 +171,15 @@
this.modalShown = true this.modalShown = true
}, },
showSuccess () { showSuccess () {
this.showModal("温馨提示", "报名成功", { sessionStorage.setItem('userHaveJoinGame', 'true')
scb: () => { sessionStorage.setItem('userHavePaidGame', 'true');
sessionStorage.setItem('userHaveJoinGame', 'true') this.$router.push({name: "HaveJoinedGame"})
this.$router.push({name: "HaveJoinedGame"}) // this.showModal("温馨提示", "报名成功", {
} // scb: () => {
}) // sessionStorage.setItem('userHaveJoinGame', 'true')
// sessionStorage.setItem('userHavePaidGame', 'true');
// }
// })
}, },
closeFree () { closeFree () {
this.showFreeModal = false this.showFreeModal = false
......
src/views/SignUp.vue
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
this.getPageData(grade) this.getPageData(grade)
}else{ }else{
// console.log('grade 0',grade) // console.log('grade 0',grade)
this.getPageData() this.getPageData(this.choosedLevel)
} }
}, },
mounted() { mounted() {
......
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