|
|
@@ -1,293 +1,285 @@
|
|
|
<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>
|
|
|
+ <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 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 { isBrowser, appVersionCode } from '../../utils/help.js';
|
|
|
+import Report from '@/log-center/log';
|
|
|
import MobileLandPage from '@/components/MobileLandPage.vue';
|
|
|
-import { RewardType, PlayType } from '@/types';
|
|
|
+import { PlayType } from '@/types';
|
|
|
|
|
|
const api = {
|
|
|
- prod: 'https://api.denetme.net',
|
|
|
- pre: 'https://preapi.denetme.net',
|
|
|
- test: 'https://testapi.denetme.net'
|
|
|
-}
|
|
|
+ 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')
|
|
|
+ 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(() => {
|
|
|
+ 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',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ MobileLandPage,
|
|
|
+ },
|
|
|
+ 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;
|
|
|
|
|
|
- }).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 });
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
+ 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 {
|
|
|
+ this.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">
|
|
|
@@ -295,127 +287,124 @@ html,
|
|
|
body,
|
|
|
#__nuxt,
|
|
|
#__layout {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
+ 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%);
|
|
|
+ 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%;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70px;
|
|
|
+ margin-left: 25px;
|
|
|
|
|
|
- img {
|
|
|
- width: 99px;
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 99px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .show {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: calc(100% - 70px);
|
|
|
+ .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;
|
|
|
+ .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;
|
|
|
+ .content-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 14px;
|
|
|
|
|
|
- .img {
|
|
|
- width: 70px;
|
|
|
- height: 70px;
|
|
|
- }
|
|
|
+ .img {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
|
|
|
- .img-left {
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
+ .img-left {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
|
|
|
- .middle {
|
|
|
- padding: 0 20px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .middle {
|
|
|
+ padding: 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .invite-txt {
|
|
|
- color: #727272;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
+ .invite-txt {
|
|
|
+ color: #727272;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-weight: 800;
|
|
|
- font-size: 20px;
|
|
|
- margin: 6px 3px 0;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ .up-gain-txt {
|
|
|
+ color: #f8bc2b;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .amount {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ .img {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|
