Skip to content

activities / web-lottery

Go to a project
Commit 8bd86519 by Lays-lzq
Options

Merge branch 'feature/newDraw' into dev

parents 50e34d19 9783b6ef
Showing with 59 additions and 19 deletions
components/Lottery/Timing/Rewards.vue
<template> <template>
<div class="main">
<div <div
class="main"
:style="{ :style="{
height: this.$route.path === '/mini/index' ? '65.5vh' : lotteryInfo.showType === 7 ? '46.5vh' : '37.5vh' height: this.$route.path === '/mini/index' ? '65.5vh' : lotteryInfo.showType === 7 ? '46.5vh' : '37.5vh'
}" }"
> >
<div class="intro"> <div class="intro">
<div class="intro__title">活动介绍</div> <div class="intro__title">活动介绍</div>
<div class="intro__sub">本场活动奖品:</div> <div class="intro__detail">{{ lotteryInfo.intro }}</div>
</div>
<div class="rule">
<div class="rule__sub">本场活动奖品:</div>
<div class="intro__rewards"> <div class="intro__rewards">
<div v-for="item in lotteryInfo.prizeConfigs" :key="item.id" class="intro__rewards-item"> <div v-for="item in lotteryInfo.prizeConfigs" :key="item.id" class="intro__rewards-item">
<img v-if="item.icon" :src="item.icon" alt="" /> <img v-if="item.icon" :src="item.icon" alt="" />
...@@ -16,15 +19,6 @@ ...@@ -16,15 +19,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="rule">
<div class="intro__title">活动规则</div>
<div class="rule__detail">
<div>1.每位用户每场有1次抽奖机会</div>
<div>2.活动时间到达后自动开奖，逾期未参与兑奖概不负责</div>
<div>3.违反平台用户规则的用户默认放弃抽奖机会</div>
<div>4.通过抽奖活的的礼物不可兑换成现金</div>
<div>5.本活动最终解释权归平台所有</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -52,15 +46,19 @@ export default { ...@@ -52,15 +46,19 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.main { .main {
width: 100%;
height: 100%;
padding: 0 13px;
overflow-x: scroll;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around;
.intro { .intro {
// margin-bottom: 24px; // margin-bottom: 24px;
height: 40%; // height: 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin-bottom: 30px;
&__title { &__title {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
...@@ -69,22 +67,38 @@ export default { ...@@ -69,22 +67,38 @@ export default {
line-height: 22.5px; line-height: 22.5px;
text-align: center; text-align: center;
} }
&__sub { // &__sub {
// font-size: 14px;
// font-family: PingFangSC-Regular, PingFang SC;
// font-weight: 400;
// color: #fff6da;
// // line-height: 20px;
// // margin-top: 4%;
// margin-left: 16px;
// }
&__detail {
width: 335px;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #fff6da; color: #fff6da;
line-height: 20px; line-height: 20px;
// margin-top: 4%; // margin-top: 15px;
margin-left: 16px; margin-left: 16px;
margin-top: 16px;
white-space: pre-wrap;
word-wrap: break-word;
} }
&__rewards { &__rewards {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: flex-start;
flex-wrap: wrap;
// margin-top: 15px; // margin-top: 15px;
&-item { &-item {
width: 33%;
display: inline-block;
font-size: 13px; font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -94,13 +108,23 @@ export default { ...@@ -94,13 +108,23 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 12px;
img { img {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 2px;
} }
div { div {
width: 100%;
margin-top: 4px; margin-top: 4px;
text-align: center; text-align: center;
height: 38.5px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
} }
} }
} }
...@@ -109,7 +133,22 @@ export default { ...@@ -109,7 +133,22 @@ export default {
height: 44%; height: 44%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; &__sub {
// font-size: 16px;
// font-family: PingFangSC-Medium, PingFang SC;
// font-weight: 500;
// color: #fff6da;
// line-height: 22.5px;
// text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff6da;
line-height: 20px;
// margin-top: 4%;
margin-left: 16px;
margin-bottom: 15px;
}
&__detail { &__detail {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
......
components/Lottery/Timing/RulePopup.vue
...@@ -67,10 +67,11 @@ export default { ...@@ -67,10 +67,11 @@ export default {
height: calc(100% - 46px); height: calc(100% - 46px);
&__main { &__main {
width: 100%; width: 100%;
height: 100%;
border-radius: 6px; border-radius: 6px;
padding: 13px; padding-bottom: 13px;
padding-top: 38px;
position: relative; position: relative;
padding-top: 44px;
.main-link { .main-link {
width: 24px; width: 24px;
height: 74px; height: 74px;
......
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 sign in to comment