|
|
@@ -192,38 +192,46 @@
|
|
|
|
|
|
<!-- no-open -->
|
|
|
<div v-else-if="state.status == 'not-open'" class="not-open">
|
|
|
- <img :src="require('@/assets/subject/002-card.svg')" alt="">
|
|
|
- <img class="open-gif" :src="require('@/assets/gif/002.png')" />
|
|
|
-
|
|
|
- <img :src="require('@/assets/svg/icon-participate.svg')" alt="" class="open" @click="clickOpenRedPacket">
|
|
|
- <div class="title" v-if="state.detail.postUserInfo">
|
|
|
- <img :src="state.detail.postUserInfo.avatarUrl" alt />
|
|
|
- <span>{{ state.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
|
|
|
- </div>
|
|
|
- <div class="money-area">
|
|
|
- <div class="txt">{{ state.detail.currencySymbol }} GIVEAWAY</div>
|
|
|
- <div class="coin">
|
|
|
- <img :src="state.detail.currencyIconPath" alt />
|
|
|
- <font-amount :amount="state.detail.amountValue" style="color:#fff;"></font-amount>
|
|
|
+ <template v-if="state.detail.posterType === 2 && state.detail.customPosterInstalled">
|
|
|
+ <img class="customImg" :src="state.detail.customPosterInstalled" />
|
|
|
+ <div class="customBottom">
|
|
|
+ <div class="theme">
|
|
|
+ <img class="icon" :src="require('@/assets/svg/icon-last-time.svg')"/>
|
|
|
+ <span class="time">{{ state.count_down_time }}</span>
|
|
|
+ <span class="info">Left</span>
|
|
|
+ </div>
|
|
|
+ <div class="winner-info">
|
|
|
+ <span class="count">{{state.detail.totalCount}}Winners</span>
|
|
|
+ <span>to Share </span>
|
|
|
+ <span class="prize-name">{{state.detail.amountValue + ' ' + state.detail.currencySymbol}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="open-red" @click="clickOpenRedPacket">
|
|
|
+ Participate Now
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img :src="require('@/assets/subject/002-card.svg')" alt="">
|
|
|
+ <img class="open-gif" :src="require('@/assets/gif/002.png')" />
|
|
|
+
|
|
|
+ <img :src="require('@/assets/svg/icon-participate.svg')" alt="" class="open" @click="clickOpenRedPacket">
|
|
|
+ <div class="title" v-if="state.detail.postUserInfo">
|
|
|
+ <img :src="state.detail.postUserInfo.avatarUrl" alt />
|
|
|
+ <span>{{ state.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
|
|
|
</div>
|
|
|
- <!-- <div class="people">{{ state.detail.totalCount }} WINNERS TO SHARE</div> -->
|
|
|
- <!-- <div class="mark-area">
|
|
|
- <div class="time">
|
|
|
+ <div class="money-area">
|
|
|
+ <div class="txt">{{ state.detail.currencySymbol }} GIVEAWAY</div>
|
|
|
+ <div class="coin">
|
|
|
+ <img :src="state.detail.currencyIconPath" alt />
|
|
|
+ <font-amount :amount="state.detail.amountValue" style="color:#fff;"></font-amount>
|
|
|
+ </div>
|
|
|
+ <div class="time-area">
|
|
|
+ <div></div>
|
|
|
<img :src="require('@/assets/svg/icon-time.svg')" />
|
|
|
<span>{{ state.count_down_time }}</span>
|
|
|
</div>
|
|
|
- <div class="win">
|
|
|
- <img :src="require('@/assets/svg/icon-win.svg')" />
|
|
|
- <span>{{ state.detail.totalCount }} WINNERS</span>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <div class="time-area">
|
|
|
- <div></div>
|
|
|
- <img :src="require('@/assets/svg/icon-time.svg')" />
|
|
|
- <span>{{ state.count_down_time }}</span>
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -2964,6 +2972,62 @@ body {
|
|
|
overflow: hidden;
|
|
|
border-radius: 11px;
|
|
|
|
|
|
+ .customImg {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 373px;
|
|
|
+ }
|
|
|
+ .customBottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 125px;
|
|
|
+ background:#111214;
|
|
|
+ padding: 10px 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #838383;
|
|
|
+ line-height: 20px;
|
|
|
+ .theme {
|
|
|
+ display: flex;
|
|
|
+ height: 20px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .icon {
|
|
|
+ width: 12px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ margin: 0 4px;
|
|
|
+ color: #1D9BF0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .winner-info {
|
|
|
+ display: flex;
|
|
|
+ height: 20px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ .count{
|
|
|
+ color: #1D9BF0;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .prize-name {
|
|
|
+ color: #1D9BF0;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .open-red {
|
|
|
+ height: 45px;
|
|
|
+ background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
|
|
|
+ border: 1.5px solid rgba(255, 255, 255, 0.15);
|
|
|
+ border-radius: 52px;
|
|
|
+ line-height: 45px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
.money-area {
|
|
|
width: 100%;
|
|
|
position: absolute;
|
