Merge branch 'pre' of DeNet/de-net-official into master

components/MobileGuidePage.vue

@@ -1,94 +1,94 @@
 <template>
-    <div class="guide" v-if="detail">
-        <div class="header">
-            <div class="tips">
-                <img class="icon" :src="postUserInfo.avatarUrl" />
-                <span>@{{postUserInfo.nickName}}</span>
-                <span class="special">{{ playType === 3 ? 'Invite You to Hunt the Treasure' : 'Send You Giveaway!' }}</span>
-            </div>
-            <div class="gif">
-                <img :src="gifUrl" />
-            </div>
-        </div>
-        <div class="welcome">
-            <FontZoomMobile width="300" style="margin:auto;">
-                <!-- 普通红包 -->
-                <template v-if="playType === 1">
-                    <template v-if="postBizData.rewardType === 1">
-                        <div>
-                            <span>You Won</span>
-                            <img class="icon" :src="postBizData.currencyIconPath" />
-                            <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
-                            <span class="special">(${{postBizData.usdAmountValue}})</span>
-                        </div>
-                        <div>
-                            <span>in the Giveaway!</span>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div>
-                            <span>You Won</span>
-                            <span class="special">{{postBizData.customizedReward}}</span>
-                        </div>
-                        <div>
-                            <span>in the Giveaway!</span>
-                        </div>
-                    </template>
-                </template>
+	<div class="guide" v-if="detail">
+		<div class="header">
+			<div class="tips">
+				<img class="icon" :src="postUserInfo.avatarUrl" />
+				<span>@{{ postUserInfo.nickName }}</span>
+				<span class="special">{{ playType === 3 ? 'Invite You to Hunt the Treasure' : 'Send You Giveaway!' }}</span>
+			</div>
+			<div class="gif">
+				<img :src="gifUrl" />
+			</div>
+		</div>
+		<div class="welcome">
+			<FontZoomMobile width="300" style="margin: auto">
+				<!-- 普通红包 -->
+				<template v-if="playType === 1">
+					<template v-if="postBizData.rewardType === 1">
+						<div>
+							<span>You Won</span>
+							<img class="icon" :src="postBizData.currencyIconPath" />
+							<span class="special">{{ postBizData.amountValue }} {{ postBizData.currencySymbol }}</span>
+							<span class="special">(${{ postBizData.usdAmountValue }})</span>
+						</div>
+						<div>
+							<span>in the Giveaway!</span>
+						</div>
+					</template>
+					<template v-else>
+						<div>
+							<span>You Won</span>
+							<span class="special">{{ postBizData.customizedReward }}</span>
+						</div>
+						<div>
+							<span>in the Giveaway!</span>
+						</div>
+					</template>
+				</template>
 
-                <!-- 抽奖红包 -->
-                <template v-if="playType === 2">
-                    <div>
-                        <span>You are gifted an entries to earn</span>
-                    </div>
-                    <template v-if="postBizData.rewardType === 1">
-                        <div>
-                            <img class="icon" :src="postBizData.currencyIconPath" />
-                            <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
-                            <span class="special">(${{postBizData.usdAmountValue}})</span>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div>
-                            <span class="special">{{postBizData.customizedReward}}</span>
-                        </div>
-                    </template>
-                </template>
+				<!-- 抽奖红包 -->
+				<template v-if="playType === 2">
+					<div>
+						<span>You are gifted an entries to earn</span>
+					</div>
+					<template v-if="postBizData.rewardType === 1">
+						<div>
+							<img class="icon" :src="postBizData.currencyIconPath" />
+							<span class="special">{{ postBizData.amountValue }} {{ postBizData.currencySymbol }}</span>
+							<span class="special">(${{ postBizData.usdAmountValue }})</span>
+						</div>
+					</template>
+					<template v-else>
+						<div>
+							<span class="special">{{ postBizData.customizedReward }}</span>
+						</div>
+					</template>
+				</template>
 
-                <!-- 夺宝红包 -->
-                <template v-if="playType === 3">
-                    <div>
-                        <span>Complete the quest to win up to</span>
-                    </div>
-                    <div>
-                        <span class="special">${{detail.upGainAmountValue}} for you two!</span>
-                    </div>
-                </template>
-            </FontZoomMobile>
-        </div>
-        <div class="footer">
-            <div class="item">
-                <img class="icon" src="../static/img/icon-item1.svg" />
-                <span>First, <span class="special">Retweet</span> this tweet.</span>
-            </div>
-            <div class="item">
-                <img class="icon" src="../static/img/icon-item2.svg" />
-                <span>When you have access to your <span class="special">laptop</span>, open <span class="special">Chrome</span> and go to <span class="special">twitter.com.</span></span>
-            </div>
-            <div class="item">
-                <img class="icon" src="../static/img/icon-item3.svg" />
-                <span>Go to your profile page by clicking <span class="special">"Profile"</span> on the left column.</span>
-            </div>
-            <div class="item">
-                <img class="icon" src="../static/img/icon-item4.svg" />
-                <span>Find the tweet you retweeted, and click the giveaway, you can then install the <span class="special">DeNet Chrome Extension</span> to Get Giveaway.</span>
-            </div>
-        </div>
-        <div class="retweet" @click="retweet">
-            <img src="../static/img/icon-retweet.svg" />
-            <span>Retweet</span>
-        </div>
-    </div>
+				<!-- 夺宝红包 -->
+				<template v-if="playType === 3">
+					<div>
+						<span>Complete the quest to</span>
+					</div>
+					<div>
+						<span class="special">${{ detail.amountUsdValue }} Giveaway</span>
+					</div>
+				</template>
+			</FontZoomMobile>
+		</div>
+		<div class="footer">
+			<div class="item">
+				<img class="icon" src="../static/img/icon-item1.svg" />
+				<span>First, <span class="special">Retweet</span> this tweet.</span>
+			</div>
+			<div class="item">
+				<img class="icon" src="../static/img/icon-item2.svg" />
+				<span>When you have access to your <span class="special">laptop</span>, open <span class="special">Chrome</span> and go to <span class="special">twitter.com.</span></span>
+			</div>
+			<div class="item">
+				<img class="icon" src="../static/img/icon-item3.svg" />
+				<span>Go to your profile page by clicking <span class="special">"Profile"</span> on the left column.</span>
+			</div>
+			<div class="item">
+				<img class="icon" src="../static/img/icon-item4.svg" />
+				<span>Find the tweet you retweeted, and click the giveaway, you can then install the <span class="special">DeNet Chrome Extension</span> to Get Giveaway.</span>
+			</div>
+		</div>
+		<div class="retweet" @click="retweet">
+			<img src="../static/img/icon-retweet.svg" />
+			<span>Retweet</span>
+		</div>
+	</div>
 </template>
 
 <script>
@@ -97,64 +97,64 @@ import { getMid } from '../utils/help';
 import FontZoomMobile from './FontZoomMobile';
 
 export default {
-    name: 'mobileGuidePage',
-    props: {
-        detail: {
-            type: Object,
-        },
-        postBizData: {
-            type: Object,
-        },
-        postUserInfo: {
-            type: Object,
-        },
-        playType: {
+	name: 'mobileGuidePage',
+	props: {
+		detail: {
+			type: Object,
+		},
+		postBizData: {
+			type: Object,
+		},
+		postUserInfo: {
+			type: Object,
+		},
+		playType: {
 			type: Number,
 		},
-        reportMore: {
-            type: Object,
-        },
-    },
-    components: {
-        FontZoomMobile,
-    },
-    data() {
-        return {}
-    },
-    computed: {
-        gifUrl() {
-            let url;
-            switch(this.playType) {
-                case 1:
-                    url = require('../static/img/icon-gif-redbag.gif');
-                    break;
-                case 2:
-                    url = require('../static/img/icon-gif-draw.png');
-                    break;
-                case 3:
-                    url = require('../static/img/icon-gif-treasure.png');
-                    break;
-            }
-            return url;
-        }
-    },
-    methods: {
-        retweet() {
-            let redPacketType;
-            switch(this.playType) {
-                case 1:
-                    redPacketType = 0;
-                    break;
-                case 2:
-                    redPacketType = 1;
-                    break;
-                case 3:
-                    redPacketType = 4;
-                    break;
-            }
+		reportMore: {
+			type: Object,
+		},
+	},
+	components: {
+		FontZoomMobile,
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		gifUrl() {
+			let url;
+			switch (this.playType) {
+				case 1:
+					url = require('../static/img/icon-gif-redbag.gif');
+					break;
+				case 2:
+					url = require('../static/img/icon-gif-draw.png');
+					break;
+				case 3:
+					url = require('../static/img/icon-gif-treasure.png');
+					break;
+			}
+			return url;
+		},
+	},
+	methods: {
+		retweet() {
+			let redPacketType;
+			switch (this.playType) {
+				case 1:
+					redPacketType = 0;
+					break;
+				case 2:
+					redPacketType = 1;
+					break;
+				case 3:
+					redPacketType = 4;
+					break;
+			}
 
-            Report.reportLog({
-                baseInfo: {
+			Report.reportLog({
+				baseInfo: {
 					mid: getMid(),
 					pageSource: Report.pageSource.mobileLandingPage,
 					machineCode: getMid(),
@@ -164,120 +164,143 @@ export default {
 						businessType: Report.businessType.buttonClick,
 						objectType: Report.objectType.rtButton,
 						postId: this.detail.postId,
-                        redPacketType,
-                        ...this.reportMore,
+						redPacketType,
+						...this.reportMore,
 					},
 				},
-            })
+			});
 
-            // jump
-            setTimeout(() => {
-                window.location.href = `https://twitter.com/intent/retweet?tweet_id=${this.detail.repostSrcContentId || this.detail.srcContentId}`;
-            }, 300)
-        }
-    }
-}
+			// jump
+			setTimeout(() => {
+				window.location.href = `https://twitter.com/intent/retweet?tweet_id=${this.detail.repostSrcContentId || this.detail.srcContentId}`;
+			}, 300);
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
 .guide {
-    width: 100%;
-    min-height: 100%;
-    background: linear-gradient(180deg, #cceaff 0%, #ffffff 70.42%);
-    .header {
-        position: relative;
-        height: 240px;
-        .tips {
-            display: inline-block;
-            height: 32px;
-            color: #FFFFFF;
-            line-height: 30px;
-            margin-top: 8px;
-            font-size: 12px;
-            padding: 0 18px 0 10px;
-            background: #1B5277;
-            border-radius: 0 32px 32px 0;
-            .icon {
-                overflow: hidden;
-                width: 20px;
-                height: 20px;
-                margin-right: 6px;
-                border-radius: 50%;
-                vertical-align: middle;
-            }
-            .special {
-                color: #FF9737;
-                font-weight: 700;
-            }
-        }
-        .gif {
-            width: 150px;
-            height: 150px;
-            margin: 40px auto 0;
-            img {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-    .welcome {
-        padding: 14px 0;
-        font-size: 18px;
-        font-weight: 700;
-        line-height: 24px;
-        text-align: center;
-        background: rgba($color: #FFFFFF, $alpha: .5);
-        .icon {
-            overflow: hidden;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            vertical-align: middle;
-        }
-        .special {
-            color: #FF9737;
-        }
-    }
-    .footer {
-        padding: 40px 15px 100px;
-        color: #6D6D6D;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 17px;
-        .item {
-            position: relative;
-            padding-left: 38px;
-            margin-bottom: 16px;
-            &:last-child {
-                margin-bottom: 0;
-            }
-            .icon {
-                position: absolute;
-                left: 0;
-            }
-            .special {
-                color: #1D9BF0;
-            }
-        }
-    }
-    .retweet {
-        position: fixed;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        bottom: 26px;
-        left: 16px;
-        right: 16px;
-        height: 52px;
-        color: #FFFFFF;
-        font-size: 18px;
-        font-weight: 600;
-        border-radius: 52px;
-        background: #1D9BF0;
-        img {
-            width: 24px;
-            margin-right: 6px;
-        }
-    }
+	width: 100%;
+	min-height: 100%;
+	background: linear-gradient(180deg, #cceaff 0%, #ffffff 70.42%);
+
+	.header {
+		position: relative;
+		height: 240px;
+
+		.tips {
+			display: inline-block;
+			height: 32px;
+			color: #ffffff;
+			line-height: 30px;
+			margin-top: 8px;
+			font-size: 12px;
+			padding: 0 18px 0 10px;
+			background: #1b5277;
+			border-radius: 0 32px 32px 0;
+
+			.icon {
+				overflow: hidden;
+				width: 20px;
+				height: 20px;
+				margin-right: 6px;
+				border-radius: 50%;
+				vertical-align: middle;
+			}
+
+			.special {
+				color: #ff9737;
+				font-weight: 700;
+			}
+		}
+
+		.gif {
+			width: 150px;
+			height: 150px;
+			margin: 40px auto 0;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	.welcome {
+		padding: 14px 0;
+		font-size: 18px;
+		font-weight: 700;
+		line-height: 24px;
+		text-align: center;
+		background: rgba($color: #ffffff, $alpha: 0.5);
+
+		.icon {
+			overflow: hidden;
+			width: 22px;
+			height: 22px;
+			border-radius: 50%;
+			vertical-align: middle;
+		}
+
+		.special {
+			color: #ff9737;
+		}
+	}
+
+	.footer {
+		padding: 40px 15px 100px;
+		color: #6d6d6d;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 17px;
+
+		.item {
+			position: relative;
+			padding-left: 38px;
+			margin-bottom: 16px;
+			min-height: 24px;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.icon {
+				position: absolute;
+				left: 0;
+			}
+
+			.special {
+				color: #1d9bf0;
+			}
+		}
+
+		.item:first-child {
+			span {
+				line-height: 24px;
+			}
+		}
+	}
+
+	.retweet {
+		position: fixed;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		bottom: 26px;
+		left: 16px;
+		right: 16px;
+		height: 52px;
+		color: #ffffff;
+		font-size: 18px;
+		font-weight: 600;
+		border-radius: 52px;
+		background: #1d9bf0;
+
+		img {
+			width: 24px;
+			margin-right: 6px;
+		}
+	}
 }
 </style>

layouts/error.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class="content">
+		<v-logo></v-logo>
+		<div class="warn">
+			<img src="@/static/svg/icon-warn.svg" alt="" />
+			<p v-if="error.statusCode == 500">{{ error.message || 'error' }}</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import Report from '@/log-center/log';
+import VLogo from '@/components/logo.vue';
+import { getMid, appVersionCode } from '@/utils/help';
+export default {
+	name: 'error',
+	props: ['error'],
+	components: {
+		VLogo,
+	},
+	data() {
+		return {
+			mid: getMid(),
+		};
+	},
+	mounted() {
+		// 埋点
+		Report.reportLog({
+			baseInfo: {
+				appVersionCode: appVersionCode,
+				mid: this.mid,
+				pageSource: Report.pageSource.error_landing_page,
+				machineCode: this.mid,
+			},
+			params: {
+				url: window.location.href,
+			},
+		});
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+html,
+body,
+#__nuxt,
+#__layout {
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}
+
+.content {
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(180deg, #d8efff 0%, #ffffff 44.3%);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.warn {
+		text-align: center;
+		color: #aab4b9;
+		img {
+			width: 100px;
+			height: 100px;
+		}
+		p {
+			margin-top: 20px;
+			font-weight: 700;
+			font-size: 30px;
+		}
+	}
+}
+</style>

log-center/logEnum.js

@@ -28,6 +28,7 @@ export const objectType = {
 };
 
 export const pageSource = {
+	error_landing_page: 'error-landing-page',
 	newUserLandingPage: 'pc-landing-page',
 	mobileLandingPage: 'mobile-landing-page',
 	tutorialPage: 'tutorial-page',

nuxt.config.js

@@ -27,7 +27,7 @@ export default {
 	},
 
 	// Global CSS: https://go.nuxtjs.dev/config-css
-	css: [],
+	css: ['@/static/css/main.scss'],
 
 	// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
 	plugins: ['plugins/vant'],
@@ -123,12 +123,12 @@ export default {
 				{
 					name: 'HealthCheck',
 					path: '/healthcheck',
-					component: resolve(__dirname, 'pages/healthcheck.vue'),
+					component: resolve(__dirname, 'pages/_system/healthcheck.vue'),
 				},
 				{
 					name: 'custom',
 					path: '*',
-					component: resolve(__dirname, 'pages/404.vue'),
+					component: resolve(__dirname, 'pages/_system/404.vue'),
 				}
 			);
 		},

pages/404.vue

@@ -1,10 +0,0 @@
-<template>
-    <div>404</div>
-</template>
-
-<script>
-
-</script>
-
-<style lang="scss" >
-</style>

pages/_system/404.vue

@@ -0,0 +1,57 @@
+<template>
+	<div class="content">
+		<v-logo></v-logo>
+		<div class="warn">
+			<img src="@/static/svg/icon-warn.svg" alt="" />
+			<p>404</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import VLogo from '@/components/logo.vue';
+export default {
+	name: 'error',
+	components: {
+		VLogo,
+	},
+	data() {
+		return {};
+	},
+	mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+html,
+body,
+#__nuxt,
+#__layout {
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}
+
+.content {
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(180deg, #d8efff 0%, #ffffff 44.3%);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.warn {
+		text-align: center;
+		color: #aab4b9;
+		img {
+			width: 100px;
+			height: 100px;
+		}
+		p {
+			margin-top: 20px;
+			font-weight: 700;
+			font-size: 30px;
+		}
+	}
+}
+</style>

pages/healthcheck.vue → pages/_system/healthcheck.vue

@@ -4,4 +4,4 @@
 
 <script></script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped></style>

pages/course/index.vue

@@ -120,7 +120,7 @@ export default {
 		},
 	},
 	async asyncData(context) {
-		let { route } = context;
+		let { route, error } = context;
 		let result = await getDetailSSR({
 			context,
 			url: `${baseURL}/denet/base/guide/getAllMobilePageGuide`,
@@ -131,6 +131,11 @@ export default {
 				playType: route.query.playType,
 				course: route.query.useful === UsefulType.unUseful || route.query.playType === PlayType.NFT ? result.data.withoutRewardGuideImages : result.data.withRewardGuideImages,
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 	mounted() {

pages/index.vue

@@ -210,12 +210,12 @@
 import axios from 'axios';
 import Cookies from 'js-cookie';
 import { isBrowser, appType, getDetailSSR } from '@/utils/help.js';
-import Report from '../log-center/log';
+import Report from '@/log-center/log';
 import { Toast } from 'vant';
-import FontAmount from '../components/FontAmount.vue';
-import MobileGuidePage from '../components/MobileGuidePage.vue';
+import FontAmount from '@/components/FontAmount.vue';
+import MobileGuidePage from '@/components/MobileGuidePage.vue';
 // eslint-disable-next-line no-unused-vars
-import { RewardType, PlayType } from '../types';
+import { RewardType, PlayType } from '@/types';
 
 var moment = require('moment');
 var ClipboardJS = require('clipboard');
@@ -597,7 +597,7 @@ export default {
 	},
 
 	async asyncData(context) {
-		let { route } = context;
+		let { route, error } = context;
 		let result = await getDetailSSR({
 			context,
 			params: {
@@ -605,7 +605,6 @@ export default {
 			},
 			url: `${baseURL}/denet/post/getDetail`,
 		});
-
 		if (result.code == 0) {
 			if (result.data && result.data.postBizData && typeof result.data.postBizData == 'string') {
 				result.data.postBizData = JSON.parse(result.data.postBizData);
@@ -620,6 +619,11 @@ export default {
 				customCover: result.data.postBizData && result.data.postBizData.posterType == 2 ? 1 : 0,
 				customGiveaway: result.data.postBizData && result.data.postBizData.rewardType == 2 ? 1 : 0,
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 

pages/luckdraw.vue

@@ -179,11 +179,11 @@ import axios from 'axios';
 import Cookies from 'js-cookie';
 import { Toast } from 'vant';
 import { isBrowser, appType, appVersionCode, formatSecondsAsDaysOrTime, getDetailSSR } from '@/utils/help.js';
-import FontAmount from '../components/FontAmount.vue';
-import CustomCardCover from '../components/CustomCardCover.vue';
-import Report from '../log-center/log';
-import { RewardType, PlayType } from '../types';
-import MobileGuidePage from '../components/MobileGuidePage.vue';
+import FontAmount from '@/components/FontAmount.vue';
+import CustomCardCover from '@/components/CustomCardCover.vue';
+import Report from '@/log-center/log';
+import { RewardType, PlayType } from '@/types';
+import MobileGuidePage from '@/components/MobileGuidePage.vue';
 
 var moment = require('moment');
 var ClipboardJS = require('clipboard');
@@ -303,7 +303,7 @@ export default {
 		});
 	},
 	async asyncData(context) {
-		let { route } = context;
+		let { route, error } = context;
 		let result = await getDetailSSR({
 			context,
 			params: {
@@ -325,6 +325,11 @@ export default {
 				customCover: result.data.postBizData && result.data.postBizData.posterType == 2 ? 1 : 0,
 				customGiveaway: result.data.postBizData && result.data.postBizData.rewardType == 2 ? 1 : 0,
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 	methods: {

pages/nft/group.vue

@@ -137,7 +137,7 @@ export default {
 		};
 	},
 	async asyncData(context) {
-		let { route } = context;
+		let { route, error } = context;
 		let result = await getDetailSSR({
 			context,
 			params: {
@@ -150,6 +150,11 @@ export default {
 				detail: result.data,
 				postBizData: JSON.parse(result.data.postBizData),
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 	created() {

pages/nft/index.vue

@@ -114,7 +114,7 @@ export default {
 		};
 	},
 	async asyncData(context) {
-		let { route } = context;
+		let { route, error } = context;
 		let result = await getDetailSSR({
 			context,
 			params: {
@@ -128,6 +128,11 @@ export default {
 			return {
 				detail: result.data,
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 	created() {

pages/toolbox/index.vue

@@ -105,7 +105,7 @@ export default {
 		InstallExtension,
 	},
 	async asyncData(context) {
-		let { route } = context;
+		let { route, error } = context;
 		let result = await getDetailSSR({
 			context,
 			params: {
@@ -127,6 +127,11 @@ export default {
 			return {
 				detail: result.data,
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 	mounted() {

pages/treasure/index.vue

@@ -19,10 +19,10 @@
 								<div class="invite-txt">@{{ detail.postUserInfo.nickName }} invite you to</div>
 								<div class="title">Hunt the Treaure</div>
 								<div class="up-gain-txt">
-									Each can gain up to <span class="amount"> ${{ detail.upGainAmountValue }}</span>
+									<span class="amount"> ${{ detail.amountUsdValue }} Giveaway</span>
 								</div>
 							</div>
-							<img class="img" src="../../static/svg/icon-treasure.svg" alt="" />
+							<img class="img" src="@/static/img/icon-treasure.png" alt="" />
 						</div>
 						<div class="btn-wrapper" @click="clickBtn()">
 							<template v-if="isChrome"> Install Denet Chrome Extension </template>
@@ -122,11 +122,11 @@ export default {
 		};
 	},
 	async asyncData(context) {
-		let { route } = context;
+		let { route, error } = context;
 		let result = await getDetailSSR({
 			context,
 			params: {
-				inviteCode: route.params.id || '',
+				postId: route.params.id || '',
 				pageName: 'landPage',
 			},
 			url: `${baseURL}/denet/post/treasure/detail`,
@@ -137,6 +137,11 @@ export default {
 				detail: result.data,
 				pageLink: `${jumpUrl}treasure/${route.params.id}`,
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 	created() {
@@ -348,7 +353,6 @@ body,
 		.center {
 			margin: -50px auto 0;
 			width: 480px;
-			height: 260px;
 			box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.1);
 			border-radius: 12px;
 			display: flex;
@@ -375,8 +379,10 @@ body,
 				.middle {
 					padding: 0 20px;
 					box-sizing: border-box;
+					text-align: center;
 
 					.invite-txt {
+						text-align: center;
 						color: #727272;
 						font-weight: 400;
 						font-size: 13px;
@@ -385,7 +391,8 @@ body,
 					.title {
 						font-weight: 800;
 						font-size: 20px;
-						margin: 6px 3px 0;
+						margin: 3px 0;
+						line-height: 20px;
 					}
 
 					.up-gain-txt {
@@ -394,17 +401,19 @@ body,
 						font-size: 13px;
 						display: flex;
 						align-items: center;
+						justify-content: center;
 
 						.amount {
 							font-weight: 700;
 							font-size: 22px;
+							line-height: 22px;
 						}
 					}
 				}
 			}
 
 			.btn-wrapper {
-				margin-top: 54px;
+				margin-top: 50px;
 				padding: 16px;
 				box-sizing: border-box;
 				background: #1d9bf0;

pages/treasure/invite.vue

@@ -26,10 +26,10 @@
 								<div class="invite-txt">@{{ detail.inviteUserInfo.nickName }} invite you to</div>
 								<div class="title">Hunt the Treaure</div>
 								<div class="up-gain-txt">
-									Each can gain up to <span class="amount"> ${{ detail.upGainAmountValue }}</span>
+									<span class="amount"> ${{ detail.amountUsdValue }} Giveaway</span>
 								</div>
 							</div>
-							<img class="img" src="../../static/svg/icon-treasure.svg" alt="" />
+							<img class="img" src="@/static/img/icon-treasure.png" alt="" />
 						</div>
 						<div class="btn-wrapper" @click="clickBtn()">
 							<template v-if="isChrome"> Install Denet Chrome Extension </template>
@@ -133,7 +133,7 @@ export default {
 		};
 	},
 	async asyncData(context) {
-		const { route } = context;
+		const { route, error } = context;
 
 		let result = await getDetailSSR({
 			context,
@@ -153,12 +153,18 @@ export default {
 				detail: result.data,
 				pageLink,
 			};
+		} else {
+			return error({
+				message: result.msg,
+				statusCode: 500,
+			});
 		}
 	},
 	created() {
 		this.getConfig();
 	},
 	mounted() {
+		console.log('detail', this.detail);
 		this.setCookieMid();
 		Cookies.set(this.detail.postId, JSON.stringify({ inviteCode: this.$route.params.id, channel: this.$route.params.channel }), { expires: 100 });
 		this.setTreasureInfo();
@@ -369,7 +375,6 @@ body,
 		.center {
 			margin: -50px auto 0;
 			width: 480px;
-			height: 260px;
 			box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.1);
 			border-radius: 12px;
 			display: flex;
@@ -395,9 +400,11 @@ body,
 
 				.middle {
 					padding: 0 20px;
+					text-align: center;
 					box-sizing: border-box;
 
 					.invite-txt {
+						text-align: center;
 						color: #727272;
 						font-weight: 400;
 						font-size: 13px;
@@ -406,7 +413,8 @@ body,
 					.title {
 						font-weight: 800;
 						font-size: 20px;
-						margin: 6px 3px 0;
+						margin: 3px 0;
+						line-height: 20px;
 					}
 
 					.up-gain-txt {
@@ -415,17 +423,19 @@ body,
 						font-size: 13px;
 						display: flex;
 						align-items: center;
+						justify-content: center;
 
 						.amount {
 							font-weight: 700;
 							font-size: 22px;
+							line-height: 22px;
 						}
 					}
 				}
 			}
 
 			.btn-wrapper {
-				margin-top: 54px;
+				margin-top: 50px;
 				padding: 16px;
 				box-sizing: border-box;
 				background: #1d9bf0;

static/css/main.scss

@@ -0,0 +1,9 @@
+html,
+body,
+#__nuxt,
+#__layout {
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}

static/svg/icon-warn.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50 6.25C25.8594 6.25 6.25 25.8594 6.25 50C6.25 74.1406 25.8594 93.75 50 93.75C74.1406 93.75 93.75 74.1406 93.75 50C93.75 25.8594 74.1406 6.25 50 6.25ZM53.125 75H46.875V68.75H53.125V75ZM46.875 62.5V25H53.125V62.5H46.875Z" fill="#AAB4B9"/>
+</svg>