<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8" >
        <link rel="shortcut icon" href="">
        <title>{$data.relation_game_name}</title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link href="__CSS__/swiper-4.3.3.min.css" rel="stylesheet">
        <link href="__CSS__/game.css" rel="stylesheet">
        
        <script src="__JS__/jquery.min.js"></script>
        <script src="__JS__/swiper-4.3.3.min.js"></script>
        <style>
        .swiper-container {
            width: 100%;
            
        } 
        .swiper-slide img{
        height:100%;width:100%;
        }
				.icontable {display:table;width:100%;height:100%;background:#ededed;color:#999;}
				.icontable .iconcell{display:table-cell;vertical-align:middle;text-align:center;}
				.swiper-slide .icontable {width:80%;}
				.main .top .icontable {border-radius:16px;}
				.main .top .rebate .rebatetxt {text-align:center;}
				.main .top .game {width:70%;}
				.main .top .game .title .name {display:inline-block;width:auto;max-width:74%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
				.main .top .game .title img {vertical-align:top;margin-top:8px;}
				.main .bottom {margin-top:4px;}
				@media screen and (max-width:640px) {
					.main .top .game {width:60%;}
					.main .top .game .title{white-space:nowrap;}
					.main .top .game .title .name {font-size:18px;margin-right:3px;}
					.main .top .game {font-size:13px;}
					.main .top .game .voic {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
					.main .top .rebate .rebatetxt {font-size:12px;left:0;bottom:8px;text-align:center;}
					.main .top .game .title .name {max-width:60%;}
					.main .top .icon{margin-right:15px;}
				}
				@media screen and (max-width:400px) {
					.main .top .game {width:55%;}
					.main .top .game .title .name {font-size:16px;}
					.main .top .game {font-size:12px;}
					.main .top .game .title .name {max-width:56%;}
					.main .top .icon{margin-right:10px;}
				}
				.download a {position:relative;max-height:98.97px;display:block;width:100%;height:15vw;border:1px solid #D8F4FF;background:#E6F8FF;border-radius:12px;overflow:hidden;}
        .download .text {height:100%;font-size:15px;text-indent:18%;color:#18B1EA;display:table;width:100%;}
				.download .text span {display:table-cell;width:100%;height:100%;vertical-align:middle;}
				
				.swiper-wrapper .icontable {min-height:200px;}
				</style>
				<lt name="data.ratio" value="0">
				<style>
				.main .top .game {width:83%;}
				@media screen and (max-width:640px) {
					.main .top .game {width:72%;}
				}
				@media screen and (max-width:400px) {
					.main .top .game {width:68%;}
				}
				</style>
				</lt>
    </head>
    <body>
        <div class="header">
            <div class="inner">
                <h1 class="title">{$data.relation_game_name}</h1>
            </div>    
        </div>    
        <div class="main">
            <div class="inner">
                <div class="top clearfix">
                    <div class="icon">
											<notempty name='data.icon'>
											<img src="{$data['icon']}" style="width: 80px;height: 80px">
											<else />
											<span class="icontable"><span class="iconcell">{:C('APP_NAME')}</span></span>
											</notempty>
										</div>
                    <div class="game">
                        <h4 class="title"><span class="name">{$data.relation_game_name}</span>
                            <for start="0" end="$data.game_score">
                            <img src="__IMG__/star.png" ></for><notempty name="data.half"><img src="__IMG__/half.png" ></notempty>
                        </h4>
                        <div class="data"><span>{$data.game_size}</span><span style="color:#666;display:inline-block;height:12px;background:transparent;width:0;border:none;border-left:1px solid #666;vertical-align:middle;margin:-3px 3px 0;"></span><span>{$data.dow_num}人下载</span></div>
                        <p class="voic" title="{$data['features']}">{$data['features']}</p>
                    </div>
										<gt name="data.ratio" value="0">
                    <div class="rebate">
                        <img src="__IMG__/rebate.png" >
                        <span class="rebatetxt">返利{$data.ratio}%</span>
                    </div>
										</gt>
                </div>
                <div class="bottom">
                    <div class="screenshot clearfix">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
														<notempty name="data.screenshot">
																<volist name="data.screenshot" id="vo">
                                <div class="swiper-slide">
																		<notempty name="vo">
																		<if condition="is_file(ROOT_DIR . str_replace('http://'.$_SERVER['HTTP_HOST'],'',$vo))">
                                    <img src="{$vo}">
																		<else />
																		<span class="icontable"><span class="iconcell">&nbsp;</span></span>
																		</if>
																		<else />
																		<span class="icontable"><span class="iconcell">&nbsp;</span></span>
																		</notempty>
                                </div>
                                </volist>
														<else />
															<div class="swiper-slide">
																<span class="icontable"><span class="iconcell">&nbsp;</span></span>
															</div>
															<div class="swiper-slide">
																<span class="icontable"><span class="iconcell">&nbsp;</span></span>
															</div>
														</notempty>
                            </div>
                        </div>
                    </div>
                    <div class="description">
                        <h4 class="title">游戏介绍</h4>
                        <p class="content">
                            {$data.introduction}
                        </p>
                    </div>
                    <div class="download">
												<if condition="get_devices_type() eq 1">
                        <a href="{:U('Down/android_app_down')}">
                        <else/>
                          <a href="itms-services://?action=download-manifest&url={$ios.plist_url}" >
                        </if>
												<?php $down = get_cover(C('WAP_APP_ICON'),'path'); ?>
												
												<img src="{$down}" style="width:11%;height:63%;top:17%;left:4.4%;border-radius:7px;position:absolute;" >
                        <span class="text"><span>{:C('APP_DOWNLOAD_DESCRIBE')}</span></span>
												<div class="download2">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
           
        </div>
				
				<script src="__STATIC__/layer/layer.js"></script>
        <script>
            $(function() { 
						if(parseInt($(window).width())<500) {
              var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal',
                loop: true,
								spaceBetween:15,
                slidesPerView:2,   //页面分组显示,这里显示为3组
              })  
						
						} else {
							var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal',
                loop: true,
								spaceBetween:20,
                slidesPerView:3,   //页面分组显示,这里显示为3组
              })  
						}
							
            });
        </script>
    </body>
</html>