[edit][ui]

pages/index.vue

@@ -1,70 +1,73 @@
 <template>
-	<div class="content" :style="{ 'backgroundImage': `url(${this.back_img})` }" v-show="home_show" v-if="detail">
+	<div class="content" :style="{ 'background': `#F5FAFF` }" v-show="home_show" v-if="detail">
 		<div class="logo">
 			<img src="/svg/icon-logo.svg" alt />
 		</div>
-		<!-- 红包 -->
-		<div class="redPacket" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }"
-			v-show="status != 'error'">
-			<div class="area" :class="{ key_area: status == 'open' }"
-				v-show="status == 'open' || status == 'no-chrome'">
-				<div class="title">
-					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
-					<span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
-				</div>
-				<div class="txt">Good Luck!</div>
-			</div>
+		<!-- 未开始 -->
+		<div class="not-open" v-show="status == 'not-open'">
+			<img src="/subject/001.gif">
+		</div>
 
-			<img src="/svg/back-top.svg" alt class="top" v-show="status == 'open' || status == 'no-chrome'"
-				:class="{ key_top: status == 'open' }" />
-			<img src="/svg/back-down.svg" alt class="down" v-show="status == 'open' || status == 'no-chrome'"
-				:class="{ key_down: status == 'open' }" />
-			<img src="/svg/icon-usd.svg" alt class="start" v-show="status == 'no-chrome'" />
-			<img src="/git/icon-start.gif" alt class="start" v-show="status == 'open'" />
+		<!-- 红包打开 -->
+		<div class="redPacket" v-show="status != 'not-open'" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }">
 
 			<!-- 内容 -->
 			<div class="head">
 				<div class="head-title">
 					<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
-					<span>Giveaways from: {{ detail.postBizData.postUserInfo.nickName }}</span>
+					<span>{{ detail.postBizData.postUserInfo.nickName }}</span>
 				</div>
-				<div class="head-txt" v-if="status == 'open' || status == 'opened'">Awesome! You Will Get</div>
+
+				<!-- <div class="head-txt" v-if="status == 'open' || status == 'opened'">Awesome! You Will Get</div> -->
 				<!-- <div class="head-area" v-else-if="status == 'opened'">opened!</div> -->
-				<div class="head-area" v-else-if="status == 'nothing'">Better luck next time!</div>
-				<div class="head-area" v-else-if="status == 'expire'">
-					<div>This Giveaways</div>
-					<div>expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</div>
+
+				<!-- 红包被领完了 -->
+				<div class="head-area" v-if="status == 'nothing'">
+					<div class="txt">Better luck next time!</div>
 				</div>
-				<div class="head-money" v-if="status == 'open' || status == 'opened'">
-					<img src="/svg/icon-usd.svg" alt />
-					<span class="money-txt">{{ receiveAmount / 100 }}</span>
-					<div>
-						<span>USD</span>
+
+				<!-- 过期 -->
+				<div class="head-area expire" v-if="status == 'expire'">
+					<div class="txt">This Giveaways</div>
+					<div class="titme">expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</div>
+				</div>
+
+				<!-- 非chrome浏览器 -->
+				<div class="head-area expire" v-if="status == 'no-chrome'">
+					<div class="txt">Get Giveaways</div>
+					<div class="titme">with chrome</div>
+				</div>
+				<!-- 领取成功 -->
+				<div class="head-area head-money" v-if="status == 'open' || status == 'opened'">
+					<div class="txt">AWESOME! YOU Will GET</div>
+					<div class="head-money-area">
+						<img :src="currencyIconUrl" alt />
+						<span class="money-txt">{{ receiveAmount / 100 }}</span>
 					</div>
 				</div>
 			</div>
+
+			<!-- 领取列表 -->
 			<div class="luck-list-title">
-				<div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} People Got
-				</div>
-				<div>Total ${{ detail.postBizData.amountValue / 100 || '' }} {{
-					detail.postBizData.amountCurrencyCode ||
-						''
-				}}</div>
+				<div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Got</div>
+				<div> {{ detail.postBizData.receiveAmountValue / 100 }} / {{
+					detail.postBizData.amountValue / 100 || ''
+				}} {{
+	detail.postBizData.amountCurrencyCode || ''
+}}</div>
 			</div>
-			<div class="luck-list" @scroll="handleScroll" ref="list">
+			<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 />
 					<img v-else src="/svg/icon-twitter.svg" alt />
 					<div class="luck-content">
 						<div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
-						<div class="luck-time" v-if="item.receiveTimestamp == -1">刚刚</div>
 						<div class="luck-time">{{ formatTime(item.receiveTimestamp) }}</div>
 					</div>
 					<div class="luck-money">
-						<img src="/svg/icon-usd.svg" alt />
-						<div class="luck-money-txt">{{ item.amountValue / 100 }}</div>
+						<img :src="item.currencyIconUrl" alt />
+						<div class="luck-money-txt">{{ item.amountValue / 100 || 0 }}</div>
 					</div>
-
 					<div class="luck-king" v-if="item.maxAmount">
 						<img src="/svg/icon-king-hat.svg" alt />
 						<span>Luckiest Draw</span>
@@ -72,6 +75,8 @@
 				</div>
 			</div>
 		</div>
+
+
 		<!-- 安装 -->
 		<div class="install" v-if="status == 'open' || status == 'opened'" :class="{ key_install: status == 'open' }">
 			<div class="title">Withdraw to Wallet</div>
@@ -95,18 +100,23 @@
 				<div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
 				<div class="install_btn" @click="installExtension">Install</div>
 				<div class="area_num">
-					<div class="num" style="background: #E0E0E0;">2</div>
+					<div class="num">2</div>
 					<span>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
 				</div>
 				<div class="tip">Follow、Like tweet、Retweet (Just 1-3 minutes)</div>
 			</div>
 		</div>
+
+		<!-- 过期 -->
 		<div class="install install-error" v-if="status == 'nothing' || status == 'expire'">
 			<div class="title">Install DeNet</div>
 			<div class="title">Don't miss the next Giveaway</div>
 			<div class="tip">Used for Task Verification and Giveaways Withdrawal</div>
 			<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>
 			<div class="title">with chrome</div>
@@ -146,7 +156,6 @@ export default {
 		return {
 			appVersionCode: 1,
 			mid: '',
-			back_img: '/svg/back-denet.svg',
 			area_show: true,
 			home_show: false,
 			validity: '',
@@ -160,6 +169,7 @@ export default {
 					}
 				}
 			},
+			currencyIconUrl: '',
 			title: '',
 			twitterTitle: 'deNet',
 			jumpUrl: jumpUrl,
@@ -222,10 +232,11 @@ export default {
 			});
 		},
 		handleScroll(e) {
+			e = e.target
 			if (this.luck_list_end) {
 				return
 			}
-			if ((this.$refs.list.clientHeight + this.$refs.list.scrollTop) / this.$refs.list.scrollHeight > .8) {
+			if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
 				this.luck_list_end = false
 				this.page_index++
 				this.getReceivedList()
@@ -254,7 +265,10 @@ export default {
 			switch (data.code.toString()) {
 				case '0':
 					if (data.data.newReceived) {
-						this.status = 'open'
+						this.status = 'not-open'
+						setTimeout(() => {
+							this.status = 'open'
+						}, 3000)
 						this.receiveAmount = data.data.receiveAmount
 					} else {
 						this.status = 'opened'
@@ -411,20 +425,33 @@ body,
 	font-style: normal;
 	font-weight: 600;
 
+	.not-open {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+
+		img {
+			width: 20rem;
+			height: 20rem;
+		}
+	}
+
 	.logo {
 		position: absolute;
 		left: 4rem;
 		top: 1.5rem;
 
 		img {
-			width: 107px;
-			height: 40px;
+			width: 10.7rem;
+			height: 4rem;
 		}
 	}
 
 	.key_packet {
 		animation: key_packet 3s;
-		animation-delay: 6s;
+		animation-delay: 0s;
 		animation-fill-mode: forwards;
 	}
 
@@ -442,22 +469,9 @@ body,
 		// background: red;
 		overflow: hidden;
 		box-shadow: 0 0 5px #888888;
+		background: #fff;
 
-		.start {
-			position: absolute;
-			width: 10rem;
-			height: 10rem;
-			bottom: 24rem;
-			left: 50%;
-			margin-left: -5rem;
-			z-index: 13;
-		}
 
-		.key_top {
-			animation: key_top 4s;
-			animation-delay: 2s;
-			animation-fill-mode: forwards;
-		}
 
 		.top {
 			top: 0;
@@ -473,33 +487,33 @@ body,
 			z-index: 11;
 		}
 
-		.key_down {
-			animation: key_down 4s;
-			animation-delay: 2s;
-			animation-fill-mode: forwards;
-		}
 
 		.head {
+			position: relative;
+
 			.head-title {
-				height: 9.7rem;
-				line-height: 9.7rem;
-				background: #ef4545;
-				text-align: center;
-				border-radius: 0 586px 586px/0 0 104px 104px;
-				overflow: hidden;
-				box-shadow: 0 0 5px #888888;
+				position: absolute;
+				top: 0;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 3.6rem;
+				background: rgba(255, 255, 255, .1);
+
 
 				img {
-					width: 3rem;
-					height: 3rem;
+					width: 1.8rem;
+					height: 1.8rem;
 					border-radius: 50%;
 
-					border: 2px solid #fff4db;
+					border: 1px solid #fff;
 				}
 
 				span {
-					font-size: 1.4rem;
-					color: #fff2d3;
+					margin-left: .8rem;
+					font-size: 1.2rem;
+					color: #fff;
 				}
 			}
 
@@ -507,59 +521,75 @@ body,
 				margin-top: 4.7rem;
 				font-size: 2rem;
 				text-align: center;
-				color: #ef4545;
+				color: #fff;
 			}
 
 			.head-area {
-				height: 10rem;
+				height: 19rem;
 				text-align: center;
 				letter-spacing: 0.3px;
 				font-size: 2rem;
 				text-align: center;
-				color: #ef4545;
+				color: #fff;
+				background: #389AFF;
+				border-radius: 0 586px 586px/0 0 104px 104px;
+
+				.txt {
+					padding-top: 8.5rem;
+				}
 			}
 
 			.head-money {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				margin-bottom: 3.2rem;
-
-				img {
-					width: 4rem;
-					height: 4rem;
+				.txt {
+					padding-top: 6.8rem;
+					font-weight: 800;
+					font-size: 1.5rem;
+					text-align: center;
+					letter-spacing: 0.3px;
 				}
 
-				span {
-					font-size: 1.3rem;
-				}
+				.head-money-area {
+					display: flex;
+					width: 100%;
+					justify-content: center;
+					align-items: center;
 
-				.money-txt {
-					font-weight: 700;
-					font-size: 4.8rem;
-					color: #000000;
-					letter-spacing: 0.3px;
+					img {
+						width: 4rem;
+						height: 4rem;
+						border: 2px solid #FFFFFF;
+						border-radius: 100px;
+					}
+
+					span {
+						margin-left: 1.3rem;
+						font-size: 4.6rem;
+					}
 				}
 			}
 		}
 
 		.luck-list-title {
-			padding: 0 16px;
+			/*      margin-top: 47px;*/
+			margin: 0 16px;
+			padding: 14px 0 11px 0;
 			background: #fff;
-			color: #9b9b9b;
 			display: flex;
 			justify-content: space-between;
+			color: #B0B0B0;
+			border-bottom: 1px solid #D1D1D1;
 		}
 
+
 		.luck-list {
 			background: #fff;
-			flex: 1;
-			overflow: scroll;
+			overflow: auto;
 
 			.luck-item {
 				display: flex;
-				padding: 12px 16px;
-				border-top: 1px solid #d1d1d1;
+				padding: 12px 0;
+				margin: 0 16px;
+				border-bottom: 1px solid #d1d1d1;
 				justify-content: space-between;
 				position: relative;
 
@@ -570,7 +600,7 @@ body,
 				.luck-king {
 					position: absolute;
 					top: 36px;
-					right: 16px;
+					right: 0px;
 					display: flex;
 					align-items: center;
 
@@ -637,6 +667,10 @@ body,
 					}
 				}
 			}
+
+			.luck-item:last-child {
+				border: 0;
+			}
 		}
 
 		.area {
@@ -686,7 +720,7 @@ body,
 	.key_install {
 		opacity: 0;
 		animation: key_install 2s;
-		animation-delay: 6s;
+		animation-delay: 0s;
 		animation-fill-mode: forwards;
 	}
 
@@ -702,22 +736,20 @@ body,
 		}
 
 		.validity {
-			padding-left: 1.5rem;
-			margin-top: 2rem;
-			background: rgba(166, 166, 166, 0.1);
+			margin-top: 1rem;
+			color: #FF0000;
 			width: 40rem;
 			height: 3.3rem;
 			line-height: 3.3rem;
 
 			span {
-				color: #000000;
 				font-size: 1.4rem;
 			}
 		}
 
 		.flow {
 			position: absolute;
-			margin-top: 4.6rem;
+			margin-top: 4rem;
 
 			.line {
 				position: absolute;
@@ -805,6 +837,7 @@ body,
 			letter-spacing: 0.3px;
 			display: flex;
 			align-items: center;
+			background: #FFFFFF;
 			border: 1px solid #e8e8e8;
 			border-radius: 10rem;
 			margin-top: 3.3rem;
@@ -851,31 +884,4 @@ body,
 	}
 }
 
-@keyframes key_top {
-	0% {
-		top: 0;
-	}
-
-	50% {
-		top: -30rem;
-	}
-
-	100% {
-		top: -36rem;
-	}
-}
-
-@keyframes key_down {
-	0% {
-		bottom: 0;
-	}
-
-	50% {
-		bottom: -28.3rem;
-	}
-
-	100% {
-		bottom: -32.3rem;
-	}
-}
 </style>

static/svg/icon-logo.svg

@@ -1,16 +1,19 @@
-<svg width="107" height="40" viewBox="0 0 107 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M51.2988 12.9082V27H56.2695C60.4688 27 62.9395 24.3828 62.9395 19.9297C62.9395 15.4863 60.459 12.9082 56.2695 12.9082H51.2988ZM53.4863 14.793H56.0645C59.043 14.793 60.7031 16.6289 60.7031 19.9492C60.7031 23.2793 59.0527 25.1055 56.0645 25.1055H53.4863V14.793ZM69.3723 18.2402C70.8469 18.2402 71.843 19.3438 71.8918 20.916H66.7551C66.8625 19.3633 67.8977 18.2402 69.3723 18.2402ZM71.882 23.9824C71.5988 24.8809 70.7102 25.4863 69.509 25.4863C67.8195 25.4863 66.7453 24.3047 66.7453 22.5176V22.3906H74.0012V21.668C74.0012 18.5527 72.2238 16.541 69.3723 16.541C66.4719 16.541 64.6164 18.6895 64.6164 21.9121C64.6164 25.1543 66.4426 27.1953 69.4602 27.1953C71.8137 27.1953 73.591 25.8574 73.884 23.9824H71.882ZM78.3246 27V16.6191H78.4125L85.7172 27H87.6898V12.9082H85.5609V23.2988H85.4828L78.1781 12.9082H76.1957V27H78.3246ZM94.6402 18.2402C96.1148 18.2402 97.1109 19.3438 97.1598 20.916H92.023C92.1305 19.3633 93.1656 18.2402 94.6402 18.2402ZM97.15 23.9824C96.8668 24.8809 95.9781 25.4863 94.777 25.4863C93.0875 25.4863 92.0133 24.3047 92.0133 22.5176V22.3906H99.2691V21.668C99.2691 18.5527 97.4918 16.541 94.6402 16.541C91.7398 16.541 89.8844 18.6895 89.8844 21.9121C89.8844 25.1543 91.7105 27.1953 94.7281 27.1953C97.0816 27.1953 98.859 25.8574 99.152 23.9824H97.15ZM101.825 14.2949V16.7266H100.331V18.3965H101.825V24.2949C101.825 26.2773 102.636 27.0684 104.716 27.0684C105.184 27.0684 105.653 27.0293 105.888 26.9707V25.3008C105.751 25.3301 105.409 25.3496 105.194 25.3496C104.335 25.3496 103.944 24.9492 103.944 24.0605V18.3965H105.897V16.7266H103.944V14.2949H101.825Z" fill="black"/>
-<path d="M7.39485 29.8718C5.20124 27.1489 3.88818 23.6868 3.88818 19.918C3.88818 16.1492 5.20124 12.6871 7.39485 9.96421M15.7365 35.2802C17.0233 35.6168 18.3738 35.796 19.7662 35.796C26.5893 35.796 32.4072 31.4922 34.6534 25.4513M34.73 14.5953C32.5418 8.44404 26.6683 4.04004 19.7662 4.04004C18.5463 4.04004 17.3586 4.1776 16.2177 4.43805" stroke="black" stroke-width="1.976" stroke-linecap="round" stroke-linejoin="round"/>
-<g clip-path="url(#clip0_13321_142428)">
-<circle cx="19.8932" cy="19.9186" r="11.1611" stroke="black" stroke-width="1.976"/>
-<path d="M18.8486 8.55078L20.8246 9.15222V30.9243L18.8486 31.5257V8.55078Z" fill="black"/>
+<svg width="96" height="30" viewBox="0 0 96 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.7" d="M41.2988 7.9082V22H46.2695C50.4688 22 52.9395 19.3828 52.9395 14.9297C52.9395 10.4863 50.459 7.9082 46.2695 7.9082H41.2988ZM43.4863 9.79297H46.0645C49.043 9.79297 50.7031 11.6289 50.7031 14.9492C50.7031 18.2793 49.0527 20.1055 46.0645 20.1055H43.4863V9.79297ZM59.0723 13.2402C60.5469 13.2402 61.543 14.3438 61.5918 15.916H56.4551C56.5625 14.3633 57.5977 13.2402 59.0723 13.2402ZM61.582 18.9824C61.2988 19.8809 60.4102 20.4863 59.209 20.4863C57.5195 20.4863 56.4453 19.3047 56.4453 17.5176V17.3906H63.7012V16.668C63.7012 13.5527 61.9238 11.541 59.0723 11.541C56.1719 11.541 54.3164 13.6895 54.3164 16.9121C54.3164 20.1543 56.1426 22.1953 59.1602 22.1953C61.5137 22.1953 63.291 20.8574 63.584 18.9824H61.582ZM67.7246 22V11.6191H67.8125L75.1172 22H77.0898V7.9082H74.9609V18.2988H74.8828L67.5781 7.9082H65.5957V22H67.7246ZM83.7402 13.2402C85.2148 13.2402 86.2109 14.3438 86.2598 15.916H81.123C81.2305 14.3633 82.2656 13.2402 83.7402 13.2402ZM86.25 18.9824C85.9668 19.8809 85.0781 20.4863 83.877 20.4863C82.1875 20.4863 81.1133 19.3047 81.1133 17.5176V17.3906H88.3691V16.668C88.3691 13.5527 86.5918 11.541 83.7402 11.541C80.8398 11.541 78.9844 13.6895 78.9844 16.9121C78.9844 20.1543 80.8105 22.1953 83.8281 22.1953C86.1816 22.1953 87.959 20.8574 88.252 18.9824H86.25ZM90.625 9.29492V11.7266H89.1309V13.3965H90.625V19.2949C90.625 21.2773 91.4355 22.0684 93.5156 22.0684C93.9844 22.0684 94.4531 22.0293 94.6875 21.9707V20.3008C94.5508 20.3301 94.209 20.3496 93.9941 20.3496C93.1348 20.3496 92.7441 19.9492 92.7441 19.0605V13.3965H94.6973V11.7266H92.7441V9.29492H90.625Z" fill="black"/>
+<g clip-path="url(#clip0_14299_11434)">
+<circle cx="14.6621" cy="14.0625" r="13.125" fill="url(#paint0_linear_14299_11434)" stroke="#28ACFC" stroke-width="1.875"/>
+<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M14.6602 24.375C20.3556 24.375 24.9727 19.7579 24.9727 14.0625C24.9727 8.36706 20.3556 3.75 14.6602 3.75V24.375Z" fill="#00A3FF"/>
+<path d="M3.41211 9.84375C5.22429 9.84375 6.69336 8.37468 6.69336 6.5625C6.69336 4.75032 5.22429 3.28125 3.41211 3.28125C1.59992 3.28125 0.130859 4.75032 0.130859 6.5625C0.130859 8.37468 1.59992 9.84375 3.41211 9.84375Z" fill="#44BBFF" stroke="#F7FCFF" stroke-width="0.9375"/>
+<path d="M14.6621 30.4688C16.4743 30.4688 17.9434 28.9997 17.9434 27.1875C17.9434 25.3753 16.4743 23.9062 14.6621 23.9062C12.8499 23.9062 11.3809 25.3753 11.3809 27.1875C11.3809 28.9997 12.8499 30.4688 14.6621 30.4688Z" fill="#44BBFF" stroke="#F7FCFF" stroke-width="0.9375"/>
+<path d="M26.8496 9.84375C28.6618 9.84375 30.1309 8.37468 30.1309 6.5625C30.1309 4.75032 28.6618 3.28125 26.8496 3.28125C25.0374 3.28125 23.5684 4.75032 23.5684 6.5625C23.5684 8.37468 25.0374 9.84375 26.8496 9.84375Z" fill="#44BBFF" stroke="#F7FCFF" stroke-width="0.9375"/>
 </g>
-<circle cx="11.0173" cy="6.56958" r="2.052" fill="#FC782C"/>
-<circle cx="11.0173" cy="33.2131" r="2.052" fill="#FC782C"/>
-<circle cx="35.3914" cy="20.1184" r="2.052" fill="#FC782C"/>
 <defs>
-<clipPath id="clip0_13321_142428">
-<rect width="14.8555" height="30.4929" fill="white" transform="translate(18.9248 5.4834)"/>
+<linearGradient id="paint0_linear_14299_11434" x1="14.6621" y1="0" x2="14.6621" y2="28.125" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADE0FF"/>
+<stop offset="1" stop-color="#ADE0FF" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_14299_11434">
+<rect width="30" height="30" fill="white"/>
 </clipPath>
 </defs>
 </svg>