jinjidexuezha-suotuo_game_front
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"/>
    <title>百草游戏平台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="mob/css/style.css" rel="stylesheet" media="screen">
    <link href="mob/css/common.css" rel="stylesheet" media="screen">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">
</head>
<body>
<div id="app">
    <!--logo，搜索顶部-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="logo-search">
            <a href="index.html"><img src="img/comp/logo.jpg" alt="logo" class="logo"></a>
            <div class="search">
                <input type="search" class="search-input">
                <i class="fa fa-search"  @click="logo_search()"></i>
            </div>
        </div>
    </nav>
    <div class="main">
        <!-- 导航栏开始 -->
        <div class="swiper-container" style="margin-top: 5px">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="swiper in swiperList">
                    <a :href="'game_detail.html?gameId='+swiper.gameId+''">
                        <img :src="swiper.swiperPic" class="swiper-lazy"/>
                        <div class="swiper-title">
                            {{swiper.title}}
                        </div>
                    </a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
        </div>
        <!--我玩过的游戏-->
        <div v-show="historys.length!=0" class="box" id="playedGame">
            <div class="over">
                <img class="over-game" src="img/comp/手柄.png" alt="">
                <span class="play-title">我玩过的游戏</span>
            </div>
            <div class="gameSlide">
                <ul class="gamelist" id="playGameList">
                    <li v-for="history in historys">
                        <a :href="'game_detail.html?gameId='+history.gameId+''">
                            <img :src="history.gameIcon" :alt="history.gameName">
                            <h3>{{history.gameName}}</h3>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
        <!--中间水平线-->
        <hr class="hr-1px" />
        <!--页游专区-->
        <div class="webpage-game">
            <div class="game-title">
                <img class="web-game" src="img/comp/页游.png" alt="">
                <span class="title">热游专区</span>
                <span class="more" @click="more_game()">更多</span>
            </div>
            <div class="game-content">
                <div class="game-text">
                    <a href="game_detail.html?gameId=39">
                    <img src="img/category/消除类.png" alt="页游图片" class="game-img">
                    <span class="content-text">萌萌点点消</span>
                    <button class="game-enter">进入</button>
                    </a>
                </div>
                <div class="game-text">
                    <a href="game_detail.html?gameId=54">
                    <img src="img/hot/盲走探险.png" alt="页游图片" class="game-img">
                    <span class="content-text">盲走探险</span>
                    <button class="game-enter">进入</button>
                    </a>
                </div>
                <div class="game-text">
                    <a href="game_detail.html?gameId=25">
                    <img src="img/category/敏捷类.png" alt="页游图片" class="game-img">
                    <span class="content-text">坚持住别死</span>
                    <button class="game-enter">进入</button>
                    </a>
                </div>
                <div class="game-text">
                    <a href="game_detail.html?gameId=55">
                    <img src="img/hot/起飞小白.png" alt="页游图片" class="game-img">
                    <span class="content-text">起飞小白</span>
                    <button class="game-enter">进入</button>
                    </a>
                </div>
            </div>
        </div>
        <!--热门，新游-->
        <div class="hot-new">
            <div class="jump">
                <button class="jump-hot" @click="changeHot()">
                    <i class="fa fa-free-code-camp"></i>
                    <span class="hot">热门</span>
                </button>
                <button class="jump-new" @click="changeNewdis()">
                    <i class="fa fa-map-o"></i>
                    <span class="new">新游</span>
                </button>
                <button class="jump-recomm" @click="changeRec()">
                    <i class="fa fa-thumbs-up"></i>
                    <span class="new">推荐</span>
                </button>
            </div>
            <div class="box" id="hot">
                <ul class="gamelist">
                    <li v-for="hot in hots">
                        <a @click="hotPlay(hot.gameId)">
                            <img :src="hot.gameIcon" :alt="hot.gameName">
                            <h3>{{hot.gameName}}</h3>
                        </a>
                    </li>
                </ul>
                <div v-if="hotCount < totalList.hotTotal" class="load-more" @click="loadMoreHot()">点击加载更多</div>
                <div v-else class="load-more">已到底</div>
            </div>
            <div class="box" id="newdis">
                <ul class="gamelist">
                    <li v-for="news in newList">
                        <a @click="newPlay(news.gameId)">
                            <img :src="news.gameIcon" :alt="news.gameName">
                            <h3>{{news.gameName}}</h3>
                        </a>
                    </li>
                </ul>
                <div v-if="newCount < totalList.newTotal" class="load-more" @click="loadMoreNew()">点击加载更多</div>
                <div v-else class="load-more">已到底</div>
            </div>
            <div class="box" id="recommend">
                <ul class="gamelist">
                    <li v-for="recommend in recommends">
                        <a @click="recommendPlay(recommend.gameId)">
                            <img :src="recommend.gameIcon" :alt="recommend.gameName">
                            <h3>{{recommend.gameName}}</h3>
                        </a>
                    </li>
                </ul>
                <div v-if="recoCount < totalList.recommendTotal" class="load-more" @click="loadMoreReco()">点击加载更多</div>
                <div v-else class="load-more">已到底</div>
            </div>
        </div>
        <!-- 导航栏开始 -->
        <!--<div class="swiper-container" style="margin-top: 5px">-->
            <!--<div class="swiper-wrapper">-->
                <!--<div class="swiper-slide" v-for="swiper in swiperList">-->
                    <!--<a :href="'game_detail.html?gameId='+swiper.gameId+''">-->
                        <!--<img :src="swiper.swiperPic" class="swiper-lazy"/>-->
                        <!--<div class="swiper-title">-->
                            <!--{{swiper.title}}-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; 如果需要分页器 &ndash;&gt;-->
            <!--&lt;!&ndash; <div class="swiper-pagination"></div> &ndash;&gt;-->
        <!--</div>-->
    </div>
    <!--底部导航-->
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <a href="#" class="footer-item">
                <i class="fa fa-gamepad active"></i>
                <h6 class="active">游戏库</h6>
            </a>
            <a href="category.html" class="footer-item">
                <i class="fa fa-list"></i>
                <h6>分类</h6>
            </a>
            <a href="shop.html" class="footer-item">
                <i class="fa fa-shopping-cart"></i>
                <h6>积分商城</h6>
            </a>
            <a href="mine.html" class="footer-item">
                <i class="fa fa-diamond"></i>
                <h6>我的</h6>
            </a>
        </div>
    </nav>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script src="mob/js/common.js"></script>
<script src="mob/js/wx_share.js"></script>
<script src="mob/js/index.js"></script>
</body>
</html>