<template>
    <div class="raiders">
        <default-navbar :navbarList="navbarList">
            <template slot="bg-content">
                <div class="bg-content">
                    <h3>游戏攻略 <span>RAIDERS</span></h3>
                </div>
            </template>
        </default-navbar>
        <div class="raiders-content">
            <div class="raiders-content-wrapper">
                <div class="raiders-item"
                     v-for="item in raidersList"
                     @click="handelClickItem(item.url)"
                >
                    <div class="item-top"
                         :style="{'background-image': 'url(https://file.funcheergame.com/office/image/raiders/'+item.top+'.png)'}"
                    >

                    </div>
                    <div class="item-mid">

                        <el-tooltip class="item"
                                    effect="dark"
                                    :content="item.title"
                                    placement="top-start">
                            <div class="title">
                                {{item.title}}
                            </div>
                        </el-tooltip>


                        <div class="introduction" v-html="item.introduction">

                        </div>
                    </div>
                    <div class="item-bottom">
                        <div class="item-text">查看详情</div>
                        <i class="iconfont iconiconfontjiantou"
                           style="color: #c4004f; font-size: 3px; display: block"
                        ></i>
                    </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: 'raiders',
    data() {
      return {
        navbarList: [],
        raidersList:[
          {
            top:'yx_01',
            title:'【三国乱世霸王】必读攻略',
            url:'https://mp.weixin.qq.com/s/I6ChFfyyXSqaJuu8l0SI-w',
            introduction:'牢记：双倍事件循环顺序:<br/>试炼——剿匪——府库——远征'
          },
          {
            top:'yx_02',
            title:'【三国乱世霸王】玩家攻略之子嗣副本技能攻略',
            url:'https://mp.weixin.qq.com/s/Ika53oWMqp1fzyZroAfC9A',
            introduction:'三国乱世霸王子嗣技能是十分重要的子嗣争斗的凭证之一，大家都知道子嗣技能的选择对于玩家PK和推关卡都是有着不同的效果。有些技能PK好用，但是却不适合推关卡，现在就为大家带来子嗣推关比较强势的技能。'
          },

          {
            top:'yx_03',
            title:'【三国乱世霸王】风华绝代-小乔介绍',
            url:'https://mp.weixin.qq.com/s/LYBdMFgeGEqSEk_JFOcFLw',
            introduction:'十二资质武将<br/>三国美女-小乔'
          },
          {
            top:'yx_04',
            title:'【三国乱世霸王】熊虎之将-张飞介绍',
            url:'https://mp.weixin.qq.com/s/pbTEEOhWhhAzFZBi3vArIw',
            introduction:'十二资质武将<br/>万军不敌一夫勇-无双·张飞'
          }
        ]
      }
    },
    components: {
      DefaultNavbar,
      PageFooter
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.navbarList.push(...asyncRouterMap.filter(f => !f.meta.hidden))
      },
      handelClickItem(url) {
        window.open(url)
      }
    }
  }
</script>

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