HS轻论坛APP展示页代码免费分享

    <!--
    	<?php
    		global $HP;
    		$_G['SET']['WEBTITLE'] = 'APP在线下载';
    		$_G['TEMPLATE']['HEAD'] = $_G['TEMPLATE']['FOOT'] = 'null';
    		$_G['TEMPLATE']['BODY'] = $HP;	
    	?>
    -->
    <style>
    	html,
    	body {
    		background-color: #00b7ee;
    		width: 100%;
    		height: 100%;
    		background-image: url(https://www.hadsky.com/app/hadskydownload/template/img/clouds.png);
    		background-position: bottom center;
    		background-repeat: repeat-x;
    	}
    	
    	._main {
    		padding-top: 47px;
    	}
    	
    	._bg_image {
    		width: 240px;
    		height: 493px;
    		float: right;
    		background-image: url(https://www.hadsky.com/app/hadskydownload/template/img/iphone.png);
    		background-position: center center;
    		background-repeat: no-repeat;
    		background-size: 240px auto;
    		padding-top: 59px;
    	}
    	
    	._bg_image .swiper-container {
    		margin-left: 15px;
    		width: 210px;
    		height: 373px;
    	}
    	
    	._bg_image .swiper-container img {
    		width: 100%;
    		height: 100%;
    	}
    	
    	._appinfo {
    		color: #fff;
    		padding-top: 30px;
    		max-width: 360px;
    		word-break: break-all;
    	}
    	
    	._appinfo ._title {
    		background-image: url(https://www.hadsky.com/app/hadskydownload/template/img/logo.png);
    		background-position: left;
    		background-repeat: no-repeat;
    		background-size: 64px 64px;
    		height: 64px;
    		font-weight: bold;
    		line-height: 64px;
    		padding-left: 74px;
    		font-size: 24px;
    		letter-spacing: 2px;
    	}
    	
    	._appinfo ._content {
    		padding: 10px 0;
    		font-size: 14px;
    		letter-spacing: 1px;
    	}
    	
    	@media only screen and (max-width: 999px) {
    		body {
    			background-image: none;
    		}
    		._bg_image {
    			float: none;
    			margin: 0 auto;
    		}
    		._appinfo {
    			padding: 30px;
    		}
    	}
    </style>
    <link href="https://lib.baomitu.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
    <div class="pk-row _main" style="display:none;">
    	<div class="pk-w-sm-12 pk-w-md-6">
    		<div class="_bg_image">
    			<div class="swiper-container">
    				<div class="swiper-wrapper">
    					<a class="swiper-slide" href="javascript:">
    						<img src="https://www.hadsky.com/app/hadskydownload/template/img/app/1.png" alt="Image">
    					</a>
    					<a class="swiper-slide" href="javascript:">
    						<img src="https://www.hadsky.com/app/hadskydownload/template/img/app/2.png" alt="Image">
    					</a>
    					<a class="swiper-slide" href="javascript:">
    						<img src="https://www.hadsky.com/app/hadskydownload/template/img/app/3.png" alt="Image">
    					</a>
    					<a class="swiper-slide" href="javascript:">
    						<img src="https://www.hadsky.com/app/hadskydownload/template/img/app/4.png" alt="Image">
    					</a>
    					<a class="swiper-slide" href="javascript:">
    						<img src="https://www.hadsky.com/app/hadskydownload/template/img/app/5.png" alt="Image">
    					</a>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="pk-w-sm-12 pk-w-md-6">
    		<div class="_appinfo">
    			<div class="_title">HS轻社区</div>
    			<div class="_content">
    				<p>HadSky官方APP,界面简洁,操作方便,程序轻快,您也可以为您的网站申请一款属于自己的APP [
    					<a target="_blank" class="pk-hover-underline" href="https://www.hadsky.com/app-zhanzhang-index.html?s=applyapp">立即申请&raquo;</a> ]
    				</p>
    				<p><br></p>
    				<p style="font-size: 12px;">系统版本:1.0.0</p>
    				<p style="font-size: 12px;">软件大小:21.73MB</p>
    				<p style="font-size: 12px;">更新时间:2019-08-28</p>
    			</div>
    			<div class="pk-row" style="padding-top:20px;text-align:center">
    				<div class="pk-w-md-6 pk-w-sm-12" style="margin-bottom:27px">
    					<div style="letter-spacing:1px;font-size:16px;font-weight:bold">Android版</div>
    					<div id="_android_canvas" style="padding:10px 0"></div>
    					<div>
    						<a target="_blank" class="pk-btn pk-btn-danger _dbtn" href="http://qiniu.hadsky.com/app/hsqsq.apk" data-type="android">立即下载</a>
    					</div>
    				</div>
    				<div class="pk-w-md-6 pk-w-sm-12 pk-hide" style="margin-bottom:27px">
    					<div style="letter-spacing:1px;font-size:16px;font-weight:bold">IOS版</div>
    					<div id="_ios_canvas" style="padding:10px 0"></div>
    					<div>
    						<a target="_blank" class="pk-btn pk-btn-danger _dbtn" href="javascript:" data-type="ios">立即下载</a>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="pk-hadsky _foot" style="font-size:12px;color:#333;text-align:center;padding:10px 0;width:100%;position:fixed;left:0;bottom:0;">
    	<span>Powered by HadSky</span>
    </div>
    <script src="https://lib.baomitu.com/Swiper/4.5.0/js/swiper.min.js"></script>
    <script src="https://lib.baomitu.com/qrcode-generator/1.4.3/qrcode.min.js"></script>
    <script>
    	$(function() {
    		$(window).on('resize', function() {
    			if($(window).width() > 1000) {
    				$('._main').css({
    					paddingTop: ($(window).height() - 493) / 2 - 67
    				});
    				$('._foot').css({
    					position: 'fixed'
    				});
    			} else {
    				$('._main').css({
    					paddingTop: 47
    				});
    				$('._foot').css({
    					position: 'relative'
    				});
    			}
    		}).resize();
    		var s = $('._dbtn');
    		for(var i = 0; i < s.length; i++) {
    			var qr = qrcode(7, "H");
    			qr.addData($(s[i]).attr('href'));
    			qr.make();
    			$('#_' + $(s[i]).data('type') + '_canvas').html(qr.createImgTag());
    		}
    		$("._main").fadeIn(1500);
    		new Swiper('.swiper-container', {
    			loop: true,
    			autoplay: {
    				delay: 3000,
    				disableOnInteraction: false
    			}
    		});
    	});
    </script>

 

上面的部分链接和信息需要你自己自行更改一下,使用方法:

后台 - 插件 - 自定义HTML页面应用 - 设置 - 新建页面 - 复制上面的代码粘贴进去保存即可

THE END

作者信息

作者:Emlly

我不懒,我只是开启了节能模式

返回列表
上一篇:
下一篇:

发表评论

快速评论:请填写QQ获取资料!

快捷回复:

未显示?请点击刷新