elf
/
cf-platform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化落地页样式

Browse Source
master
chenzhi 3 years ago
parent 3171de0e34
commit a8681ff970
8 changed files with 166 additions and 35 deletions
Show Stats Download Patch File Download Diff File

18
Application/Home/Controller/HomeController.class.php
Unescape Escape View File

@ -329,24 +329,6 @@ class HomeController extends Controller
$game['relation_game_name'] = '麻雀飞青天'; $game['relation_game_name'] = '麻雀飞青天';
} }
// dd($game); // dd($game);
//测试代码->begin
$game['screenshot'] = [
'https://wmtx-platform-product.wmtxkj.com/icon/5ee83b7f7508f.png',
'https://wmtx-platform-product.wmtxkj.com/icon/5ee83b7fd0f0d.png',
'https://wmtx-platform-product.wmtxkj.com/icon/5ee83b7ed34ad.png',
'https://wmtx-platform-product.wmtxkj.com/icon/5ee83b80ba419.png',
'https://wmtx-platform-product.wmtxkj.com/icon/5ee83b804808c.png'
];
$game['download_ways'] = 2;
//
//
//
// dd($game);
//测试代码->end
$this->assign("serviceQQ", $serviceQQ); $this->assign("serviceQQ", $serviceQQ);
$this->assign('isNewIos', $isNewIos); $this->assign('isNewIos', $isNewIos);

8
Application/Home/View/default/Home/landingPage.html
Unescape Escape View File

@ -13,6 +13,7 @@
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="__JS__/getRem.js"></script> <script type="text/javascript" src="__JS__/getRem.js"></script>
<script type="text/javascript" src="__JS__/swiper.min.js"></script> <script type="text/javascript" src="__JS__/swiper.min.js"></script>
<script type="text/javascript" src="__JS__/ladingpage.js"></script>
<link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css"> <link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css">
<link rel="stylesheet" type="text/css" href="__CSS__/reset.css"> <link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
<link rel="stylesheet" type="text/css" href="__CSS__/index2.css"> <link rel="stylesheet" type="text/css" href="__CSS__/index2.css">
@ -573,7 +574,7 @@
<div> <div>
<div> <div>
<div><span>*</span>未绑定手机用户请联系客服：</div> <div><span>*</span>未绑定手机用户请联系客服：</div>
<div style="margin-left: 0.1rem;">在线客服：800871158</div> <div style="margin-left: 0.1rem;">在线客服：{$serviceQQ}</div>
</div> </div>
</div> </div>
<div> <div>
@ -735,6 +736,8 @@ background:rgba(0,0,0,0.6); z-index: 999;display: none;"></div>
</div> </div>
</div> --> </div> -->
</body> </body>
</html> </html>
<script src="__STATIC__/ios9/js/layer/layer.js?VerNo=20190923" type="text/javascript"></script> <script src="__STATIC__/ios9/js/layer/layer.js?VerNo=20190923" type="text/javascript"></script>
@ -1309,6 +1312,9 @@ function getCurUserId() {
} }
$(function(){ $(function(){
var isSafari = !is_tip_safari();
LADING.init({qq:'{$serviceQQ}',canTips:isSafari})
$('#go_confirm').click(function () { $('#go_confirm').click(function () {
var isTipSafari = is_tip_safari(); var isTipSafari = is_tip_safari();
if (isTipSafari) { if (isTipSafari) {

111
Application/Home/View/default/Home/landingPage2.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" style="background-color: #0a0a0a !important;">
<head> <head>
<meta itemprop="name" content="{$game['relation_game_name']}"/> <meta itemprop="name" content="{$game['relation_game_name']}"/>
<meta itemprop="image" content="{$game['icon']}"/> <meta itemprop="image" content="{$game['icon']}"/>
@ -9,6 +9,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<script type="text/javascript" src="__JS__/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="__JS__/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="__JS__/getRem.js"></script>
<link href="{:get_cover(C('CH_SET_ICO'),'path')}" type="image/x-icon" rel="shortcut icon"> <link href="{:get_cover(C('CH_SET_ICO'),'path')}" type="image/x-icon" rel="shortcut icon">
<title>{$game['relation_game_name']}</title> <title>{$game['relation_game_name']}</title>
<link rel="stylesheet" href="__CSS__/20180207/promition.css"> <link rel="stylesheet" href="__CSS__/20180207/promition.css">
@ -18,13 +19,14 @@
<script src="__STATIC__/vide7.4.1/js/video.min.js"></script> <script src="__STATIC__/vide7.4.1/js/video.min.js"></script>
<link href="__STATIC__/vide7.4.1/css/video-js.min.css" rel="stylesheet"> <link href="__STATIC__/vide7.4.1/css/video-js.min.css" rel="stylesheet">
<script src="__STATIC__/bg4_4.js"></script> <script src="__STATIC__/bg4_4.js"></script>
<script type="text/javascript" src="__JS__/ladingpage.js"></script>
</head> </head>
<body class="main_bg" style="background-color: #0a0a0a;height: auto;"> <body class="main_bg" style="height: auto;max-width: 580px;margin: auto;background-color: #0a0a0a;">
<style> <style>
.home-video { .home-video {
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 23.28%; top:2rem;
width: 100%; width: 100%;
} }
.home-video .video-js { .home-video .video-js {
@ -37,6 +39,41 @@
max-width:580px; max-width:580px;
} }
} }
#img2{
position: relative;
}
.act img {
width: 100%;
transform-origin: center;
-webkit-transform-origin: center;
-webkit-animation-name: shack;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
/*无限循环*/
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes shack {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg)
}
25% {
transform: rotate(20deg);
-webkit-transform: rotate(20deg)
}
50% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg)
}
75% {
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg)
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg)
}
}
</style> </style>
<input type="hidden" name="title" value="{$game['relation_game_name']}"> <input type="hidden" name="title" value="{$game['relation_game_name']}">
<input type="hidden" name="icon" value="{$game['icon']}"> <input type="hidden" name="icon" value="{$game['icon']}">
@ -54,32 +91,79 @@
<div class="h_wrap"> <div class="h_wrap">
<div id="data-2" style="position: relative;"> <div id="data-2" style="position: relative;">
<?php if (!empty($game['flooring_page_video'])):?>
<div class="home-video">
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264" poster="{$game['flooring_page_video_cover']}" data-setup='{}'>
<source src="{$game['flooring_page_video']}" type='video/mp4' />
</video>
</div>
<?php endif;?>
<volist name="game['flooring_page_imgs']" id="item" key="k"> <volist name="game['flooring_page_imgs']" id="item" key="k">
<div>
<?php if ($downloadUrl == 'https://'.$_SERVER['HTTP_HOST']) :?> <?php if ($downloadUrl == 'https://'.$_SERVER['HTTP_HOST']) :?>
<a href="#" class="no-package"><img src="{$item}" style="width: 100%;"/></a> <div class="no-package" id="img{$k}">
<?php else :?> <?php else :?>
<a href="javascript:;" class="down-link" down-link="{$downloadUrl}"><img src="{$item}" style="width: 100%;"/></a> <div class="down-link" id="img{$k}">
<?php endif ;?> <?php endif ;?>
<img src="{$item}" style="width: 100%;"/>
<if condition="($k eq 2 ) AND (!empty($game['flooring_page_video']))">
<div class="home-video">
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" poster="{$game['flooring_page_video_cover']}" data-setup='{}'>
<source src="{$game['flooring_page_video']}" type='video/mp4' />
</video>
</div>
</if>
</div> </div>
</volist> </volist>
<a href="#img2" class="act" style="position: absolute;right: .2rem;top:9rem;width: 2rem;">
<img src="__IMG__/ladingpage/jump.png" alt="" style="width: 100%;">
</a>
</div> </div>
<div class="footBox down-link" style="height: 1.4rem;background: rgba(0,0,0,.7);position: fixed;bottom: 0;z-index: 99;display: flex;padding:.14rem 0;width: 100%;align-items: center;max-width: 580px;">
<div style="height: 1.2rem;width: 1.2rem;margin-left: .23rem;">
<img src="{$game['icon']}" alt="" style="width: 100%;">
</div>
<div style="color:#fff;margin:0 .17rem;flex-grow: 1;">
<div style="font-size: .32rem;font-weight: 600;line-height: 2;margin-top: -.16rem;">{$game['relation_game_name']}</div>
<div style="font-size: .26rem;line-height: 1;width: 3.3rem;white-space: nowrap;;overflow: hidden;text-overflow:ellipsis;">{$game['features']}</div>
<div style="font-size: .18rem;">已有315935次下载</div>
</div>
<div style="height: 0.88rem;width: 2.16rem;margin-right: .23rem;border-radius: .24rem;background-color: #E2C065;background: linear-gradient(184deg, #FDF1C7,#E2C065);text-align: center;line-height: 0.88rem;font-size: .4rem;font-weight: 500;">
立即下载
</div>
</div>
<div id="downTips" down-link="{$downloadUrl}" style="height: 4.8rem;background: #fff;position: fixed;bottom: 0;z-index: 10009;max-width: 580px;border-radius: 0.24rem 0.24rem 0px 0px;width: 100%;display: none;">
<div style="padding: .48rem;">
<div style="font-size: .4rem;font-weight: 600;line-height: 2;">
安装指引
</div>
<div style="font-size: .32rem;line-height:1.8;margin-top: .25rem;">
亲爱的用户，在安装游戏时，请选择 <br/>
<span style="color: red;font-weight: 600;">“继续安装”</span>即可
</div>
<div style="width: 100%;background-color: #4DEEAB;border-radius:.48rem;height: 1rem;margin-top: .56rem;font-size: .4rem;text-align: center;line-height: 1rem;color: #fff;font-weight: 400;">
我知道了
</div>
</div>
</div>
</div> </div>
<script src="__STATIC__/layer/layer.js"></script> <script src="__STATIC__/layer/layer.js"></script>
<script src="__STATIC__/ios9/js/layer/layer.js?VerNo=20190923" type="text/javascript"></script> <script src="__STATIC__/ios9/js/layer/layer.js?VerNo=20190923" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function(){
LADING.init({qq:'{$serviceQQ}'})
})
var videoWidth = $('.video-js').width(); var videoWidth = $('.video-js').width();
$('.video-js').height(videoWidth * 0.562295082); $('.video-js').height(videoWidth * 0.562295082);
$('.down-link').on('click', function () { $('.down-link').on('click', function () {
$('#downTips').show();
})
$('#downTips').on('click', function () {
var dow_status = parseInt($('#dow_status').val()); var dow_status = parseInt($('#dow_status').val());
if (dow_status == 0) { if (dow_status == 0) {
layer.msg('该游戏已关闭下载'); layer.msg('该游戏已关闭下载');
@ -103,6 +187,7 @@
} }
} }
var downLink = $(this).attr('down-link') var downLink = $(this).attr('down-link')
$(this).hide();
location.href = downLink location.href = downLink
}); });

BIN
Public/Home/images/ladingpage/18.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
Public/Home/images/ladingpage/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 502 B

BIN
Public/Home/images/ladingpage/jump.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
Public/Home/images/ladingpage/serve.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

58
Public/Home/js/ladingpage.js
Unescape Escape View File

@ -0,0 +1,58 @@
(function () {
var self = LADING = {
config:{
imgpath:"/Public/Home/images/ladingpage/",
qq:'',
canTips:true
},
init : function(config){
self.config = Object.assign(self.config,config)
self.leftTipsShow();
if(self.config.canTips){
self.leftTipsEvent();
}
},
leftTipsShow:function(){
var leftTipsTmp = ''+
'<div style="position: fixed;bottom: 20%;margin-left: .1rem;line-height: 0;z-index: 99;">'+
'<div class="agewind" style="width: 1rem;height: auto;">'+
'<img src="'+self.config.imgpath+'18.png" alt="" style="width:100%;">'+
'</div>'+
'<div class="servewind" style="width: 1rem;height: auto;">'+
'<img src="'+self.config.imgpath+'serve.png" alt="" style="width:100%;">'+
'</div>'+
'</div>';
var ageTipsTmp= '<div class="ageTipsMb" style="display:none;">'+
'<div style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background:rgba(0,0,0,0.6); z-index: 999;">'+
'<div style="width: 5.24rem;height: auto;padding: .2rem;"> '+
'<div style="width: 100%;height: .72rem;background-color: #2687FF;border-radius: .16rem .16rem 0 0;display: flex;justify-content:flex-end;align-items: center;">'+
'<img class="colseAgeTip" src="'+self.config.imgpath+'close.png" style="width: .26rem;margin-right:.2rem">'+
'</div>'+
'<div style="height: auto;padding: .1rem .23rem .33rem;background-color: #fff;border-radius:0 0 .16rem .16rem;">'+
'<div style="font-size: .28rem;color: #343434;">本平台网络游戏适合18周岁以上用户使用，本平台网络游戏用户实名认证系统符合国家防沉迷实名认证要求，规则说明如下:</div>'+
'<div style="font-size: .22rem;color: #343434;margin-top: .23rem;">1、新用户注册必须强制实名认证且满18周岁；<br/>2、未经实名注册的用户，将无法进入游戏；<br/>3、已实名认证且满18周岁的用户可正常游戏。</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
$("body").append(leftTipsTmp);
$("body").append(ageTipsTmp);
},
leftTipsEvent:function(){
$(".servewind").on("click",function(){
window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin='+self.config.qq+'&version=1&src_type=web&web_src=oicqzone.com';
})
$(".agewind").on("click",function(){
$(".ageTipsMb").show();
})
$(".ageTipsMb").on("click",function(){
$(".ageTipsMb").hide();
})
$(".colseAgeTip").on("click",function(){
$(".ageTipsMb").hide();
})
}
};
window.LADING = LADING || {};
})()
Write Preview
Loading…
Cancel
Save