瀏覽代碼

copy link log

jihuaqiang 2 年之前
父節點
當前提交
554a5f3d5b
共有 1 個文件被更改,包括 450 次插入449 次删除
  1. 450 449
      pages/nft/group.vue

+ 450 - 449
pages/nft/group.vue

@@ -1,279 +1,280 @@
 <template>
 <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">
-                <div class="small">
-                    <div class="banner">
-                        <div class="logo">
-                            <img class="img" :src="postBizData.groupIcon" />
-                        </div>
-                        <div class="desc">{{ postBizData.groupName }}</div>
-                    </div>
-                    <div class="title">Open link on PC to Join Group</div>
-                    <div class="desc">{{ linkHref }}</div>
-                    <div class="copy">
-                        <button class="btn" :data-clipboard-text="linkHref">Copy Link</button>
-                    </div>
-                </div>
-            </template>
-            <template v-else>
-                <div class="logo">
-                    <img src="/img/icon-logo.png" alt />
-                </div>
-                <div class="show">
-                    <div class="center">
-                        <div class="header">
-                            <div class="core">
-                                <div class="core_logo"><img :src="postBizData.groupIcon" /></div>
-                                <div class="core_title">{{ postBizData.groupName }}</div>
-                            </div>
-                            <div class="member">
-                                <label>
-                                    <img src="../../static/svg/icon-nft-member.svg" />
-                                    <span>{{ postBizData.memberCount }} Member</span>
-                                </label>
-                                <label>
-                                    <img src="../../static/svg/icon-nft-post.svg" />
-                                    <span>{{ postBizData.postCount }} Posts</span>
-                                </label>
-                            </div>
-                        </div>
-                        <div class="footer">
-                            <template v-if="isChrome">
-                                <div class="font">Install DeNet to Join The Group</div>
-                                <img class="btn" @click="installExtension"
-                                    src="../../static/svg/icon-install-nft-plugin.svg" />
-                            </template>
-                            <template v-else>
-                                <div class="font">Only Support to Use Chrome<br />to Join Group</div>
-                                <img class="btn" @click="installChrome"
-                                    src="../../static/svg/icon-install-nft-chrome.svg" />
-                            </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">
+				<div class="small">
+					<div class="banner">
+						<div class="logo">
+							<img class="img" :src="postBizData.groupIcon" />
+						</div>
+						<div class="desc">{{ postBizData.groupName }}</div>
+					</div>
+					<div class="title">Open link on PC to Join Group</div>
+					<div class="desc">{{ linkHref }}</div>
+					<div class="copy">
+						<button class="btn" :data-clipboard-text="linkHref">Copy Link</button>
+					</div>
+				</div>
+			</template>
+			<template v-else>
+				<div class="logo">
+					<img src="/img/icon-logo.png" alt />
+				</div>
+				<div class="show">
+					<div class="center">
+						<div class="header">
+							<div class="core">
+								<div class="core_logo"><img :src="postBizData.groupIcon" /></div>
+								<div class="core_title">{{ postBizData.groupName }}</div>
+							</div>
+							<div class="member">
+								<label>
+									<img src="../../static/svg/icon-nft-member.svg" />
+									<span>{{ postBizData.memberCount }} Member</span>
+								</label>
+								<label>
+									<img src="../../static/svg/icon-nft-post.svg" />
+									<span>{{ postBizData.postCount }} Posts</span>
+								</label>
+							</div>
+						</div>
+						<div class="footer">
+							<template v-if="isChrome">
+								<div class="font">Install DeNet to Join The Group</div>
+								<img class="btn" @click="installExtension" src="../../static/svg/icon-install-nft-plugin.svg" />
+							</template>
+							<template v-else>
+								<div class="font">Only Support to Use Chrome<br />to Join Group</div>
+								<img class="btn" @click="installChrome" src="../../static/svg/icon-install-nft-chrome.svg" />
+							</template>
+						</div>
+					</div>
+				</div>
+			</template>
+		</template>
+	</div>
 </template>
 </template>
 
 
 <script>
 <script>
-import axios from 'axios'
-import Cookies from 'js-cookie'
+import axios from 'axios';
+import Cookies from 'js-cookie';
 import { Toast } from 'vant';
 import { Toast } from 'vant';
-import { isBrowser, appVersionCode, appType } from '../../utils/help.js'
-import Report from "@/log-center/log"
+import { isBrowser, appVersionCode, appType } from '../../utils/help.js';
+import Report from '@/log-center/log';
 const api = {
 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 = {
 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 {
 export default {
-    name: 'ntf',
-    data() {
-        return {
-            isLoading: true,
-            appVersionCode: appVersionCode,
-            jumpUrl: jumpUrl,
-            detail: {},
-            postBizData: {
-                groupImagePath: '',
-            },
-            config: {},
-            title: 'DeNet Giveaway',
-            isMobile: false,
-            isChrome: false,
-            linkHref: '',
-            metaTitle: 'DeNet: Join NFT Owners Group',
-        }
-    },
-    head() {
-        return {
-            type: '',
-            title: this.title,
-            appVersionCode: appVersionCode,
-            meta: [
-                // facebook 
-                {
-                    name: 'og:url',
-                    content: this.jumpUrl + 'nft_group/' + this.$route.params.id
-                },
-                {
-                    name: 'og:title',
-                    content: this.metaTitle
-                },
-                {
-                    name: 'og:image',
-                    content: this.postBizData.groupImagePath || ''
-                },
-                // twitter
-                {
-                    name: 'twitter:card',
-                    content: 'summary_large_image'
-                },
-                {
-                    name: 'twitter:url',
-                    content: this.jumpUrl + 'nft_group/' + this.$route.params.id
-                },
-                {
-                    name: 'twitter:title',
-                    content: this.metaTitle
-                },
-                {
-                    name: 'twitter:image',
-                    content: this.postBizData.groupImagePath || ''
-                }
-            ]
-        }
-    },
-    async asyncData(params) {
-        let { route } = params;
-        let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
-            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 && data.data !== null) {
-            return {
-                detail: data.data,
-                postBizData: JSON.parse(data.data.postBizData),
-            }
-        }
-    },
-    created() {
-        this.setCookieMid();
-        this.getConfig();
-    },
-    mounted() {
-        this.checkBrowser();
-        this.setNftInfo();
-        this.isLoading = false;
+	name: 'ntf',
+	data() {
+		return {
+			isLoading: true,
+			appVersionCode: appVersionCode,
+			jumpUrl: jumpUrl,
+			detail: {},
+			postBizData: {
+				groupImagePath: '',
+			},
+			config: {},
+			title: 'DeNet Giveaway',
+			isMobile: false,
+			isChrome: false,
+			linkHref: '',
+			metaTitle: 'DeNet: Join NFT Owners Group',
+		};
+	},
+	head() {
+		return {
+			type: '',
+			title: this.title,
+			appVersionCode: appVersionCode,
+			meta: [
+				// facebook
+				{
+					name: 'og:url',
+					content: this.jumpUrl + 'nft_group/' + this.$route.params.id,
+				},
+				{
+					name: 'og:title',
+					content: this.metaTitle,
+				},
+				{
+					name: 'og:image',
+					content: this.postBizData.groupImagePath || '',
+				},
+				// twitter
+				{
+					name: 'twitter:card',
+					content: 'summary_large_image',
+				},
+				{
+					name: 'twitter:url',
+					content: this.jumpUrl + 'nft_group/' + this.$route.params.id,
+				},
+				{
+					name: 'twitter:title',
+					content: this.metaTitle,
+				},
+				{
+					name: 'twitter:image',
+					content: this.postBizData.groupImagePath || '',
+				},
+			],
+		};
+	},
+	async asyncData(params) {
+		let { route } = params;
+		let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
+			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 && data.data !== null) {
+			return {
+				detail: data.data,
+				postBizData: JSON.parse(data.data.postBizData),
+			};
+		}
+	},
+	created() {
+		this.setCookieMid();
+		this.getConfig();
+	},
+	mounted() {
+		this.checkBrowser();
+		this.setNftInfo();
+		this.isLoading = false;
 
 
-        var clipboard = new ClipboardJS('.btn');
-        let that = this
-        clipboard.on('success', function (e) {
-            Toast('copy success');
-            that.trackingClick()
-            e.clearSelection();
-        });
+		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: 3,
-                }
-            }
-        })
-    },
-    methods: {
-        trackingClick() {
-            Report.reportLog({
-                baseInfo: {
-                    appVersionCode: appVersionCode,
-                    mid: this.mid,
-                    pageSource: this.pageSource,
-                    appType,
-                    machineCode: this.mid
-                },
-                params: {
-                    eventData: {
-                        businessType: Report.businessType.buttonClick,
-                        postId: this.detail.postId,
-                        srcContentId: this.detail.srcContentId,
-                        senderId: this.detail.srcUserId,
-                        redPacketType: 3,
-                    }
-                }
-            })
-        },
-        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);
-        },
-        setNftInfo() {
-            let nftGroupInfo = {
-                twitterAccount: this.postBizData.defaultTwitterAccount || '',
-                createTime: Date.now(),
-                jump_type: 'nft_group_info',
-            };
-            Cookies.set('jump_info', JSON.stringify(nftGroupInfo), { expires: 100 });
-        },
-    }
-}
+		// 埋点
+		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: 3,
+				},
+			},
+		});
+	},
+	methods: {
+		trackingClick() {
+			Report.reportLog({
+				baseInfo: {
+					appVersionCode: appVersionCode,
+					mid: this.mid,
+					pageSource: this.pageSource,
+					appType,
+					machineCode: this.mid,
+				},
+				params: {
+					eventData: {
+						businessType: Report.businessType.buttonClick,
+						postId: this.detail.postId,
+						objectType: Report.objectType.copyLinkButton,
+						srcContentId: this.detail.srcContentId,
+						senderId: this.detail.srcUserId,
+						redPacketType: 3,
+					},
+				},
+			});
+		},
+		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);
+		},
+		setNftInfo() {
+			let nftGroupInfo = {
+				twitterAccount: this.postBizData.defaultTwitterAccount || '',
+				createTime: Date.now(),
+				jump_type: 'nft_group_info',
+			};
+			Cookies.set('jump_info', JSON.stringify(nftGroupInfo), { expires: 100 });
+		},
+	},
+};
 </script>
 </script>
 
 
 <style lang="scss">
 <style lang="scss">
@@ -281,218 +282,218 @@ html,
 body,
 body,
 #__nuxt,
 #__nuxt,
 #__layout {
 #__layout {
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
 }
 }
 
 
 .nft-content {
 .nft-content {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(180deg, #FFFFFF 0%, #F0F7FE 94.31%);
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(180deg, #ffffff 0%, #f0f7fe 94.31%);
 
 
-    .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 {
-            display: flex;
-            flex-direction: column;
-            width: 505px;
-            margin: -50px auto 0;
+		.center {
+			display: flex;
+			flex-direction: column;
+			width: 505px;
+			margin: -50px auto 0;
 
 
-            .header {
-                display: flex;
-                flex-direction: column;
-                width: 100%;
-                height: 180px;
-                padding-left: 25px;
-                justify-content: center;
-                border-radius: 16px 16px 0 0;
-                background: url('../../static/svg/icon-nft-group-pc.svg') no-repeat right bottom #48B1F7;
+			.header {
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				height: 180px;
+				padding-left: 25px;
+				justify-content: center;
+				border-radius: 16px 16px 0 0;
+				background: url('../../static/svg/icon-nft-group-pc.svg') no-repeat right bottom #48b1f7;
 
 
-                .core {
-                    display: flex;
-                    align-items: center;
+				.core {
+					display: flex;
+					align-items: center;
 
 
-                    .core_logo {
-                        overflow: hidden;
-                        width: 54px;
-                        height: 54px;
-                        border-radius: 6px;
-                        background-color: #fff;
+					.core_logo {
+						overflow: hidden;
+						width: 54px;
+						height: 54px;
+						border-radius: 6px;
+						background-color: #fff;
 
 
-                        img {
-                            width: 100%;
-                            height: 100%;
-                            border-radius: 8px;
-                        }
-                    }
+						img {
+							width: 100%;
+							height: 100%;
+							border-radius: 8px;
+						}
+					}
 
 
-                    .core_title {
-                        color: #fff;
-                        font-size: 26px;
-                        font-weight: 700;
-                        margin-left: 16px;
-                    }
-                }
+					.core_title {
+						color: #fff;
+						font-size: 26px;
+						font-weight: 700;
+						margin-left: 16px;
+					}
+				}
 
 
-                .member {
-                    color: #fff;
-                    font-size: 12px;
-                    font-weight: 500;
-                    margin-top: 24px;
+				.member {
+					color: #fff;
+					font-size: 12px;
+					font-weight: 500;
+					margin-top: 24px;
 
 
-                    label {
-                        margin-right: 17px;
+					label {
+						margin-right: 17px;
 
 
-                        img {
-                            margin-top: -3px;
-                            vertical-align: middle;
-                        }
-                    }
-                }
-            }
+						img {
+							margin-top: -3px;
+							vertical-align: middle;
+						}
+					}
+				}
+			}
 
 
-            .footer {
-                display: flex;
-                align-items: center;
-                flex-direction: row;
-                justify-content: space-between;
-                width: 100%;
-                height: 90px;
-                border-radius: 0 0 16px 16px;
-                border: solid 1px #E2E2E2;
+			.footer {
+				display: flex;
+				align-items: center;
+				flex-direction: row;
+				justify-content: space-between;
+				width: 100%;
+				height: 90px;
+				border-radius: 0 0 16px 16px;
+				border: solid 1px #e2e2e2;
 
 
-                .font {
-                    flex: 1;
-                    text-align: center;
-                    font-size: 16px;
-                    font-weight: 500;
-                }
+				.font {
+					flex: 1;
+					text-align: center;
+					font-size: 16px;
+					font-weight: 500;
+				}
 
 
-                .btn {
-                    width: 200px;
-                    box-sizing: unset;
-                }
-            }
-        }
-    }
+				.btn {
+					width: 200px;
+					box-sizing: unset;
+				}
+			}
+		}
+	}
 }
 }
 
 
 .small {
 .small {
-    position: absolute;
-    top: 40%;
-    width: 100%;
-    padding: 0 16px;
-    box-sizing: border-box;
-    transform: translateY(-50%);
+	position: absolute;
+	top: 40%;
+	width: 100%;
+	padding: 0 16px;
+	box-sizing: border-box;
+	transform: translateY(-50%);
 
 
-    .banner {
-        position: relative;
-        overflow: hidden;
-        height: 180px;
-        border-radius: 10px;
-        background: url('../../static/svg/icon-nft-group-mobile.svg') no-repeat right bottom #48B1F7;
+	.banner {
+		position: relative;
+		overflow: hidden;
+		height: 180px;
+		border-radius: 10px;
+		background: url('../../static/svg/icon-nft-group-mobile.svg') no-repeat right bottom #48b1f7;
 
 
-        .logo {
-            position: absolute;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 2;
-            margin: 0;
-            top: 38px;
-            left: 50%;
-            width: 54px;
-            height: 54px;
-            transform: translateX(-50%);
-            border-radius: 5px;
-            background-color: #FFFFFF;
+		.logo {
+			position: absolute;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 2;
+			margin: 0;
+			top: 38px;
+			left: 50%;
+			width: 54px;
+			height: 54px;
+			transform: translateX(-50%);
+			border-radius: 5px;
+			background-color: #ffffff;
 
 
-            .img {
-                position: unset;
-                width: 50px;
-                height: 50px;
-                border-radius: 5px;
-            }
-        }
+			.img {
+				position: unset;
+				width: 50px;
+				height: 50px;
+				border-radius: 5px;
+			}
+		}
 
 
-        .desc {
-            position: absolute;
-            z-index: 2;
-            top: 115px;
-            width: 100%;
-            color: #FFFFFF;
-            font-weight: 600;
-            font-size: 20px;
-            padding: 0 12px;
-            line-height: 24px;
-            text-align: center;
-            box-sizing: border-box;
-            word-break: break-all;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-        }
-    }
+		.desc {
+			position: absolute;
+			z-index: 2;
+			top: 115px;
+			width: 100%;
+			color: #ffffff;
+			font-weight: 600;
+			font-size: 20px;
+			padding: 0 12px;
+			line-height: 24px;
+			text-align: center;
+			box-sizing: border-box;
+			word-break: break-all;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+			overflow: hidden;
+		}
+	}
 
 
-    .title {
-        color: #000000;
-        font-weight: 600;
-        font-size: 20px;
-        text-align: center;
-        padding: 39px 0 7px;
-    }
+	.title {
+		color: #000000;
+		font-weight: 600;
+		font-size: 20px;
+		text-align: center;
+		padding: 39px 0 7px;
+	}
 
 
-    .desc {
-        color: #8A8A8A;
-        font-size: 13px;
-        padding: 0 22px;
-        word-break: break-all;
-        text-align: center;
-    }
+	.desc {
+		color: #8a8a8a;
+		font-size: 13px;
+		padding: 0 22px;
+		word-break: break-all;
+		text-align: center;
+	}
 
 
-    .copy {
-        margin-top: 35px;
+	.copy {
+		margin-top: 35px;
 
 
-        button {
-            width: 100%;
-            border: 0;
-            height: 53px;
-            color: #fff;
-            font-size: 18px;
-            font-weight: 700;
-            border-radius: 55px;
-            background: #1D9BF0;
-        }
-    }
+		button {
+			width: 100%;
+			border: 0;
+			height: 53px;
+			color: #fff;
+			font-size: 18px;
+			font-weight: 700;
+			border-radius: 55px;
+			background: #1d9bf0;
+		}
+	}
 }
 }
-</style>
+</style>