|
|
@@ -0,0 +1,220 @@
|
|
|
+<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="detail.cover" alt="">
|
|
|
+ </div>
|
|
|
+ <!-- 非chrome -->
|
|
|
+ <div v-if="device == 'no-chrome'">
|
|
|
+ <div class="txt">Use chrome browser to access Subway Surfers</div>
|
|
|
+ <install-chrome></install-chrome>
|
|
|
+ </div>
|
|
|
+ <!-- chrome -->
|
|
|
+ <div v-if="device == 'chrome'">
|
|
|
+ <div class="txt">Use chrome browser to access Subway Surfers</div>
|
|
|
+ <install-extension></install-extension>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 移动端 -->
|
|
|
+ <div v-if="device == 'ios' || device == '安卓'" class="mobile">
|
|
|
+ <div class="mobile-content">
|
|
|
+ <img :src="detail.cover" alt="">
|
|
|
+ <div class="title">Open link on PC to use Subway Surfers</div>
|
|
|
+ </div>
|
|
|
+ <div class="area-button">
|
|
|
+ <div class="btn1" @click="clickExtension">
|
|
|
+ Install Chrome Extension
|
|
|
+ </div>
|
|
|
+ <div class="btn2" @click="clickCopy">
|
|
|
+ Copy Link
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import VLogo from '@/components/logo.vue'
|
|
|
+import InstallChrome from '@/components/InstallChrome.vue'
|
|
|
+import InstallExtension from '@/components/InstallExtension.vue'
|
|
|
+import { getBrowserType, baseURL, appVersionCode } from '../../utils/help.js'
|
|
|
+import axios from 'axios'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'tool_box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ device: '',
|
|
|
+ detail: {
|
|
|
+ cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659266146&t=f2eab2e388056d2799b66cdf2e0e39b8'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ VLogo,
|
|
|
+ InstallChrome,
|
|
|
+ InstallExtension
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
|
|
|
+ data.data.postBizData = JSON.parse(data.data.postBizData)
|
|
|
+ }
|
|
|
+ if (data.data.postBizData === null) {
|
|
|
+ data.data.postBizData = {
|
|
|
+ postUserInfo: {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('detail', data.data)
|
|
|
+
|
|
|
+ return {
|
|
|
+ detail: data.data,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.device = getBrowserType()
|
|
|
+ console.log(this.device)
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ clickCopy() {
|
|
|
+
|
|
|
+ },
|
|
|
+ clickExtension() {
|
|
|
+ window.open('https://chrome.google.com/webstore/detail/denet/inlfbeejfdgkknpiodhemfcokbdgofja')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="scss" >
|
|
|
+html,
|
|
|
+body,
|
|
|
+#__nuxt,
|
|
|
+#__layout {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #F5FAFF;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .tool-cover {
|
|
|
+ min-width: 400px;
|
|
|
+ margin-right: 90px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile {
|
|
|
+ .mobile-content {
|
|
|
+ padding: 36px 16px 0 16px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #000000;
|
|
|
+ width: 240px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .area-button {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ padding: 27px 16px 25px 16px;
|
|
|
+ bottom: 0;
|
|
|
+ height: 170px;
|
|
|
+
|
|
|
+ .btn1 {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background: #1D9BF0;
|
|
|
+ border-radius: 100px;
|
|
|
+ width: 100%;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn2 {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background: rgba(29, 155, 240, 0.01);
|
|
|
+ border: 1px solid #1D9BF0;
|
|
|
+ border-radius: 100px;
|
|
|
+ width: 100%;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #1D9BF0;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
