自定义封面

pages/index.vue

@@ -78,23 +78,37 @@
 					</div>
 				</div>
 			</div>
-			<div class="redBag" v-else>
-				<img src="/subject/001-card.png" alt="">
-				<img class="open-gif" src="/subject/001.gif" />
-				<div class="title" v-if="detail.postBizData.postUserInfo">
-					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
-					<span>{{ detail.postBizData.postUserInfo.nickName || 'FutureDoctor' }}</span>
+			<template v-else>
+				<div class="redBagCustom" v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
+					<img class="customImg" :src="detail.postBizData.customPosterInstalled" />
+					<div class="customBottom">
+						<div class="theme">
+							<span class="info">Instant Giveaway</span>
+						</div>
+						<div class="winner-info">
+							<span class="count">{{detail.postBizData.totalCount}} Winners</span>
+							<span>to Share </span>
+							<span class="prize-name">{{detail.postBizData.amountValue + ' ' + detail.postBizData.currencySymbol}}</span>
+						</div>
+					</div>
 				</div>
-				<div class="money-area">
-					<div class="txt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
-					<div class="coin">
-						<img :src="detail.postBizData.currencyIconPath" alt />
-						<font-amount :amount="detail.postBizData.amountValue"></font-amount>
+				<div class="redBag" v-else>
+					<img src="/subject/001-card.png" alt="">
+					<img class="open-gif" src="/subject/001.gif" />
+					<div class="title" v-if="detail.postBizData.postUserInfo">
+						<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
+						<span>{{ detail.postBizData.postUserInfo.nickName || 'FutureDoctor' }}</span>
+					</div>
+					<div class="money-area">
+						<div class="txt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
+						<div class="coin">
+							<img :src="detail.postBizData.currencyIconPath" alt />
+							<font-amount :amount="detail.postBizData.amountValue"></font-amount>
+						</div>
+						<div class="people">{{ detail.postBizData.totalCount }} WINNERS TO SHARE</div>
 					</div>
-					<div class="people">{{ detail.postBizData.totalCount }} WINNERS TO SHARE</div>
 				</div>
-			</div>
-
+			</template>
 
 			<!-- 安装 -->
 			<div class="install" v-if="status == 'nothing' || status == 'open' || status == 'opened'"
@@ -141,7 +155,6 @@
 				<div class="install_btn" @click="installExtension">Install</div>
 			</div>
 
-
 			<!-- 非chrome 浏览器状态 -->
 			<div class="install install-error" v-if="status == 'no-chrome'">
 				<div class="title">Open Giveaways</div>
@@ -297,7 +310,7 @@ export default {
 				},
 				{
 					name: 'og:image',
-					content: this.detail.postBizData.imagePath || ''
+					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
 				},
 				// twitter
 				{
@@ -314,7 +327,7 @@ export default {
 				},
 				{
 					name: 'twitter:image',
-					content: this.detail.postBizData.imagePath || ''
+					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
 				}
 			]
 		}
@@ -1035,6 +1048,62 @@ body,
 		animation-fill-mode: forwards;
 	}
 
+	.redBagCustom {
+		display: flex;
+		justify-content: flex-start;
+		flex-direction: column;
+		position: absolute;
+		top: 16rem;
+		left: 30.6rem;
+		width: 37.5rem;
+		border-radius: 2rem;
+		overflow-y: hidden;
+		box-shadow: 0 0.3rem 2rem rgba(0, 0, 0, 0.2);
+		background: #fff;
+		.customImg {
+			width: 100%;
+			min-height: 373px;
+		}
+		.customBottom {
+			width: 100%;
+			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;
+				.count{
+					color: #1D9BF0;
+					margin-right: 4px;
+				}
+				.prize-name {
+					color: #1D9BF0;
+					margin-left: 4px;
+				}
+			}
+		}
+	}
+
 
 	.redBag {
 		display: flex;

pages/luckdraw.vue

@@ -8,27 +8,35 @@
         <template v-else>
             <template v-if="isMobile">
                 <!-- 手机端 -->
-                <div class="small" :class="{ bg: status === 'not-open' }">
+                <div class="small" :class="{
+                    bg: status === 'not-open',
+                    custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
+                }">
                     <template v-if="status === 'not-open'">
-                        <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
-                        <div class="head">
-                            <img :src="detail.postBizData.postUserInfo.avatarUrl" />
-                            <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
-                        </div>
-                        <div class="price">
-                            <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
-                            <div class="money">
-                                <img :src="detail.postBizData.currencyIconPath" />
-                                <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
+                        <template v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
+                            <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
+                        </template>
+                        <template v-else>
+                            <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
+                            <div class="head">
+                                <img :src="detail.postBizData.postUserInfo.avatarUrl" />
+                                <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
                             </div>
-                        </div>
-                        <div class="time">
-                            <img class="img" :src=" require('../static/svg/icon-time.svg') " />
-                            {{ validity || '00:00:00' }}
-                        </div>
-                        <div class="box">
-                            <img src="../static/subject/icon-box.png" />
-                        </div>
+                            <div class="price">
+                                <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
+                                <div class="money">
+                                    <img :src="detail.postBizData.currencyIconPath" />
+                                    <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
+                                </div>
+                            </div>
+                            <div class="time">
+                                <img class="img" :src=" require('../static/svg/icon-time.svg') " />
+                                {{ validity || '00:00:00' }}
+                            </div>
+                            <div class="box">
+                                <img src="../static/subject/icon-box.png" />
+                            </div>
+                        </template>
                     </template>
                     <template v-else>
                         <div class="succTop">
@@ -109,27 +117,47 @@
                 </div>
                 <div class="show">
                     <div class="center">
-                        <div class="giveaway" :class="{ bg: status === 'not-open' }">
+                        <div class="giveaway" :class="{
+                            bg: status === 'not-open',
+                            custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
+                        }">
                             <template v-if="status === 'not-open'">
-                                <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
-                                <div class="head">
-                                    <img :src="detail.postBizData.postUserInfo.avatarUrl" />
-                                    <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
-                                </div>
-                                <div class="price">
-                                    <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
-                                    <div class="money">
-                                        <img :src="detail.postBizData.currencyIconPath" />
-                                        <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
+                                <template v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
+                                    <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
+                                    <div class="customBottom">
+                                        <div class="theme">
+                                            <img class="icon" :src="require('../static/svg/icon-last-time.svg')"/>
+                                            <span class="time2">{{ validity || '00:00:00' }}</span>
+                                            <span class="info">Left</span>
+                                        </div>
+                                        <div class="winner-info">
+                                            <span class="count">{{detail.postBizData.totalCount}} Winners</span>
+                                            <span>to Share </span>
+                                            <span class="prize-name">{{detail.postBizData.amountValue + ' ' + detail.postBizData.currencySymbol}}</span>
+                                        </div>
                                     </div>
-                                </div>
-                                <div class="time">
-                                    <img class="img" :src=" require('../static/svg/icon-time.svg') " />
-                                    {{ validity || '00:00:00' }}
-                                </div>
-                                <div class="box">
-                                    <img src="../static/subject/icon-box.png" />
-                                </div>
+                                </template>
+                                <template v-else>
+                                    <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
+                                    <div class="head">
+                                        <img :src="detail.postBizData.postUserInfo.avatarUrl" />
+                                        <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
+                                    </div>
+                                    <div class="price">
+                                        <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
+                                        <div class="money">
+                                            <img :src="detail.postBizData.currencyIconPath" />
+                                            <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
+                                        </div>
+                                    </div>
+                                    <div class="time">
+                                        <img class="img" :src=" require('../static/svg/icon-time.svg') " />
+                                        {{ validity || '00:00:00' }}
+                                    </div>
+                                    <div class="box">
+                                        <img src="../static/subject/icon-box.png" />
+                                    </div>
+                                </template>
                             </template>
                             <template v-else>
                                 <div class="succTop">
@@ -246,7 +274,7 @@ export default {
 				},
 				{
 					name: 'og:image',
-					content: this.detail.postBizData.imagePath || ''
+					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
 				},
 				// twitter
 				{
@@ -263,7 +291,7 @@ export default {
 				},
 				{
 					name: 'twitter:image',
-					content: this.detail.postBizData.imagePath || ''
+					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
 				}
 			]
 		}
@@ -590,6 +618,9 @@ body,
                 &.bg {
                     background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
                 }
+                &.custom {
+                    height: auto!important;
+                }
                 .lottery {
                     position: absolute;
                     top: 0;
@@ -705,6 +736,9 @@ body,
     &.bg {
         background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
     }
+    &.custom {
+        background: #111214!important;
+    }
     .lottery {
         position: absolute;
         top: 0;
@@ -1057,4 +1091,47 @@ body,
         }
     }
 }
+
+.customImg {
+    width: 100%;
+    min-height: 373px;
+}
+.customBottom {
+    width: 100%;
+    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;
+        }
+        .time2 {
+            margin: 0 4px;
+            color: #1D9BF0;
+        }
+    }
+    .winner-info {
+        display: flex;
+        height: 20px;
+        align-items: center;
+        justify-content: flex-start;
+        .count{
+            color: #1D9BF0;
+            margin-right: 4px;
+        }
+        .prize-name {
+            color: #1D9BF0;
+            margin-left: 4px;
+        }
+    }
+}
 </style>

static/svg/icon-last-time.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1_21276_235944" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14" fill="black">
+<rect fill="white" width="14" height="14"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.69143 3.69143 1 7 1C10.3086 1 13 3.69143 13 7C13 10.3086 10.3086 13 7 13C3.69143 13 1 10.3086 1 7ZM1.861 7C1.861 9.83329 4.16629 12.139 7 12.139C9.83329 12.139 12.139 9.83329 12.139 7C12.139 4.16629 9.83329 1.861 7 1.861C4.16629 1.861 1.861 4.16629 1.861 7ZM7.13644 7.36158H9.01036C9.21841 7.36158 9.38672 7.54844 9.38672 7.7815C9.38672 8.01455 9.21841 8.20141 9.01036 8.20141H6.76158C6.55391 8.20141 6.38672 8.01455 6.38672 7.7815V4.42301C6.38672 4.19038 6.55353 4.00141 6.76158 4.00141C6.96962 4.00141 7.13644 4.18995 7.13644 4.42301V7.36158Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.69143 3.69143 1 7 1C10.3086 1 13 3.69143 13 7C13 10.3086 10.3086 13 7 13C3.69143 13 1 10.3086 1 7ZM1.861 7C1.861 9.83329 4.16629 12.139 7 12.139C9.83329 12.139 12.139 9.83329 12.139 7C12.139 4.16629 9.83329 1.861 7 1.861C4.16629 1.861 1.861 4.16629 1.861 7ZM7.13644 7.36158H9.01036C9.21841 7.36158 9.38672 7.54844 9.38672 7.7815C9.38672 8.01455 9.21841 8.20141 9.01036 8.20141H6.76158C6.55391 8.20141 6.38672 8.01455 6.38672 7.7815V4.42301C6.38672 4.19038 6.55353 4.00141 6.76158 4.00141C6.96962 4.00141 7.13644 4.18995 7.13644 4.42301V7.36158Z" fill="#91989C"/>
+<path d="M7.13644 7.36158H7.03644V7.46158H7.13644V7.36158ZM7 0.9C3.6362 0.9 0.9 3.6362 0.9 7H1.1C1.1 3.74666 3.74666 1.1 7 1.1V0.9ZM13.1 7C13.1 3.6362 10.3638 0.9 7 0.9V1.1C10.2533 1.1 12.9 3.74666 12.9 7H13.1ZM7 13.1C10.3638 13.1 13.1 10.3638 13.1 7H12.9C12.9 10.2533 10.2533 12.9 7 12.9V13.1ZM0.9 7C0.9 10.3638 3.6362 13.1 7 13.1V12.9C3.74666 12.9 1.1 10.2533 1.1 7H0.9ZM7 12.039C4.22152 12.039 1.961 9.77806 1.961 7H1.761C1.761 9.88851 4.11105 12.239 7 12.239V12.039ZM12.039 7C12.039 9.77806 9.77806 12.039 7 12.039V12.239C9.88851 12.239 12.239 9.88851 12.239 7H12.039ZM7 1.961C9.77806 1.961 12.039 4.22152 12.039 7H12.239C12.239 4.11105 9.88851 1.761 7 1.761V1.961ZM1.961 7C1.961 4.22151 4.22151 1.961 7 1.961V1.761C4.11106 1.761 1.761 4.11106 1.761 7H1.961ZM9.01036 7.26158H7.13644V7.46158H9.01036V7.26158ZM9.48672 7.7815C9.48672 7.50365 9.28352 7.26158 9.01036 7.26158V7.46158C9.1533 7.46158 9.28672 7.59324 9.28672 7.7815H9.48672ZM9.01036 8.30141C9.28352 8.30141 9.48672 8.05935 9.48672 7.7815H9.28672C9.28672 7.96975 9.1533 8.10141 9.01036 8.10141V8.30141ZM6.76158 8.30141H9.01036V8.10141H6.76158V8.30141ZM6.28672 7.7815C6.28672 8.05887 6.48837 8.30141 6.76158 8.30141V8.10141C6.61944 8.10141 6.48672 7.97023 6.48672 7.7815H6.28672ZM6.28672 4.42301V7.7815H6.48672V4.42301H6.28672ZM6.76158 3.90141C6.48739 3.90141 6.28672 4.14674 6.28672 4.42301H6.48672C6.48672 4.23401 6.61968 4.10141 6.76158 4.10141V3.90141ZM7.23644 4.42301C7.23644 4.14625 7.03571 3.90141 6.76158 3.90141V4.10141C6.90354 4.10141 7.03644 4.23366 7.03644 4.42301H7.23644ZM7.23644 7.36158V4.42301H7.03644V7.36158H7.23644Z" fill="#91989C" mask="url(#path-1-outside-1_21276_235944)"/>
+</svg>