postEditer改版

components/InstallChrome.vue

@@ -1,13 +1,22 @@
 <template>
     <div>
-        <img src="/svg/icon-install-chrome.svg" alt class="install_chrome" @click="clickOpenChrome()" />
+        <img :src=" imgUrl ? imgUrl : btnUrl " alt class="install_chrome" @click="clickOpenChrome()" />
     </div>
 </template>
 <script>
+let btnUrl = require('../static/svg/icon-install-chrome.svg');
+
 export default {
     name: 'install_chrome',
+    props: {
+		imgUrl: {
+			type: String,
+			default: '',
+		}
+	},
     data() {
         return {
+            btnUrl,
         }
     },
     methods: {

components/InstallExtension.vue

@@ -1,9 +1,11 @@
 <template>
 	<div>
-		<img @click="installExtension" src="/svg/icon-install-nft-plugin.svg" />
+		<img @click="installExtension" :src=" imgUrl !== '' ? imgUrl : btnUrl " />
 	</div>
 </template>
 <script>
+let btnUrl = require('../static/svg/icon-install-nft-plugin.svg');
+
 export default {
 	name: 'install_chrome',
 	props: {
@@ -11,10 +13,15 @@ export default {
 			type: String,
 			default: '',
 		},
+		imgUrl: {
+			type: String,
+			default: '',
+		}
 	},
 	data() {
 		return {
 			config: {},
+			btnUrl: btnUrl,
 		};
 	},
 	methods: {

pages/toolbox/index.vue

@@ -1,22 +1,46 @@
 <template>
 	<div class="main">
 		<!-- pc -->
-		<div v-if="device == 'chrome' || device == 'no-chrome'" class="content">
-			<v-logo></v-logo>
-			<div class="tool-cover">
-				<img :src="img_url" alt="" />
+		<template v-if="device == 'chrome' || device == 'no-chrome'">
+			<div class="content">
+				<div></div><div></div><div></div>
+				<div class="twCard" ref="twCard">
+					<div class="twLine" :style=" { zoom: scale } ">
+						<div class="twTitle">
+							<div class="twHead">
+								<img :src="userInfo.avatarUrl" />
+							</div>
+							<div class="twName">
+								<span><strong>@{{ detail.srcUserId }}</strong></span>
+							</div>
+						</div>
+						<div class="twShow">
+							<div class="showTit">{{ detail.postBizData.linkTitle || '' }}</div>
+							<div class="showImg">
+								<img :src="detail.postBizData.viewBgImagePath" />
+							</div>
+						</div>
+					</div>
+					<img src="../../static/img/img-card-bg.png" />
+				</div>
+				<div class="twInfo">
+					<div class="title">
+						<span>{{ detail.postBizData.linkTitle || '' }}</span>
+					</div>
+					<div class="invitation">
+						<template v-if="device == 'no-chrome'">
+							<install-chrome :imgUrl=" require('../../static/img/img-chrome.svg') "></install-chrome>
+						</template>
+						<template v-if="device == 'chrome'">
+							<install-extension :imgUrl=" require('../../static/img/img-no-chrome.svg') " :extensionsInstallUrl="config.extensionsInstallUrl" @installClick="installClick"></install-extension>
+						</template>
+						<img class="hand" src="../../static/img/img-hand.png" />
+					</div>
+					<div class="detail" @click="goOriginLink" v-if="detail.postBizData.certNftProjectId">Visit the original page</div>
+				</div>
+				<div></div><div></div><div></div>
 			</div>
-			<!-- 非chrome -->
-			<div v-if="device == 'no-chrome'">
-				<div class="txt">Use chrome browser to access {{ detail.postBizData.linkTitle || '' }}</div>
-				<install-chrome></install-chrome>
-			</div>
-			<!-- chrome -->
-			<div v-if="device == 'chrome'">
-				<div class="txt">Use chrome browser to access {{ detail.postBizData.linkTitle || '' }}</div>
-				<install-extension :extensionsInstallUrl="config.extensionsInstallUrl" @installClick="installClick"></install-extension>
-			</div>
-		</div>
+		</template>
 
 		<!-- 移动端 -->
 		<div v-if="device == 'ios' || device == '安卓'" class="mobile">
@@ -56,6 +80,8 @@ export default {
 			mid: '',
 			pageSource: '',
 			img_url: '',
+			scale: 1,
+			userInfo: {},
 		};
 	},
 	head() {
@@ -135,7 +161,7 @@ export default {
 		} else {
 			this.img_url = this.detail.postBizData.linkImagePath;
 		}
-
+		let that = this;
 		this.pageSource = Report.pageSource.newUserLandingPage;
 		this.setCookieMid();
 		Report.reportLog({
@@ -159,10 +185,17 @@ export default {
 		this.copy_link = window.location.href;
 		this.device = getBrowserType();
 		this.getConfig();
+		this.getUserInfo();
 		console.log('device', this.device);
 		if (this.device == 'chrome') {
 			this.setCookie();
 		}
+		this.mobileLink();
+		// 计算缩放
+		this.sumScale();
+		window.onresize = function() {
+			that.sumScale();
+		}
 	},
 
 	methods: {
@@ -224,6 +257,21 @@ export default {
 				this.config = data.data;
 			}
 		},
+		async getUserInfo() {
+			let { data } = await axios.post(`${baseURL}/denet/user/getUserInfo`, {
+				baseInfo: {
+					appVersionCode: this.appVersionCode,
+					mid: this.mid,
+				},
+				params: {
+					uid: this.detail.uid
+				},
+			});
+
+			if (data.code == 0) {
+				this.userInfo = data.data;
+			}
+		},
 		clickCopy() {
 			// 复制链接
 			var clipboard = new ClipboardJS('.btn2');
@@ -239,6 +287,36 @@ export default {
 		clickExtension() {
 			window.open(this.config.extensionsInstallUrl);
 		},
+		sumScale() {
+			if (this.device == 'chrome' || this.device == 'no-chrome') {
+				this.$nextTick(() => {
+					let obj = this.$refs.twCard;
+					if (obj && obj.offsetWidth) {
+						this.scale = obj.offsetWidth / 680;
+					} else {
+						setTimeout(() => {
+							this.sumScale()
+						}, 200)
+					}
+				})
+			}
+		},
+		goOriginLink() {
+			if (this.detail.postBizData.originUrl) {
+				window.open(this.detail.postBizData.originUrl)
+			}
+		},
+		mobileLink() {
+			if (this.device == 'ios' || this.device == '安卓') {
+				if (this.detail.postBizData.originUrl) {
+					window.location.href = this.detail.postBizData.originUrl
+				} else {
+					setTimeout(() => {
+						this.mobileLink()
+					}, 200)
+				}
+			}
+		},
 	},
 };
 </script>
@@ -251,44 +329,116 @@ body,
 	padding: 0;
 	width: 100%;
 	height: 100%;
-	background: #f5faff;
+	background: #F5FAFF;
 }
 
 .main {
 	width: 100%;
 	height: 100%;
 
-	.tool-cover {
-		min-width: 400px;
-		margin-right: 90px;
-
-		img {
-			max-height: 270px;
-		}
-	}
-
 	.content {
-		width: 100%;
-		height: 100%;
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding-bottom: 70px;
-
-		.txt {
-			width: 400px;
-			font-weight: 700;
-			font-size: 36px;
-			line-height: 44px;
-			/* or 122% */
-
-			letter-spacing: 0.3px;
-
-			color: #323232;
-			margin-bottom: 40px;
+		justify-content: space-evenly;
+		height: 100%;
+		.twCard {
+			position: relative;
+			height: 100%;
+			.twLine {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 680px;
+				.twTitle {
+					position: absolute;
+					top: 24px;
+					left: 22px;
+					.twHead {
+						width: 52px;
+						height: 52px;
+						border-radius: 50%;
+						img {
+							width: 100%;
+							height: 100%;
+							border-radius: 50%;
+						}
+					}
+					.twName {
+						position: absolute;
+						top: 0;
+						left: 60px;
+						width: 550px;
+						color: #566370;
+					}
+				}
+				.twShow {
+					position: absolute;
+					overflow: hidden;
+					top: 73px;
+					left: 84px;
+					width: 554px;
+					border-radius: 14px;
+					box-shadow: 0px 0 10px rgba(0, 0, 0, 0.2);
+					.showTit {
+						display: flex;
+						align-items: center;
+						color: #ffffff;
+						font-size: 16px;
+						font-weight: 500;
+						height: 44px;
+						padding-left: 16px;
+						background: #373737;
+					}
+					.showImg {
+						width: 554px;
+						height: 554px;
+					}
+				}
+			}
+			img {
+				height: 100%;
+			}
+		}
+		.twInfo {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			width: 300px;
+			.title {
+				color: #000000;
+				font-size: 15px;
+				font-weight: 700;
+				text-align: center;
+			}
+			.invitation {
+				position: relative;
+				height: 70px;
+				margin: 16px 0 0 0;
+				cursor: pointer;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+				.hand {
+					position: absolute;
+					right: -40px;
+					top: 13px;
+					width: 45px;
+					height: unset;
+					animation: leftRight .5s infinite ease-in-out;
+				}
+			}
+			.detail {
+				padding: 20px 0;
+				cursor: pointer;
+				color: #1D9BF0;
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 16px;
+				text-align: center;
+			}
 		}
 	}
-
+	
 	.mobile {
 		.mobile-content {
 			padding: 36px 16px 0 16px;
@@ -349,4 +499,13 @@ body,
 		}
 	}
 }
+
+@keyframes leftRight {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(20px);
+	}
+}
 </style>