<extend name="public/base" />

<block name="title">
  <title>{$seo.title|default=$site_info.site_name.' - 游戏中心'}</title>
</block>

<block name="main">
  <script src="__STATIC__/h5wap/js/swiper.min.js"></script>
  <link href="__STATIC__/h5wap/css/swiper.min.css" rel="stylesheet">
  <style>
    .topperBg {
      position: relative;
      top: -56px;
      height: 0px;
      width: 100%;
    }
    .topperBg img {
      opacity: 0;
      -webkit-transition: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      transition: opacity 0.2s;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 180px;
      object-fit: cover;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -ms-filter: blur(15px);
      filter: blur(15px);
    }
    .topperBg .active {
      opacity: 1;
    }

    .swiper-container {
      width:100%;
      -webkit-perspective:1200px;
      -moz-perspective:1200px;
      -ms-perspective:1200px;
      perspective:1200px
    }
    .swiper-wrapper {
      margin: 5px 0 10px 0;
    }
    .swiper-slide {
      width:90%;
      -webkit-transform-style:preserve-3d;
      -moz-transform-style:preserve-3d;
      -ms-transform-style:preserve-3d;
      transform-style:preserve-3d
    }
    .swiper-slide .bannerBox_list__img {
      width:90%;
      height: 114px;
      margin:0 auto;
      display:block;
      object-fit: cover;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
    .flex_a{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .flex_a img{
      margin-right: 4px;
    }
  </style>
  <div class="wrap">
    <div class="home">
      <div id="homeCeil" class="shadowScroll huo_scroll__outer">
        <div class="homeContent huo_scroll__inner">

          <div class="homeBar">
            <div class="homeBar_left">
              <a href="/wap/user/index">
                <img class="homeBar_avatar" src="{$userinfo.avatar|default='__STATIC__/h5wap/images/mine_touxiang.png'}" alt="">
              </a>

              <div class="homeBar_gold">
<!--                <img src="__STATIC__/h5wap/images/picture_jifenjinbi.png" alt="">-->
                <if condition="$userinfo.mem_id gt 0">
<!--                <span>{$userinfo.my_integral}</span>-->
                  <span style="padding-left: 8px">{$userinfo.nickname}</span>
                <else/>
                <span onclick="HuoUtils.switchTemplate('login')">去登录</span>
                </if>
              </div>
            </div>
            <div class="homeBar_right">
              <!--<a href="/wap/app/down" class="homeBar_down">
                <img class="homeBar_down" src="__STATIC__/h5wap/images/icon_APPxiazai.png" alt="">
              </a>-->
              <a href="{$site_info.wap_app_down_url}" class="homeBar_follow">APP下载</a>
              <img style="display: none;" class="homeBar_share" src="__STATIC__/h5wap/images/icon_fenxiang.png" alt="">
              <a href="{$site_info.wx_follow_graphic_url}" class="homeBar_follow">关注</a>
            </div>
          </div>


          <div class="topperBg">
            <volist name="$hometopper.list" id="list">
              <img class="bannerBox_list__img" src="{$list.image}" />
            </volist>
          </div>

          <if condition="!empty($hometopper)">
            <div class="banner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <volist name="$hometopper.list" id="list">
                    <if condition="$list.type_name eq 'url'">
                      <a class="swiper-slide" href="{$list.url}">
                        <img class="bannerBox_list__img" src="{$list.image}" />
                      </a>
                    <elseif condition="$list.type_name eq 'game'">
                      <a class="swiper-slide" href="javascript:;" gameid="{$list.target_id}">
                        <img class="bannerBox_list__img" src="{$list.image}" />
                      </a>
                    <else/>
                      <a class="swiper-slide" href="/wap/gift/detail?gift_id={$list.target_id}">
                        <img class="bannerBox_list__img" src="{$list.image}" />
                      </a>
                    </if>
                  </volist>
                </div>
              </div>
              <!--<ul class="bannerBox clearfix">-->
                <!--<volist name="$hometopper.list" id="list">-->
                  <!--<li class="bannerBox_list">-->
                    <!--<if condition="$list.type_name eq 'url'">-->
                      <!--<a href="{$list.url}"><img class="bannerBox_list__img" src="{$list.image}" /></a>-->
                    <!--<elseif condition="$list.type_name eq 'game'">-->
                      <!--<a href="javascript:;" gameid="{$list.target_id}"><img class="bannerBox_list__img" src="{$list.image}" /></a>-->
                    <!--<else/>-->
                      <!--<a href="/wap/gift/detail?gift_id={$list.target_id}"><img class="bannerBox_list__img" src="{$list.image}" /></a>-->
                    <!--</if>-->
                  <!--</li>-->
                <!--</volist>-->
              <!--</ul>-->
            </div>
          </if>
          <if condition="!empty($playedgame)">
            <div class="recentPlay">
              <div class="recentPlay_tip recentGame_tip">玩<br>过</div>
              <div class="yincangScroll">
                <div class="recentPlay_main huo_drag__outer">
                  <ul class="recentGame huo_drag__inner">
                    <volist name="$playedgame.list" id="list">
                      <li class="recentGame_item" gameid="{$list.game_id}">
                        <img class="recentGame_item__img" src="{$list.icon}" />
                        <p class="recentGame_item__text">{$list.gamename}</p>
                        <a stopPropagation href="{:H5MSITE}/sdk.php/game?game_id={$list.game_id}&agent_id={$agent_id}" class="recentGame_item__btn">开玩</a>
                      </li>
                    </volist>
                  </ul>
                </div>
              </div>
            </div>
          </if>
          <div class="hotTab">
            <ul class="hotTabBox">
              <li class="hotTabBox_item tabBox_selected">热门<i class="hotTabBox_item__bar"></i></li>
              <li class="hotTabBox_item">新上架<i class="hotTabBox_item__bar"></i></li>
<!--              <li class="hotTabBox_item">活动<i class="hotTabBox_item__bar"></i></li>-->
              <li class="hotTabBox_item">新开服<i class="hotTabBox_item__bar "></i></li>
            </ul>
          </div>
          <!-- 热门123 -->
          <div class="game_content hotdoor">
            <ul id="hotGame" class="hotGame" huoScrollType="hotGame" huoScrollCount="{$hotgame.count}" huoScrollPage="1">
              <volist name="$hotgame.list" id="list">
                <li class="hotGame_item" gameid="{$list.game_id}">
                  <div class="hotGame_item__div1">
                    <img src="{$list.icon}"/>
                  </div>
                  <div class="hotGame_item__div2">
                    <p class="coolPao">{$list.gamename}&ensp;<if condition="!empty($list.tags)"><span class="dujia">{$list.tags}</span></if><if condition="$list.gift_cnt gt 0"><span class="libao">礼包</span></if>
                    </p>
                    <p class="openedText">{$list.oneword}</p>
                  </div>
                  <div class="hotGame_item__div3" stopPropagation>
                    <a href="{$agent_site}/sdk.php/game?game_id={$list.game_id}&agent_id={$agent_id}">
                      <span class="start"></span>
                    </a>
                  </div>
                </li>
              </volist>
            </ul>
            <div class="noMore huo_scroll__more<if condition='$hotgame.count gt 10'> hidden</if>">
              <span class="noMore_text">没有更多了</span>
            </div>
            <div class="noMore" style="border-top: 0 none;margin-top: 0;">

              <p class="noMore_p3" style="padding-bottom: 4px;text-decoration: none">今鸿（杭州）科技有限公司<!--<span style="margin-left: 16px">电话：</span>--></p>
              <p class="noMore_p3" style="padding-bottom: 4px;text-decoration: none">地址：浙江省杭州市余杭区五常街道飞鸟客商务中心2幢708A室</p>
              <!--<p class="noMore_p1" style="margin-bottom: 6px">
                <a class="noMore_p1__span1 flex_a" href="#" target="_blank">
                  <img src="__STATIC__/h5wap/images/wenwangwen.png" alt="">
                  {$site_info.certificate_number}
                </a>
              </p>-->

              <p style="margin-bottom: 6px">
                <a style="margin-left: 0" class="noMore_p1__span2 flex_a" href="http://beian.miit.gov.cn/" target="_blank">
                  <img src="__STATIC__/h5wap/images/beian.png" alt="">
                    浙ICP备20018175号-1
                </a>
              </p>

              <!--<p style="margin-bottom: 6px;margin-left: 20px">
                <a style="margin-left: 0" class="noMore_p1__span2 flex_a" href="http://beian.miit.gov.cn/" target="_blank">
                  <img src="__STATIC__/h5wap/images/gonan.png" alt="">
                  粤公网安备 44030502005393号
                </a>
              </p>-->
              <!--<p class="noMore_p3">{$site_info.copyright}</p>
              <p class="noMore_p1" style="text-align: left">
                <a class="noMore_p1__span1 flex_a" href="/wap/richtext/certificate_number" target="_blank">
                  <img src="__STATIC__/h5wap/images/wenwangwen.png" alt="">
                  {$site_info.certificate_number}
                </a>
              </p>
              <p style="text-align: left">
                <a style="margin-left: 0" class="noMore_p1__span2 flex_a" href="http://beian.miit.gov.cn/" target="_blank">
                  <img src="__STATIC__/h5wap/images/gonan.png" alt="">
                  {$site_info.record_number}
                </a>
              </p>-->



              <!--<p class="noMore_p3">{$site_info.copyright}</p>

              <p class="noMore_p1">{$site_info.copyright}</p>
              <p class="noMore_p1">地址：海南省澄迈县老城镇高新技术产业示范区海南生态软件园孵化楼四楼6001&nbsp;&nbsp;电话：</p>
-->
            </div>
          </div>
          <!-- 新上架456 -->
          <div class="game_content xinshangjia">
            <ul id="newGame" class="newGame" huoScrollType="newGame">
            </ul>
            <div class="noMore huo_scroll__more hidden">
              <span class="noMore_text">没有更多了</span>
            </div>
          </div>
          <!-- 活动 -->
          <!--<div class="game_content activity">
            <div class="activityTab">
              <p class="activityTab_item">
                <span class="activityTab_item__list">活动</span>
                <span class="activityTab_item__list activitySelected">有奖</span>
                <span class="activityTab_item__list">公告</span>
              </p>
            </div>
            <div class="activityContent">
              <ul class="activity_content huodong" id="newsActive" huoScrollType="newsActive">
              </ul>
              <ul class="activity_content youjiang" id="newsAward" huoScrollType="newsAward">
              </ul>
              <ul class="activity_content notice" id="newsNotice" huoScrollType="newsNotice">
              </ul>
              <div class="noMore huo_scroll__more hidden">
                <span class="noMore_text">没有更多了</span>
              </div>
            </div>
          </div>-->
          <!-- 新开服 -->
          <div class="game_content newOpenService">
              <div class="xinfuTab">
                <p class="xinfuTab_item">
                  <span class="xinfuTab_item__list openedService">已开新服</span>
                  <span class="xinfuTab_item__list newServiceTip activitySelected">新服预告</span>
                </p>
              </div>
              <div class="runCool">
                <ul class="runCoolKid opened" id="serverOpened" huoScrollType="serverOpened">
                </ul>
                <ul class="runCoolKid noOpened" id="serverOpen" huoScrollType="serverOpen">
                </ul>
                <div class="noMore huo_scroll__more hidden">
                  <span class="noMore_text">没有更多了</span>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div class="footer">
        <include file="public/navbar" index="0" />
      </div>
    </div>

    <div id="gameDetail" class="gameDetails">
    </div>

    <div class="orderSucess">
      <div class="orderSucess_box">
        <p class="orderSucess_box__p1">恭喜，预约成功！</p>
        <p class="orderSucess_box__p2">关闭</p>
      </div>
    </div>

    <div class="getSucess">
      <div class="getSucessBox">
        <p class="getSucessBox_p1">领取提示</p>
        <p class="getSucessBox_p2">兑换码：<span class="getSucess_p2__code"></span></p>
        <p class="getSucessBox_p3">复制兑换码，去游戏中使用</p>
        <p class="getSucessBox_p4" onclick="">复制</p>
      </div>
    </div>
    <div class="fuzhiSucess">复制成功</div>
  </div>
</block>

<block name="otherScript">
  <script>
    $(function () {
      // 获取游戏列表
      fetchGameList({
        is_new: 2
      }, 'newGame')

      fetchGameServer({
        server_type: 3
      }, 'serverOpened')

      fetchGameServer({
        server_type: 2
      }, 'serverOpen')

      // 活动
      fetchNewsList({
        type: 2
      }, 'newsActive')

      // 公告
      fetchNewsList({
        type: 4
      }, 'newsNotice')

      // 有奖
      fetchNewsList({
        type: 5
      }, 'newsAward')

      recentInit()

      huoScroll()
      huoDrag()

      $('.topperBg img').eq(0).addClass('active')
      if (/micromessenger/i.test(navigator.userAgent)) {
        $('.homeBar_share').show()
      }
      $('.homeBar_share').on('click', function () {
        $('.wxShare').show()
      })

      var mySwiper = new Swiper(".swiper-container", {
        autoplay : 3000,
        autoplayDisableOnInteraction: false,
        slidesPerView: "auto",
        centeredSlides: !0,
        watchSlidesProgress: !0,
        pagination: ".swiper-pagination",
        paginationClickable: !0,
        loop: true,
        loopedSlides: 3,
        paginationBulletRender: function(a, b) {

        },
        onSlideChangeEnd: function(swiper){
          $('.topperBg img').eq(swiper.activeIndex).addClass('active').siblings().removeClass('active')
        },
        onProgress: function(a) {
          var b, c, d;
          for (b = 0; b < a.slides.length; b++) c = a.slides[b],
            d = c.progress,
            scale = 1 - Math.min(Math.abs(.2 * d), 1),
            es = c.style,
            es.opacity = 1 - Math.min(Math.abs(d / 2), 1),
            es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0," + -Math.abs(150 * d) + "px)"
        },
        onSetTransition: function(a, b) {
          for (var c = 0; c < a.slides.length; c++) es = a.slides[c].style,
            es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = b + "ms"
        }
      })

    })
  </script>
</block>