<style lang="sass">
    @import "./sass/game.scss";
</style>

<template>
    <div class="page-game">
        <!-- <nav>
            <ul>
                <li class="current">推荐</li>
                <li>手机游戏</li>
                <li><a data-url="http://pc.duowan.cn/?from=dwbbsapp">电脑游戏</a></li>
                <li>多玩特权</li>
            </ul>
        </nav> -->
        <div class="carousel">
            <v-touch  v-on:swipeleft="bPrev()" v-on:swiperight="bNext()">
                <ul>
                    <li v-for="(item,index) in bannerList"
                        :key="index"
                        :class="getClass(index)"
                        >
                        <a  :data-url="item.link">
                            <img :src="item.img" alt="">
                        </a>
                    </li>
                
                </ul>
            </v-touch>
            
            <h3 v-for="(item,index) in bannerList"
                :key="index"
                :class="getClass(index)"
                >
                {{item.title}}
            </h3>
        </div>  
        <div class="rank">
            <ul>
                <li>
                    <img src="//img.dwstatic.com/lt/app/reyou.png" alt="">
                    <a data-url="http://www.duowan.com/bbsapp/rank/hot/" data-client="http://www.duowan.com/bbsapp/rank/hot/" >
                        
                    </a>
                </li>
                <li>
                    <img src="//img.dwstatic.com/lt/app/xinyou.png" alt="">
                    <a data-url="http://www.duowan.com/bbsapp/rank/new/" data-client="http://www.duowan.com/bbsapp/rank/new/">
                        
                    </a>
                </li>
                <li>
                    <img src="//img.dwstatic.com/lt/app/haiwai.png" alt="">
                    <a data-url="http://www.duowan.com/bbsapp/rank/sea/" data-client="http://www.duowan.com/bbsapp/rank/sea/">
                        
                    </a>
                </li>
                                
            </ul>
        </div>
        <div class="mod newgame">
            <h3 class="mod-title">
                <div class="content">
                    <i class="new-icon"></i>
                    最新开测
                </div>
                <a data-url="http://newgame.duowan.cn/ku/#create_time" data-client="http://newgame.duowan.cn/ku/#create_time">更多<i></i></a>
            </h3>
            <div class="tb-wrap">
                <table>
                <tr>
                    <td v-for="(item,index) in newGameList"
                        :key="index">
                        <a :data-url="item.link+'?from=dwbbsapp'" :data-client="item.link+'?from=dwbbsapp'">
                            <img :src="item.img" alt="">
                            <p>{{item.title}}</p>
                        </a>
                    </td>
                    
                </tr>
            </table>
            </div>
            
            
        </div>
        <div class="mod mobgame">
            <h3 class="mod-title">
                <div class="content">
                    <i class="mob-icon"></i>
                    手游推荐
                </div>
                <a data-url="//sy.duowan.cn/list-new-1-2.html" data-client="//sy.duowan.cn/list-new-1-2.html">更多<i></i></a>
            </h3>
            <div class="tb-wrap">
                <table>
                <tr>
                    <td v-for="(item, index) in syList"
                        :key="index">
                        <a :data-url="item.h5_url.replace(/\/detail/,'')"  :data-client="item.h5_url.replace(/\/detail/,'')">
                            <img :src="item.game_logo_img" :alt="item.game_name">
                            <p>{{item.game_name}}</p>
                            <em>{{item.type_name}}</em>
                        </a>
                    </td>
                    
                </tr>
            </table>
            </div>
            
            
        </div>

        <div class="ka">
            <h3 class="mod-title">
                <div class="content">
                    <i class="ka-icon"></i>
                    特权礼包
                </div>
                <a data-url="//mka.duowan.com/gift/list-3-0-0-0-1.html" data-client="//mka.duowan.com/gift/list-3-0-0-0-1.html">更多<i></i></a>
            </h3>
            <ul>
                <li v-for="(item,index) in kaList"
                    :key="index">
                    <a :data-url="`https://mka.duowan.com/card_${item.gift_id}.html`" :data-client="`https://mka.duowan.com/card_${item.gift_id}.html`">
                        <p class="content">[{{item.platform_name}}]{{item.gift_name}}</p>
                        <div class="status">{{item.state_name}}<i></i></div>
                    </a>
                </li>
                
            </ul>
        </div>
          
        
    </div>
</template>

<script>
import game from "./js/game.js";
export default game;
</script>

