<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>
                        <p>{{item.text}}</p>
                        <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',
            qrCodeText: '扫一扫下载游戏',
            title: '三国乱世霸王',
            text: '《三国乱世霸王》是一款以三国乱世为背景的战争策略类手游，游戏特有的战斗策略模式，摒弃了纯数据比拼，让战斗变得更加刺激有趣。玩家可以在游 戏中收集诸多三国名将进行培养，并率领麾下大军参与国战，攻城略地，在乱世中建立属于自己的势力。名将养成、实时国战、经典战役、争夺皇位 ，精彩尽在三国乱世霸王！',
            right: 'cp_1'
          },
          {
            leftTop: 'xy_logo',
            qrCode: 'wk_code',
            qrCodeText: '扫一扫下载游戏',
            title: '悟空快跑',
            text: '【经典西游 梦幻来袭】西游正传，大圣归来，经典西游回合制，单机挂机玩法！上线即送VIP，平民也能玩到爽；乱斗西游，在线抓宠，炼妖神宠，满技能吸血鬼，大圣觉醒，狂暴西游，尽在《悟空快跑》',
            right: 'cp_2'
          },
          {
            leftTop: 'fq_logo',
            qrCode: 'wx_qr_code',
            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>
