Ecshop文章系统宫格菜单模板
<!DOCTYPE html >
<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>{$page_title}</title> <meta name="Keywords" content="{$keywords}" /> <meta name="Description" content="{$description}" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <link rel="stylesheet" type="text/css" href="themesmobile/mo_paleng_moban/css/public.css"/> <link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/article.css"> <link href="{$ecs_css_path}" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="themesmobile/mo_paleng_moban/js/jquery.js"></script> {insert_scripts files='common.js,utils.js'} <!--文本复制功能插件,by 青韵花语--><script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInput.value = Url2; document.body.appendChild(oInput); oInput.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 oInput.className = 'oInput'; oInput.style.display='none'; alert('您已成功复制客服微信!\n 赶紧去微信添加吧!^_^'); }</script><!--文本复制功能插件结束,by 青韵花语--> </head><body> <!----------------------------------header-----------------------------------> <div class="tab_nav" style="padding-top:30px;"> <header class="header" style="margin-left:-10px;"> <div class="h-left" > <a class="sb-back" href="javascript:history.back(-1)" title="返回"></a> </div> <div class="h-mid"> <h6 id="h6-title">服务大厅</h6> </div> <div class="h-right"> <aside class="top_bar"> <!--div onClick="show_menu();$('#close_btn').addClass('hid');" id="show_more" --> <a href="index.php"> <div id="show_more"> </div> </a> </aside> </div> </header> </div> <!-- #BeginLibraryItem "/library/up_menu.lbi" --> <!-- #EndLibraryItem --> <!--弹出菜单--><script>// $(window).load(function(){// $('#product_desc img').each(function() { // var maxWidth =$(document).width(); // 图片最大宽度 // var ratio = 0; // 缩放比例 // var width = $(this).width(); // 图片实际宽度 // var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽 // if(width > maxWidth){ // ratio = maxWidth / width; // 计算缩放比例 // $(this).attr('width',maxWidth); // 设定实际显示宽度 // height = parseInt(height * ratio); // 计算等比例缩放后的高度 // $(this).attr('height',height); // 设定等比例缩放后的高度 // } // });// });</script><!--链接示例 by 青韵花语--><article_cat.php?id=16 系统公告><article_cat.php?id=12 资讯动态><article_cat.php?id=13 新手指引><article_cat.php?id=18 支付教程><article_cat.php?id=16 配送说明><article_cat.php?id=16 售后服务><article_cat.php?id=16 商家入驻><article_cat.php?id=16 门店客服><article_cat.php?id=16 平台客服><article_cat.php?id=16 规章制度><article_cat.php?id=16 支付中心><article_cat.php?id=16 关于我们><!-- 这里是文章宫格菜单引入样式,插入文章分类数据流即可!--><div id="div-max"> <div class="box-wrap"> <BR><div><ul><li id="li-all"> <a href="article_cat.php?id=16"> <img src="themesmobile/mo_paleng_moban/book/img/icon01.jpg"><p><span id="span">系统公告</span></a></li> <li id="li-all"> <a href="article_cat.php?id=12"> <img src="themesmobile/mo_paleng_moban/book/img/icon02.jpg"><p><span id="span">资讯动态</span></a></li> <li id="li-all"> <a href="article_cat.php?id=13"> <img src="themesmobile/mo_paleng_moban/book/img/icon03.jpg"><p><span id="span">新手指引</span></a></li><li id="li-all"> <a href="article_cat.php?id=18"> <img src="themesmobile/mo_paleng_moban/book/img/icon04.jpg"><p><span id="span">购物流程</span></a></li> <li id="li-all"> <a href="article_cat.php?id=20"> <img src="themesmobile/mo_paleng_moban/book/img/icon05.jpg"><p><span id="span">支付教程</span></a></li> <li id="li-all"> <a href="article_cat.php?id=7"> <img src="themesmobile/mo_paleng_moban/book/img/icon06.jpg"><p><span id="span">配送说明</span></a></li> <li id="li-all"> <a href="article_cat.php?id=8"> <img src="themesmobile/mo_paleng_moban/book/img/icon07.jpg"><p><span id="span">售后服务</span></a></li> <li id="li-all"> <a href="article_cat.php?id=25"> <img src="themesmobile/mo_paleng_moban/book/img/icon08.jpg"><p><span id="span">商家列表</span></a></li> <li id="li-all"> <a href="article_cat.php?id=5"> <img src="themesmobile/mo_paleng_moban/book/img/icon09.jpg"><p><span id="span">支付中心</span></a></li> <li id="li-all"> <a href="article_cat.php?id=26"> <img src="themesmobile/mo_paleng_moban/book/img/icon10.jpg"><p><span id="span">投诉理赔</span></a></li> <li id="li-all"> <a href="article_cat.php?id=10"> <img src="themesmobile/mo_paleng_moban/book/img/icon11.jpg"><p><span id="span">规章制度</span></a></li> <li id="li-all"> <a href="article_cat.php?id=22"> <img src="themesmobile/mo_paleng_moban/book/img/icon12.jpg"><p><span id="span">门店客服</span></a></li> <li id="li-all"> <a href="article_cat.php?id=23"> <img src="themesmobile/mo_paleng_moban/book/img/icon13.jpg"><p><span id="span">平台客服</span></a></li> <li id="li-all"> <a href="article_cat.php?id=14"> <img src="themesmobile/mo_paleng_moban/book/img/icon14.jpg"><p><span id="span">商家入驻</span></a></li> <li id="li-all"> <a href="article_cat.php?id=24"> <img src="themesmobile/mo_paleng_moban/book/img/icon15.jpg"><p><span id="span">软件更新</span></a></li> <li id="li-end"> <a href="article_cat.php?id=9"> <img src="themesmobile/mo_paleng_moban/book/img/icon16.jpg"><p><span id="span">关于我们</span></a></li> </ul> </div></div> <div id="div-max"><div> <div class="box-wrap"> <h2 id="h2"><h2>以上内容若无法解决您的问题<p>请联系平台客服!<p><h2><!--文本复制内容--><p style="display:none;" cols="20" id="biao1">KDDS888888</p><!--复制内容结束--><div id="qqkf"> {if $customers}<a href="javascript:chat_online();" id="qqkf">QQ客服:547430970 {else} {if $wechat && $is_wechat}<a href="javascript:show_wechat_kefu();" id="qqkf">QQ客服:547430970 {else} {if $goods.supplier_id}<a href="http://wpa.qq.com/msgrd?v=3&uin={$serviceqq}&site=qq&menu=yes" target="_blank" id="qqkf">QQ客服:547430970 {else}<a href="http://wpa.qq.com/msgrd?v=3&uin=547430970&site=qq&menu=yes" target="_blank" id="qqkf">QQ客服:547430970 {/if} {/if} {/if}</div><div id="qqkf"> <a onClick="copyUrl2()" id="qqkf">点击复制 【客服微信】</a> </div></h2></div></div></div><style type="text/css"> body { margin:0px; } #box { width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; line-height: 30px; text-align: center; } #box::-webkit-scrollbar { display: none; } #li-all { width:25%; padding-top:10px; padding-bottom:5px; } #li-end { width:25%; padding-top:10px; padding-bottom:20px; } img { width:70%; border-radius:50px; } #span { font-size:16px; line-height:50px; } #h6-title { color:black; background:#fff; text-align:center; line-height:40px; font-size:22px; padding-left:20px; } #div-max { background-color:#00B2EE; color:white; width:100%; padding-top:30px; } #h2 { color:#00B2EE; } h2 { color:#00B2EE; line-height: 35px; padding-top:10px; } #qqkf { background-color:#00BFFF; color:white; width:70%; border-radius:5px; font-size:22px; line-height:40px; margin-bottom:20px; } </style> <style> * { box-sizing: border-box; } .menu { display: block; position: fixed; bottom: 0; width: 95%; height: 50px; color: white; padding-top: 10px; border-top: 0px solid #eee; background-color: #00BFFF; } .subMenu { width: 25%; float: left; cursor: pointer; } .menu_name { height: 30px; width: 100%; line-height: 30px; font-size: 20px; } .active { color: #01cd3f; } .text-center { text-align: center } button{ border-style: none; } .box-wrap { text-align: center; background-color: #ffffff; overflow: hidden; height:auto; width:94%; border-radius:10px; } li{ float:left;list-style:none;} ul{padding-left:-20px;} </style><!-- #BeginLibraryItem "/library/footer_nav.lbi" --><!-- #EndLibraryItem --></body></html><!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>{$page_title}</title>
<meta name="Keywords" content="{$keywords}" />
<meta name="Description" content="{$description}" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" type="text/css" href="themesmobile/mo_paleng_moban/css/public.css"/>
<link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/article.css">
<link href="{$ecs_css_path}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="themesmobile/mo_paleng_moban/js/jquery.js"></script>
{insert_scripts files='common.js,utils.js'}
<!--文本复制功能插件,by 青韵花语-->
<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1").innerText;
var oInput = document.createElement('input');
oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display='none';
alert('您已成功复制客服微信!\n 赶紧去微信添加吧!^_^');
}
</script>
<!--文本复制功能插件结束,by 青韵花语-->
</head>
<body>
<!----------------------------------header----------------------------------->
<div class="tab_nav" style="padding-top:30px;">
<header class="header" style="margin-left:-10px;">
<div class="h-left" >
<a class="sb-back" href="javascript:history.back(-1)" title="返回"></a>
</div>
<div class="h-mid">
<h6 id="h6-title">服务大厅</h6>
</div>
<div class="h-right">
<aside class="top_bar">
<!--div onClick="show_menu();$('#close_btn').addClass('hid');" id="show_more" -->
<a href="index.php">
<div id="show_more">
</div>
</a>
</aside>
</div>
</header>
</div>
<!-- #BeginLibraryItem "/library/up_menu.lbi" -->
<!-- #EndLibraryItem -->
<!--弹出菜单-->
<script>
// $(window).load(function(){
// $('#product_desc img').each(function() {
// var maxWidth =$(document).width(); // 图片最大宽度
// var ratio = 0; // 缩放比例
// var width = $(this).width(); // 图片实际宽度
// var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽
// if(width > maxWidth){
// ratio = maxWidth / width; // 计算缩放比例
// $(this).attr('width',maxWidth); // 设定实际显示宽度
// height = parseInt(height * ratio); // 计算等比例缩放后的高度
// $(this).attr('height',height); // 设定等比例缩放后的高度
// }
// });
// });
</script>
<!--链接示例 by 青韵花语-->
<article_cat.php?id=16 系统公告>
<article_cat.php?id=12 资讯动态>
<article_cat.php?id=13 新手指引>
<article_cat.php?id=18 支付教程>
<article_cat.php?id=16 配送说明>
<article_cat.php?id=16 售后服务>
<article_cat.php?id=16 商家入驻>
<article_cat.php?id=16 门店客服>
<article_cat.php?id=16 平台客服>
<article_cat.php?id=16 规章制度>
<article_cat.php?id=16 支付中心>
<article_cat.php?id=16 关于我们>
<!-- 这里是文章宫格菜单引入样式,插入文章分类数据流即可!-->
<div id="div-max">
<div class="box-wrap">
<BR>
<div>
<ul>
<li id="li-all">
<a href="article_cat.php?id=16">
<img src="themesmobile/mo_paleng_moban/book/img/icon01.jpg"><p><span id="span">系统公告</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=12">
<img src="themesmobile/mo_paleng_moban/book/img/icon02.jpg"><p><span id="span">资讯动态</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=13">
<img src="themesmobile/mo_paleng_moban/book/img/icon03.jpg"><p><span id="span">新手指引</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=18">
<img src="themesmobile/mo_paleng_moban/book/img/icon04.jpg"><p><span id="span">购物流程</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=20">
<img src="themesmobile/mo_paleng_moban/book/img/icon05.jpg"><p><span id="span">支付教程</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=7">
<img src="themesmobile/mo_paleng_moban/book/img/icon06.jpg"><p><span id="span">配送说明</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=8">
<img src="themesmobile/mo_paleng_moban/book/img/icon07.jpg"><p><span id="span">售后服务</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=25">
<img src="themesmobile/mo_paleng_moban/book/img/icon08.jpg"><p><span id="span">商家列表</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=5">
<img src="themesmobile/mo_paleng_moban/book/img/icon09.jpg"><p><span id="span">支付中心</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=26">
<img src="themesmobile/mo_paleng_moban/book/img/icon10.jpg"><p><span id="span">投诉理赔</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=10">
<img src="themesmobile/mo_paleng_moban/book/img/icon11.jpg"><p><span id="span">规章制度</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=22">
<img src="themesmobile/mo_paleng_moban/book/img/icon12.jpg"><p><span id="span">门店客服</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=23">
<img src="themesmobile/mo_paleng_moban/book/img/icon13.jpg"><p><span id="span">平台客服</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=14">
<img src="themesmobile/mo_paleng_moban/book/img/icon14.jpg"><p><span id="span">商家入驻</span></a></li>
<li id="li-all">
<a href="article_cat.php?id=24">
<img src="themesmobile/mo_paleng_moban/book/img/icon15.jpg"><p><span id="span">软件更新</span></a></li>
<li id="li-end">
<a href="article_cat.php?id=9">
<img src="themesmobile/mo_paleng_moban/book/img/icon16.jpg"><p><span id="span">关于我们</span></a></li>
</ul>
</div>
</div>
<div id="div-max">
<div>
<div class="box-wrap">
<h2 id="h2">
<h2>以上内容若无法解决您的问题<p>请联系平台客服!<p><h2>
<!--文本复制内容-->
<p style="display:none;" cols="20" id="biao1">KDDS888888</p>
<!--复制内容结束-->
<div id="qqkf">
{if $customers}<a href="javascript:chat_online();" id="qqkf">QQ客服:547430970
{else}
{if $wechat && $is_wechat}<a href="javascript:show_wechat_kefu();" id="qqkf">QQ客服:547430970
{else}
{if $goods.supplier_id}<a href="http://wpa.qq.com/msgrd?v=3&uin={$serviceqq}&site=qq&menu=yes" target="_blank" id="qqkf">QQ客服:547430970
{else}<a href="http://wpa.qq.com/msgrd?v=3&uin=547430970&site=qq&menu=yes" target="_blank" id="qqkf">QQ客服:547430970
{/if}
{/if}
{/if}
</div>
<div id="qqkf">
<a onClick="copyUrl2()" id="qqkf">点击复制 【客服微信】</a>
</div>
</h2>
</div>
</div>
</div>
<style type="text/css">
body {
margin:0px;
}
#box {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
text-align: center;
}
#box::-webkit-scrollbar {
display: none;
}
#li-all {
width:25%;
padding-top:10px;
padding-bottom:5px;
}
#li-end {
width:25%;
padding-top:10px;
padding-bottom:20px;
}
img {
width:70%;
border-radius:50px;
}
#span {
font-size:16px;
line-height:50px;
}
#h6-title {
color:black;
background:#fff;
text-align:center;
line-height:40px;
font-size:22px;
padding-left:20px;
}
#div-max {
background-color:#00B2EE;
color:white;
width:100%;
padding-top:30px;
}
#h2 {
color:#00B2EE;
}
h2 {
color:#00B2EE;
line-height: 35px;
padding-top:10px;
}
#qqkf {
background-color:#00BFFF;
color:white;
width:70%;
border-radius:5px;
font-size:22px;
line-height:40px;
margin-bottom:20px;
}
</style>
<style>
* {
box-sizing: border-box;
}
.menu {
display: block;
position: fixed;
bottom: 0;
width: 95%;
height: 50px;
color: white;
padding-top: 10px;
border-top: 0px solid #eee;
background-color: #00BFFF;
}
.subMenu {
width: 25%;
float: left;
cursor: pointer;
}
.menu_name {
height: 30px;
width: 100%;
line-height: 30px;
font-size: 20px;
}
.active {
color: #01cd3f;
}
.text-center {
text-align: center
}
button{
border-style: none;
}
.box-wrap {
text-align: center;
background-color: #ffffff;
overflow: hidden;
height:auto;
width:94%;
border-radius:10px;
}
li{ float:left;list-style:none;}
ul{padding-left:-20px;}
</style>
<!-- #BeginLibraryItem "/library/footer_nav.lbi" --><!-- #EndLibraryItem -->
</body>
</html>