[edit] 移动端

components/MobileLandPage.vue

@@ -39,13 +39,9 @@
 			</template>
 			<!-- 夺宝 -->
 			<template v-else-if="isTreasureCpd">
-				<div class="mobile-land-page-prize-info-test">Complete the quest to win</div>
+				<div class="mobile-land-page-prize-info-test">Complete the quest to win up to</div>
 				<div class="mobile-land-page-prize-info-test">
-					<img class="icon" :src="currencyIconPath" />
-					<span class="pre-amount-value">{{ amountValue }}</span>
-					<span class="prize-name">{{ prize }}</span>
-					<span class="usd-amount"> (${{ usValue }})</span>
-					for you two!
+					<span class="usd-amount treasure-usd-amount"> ${{ usValue }} for you two!</span>
 				</div>
 			</template>
 			<!-- NFT -->
@@ -312,6 +308,12 @@ export default {
 			.prize-name {
 				margin: 0 3px;
 			}
+
+			.treasure-usd-amount {
+				color: #F99D23;
+				font-weight: 700;
+				font-size: 18px;
+			}
 		}
 	}
 	&-tip {

nuxt.config.js

@@ -29,61 +29,60 @@ export default {
 		'bootstrap-vue/nuxt',
 	],
 
-	// Build Configuration: https://go.nuxtjs.dev/config-build
-	build: {},
-
-	router: {
-		extendRoutes(routes, resolve) {
-			routes.push(
-				{
-					name: 'Course',
-					path: '/course',
-					component: resolve(__dirname, 'pages/course/index.vue'),
-				},
-				{
-					name: 'Authlogin',
-					path: '/authlogin',
-					component: resolve(__dirname, 'pages/auth/authLogin.vue'),
-				},
-				{
-					name: 'RedPackage',
-					path: '/:id?',
-					component: resolve(__dirname, 'pages/index.vue'),
-				},
-				{
-					name: 'LuckDraw',
-					path: '/luckdraw/:id?',
-					component: resolve(__dirname, 'pages/luckdraw.vue'),
-				},
-				{
-					name: 'ToolBox',
-					path: '/toolbox/:id',
-					component: resolve(__dirname, 'pages/toolbox/index.vue'),
-				},
-				{
-					name: 'Install',
-					path: '/install',
-					component: resolve(__dirname, 'pages/install.vue'),
-				},
-				{
-					name: 'NFT',
-					path: '/nft/:id/:account',
-					component: resolve(__dirname, 'pages/nft/index.vue'),
-				},
-				{
-					name: 'NftGroup',
-					path: '/nft_group/:id',
-					component: resolve(__dirname, 'pages/nft/group.vue'),
-				},
-				{
-					name: 'custom',
-					path: '*',
-					component: resolve(__dirname, 'pages/404.vue'),
-				}
-			);
-		},
-	},
-	env: {
-		NUXT_ENV: env[process.env.MODE],
-	},
-};
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+  },
+  
+  router: {
+    extendRoutes(routes, resolve) {
+      routes.push({
+        name: 'RedPackage',
+        path: '/:id?',
+        component: resolve(__dirname, 'pages/index.vue')
+      },
+      {
+        name: 'LuckDraw',
+        path: '/luckdraw/:id?',
+        component: resolve(__dirname, 'pages/luckdraw.vue')
+      },
+      {
+        name:'ToolBox',
+        path: '/toolbox/:id',
+        component: resolve(__dirname, 'pages/toolbox/index.vue')
+      },
+      {
+        name: 'Install',
+        path: '/install',
+        component: resolve(__dirname, 'pages/install.vue')
+      },
+      {
+        name: 'NFT',
+        path: '/nft/:id/:account',
+        component: resolve(__dirname, 'pages/nft/index.vue')
+      },
+      {
+        name: 'NftGroup',
+        path: '/nft_group/:id',
+        component: resolve(__dirname, 'pages/nft/group.vue')
+      },
+      {
+        name: 'Treasure',
+        path: '/treasure/:id?',
+        component: resolve(__dirname, 'pages/treasure/index.vue')
+      },
+      {
+        name: 'TreasureInvite',
+        path: '/treasure/invite/:id/:channel?',
+        component: resolve(__dirname, 'pages/treasure/invite.vue')
+      },
+      {
+        name: 'custom',
+        path: '*',
+        component: resolve(__dirname, 'pages/404.vue')
+      })
+    }
+  },
+  env: {
+    NUXT_ENV: env[process.env.MODE]
+  }
+}

pages/ach_pay/pay_notice.vue

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

pages/treasure/index.vue

@@ -0,0 +1,420 @@
+<template>
+    <div class="nft-content">
+        <template v-if="isLoading">
+                        <img class="loading" src="../../static/svg/icon-loading.svg"
+        />
+        </template>
+        <template v-else>
+            <template v-if="isMobile">
+                <MobileLandPage
+                    :playType="PlayType.Treasure"
+                    :useFul="detail.status == 0 || detail.status == 1"
+                    :userInfo="detail.postUserInfo"
+                    :usValue="detail.upGainAmountValue"
+                    :postId="detail.srcContentId"></MobileLandPage>
+            </template>
+            <template v-else>
+                <div class="logo">
+                    <img src="/img/icon-logo.png" alt />
+                </div>
+                <div class="show">
+                    <div class="center">
+                        <div class="content-wrapper">
+                            <img class="img img-left" :src="detail.postUserInfo.avatarUrl" alt="">
+                            <div class="middle">
+                                <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>
+                                </div>
+                            </div>
+                            <img class="img" src="../../static/svg/icon-treasure.svg" alt="">
+                        </div>
+                        <div class="btn-wrapper" @click="clickBtn()">
+                            <template v-if="isChrome">
+                                Install Denet Chrome Extension
+                            </template>
+                            <template v-else>
+                                <img class="img"
+                                    src="../../static/svg/icon-chrome-down.svg" />
+                                    Open in Chrome to participate
+                            </template> 
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Cookies from 'js-cookie'
+import { Toast } from 'vant';
+import { isBrowser, appVersionCode, appType } from '../../utils/help.js'
+import Report from "@/log-center/log"
+import MobileLandPage from '@/components/MobileLandPage.vue';
+import { RewardType, PlayType } from '@/types';
+
+const api = {
+    prod: 'https://api.denetme.net',
+    pre: 'https://preapi.denetme.net',
+    test: 'https://testapi.denetme.net'
+}
+const page = {
+    prod: "https://h5.denetme.net",
+    pre: "https://preh5.denetme.net",
+    test: 'https://testh5.denetme.net'
+}
+const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
+const baseURL = api[process.env.NUXT_ENV.MODE]
+const ClipboardJS = require('clipboard')
+
+export default {
+    name: 'ntf',
+    data() {
+        return {
+            PlayType,
+            isLoading: true,
+            appVersionCode: appVersionCode,
+            jumpUrl: jumpUrl,
+            detail: {
+                postUserInfo: {
+                    avatarUrl: '',
+                    nickName: ''
+                }
+            },
+            config: {},
+            title: 'Treasure Hunt',
+            isMobile: false,
+            isChrome: false,
+            linkHref: '',
+            metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
+        }
+    },
+    head() {
+        return {
+            type: '',
+            title: this.title,
+            appVersionCode: appVersionCode,
+            meta: [
+                // facebook
+                {
+                    name: 'og:title',
+                    content: this.metaTitle
+                },
+                {
+                    name: 'og:image',
+                    content: this.detail.imagePath || ''
+                },
+                // twitter
+                {
+                    name: 'twitter:card',
+                    content: 'summary_large_image'
+                },
+                {
+                    name: 'twitter:title',
+                    content: this.metaTitle
+                },
+                {
+                    name: 'twitter:image',
+                    content: this.detail.imagePath || ''
+                }
+            ]
+        }
+    },
+    async asyncData(params) {
+        let { route } = params;
+        let { data } = await axios.post(`${baseURL}/denet/post/treasure/detail`, {
+            baseInfo: {
+                appVersionCode: appVersionCode,
+                mid: function () {
+                    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                        return v.toString(16);
+                    });
+                }()
+            },
+            params: {
+                postId: route.params.id || ''
+            }
+        })
+        if (data.code == 0) {
+            return {
+                detail: data.data,
+            }
+        }
+    },
+    created() {
+        this.setCookieMid();
+        this.getConfig();
+    },
+    mounted() {
+        setTimeout(() => {
+            this.checkInstall().then(() => {
+            }).catch(() => {
+                this.setTreasureInfo();
+            })
+        }, 600)
+        this.checkBrowser();
+        this.isLoading = false;
+
+        var clipboard = new ClipboardJS('.btn');
+        let that = this
+        clipboard.on('success', function (e) {
+            Toast('copy success');
+            // 埋点
+            that.trackingClick()
+            e.clearSelection();
+        });
+        this.pageSource = Report.pageSource.newUserLandingPage
+        // 埋点
+        if (this.isMobile) {
+            this.pageSource = Report.pageSource.mobileLandingPage
+        }
+        // Report.reportLog({
+        //     baseInfo: {
+        //         appVersionCode: appVersionCode,
+        //         mid: this.mid,
+        //         pageSource: this.pageSource,
+        //         appType,
+        //         machineCode: this.mid
+        //     },
+        //     params: {
+        //         eventData: {
+        //             businessType: Report.businessType.pageView,
+        //             postId: this.detail.postId,
+        //             srcContentId: this.detail.srcContentId,
+        //             senderId: this.detail.srcUserId,
+        //             redPacketType: 2,
+        //         }
+        //     }
+        // })
+    },
+    methods: {
+        clickBtn() {
+            if(this.isChrome) {
+                let { extensionsInstallUrl } = this.config;
+                window.open(extensionsInstallUrl)
+            } else {
+                installChrome();
+            }
+        },
+        checkInstall() {
+            return new Promise((resolve, reject) => {
+                let dom = document.querySelector('#denet_message');
+                if (dom) {
+                    resolve(true)
+                } else {
+                    reject(false)
+                }
+            })
+        },
+        trackingClick() {
+            // Report.reportLog({
+            //     baseInfo: {
+            //         appVersionCode: appVersionCode,
+            //         mid: this.mid,
+            //         pageSource: this.pageSource,
+            //         appType,
+            //         machineCode: this.mid
+            //     },
+            //     params: {
+            //         eventData: {
+            //             businessType: Report.businessType.buttonClick,
+            //             objectType: Report.objectType.installButton,
+            //             postId: this.detail.postId,
+            //             srcContentId: this.detail.srcContentId,
+            //             senderId: this.detail.srcUserId,
+            //             redPacketType: 2,
+            //         }
+            //     }
+            // })
+        },
+        guid() {
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        },
+        setCookieMid() {
+            let _cookie_mid_arr = Cookies.get('mid') || []
+            if (_cookie_mid_arr.length > 0) {
+                this.mid = JSON.parse(_cookie_mid_arr)[0].mid
+            } else {
+                this.mid = this.guid()
+                Cookies.set('mid', JSON.stringify([{ mid: this.mid }]), { expires: 1000 })
+            }
+        },
+        installExtension() {
+            // 埋点
+            this.trackingClick()
+            let { extensionsInstallUrl } = this.config;
+            window.open(extensionsInstallUrl)
+        },
+        installChrome() {
+            window.open('https://www.google.com/chrome')
+        },
+        async getConfig() {
+            let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
+                baseInfo: {
+                    appVersionCode: appVersionCode,
+                    mid: this.mid
+                },
+                params: {}
+            })
+            if (data.code == 0) {
+                this.config = data.data;
+            }
+        },
+        checkBrowser() {
+            this.linkHref = window.location.href;
+            this.isChrome = isBrowser() == 'chrome';
+            this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+        },
+        setTreasureInfo() {
+            let treasureInfo = {
+                createTime: Date.now(),
+                jump_type: 'treasure_info',
+                postId: this.detail.srcContentId || '',
+                postNickName: this.detail.postUserInfo.nickName
+            };
+            Cookies.set('jump_info', JSON.stringify(treasureInfo), { expires: 100 });
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+html,
+body,
+#__nuxt,
+#__layout {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.nft-content {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, #D8EFFF 0%, #FFFFFF 44.3%);
+
+    .loading {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        margin: auto;
+        width: 40px;
+        border-radius: 50%;
+    }
+
+    .logo {
+        display: flex;
+        align-items: center;
+        height: 70px;
+        margin-left: 25px;
+
+        img {
+            width: 99px;
+            height: 32px;
+        }
+    }
+
+    .show {
+        display: flex;
+        align-items: center;
+        height: calc(100% - 70px);
+
+        .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;
+            justify-content: space-between;
+            flex-direction: column;
+            padding: 26px;
+            box-sizing: border-box;
+
+            .content-wrapper {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: 14px;
+
+                .img {
+                    width: 70px;
+                    height: 70px;
+                }
+
+                .img-left {
+                    border-radius: 50%;
+                }
+
+                .middle {
+                    padding: 0 20px;
+                    box-sizing: border-box;
+
+                    .invite-txt {
+                        color: #727272;
+                        font-weight: 400;
+                        font-size: 13px;
+                    }
+
+                    .title {
+                        font-weight: 800;
+                        font-size: 20px;
+                        margin: 6px 3px 0;
+                    }
+
+                    .up-gain-txt {
+                        color: #F8BC2B;
+                        font-weight: 600;
+                        font-size: 13px;
+                        display: flex;
+                        align-items: center;
+
+                        .amount {
+                            font-weight: 700;
+                            font-size: 22px;
+                        }
+                    }
+                }
+            }
+
+            .btn-wrapper {
+                margin-top: 54px;
+                padding: 16px;
+                box-sizing: border-box;
+                background: #1D9BF0;
+                border-radius: 100px;
+                color: #FFFFFF;
+                font-weight: 700;
+                font-size: 17px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+
+                .img {
+                    width: 28px;
+                    height: 28px;
+                    margin-right: 8px;
+                }
+            }
+
+
+        }
+    }
+}
+
+</style>

pages/treasure/invite.vue

@@ -0,0 +1,421 @@
+<template>
+    <div class="nft-content">
+        <template v-if="isLoading">
+            <img class="loading" src="../../static/svg/icon-loading.svg" />
+        </template>
+        <template v-else>
+            <template v-if="isMobile">
+                <MobileLandPage
+                    :playType="PlayType.Treasure"
+                    :useFul="detail.status == 0 || detail.status == 1"
+                    :userInfo="detail.inviteUserInfo"
+                    :usValue="detail.upGainAmountValue"
+                    :postId="detail.srcContentId"></MobileLandPage>
+            </template>
+            <template v-else>
+                <div class="logo">
+                    <img src="/img/icon-logo.png" alt />
+                </div>
+                <div class="show">
+                    <div class="center">
+                        <div class="content-wrapper">
+                            <img class="img img-left" 
+                                :src="detail.inviteUserInfo.avatarUrl" alt="">
+                            <div class="middle">
+                                <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>
+                                </div>
+                            </div>
+                            <img class="img" src="../../static/svg/icon-treasure.svg" alt="">
+                        </div>
+                        <div class="btn-wrapper" @click="clickBtn()">
+                            <template v-if="isChrome">
+                                Install Denet Chrome Extension
+                            </template>
+                            <template v-else>
+                                <img class="img"
+                                    src="../../static/svg/icon-chrome-down.svg" />
+                                    Open in Chrome to participate
+                            </template> 
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Cookies from 'js-cookie'
+import { Toast } from 'vant';
+import { isBrowser, appVersionCode, appType } from '../../utils/help.js'
+import Report from "@/log-center/log"
+import MobileLandPage from '@/components/MobileLandPage.vue';
+import { RewardType, PlayType } from '@/types';
+
+const api = {
+    prod: 'https://api.denetme.net',
+    pre: 'https://preapi.denetme.net',
+    test: 'https://testapi.denetme.net'
+}
+const page = {
+    prod: "https://h5.denetme.net",
+    pre: "https://preh5.denetme.net",
+    test: 'https://testh5.denetme.net'
+}
+const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
+const baseURL = api[process.env.NUXT_ENV.MODE]
+const ClipboardJS = require('clipboard')
+
+export default {
+    name: 'ntf',
+    data() {
+        return {
+            PlayType,
+            isLoading: true,
+            appVersionCode: appVersionCode,
+            jumpUrl: jumpUrl,
+            detail: {
+                inviteUserInfo: {
+                    avatarUrl: "",
+                    nickName: ""
+                }
+            },
+            config: {},
+            title: 'Treasure Hunt',
+            isMobile: false,
+            isChrome: false,
+            linkHref: '',
+            metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
+        }
+    },
+    head() {
+        return {
+            type: '',
+            title: this.title,
+            appVersionCode: appVersionCode,
+            meta: [
+                // facebook 
+                {
+                    name: 'og:title',
+                    content: this.metaTitle
+                },
+                {
+                    name: 'og:image',
+                    content: this.detail.imagePath || ''
+                },
+                // twitter
+                {
+                    name: 'twitter:card',
+                    content: 'summary_large_image'
+                },
+                {
+                    name: 'twitter:title',
+                    content: this.metaTitle
+                },
+                {
+                    name: 'twitter:image',
+                    content: this.detail.imagePath || ''
+                }
+            ]
+        }
+    },
+    async asyncData(params) {
+        let { route } = params;
+        let { data } = await axios.post(`${baseURL}/denet/post/treasure/invite/detail`, {
+            baseInfo: {
+                appVersionCode: appVersionCode,
+                mid: function () {
+                    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                        return v.toString(16);
+                    });
+                }()
+            },
+            params: {
+                postId: route.params.id || ''
+            }
+        })
+        if (data.code == 0) {
+            return {
+                detail: data.data,
+            }
+        }
+    },
+    created() {
+        this.setCookieMid();
+        this.getConfig();
+    },
+    mounted() {
+        setTimeout(() => {
+            this.checkInstall().then(() => {
+
+            }).catch(() => {
+                this.setTreasureInfo();
+            })
+        }, 600)
+        this.checkBrowser();
+        this.isLoading = false;
+
+        var clipboard = new ClipboardJS('.btn');
+        let that = this
+        clipboard.on('success', function (e) {
+            Toast('copy success');
+            // 埋点
+            that.trackingClick()
+            e.clearSelection();
+        });
+        this.pageSource = Report.pageSource.newUserLandingPage
+        // 埋点
+        if (this.isMobile) {
+            this.pageSource = Report.pageSource.mobileLandingPage
+        }
+        // Report.reportLog({
+        //     baseInfo: {
+        //         appVersionCode: appVersionCode,
+        //         mid: this.mid,
+        //         pageSource: this.pageSource,
+        //         appType,
+        //         machineCode: this.mid
+        //     },
+        //     params: {
+        //         eventData: {
+        //             businessType: Report.businessType.pageView,
+        //             postId: this.detail.postId,
+        //             srcContentId: this.detail.srcContentId,
+        //             senderId: this.detail.srcUserId,
+        //             redPacketType: 2,
+        //         }
+        //     }
+        // })
+    },
+    methods: {
+        clickBtn() {
+            if(this.isChrome) {
+                let { extensionsInstallUrl } = this.config;
+                window.open(extensionsInstallUrl)
+            } else {
+                installChrome();
+            }
+        },
+        checkInstall() {
+            return new Promise((resolve, reject) => {
+                let dom = document.querySelector('#denet_message');
+                if (dom) {
+                    resolve(true)
+                } else {
+                    reject(false)
+                }
+            })
+        },
+        trackingClick() {
+            // Report.reportLog({
+            //     baseInfo: {
+            //         appVersionCode: appVersionCode,
+            //         mid: this.mid,
+            //         pageSource: this.pageSource,
+            //         appType,
+            //         machineCode: this.mid
+            //     },
+            //     params: {
+            //         eventData: {
+            //             businessType: Report.businessType.buttonClick,
+            //             objectType: Report.objectType.installButton,
+            //             postId: this.detail.postId,
+            //             srcContentId: this.detail.srcContentId,
+            //             senderId: this.detail.srcUserId,
+            //             redPacketType: 2,
+            //         }
+            //     }
+            // })
+        },
+        guid() {
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        },
+        setCookieMid() {
+            let _cookie_mid_arr = Cookies.get('mid') || []
+            if (_cookie_mid_arr.length > 0) {
+                this.mid = JSON.parse(_cookie_mid_arr)[0].mid
+            } else {
+                this.mid = this.guid()
+                Cookies.set('mid', JSON.stringify([{ mid: this.mid }]), { expires: 1000 })
+            }
+        },
+        installExtension() {
+            // 埋点
+            this.trackingClick()
+            let { extensionsInstallUrl } = this.config;
+            window.open(extensionsInstallUrl)
+        },
+        installChrome() {
+            window.open('https://www.google.com/chrome')
+        },
+        async getConfig() {
+            let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
+                baseInfo: {
+                    appVersionCode: appVersionCode,
+                    mid: this.mid
+                },
+                params: {}
+            })
+            if (data.code == 0) {
+                this.config = data.data;
+            }
+        },
+        checkBrowser() {
+            this.linkHref = window.location.href;
+            this.isChrome = isBrowser() == 'chrome';
+            this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+        },
+        setTreasureInfo() {
+            let treasureInfo = {
+                createTime: Date.now(),
+                jump_type: 'treasure_info',
+                srcContentId: this.detail.srcContentId || '',
+                postNickName: this.detail.inviteUserInfo.nickName
+            };
+            Cookies.set('jump_info', JSON.stringify(treasureInfo), { expires: 100 });
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+html,
+body,
+#__nuxt,
+#__layout {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.nft-content {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, #D8EFFF 0%, #FFFFFF 44.3%);
+
+    .loading {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        margin: auto;
+        width: 40px;
+        border-radius: 50%;
+    }
+
+    .logo {
+        display: flex;
+        align-items: center;
+        height: 70px;
+        margin-left: 25px;
+
+        img {
+            width: 99px;
+            height: 32px;
+        }
+    }
+
+    .show {
+        display: flex;
+        align-items: center;
+        height: calc(100% - 70px);
+
+        .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;
+            justify-content: space-between;
+            flex-direction: column;
+            padding: 26px;
+            box-sizing: border-box;
+
+            .content-wrapper {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: 14px;
+
+                .img {
+                    width: 70px;
+                    height: 70px;
+                }
+
+                .img-left {
+                    border-radius: 50%;
+                }
+
+                .middle {
+                    padding: 0 20px;
+                    box-sizing: border-box;
+
+                    .invite-txt {
+                        color: #727272;
+                        font-weight: 400;
+                        font-size: 13px;
+                    }
+
+                    .title {
+                        font-weight: 800;
+                        font-size: 20px;
+                        margin: 6px 3px 0;
+                    }
+
+                    .up-gain-txt {
+                        color: #F8BC2B;
+                        font-weight: 600;
+                        font-size: 13px;
+                        display: flex;
+                        align-items: center;
+
+                        .amount {
+                            font-weight: 700;
+                            font-size: 22px;
+                        }
+                    }
+                }
+            }
+
+            .btn-wrapper {
+                margin-top: 54px;
+                padding: 16px;
+                box-sizing: border-box;
+                background: #1D9BF0;
+                border-radius: 100px;
+                color: #FFFFFF;
+                font-weight: 700;
+                font-size: 17px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+
+                .img {
+                    width: 28px;
+                    height: 28px;
+                    margin-right: 8px;
+                }
+            }
+
+
+        }
+    }
+}
+
+</style>