|
|
@@ -156,15 +156,15 @@
|
|
|
</div>
|
|
|
<div v-if="show_moblie" class="moblie">
|
|
|
<div class="head-area">
|
|
|
- <div class="txt">GET GIVEAWAY</div>
|
|
|
+ <div class="gift">
|
|
|
+ <img :src=" require('../static/subject/gift.svg') " />
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ <div>Complete tasks</div>
|
|
|
+ <div>to Draw Prizes</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 领取列表 -->
|
|
|
- <div class="luck-list-title">
|
|
|
- <div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</div>
|
|
|
- <div> {{ detail.postBizData.receiveAmountValue }} / {{
|
|
|
- detail.postBizData.amountValue || ''
|
|
|
- }} {{ detail.postBizData.currencySymbol || '' }}</div>
|
|
|
- </div>
|
|
|
<div class="luck-list" @scroll="handleScroll($event)">
|
|
|
<div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
|
|
|
<img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
|
|
|
@@ -184,14 +184,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="area-cp-link">
|
|
|
- <div class="area-title">
|
|
|
- <img src="/svg/icon-mobile.svg" alt="">
|
|
|
- <div class="right">
|
|
|
- <div class="right-title">Get Giveaway on PC</div>
|
|
|
- <div class="right-content">You need to use a computer to complete tasks, and Get Giveaways (Just
|
|
|
- 2-3 minutes)</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="area-list">
|
|
|
+ <div class="item">
|
|
|
+ <div class="icon"><img :src=" require('../static/subject/01.svg') " /></div>
|
|
|
+ <div class="font">Complete the tasks on tweet</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="icon"><img :src=" require('../static/subject/02.svg') " /></div>
|
|
|
+ <div class="font">Open link on PC to draw</div>
|
|
|
+ <div class="pc"><img :src=" require('../static/subject/pc.svg') " /></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="area-content">
|
|
|
{{ cp_link }}
|
|
|
</div>
|
|
|
@@ -699,7 +702,7 @@ body,
|
|
|
|
|
|
.head-area {
|
|
|
width: 100%;
|
|
|
- height: 8rem;
|
|
|
+ height: 11rem;
|
|
|
text-align: center;
|
|
|
letter-spacing: 0.3px;
|
|
|
font-size: 2rem;
|
|
|
@@ -709,10 +712,16 @@ body,
|
|
|
border-radius: 0 586px 586px/0 0 104px 104px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-
|
|
|
+ justify-content: center;
|
|
|
+ .gift {
|
|
|
+ margin-right: 1.4rem;
|
|
|
+ img {
|
|
|
+ width: 5.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
.txt {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -732,14 +741,13 @@ body,
|
|
|
.luck-list {
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
- background: #fff;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
.luck-item {
|
|
|
display: flex;
|
|
|
padding: 12px 0;
|
|
|
margin: 0 16px;
|
|
|
- border-bottom: 1px solid #d1d1d1;
|
|
|
+ border-bottom: 1px solid #F2F2F2;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
|
|
|
|
@@ -825,49 +833,43 @@ body,
|
|
|
|
|
|
.area-cp-link {
|
|
|
background: #fff;
|
|
|
- display: flex;
|
|
|
width: 100%;
|
|
|
flex-wrap: wrap;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
height: 20rem;
|
|
|
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
|
|
|
- border-top-left-radius: 2rem;
|
|
|
- border-top-right-radius: 2rem;
|
|
|
-
|
|
|
- .area-title {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 6.4rem;
|
|
|
- height: 6.4rem;
|
|
|
- margin: 1.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- letter-spacing: 0.3px;
|
|
|
-
|
|
|
- .right-title {
|
|
|
- font-size: 1.7rem;
|
|
|
- color: #000000;
|
|
|
- margin-top: 1.7rem;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .right-content {
|
|
|
- font-size: 1.2rem;
|
|
|
- color: #989898;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ border-top-left-radius: 1rem;
|
|
|
+ border-top-right-radius: 1rem;
|
|
|
+
|
|
|
+ .area-list {
|
|
|
+ width: 34.3rem;
|
|
|
+ margin: 1.5rem auto;
|
|
|
+ .item {
|
|
|
+ clear: both;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0.7rem 0;
|
|
|
+ font-size: 1.6rem;
|
|
|
+ font-weight: 500;
|
|
|
+ .icon {
|
|
|
+ float: left;
|
|
|
+ margin-right: 0.8rem;
|
|
|
+ }
|
|
|
+ .font {
|
|
|
+ float: left;
|
|
|
+ margin-right: 0.8rem;
|
|
|
+ }
|
|
|
+ .pc {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.area-content {
|
|
|
background: #F4F4F4;
|
|
|
- height: 4.6rem;
|
|
|
- padding: 0 1rem;
|
|
|
- width: 100%;
|
|
|
+ padding: 0.7rem 1rem;
|
|
|
+ margin: 0 auto 1rem;
|
|
|
+ width: 34.3rem;
|
|
|
font-size: 1.3rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
