peihaoyu/TaoLer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移动端菜单优化

Browse Source
This commit is contained in:
taoser 2021-05-14 17:57:15 +08:00
parent 9c8bf3860e
commit a877409c57
7 changed files with 164 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/static/res/css/global.css
View File

@ -13,6 +13,33 @@ html body{margin-top: 61px;}
html{background-color: #F2F2F2;}
i{font-style: normal;}
/* 布局 */
.layui-mm{position: fixed; top: 100px; bottom: 0;}
.site-menu,
.site-menu{box-shadow: none; border-left: none;}
/* 文档 */
.site-fix{position: fixed; top: 0; bottom: 0; z-index: 666; min-height: 0; overflow: hidden; background-color: #fff;}
.site-fix:hover{overflow-y: auto; overflow-x: hidden;}
.site-menu .layui-menu-body-title .layui-font-gray{padding-left: 10px;}
.site-menu .layui-menu-body-title .layui-badge-dot{left: 10px;}
@media screen and (max-width: 992px) {
.site-menu{position: fixed; top: 50px; bottom: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; z-index: 1000; left: -300px; background-color: #fff; transition: all .3s;}
.site-tree-mobile{display: block!important; position: fixed; z-index: 16666669; bottom: 15px; left: 15px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: #009688; color: #fff;}
.site-home .site-tree-mobile{display: none!important;}
.site-mobile .site-tree-mobile{display: none !important;}
.site-mobile .site-menu{left: 0;}
.site-mobile .site-mobile-shade{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.8); z-index: 999;}
.site-tree-mobile i{font-size: 20px;}
.site-mobile .layui-side{left: 0;}
.site-mobile .layui-side-child{top: 50%; left: 200px; height: 300px; margin-top: -100px;}
}
/* 图标 */
@font-face {font-family: "iconfont";
@ -696,7 +723,7 @@ body .fly-user-main{position: relative; min-height: 600px;}
.site-tree-mobile{display: block!important; position: fixed; z-index: 100000; bottom: 20px; left: 10px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
.site-mobile .site-tree-mobile{display: none !important;}
.site-mobile .fly-user-main>.layui-nav{left: 0;}
.site-mobile .site-mobile-shade{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.9); z-index: 999;}
/*.site-mobile .site-mobile-shade{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.9); z-index: 999;}*/
}
/*前台公用样式*/

27
public/static/res/mods/index.js
View File

@ -875,6 +875,33 @@ layui.define(['layer', 'laytpl', 'form', 'element', 'upload', 'util'], function(
}
});
//窗口scroll
;!function(){
var main = $('.site-menu'), scroll = function(){
var stop = $(window).scrollTop();
if($(window).width() <= 992) return;
var bottom = $('.fly-footer').offset().top - $(window).height();
if(stop > 60){ //211
if(!main.hasClass('site-fix')){
main.addClass('site-fix').css({
width: main.parent().width()
});
}
}else {
if(main.hasClass('site-fix')){
main.removeClass('site-fix').css({
width: 'auto'
});
}
}
stop = null;
};
scroll();
$(window).on('scroll', scroll);
}();
exports('fly', fly);
});

28
view/taoler/index/article/cate.html
View File

@ -7,6 +7,10 @@
{block name="content"}
<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="">
{include file="public/menu" /}
</div>
<div class="layui-col-md8">
<div class="fly-panel" style="margin-bottom: 0;">
@ -49,6 +53,7 @@
{/volist}
</ul>
<div style="text-align: center" id="page">{$artList|raw}</div>
<!--div style="text-align: center" id="pages"></div-->
</div>
@ -105,6 +110,27 @@
,base: '/static/res/mods/'
}).extend({
fly: 'index'
}).use('fly');
}).use(['fly','laypage'], function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'pages' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
,limit: 15
,curr :{$Request.param.page ?: 1} //获取起始页
,jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
//console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
//window.location.href= url+obj.curr+'&limit='+obj.limit+'#collection'; //跳转
}
}
});
});
</script>
{/block}

4
view/taoler/index/article/detail.html
View File

@ -6,6 +6,10 @@
{block name="content"}
<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="">
{include file="public/menu" /}
</div>
<div class="layui-col-md8 content detail">
<div class="fly-panel detail-box">
<h1 style="color:{$article.title_color};font-weight:bold">{$article.title}

5
view/taoler/index/index/index.html
View File

@ -8,10 +8,13 @@
{block name="content"}
<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="">
{include file="public/menu" /}
</div>
<div class="layui-col-md8">
<!--首页幻灯-->
<div class="fly-panel layui-hide-xs">
<div class="fly-panel">
{include file="public/index-slider" /}
</div>
<!--置顶文章-->

6
view/taoler/index/public/column.html
View File

@ -1,4 +1,4 @@
<div class="fly-panel fly-column">
<div class="fly-panel fly-column layui-hide-xs">
<div class="layui-container">
<ul class="layui-clear">
<li class="layui-hide-xs {if ($Request.param.ename =='' && $Request.param.id =='')} layui-this {/if}" >
@ -20,8 +20,8 @@
<span class="fly-search"><i class="layui-icon">&#xe615;</i></span>
<a href="{:url('article/add')}" class="layui-btn" >{:lang('add post')}</a>
</div>
<div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
<!--div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
<a href="javascript:void(0)" class="layui-btn" id="add_post">{:lang('add post')}</a>
</div>
</div-->
</div>
</div>

70
view/taoler/index/public/menu.html Normal file
View File

@ -0,0 +1,70 @@
<div class=" layui-hide-md">
<div class="layui-panel site-menu" style="width: auto;">
<ul class="layui-menu layui-menu-lg">
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
<div class="layui-menu-body-title">
社区分类
</div>
<hr>
<ul>
{volist name="cateList" id="cate"}
<li {if condition="$cate.ename eq $Request.param.ename"} class="layui-this" {/if}>
<div class="layui-menu-body-title">
<a href="{:url('article/cate',['ename' => $cate.ename])}">{:cookie('think_lang') == 'en-us' ? $cate.ename : $cate.catename}
<span class="layui-font-12 layui-font-gray"> >></span>
{if condition="$cate.is_hot eq 1"}<span class="layui-badge-dot"></span>{/if}
</a>
</div>
</li>
{/volist}
</ul>
</li>
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
<div class="layui-menu-body-title">
框架
</div>
<hr>
<ul>
<li class="">
<div class="layui-menu-body-title">
<a href="http://wiki.aieok.com/">
<span>Wiki </span>
<span class="layui-font-12 layui-font-gray">框架文档</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="http://bbs.aieok.com/doc/timeline.html">
<span>日志 </span>
<span class="layui-font-12 layui-font-gray">更新日志</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="/">
<span>回首页 </span>
<span class="layui-font-12 layui-font-gray">index</span>
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>