<template>
    <div class="product">
        <default-navbar :navbarList="navbarList">
            <template slot="bg-content">
                <div class="bg-content">
                </div>
            </template>
        </default-navbar>
        <div class="product-content">
            <div class="product-content-wrapper">
                <div class="product-item" v-for="item in productList">
                    <div class="item-left">
                        <div class="left-top"
                             :style="{'background-image': 'url(https://file.funcheergame.com/office/image/'+item.leftTop+'.png)'}"
                        >
                        </div>
                        <div class="left-mid"
                             :style="{'background-image': 'url(https://file.funcheergame.com/office/image/'+item.qrCode+'.png)'}"
                        >
                        </div>
                        <div class="left-bottom">
                            {{item.qrCodeText}}
                        </div>
                    </div>
                    <div class="item-mid">
                        <div class="text-title">
                            {{item.title}}
                        </div>
                        <a :href="item.path">
                            <span v-html="item.text"></span>
                        </a>
                        <!--<p class="jinji" v-if="item.title == '悟空快跑'" @click="handleClickTingfu">停服公告</p>-->
                    </div>

                    <div class="item-right"
                         :style="{'background-image': 'url(https://file.funcheergame.com/office/image/'+item.right+'.png)'}"
                    >
                    </div>
                </div>
            </div>
        </div>
        <page-footer></page-footer>
    </div>
</template>

<script>
    import PageFooter from '@/components/footer/pageFooter'
    import DefaultNavbar from '@/components/navbar/navbar'
    import {asyncRouterMap} from '@/config/router.config'

    export default {
        name: 'product',
        data() {
            return {
                navbarList: [],
                productList: [
                    {
                        leftTop: 'sg_logo',
                        qrCode: 'sg_code',
                        path: '#here',
                        qrCodeText: '扫一扫下载游戏',
                        title: '三国乱世霸王',
                        text: '《三国乱世霸王》是一款以三国乱世为背景的战争策略类手游，游戏特有的战斗策略模式，摒弃了纯数据比拼，让战斗变得更加刺激有趣。玩家可以在游 戏中收集诸多三国名将进行培养，并率领麾下大军参与国战，攻城略地，在乱世中建立属于自己的势力。名将养成、实时国战、经典战役、争夺皇位 ，精彩尽在三国乱世霸王！',
                        right: 'cp_1'
                    },
                    {
                        leftTop: 'fffx_logo',
                        qrCode: 'fffx_code',
                        path: '/html/frfxz.html',
                        qrCodeText: '扫一扫下载游戏',
                        title: '凡人飞仙传-红包版',
                        text: '<p>逆天修仙的路，你選擇是 持劍獨闖三界、避世靜修還是結伴而行。</p><p>宏大的場景和邊疆地域，畫面精美，採用全新的動態載入技術，呈現出不一樣的仙踪俠影世界。</p>',
                        right: 'cp_fffx'
                    },
                    {
                        leftTop: 'bbxt_logo',
                        qrCode: 'bbxt_code',
                        path: '/html/bbxt.html',
                        qrCodeText: '扫一扫下载游戏',
                        title: '步步仙途',
                        text: '<p>逆天修仙的路，你選擇是 持劍獨闖三界、避世靜修還是結伴而行。</p><p>宏大的場景和邊疆地域，畫面精美，採用全新的動態載入技術，呈現出不一樣的仙踪俠影世界。</p>',
                        right: 'cp_bbxt'
                    },
                    {
                        leftTop: 'qyj_logo',
                        qrCode: 'qyj_code',
                        path: '/html/qyj.html',
                        qrCodeText: '扫一扫下载游戏',
                        title: '魔君天下',
                        text: '<p>磨砺青锋歌一曲，扶摇直上九天宫</p><p>纵然，枉费苦心经营一生，奈何不敌命运嬉笑</p><p>不认命，持剑相对。</p>',
                        right: 'cp_qyj'
                    },
                    {
                        leftTop: 'ssh_logo',
                        qrCode: 'ssh_code',
                        path: '/html/sshby.html',
                        qrCodeText: '扫一扫下载游戏',
                        title: '十三号病院',
                        text: '《十三号病院》是一款恐怖地下风格的逃生与解密探险游戏。',
                        right: 'cp_ssh'
                    },
                    {
                        leftTop: 'fq_logo',
                        qrCode: 'wx_qr_code',
                        path: '#here',
                        qrCodeText: '扫一扫关注公众号',
                        title: '更多游戏',
                        text: '《热血传奇》是一款奇幻类2DMMORPG，自2001年11月正式商业化运营以来，《热血传奇》揭开了中国大规模网络游戏时代的开端。简单而不失微妙的游戏操作、完美的职业搭配、不可替代的PK感受，再加上气势磅礴的万人攻城、行会战争等群战体系，让传奇拥有了独一无二的经典魅力！师徒、伴侣、行会等丰富的社会架构，更让玩家在亲情、友情、爱情中充分体验人生百味。',
                        right: 'cp_3'
                    }
                ]
            }
        },
        components: {
            DefaultNavbar,
            PageFooter
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.navbarList.push(...asyncRouterMap.filter(f => !f.meta.hidden))
            },
            handleClickTingfu() {
                this.$router.push("/jinji")
            }
        }
    }
</script>

<style lang="less" scoped>
    @import url('./product.less');
</style>
