Skip to content

W
walk_daka_h5
Commit e1496465 by 穆启卓
Options

报名成功弹框/恭喜达标弹框/你已被淘汰弹框

parent 7c382174
Showing with 175 additions and 3 deletions
src/components/Title.vue
......@@ -54,6 +54,7 @@
.title_container {
font-size: 0.36rem;
color: #ffffff;
z-index: 999;
}
.title_container > div {
......
src/views/HaveJoinedGame.vue
......@@ -8,9 +8,9 @@
<div class="game-title">5000步七日耐力赛</div>
<div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
<div class="target-people-container">
<img class="target-img" src="../images/ChallengeDetail/ic_shoes.png">
<img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<div class="target-people-text">每日5000步达标</div>
<img class="people-img" src="../images/ChallengeDetail/ic_people.png">
<img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="target-people-text">已有2468人参赛</div>
</div>
<div class="hr"></div>
......@@ -68,6 +68,48 @@
</div>
</div>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
<!-- 报名成功弹框 -->
<!-- <div class="game-status-popup">
<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>
</div> -->
<!-- 恭喜达标弹框 -->
<!-- <div class="game-status-popup">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
<div class="status-date">第2日达标</div>
<div class="status-money">
<div class="popup-text3">返还契约金</div>
<div class="popup-text4">1.00<span>元</span></div>
<div class="popup-text5">第0311期5000步7日耐力赛</div>
</div>
<div class="popup-text6">5000步达标，今天走了6823步</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">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
<div class="status-date">第3日未达标</div>
<div class="status-money">
<div class="popup-text3">扣除契约金</div>
<div class="popup-text4">1.00<span>元</span></div>
<div class="popup-text5">第0311期5000步7日耐力赛</div>
</div>
<div class="popup-text6">5000步达标，今天走了6823步</div>
<div class="popup-text7">已达标3天，契约金已返还至你的钱包</div>
<div class="popup-btn1 yellow-btn">报名下一期</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> -->
</div>
</template>
......@@ -194,7 +236,7 @@
.game-scroll-item {
width: 5.1rem;
height: 2.68rem;
background-image: url(../images/ChallengeDetail/img_card.png);
background-image: url(../images/HaveJoinedGame/img_card.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: .24rem;
......@@ -301,4 +343,133 @@
margin-top: 1.2rem;
}
}
.game-status-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
.game-status-container {
width: 6rem;
background: #fff;
border-radius: .08rem;
padding-bottom: .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: .3rem;
}
.status-date {
font-size: .36rem;
line-height: 1;
color: #333;
font-weight: bold;
text-align: center;
margin-top: .4rem;
}
.status-money {
width: 5.04rem;
height: 2.84rem;
background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
background-size: 100%;
margin-top: .42rem;
.popup-text3 {
font-size: .3rem;
line-height: 1;
color: #463A2C;
text-align: center;
margin-top: .42rem;
}
.popup-text4 {
font-size: 1.2rem;
line-height: .8;
color: #FABD21;
text-align: center;
margin-top: .24rem;
span {
font-size: .3rem;
line-height: 1;
vertical-align: bottom;
}
}
.popup-text5 {
font-size: .24rem;
line-height: 1;
color: #B3AEA2;
text-align: center;
margin-top: .42rem;
}
}
.popup-text1 {
width: 5.34rem;
font-size: .26rem;
line-height: .42rem;
color: #333;
text-align: center;
margin-top: .16rem;
span {
color: #FABD21;
}
}
.popup-text2 {
font-size: .24rem;
line-height: 1;
color: #a5a5a5;
text-align: center;
margin-top: .32rem;
}
.popup-text6 {
font-size: .26rem;
line-height: 1;
color: #BFBFBF;
text-align: center;
margin: .4rem 0 .34rem;
}
.popup-text7 {
font-size: .26rem;
line-height: 1;
color: #8E5B29;
text-align: center;
}
.popup-btn1 {
width: 4.6rem;
height: .8rem;
border-radius: .8rem;
font-size: .36rem;
line-height: .8rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: .4rem;
}
.green-btn {
background: #1FDBB1;
}
.yellow-btn {
background: #FABD21;
}
.close-btn {
width: .58rem;
height: .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