<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>{:C(APP_NAME)}密保</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/icon.ico" type="image/x-icon" /> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="__CSS__/swiper.min.css"> <link rel="stylesheet" href="__CSS__/animate.min.css"> <!-- Demo styles --> <style> html, body { position: relative; height: 100%; margin:0; padding:0; font: 16px/1.5 'XinGothic-SinaWeibo', 'Microsoft Yahei', 'helvetica', 'arial'; } .swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; position:relative; /* Center slide text vertically */ -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; line-height:0; } .p1{ position:absolute; left:50%; top:50%; margin-left:-683px; margin-top:-384px; } .ani-wrap{ position:absolute; left:50%; top:42%; margin-left:-435px; margin-top:-207px; width:870px; height:414px; } .ani-wrap img{ width: 40%; } .next-icon{ position:absolute; bottom:20px; left:50%; margin-left:-50px; width:100px; height:60px; opacity:0.5; -moz-opacity:0.5; background:url(__IMG__/next.png) no-repeat center center; animation: next 0.5s ease 0s infinite alternate; -moz-animation: next 0.5s ease 0s infinite alternate; /* Firefox */ -webkit-animation: next 0.5s ease 0s infinite alternate; /* Safari 和 Chrome */ -o-animation: next 0.5s ease 0s infinite alternate; /* Opera */ } .mb01{ width:200px; margin:0 auto;} .mb01 .mb01_logo{ width:70%; margin:0 auto; margin-top:50%;} .mb01 .mb01_name{ width:100%; margin:0 auto; margin-top:20%;} .s0_btn { width: 414px; height: 80px; }.s0_btn a { border: 1px solid #14a7f4; border-radius: 6px; text-align: center; line-height: 40px; height: 40px; width: 200px; display:block; font-size: 20px; background-color: #14a7f4; color: #fff; text-decoration: none; margin-top:20%; } .s0_text { font-size: 13px; color: #8d939e; width: 300px; margin: 0 auto; height: 30px; text-align: left; } .s0_text font{ color: #14a7f4; font-style:normal; } .toptext{ margin-bottom: 40px;} .toptext h3{ color:#5C5C5C; font-weight:normal; font-size:30px;margin-bottom: 40px;} .toptext font{ color:#5C5C5C; font-size:16px;} .swiper-slide:last-child .next-icon{ display:none; } </style> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-color:#FBFBFB"> <div class="mb01"> <img class="mb01_logo" src="__IMG__/logom.png" /> <img class="mb01_name" src="__IMG__/app_name.png"> <div class="s0_btn"> <a href="{$url}">立即下载</a> </div> <div class="s0_text">支持<font>ios6.0</font>及<font>安卓2.3</font>以上手机系统</div> </div> <div class="next-icon" ></div> </div> <div class="swiper-slide" style="background:url(__IMG__/p2_bg.png) no-repeat center center #ffdb2b;"> <div class="ani-wrap ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0s" > <div class="toptext"> <h3>扫一扫登录</h3> <font>极速登录,方便快捷</font> </div> <img src="__IMG__/sys.png" /> </div> <div class="next-icon" ></div> </div> <div class="swiper-slide" style="background:url(__IMG__/p3_bg.png) no-repeat center center #bb9dff;"> <div class="ani-wrap ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0s" > <div class="toptext"> <h3 style="color:#fff;">支持多帐号</h3> <font style="color:#fff;">操作简单,随心切换</font> </div> <img src="__IMG__/dzh.png" /> </div> <div class="next-icon" ></div> </div> <div class="swiper-slide" style="background:url(__IMG__/p4_bg.png) no-repeat center center #75cdde;"> <div class="ani-wrap ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0s" > <div class="toptext"> <h3 style="color:#fff;">游戏登录保护</h3> <font style="color:#fff;">一键开启,安全无忧</font> </div> <img src="__IMG__/aq.png" style="width:auto;" /> </div> <div class="next-icon" ></div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!-- Swiper JS --> <script src="__JS__/jquery.min.js"></script> <script src="__JS__/swiper.min.js"></script> <script src="__JS__/swiper.animate1.0.2.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', direction: 'vertical', slidesPerView: 1, speed:1000, paginationClickable: true, spaceBetween: 0, mousewheelControl: true, watchSlidesProgress: true, onInit: function(swiper) { swiper.myactive = 0; swiperAnimateCache(swiper); //隐藏动画元素 swiperAnimate(swiper); //初始化完成开始动画 },onSlideChangeStart: function(swiper){ if(swiper.previousIndex > swiper.activeIndex){ $(".ani-wrap").eq(swiper.activeIndex-1).attr("swiper-animate-effect","fadeInUp"); }else{ $(".ani-wrap").eq(swiper.activeIndex-1).attr("swiper-animate-effect","fadeInDown"); } swiperAnimate(swiper); } }); </script> </body> </html>