de-net-official/pages/tool_box/index.vue

<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>