完善移动端兼容

This commit is contained in:
augushong
2020-04-20 21:54:42 +08:00
parent aa0b9b1207
commit 3a8fd0b7d7
5 changed files with 119 additions and 90 deletions

View File

@@ -1,32 +1,4 @@
@media screen and (max-width: 768px){
.layui-body{
left: 0;
}
.layui-layout-admin .layui-footer{
left: 0;
}
.layui-layout-admin .layui-logo{
width: 115px;
}
.layui-layout-admin .layui-side{
width: 100%;
overflow-x: hidden;
height: 100%;
position: unset;
}
.layui-layer-content .layui-hide-xs{
display: unset !important;
}
.layui-nav-tree{
width: 100%;
height: 100%;
}
}
.left-bottom-options{ .left-bottom-options{
position: fixed; position: fixed;
@@ -106,3 +78,34 @@
.ul-flex{ .ul-flex{
display: flex; display: flex;
} }
@media screen and (max-width: 768px){
.layui-body{
left: 0;
}
.layui-layout-admin .layui-footer{
left: 0;
}
.layui-layout-admin .layui-logo{
width: 115px;
}
.layui-layout-admin .layui-side{
width: 100%;
overflow-x: hidden;
height: 100%;
position: unset;
}
.layui-layer-content .layui-hide-xs{
display: unset !important;
}
.layui-nav-tree{
width: 100%;
height: 100%;
}
}

View File

@@ -1,3 +1,4 @@
.main-container{ .main-container{
margin-top: 15px; margin-top: 15px;
} }
@@ -14,7 +15,7 @@
display: block; display: block;
padding: 10px 15px; padding: 10px 15px;
border-radius: 5px; border-radius: 5px;
margin: 5px 40px; margin: 5px 20px;
} }
.nav-left-list a:hover,.nav-left-list a.current{ .nav-left-list a:hover,.nav-left-list a.current{
@@ -127,4 +128,17 @@
.content-container .title{ .content-container .title{
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
}
@media screen and (max-width: 768px){
.nav-left-list{
text-align: left;
}
.nav-left-list a{
display: inline-block;
margin: 5px;
}
} }

View File

@@ -14,6 +14,5 @@
<a href="{:url('Index/index',['category_id'=>$category.id])}" {eq name='$Request.param.category_id|default=0' value='$category.id'} class="current"{/eq} >{$category.title}</a> <a href="{:url('Index/index',['category_id'=>$category.id])}" {eq name='$Request.param.category_id|default=0' value='$category.id'} class="current"{/eq} >{$category.title}</a>
{/volist} {/volist}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -13,62 +13,71 @@
<div class="layui-row layui-col-space4"> <div class="layui-row layui-col-space4">
{include file='common/_articles_left'/} {include file='common/_articles_left'/}
<div class="layui-col-md7"> <div class="layui-col-md7">
{eq name='$Request.param.category_id|default="0"' value='0'} <div class="main-container">
<div> {eq name='$Request.param.category_id|default="0"' value='0'}
<div class="layui-carousel" id="banner">
<div carousel-item>
{volist name='list_nav_slide' id='nav'}
<a href="{$nav.value|default='javascript:;'}" target="{$nav.target}"> <div style="">
<img src="{$nav.img}"> <div class="layui-carousel" id="banner">
<div class="panel"> <div carousel-item>
<p class="title">{$nav.title}</p> {volist name='list_nav_slide' id='nav'}
<p>{$nav.desc}</p>
</div>
</a>
{/volist}
</div>
</div>
</div>
{/eq}
{notempty name='$sub_category'}
<div class="tab-list">
<a href="{:url('Index/index',['category_id'=>$Request.param.category_id])}" {eq name='$Request.param.sub_category_id|default=0' value='0'} class="current" {/eq}>全部</a>
{volist name='$sub_category' id='category'}
<a href="{:url('Index/index',['category_id'=>$Request.param.category_id,'sub_category_id'=>$category.id])}" {eq name='$Request.param.sub_category_id|default=0' value='$category.id'} class="current" {else/}{/eq}>{$category.title}</a>
{/volist}
</div>
{/notempty}
<div class="post-container">
<div class="post-list">
{volist name='list_post' id='post'}
<a href="{:url('Post/read',['id'=>$post.id])}" class="post-item" onmouseover="$(this).find('.poster').addClass('layui-anim-scale')" onmouseout="$(this).find('.poster').removeClass('layui-anim-scale')" >
{notempty name='$post->getData("poster")'}
<div class="poster layui-anim" style="background-image: url('{$post.poster}');"></div>
{/notempty}
<div class="info">
<div class="title">{$post.title}</div>
<div class="plus-info">
<span>{$post.hits}访问</span>
<span>{$post.comment_count}评论</span>
</div>
<a href="{$nav.value|default='javascript:;'}" target="{$nav.target}">
<img src="{$nav.img}">
<div class="panel">
<p class="title">{$nav.title}</p>
<p>{$nav.desc}</p>
</div>
</a>
{/volist}
</div> </div>
</div>
</div>
{/eq}
</a> {notempty name='$sub_category'}
<div class="tab-list">
<a href="{:url('Index/index',['category_id'=>$Request.param.category_id])}" {eq
name='$Request.param.sub_category_id|default=0' value='0' } class="current" {/eq}>全部</a>
{volist name='$sub_category' id='category'}
<a href="{:url('Index/index',['category_id'=>$Request.param.category_id,'sub_category_id'=>$category.id])}"
{eq name='$Request.param.sub_category_id|default=0' value='$category.id' } class="current"
{else/}{/eq}>{$category.title}</a>
{/volist} {/volist}
{empty name='list_post'} </div>
{/notempty}
<div class="post-container">
<div class="post-list">
{volist name='list_post' id='post'}
<a href="{:url('Post/read',['id'=>$post.id])}" class="post-item"
onmouseover="$(this).find('.poster').addClass('layui-anim-scale')"
onmouseout="$(this).find('.poster').removeClass('layui-anim-scale')">
{notempty name='$post->getData("poster")'}
<div class="poster layui-anim" style="background-image: url('{$post.poster}');"></div>
{/notempty}
<div class="info">
<div class="title">{$post.title}</div>
<div class="plus-info">
<span>{$post.hits}访问</span>
<span>{$post.comment_count}评论</span>
</div>
</div>
</a>
{/volist}
{empty name='list_post'}
<img class="nodata" src="/static/images/nodata.png" alt=""> <img class="nodata" src="/static/images/nodata.png" alt="">
{/empty} {/empty}
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,21 +8,23 @@
{include file='common/_articles_require'/} {include file='common/_articles_require'/}
<link rel="stylesheet" href="/static/lib/quill/quill.snow.css"> <link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
</head> </head>
<body> <body>
<div class="layui-container main-container"> <div class="layui-container main-container">
<div class="layui-row layui-col-space4"> <div class="layui-row layui-col-space4">
{include file='common/_articles_left'/} {include file='common/_articles_left'/}
<div class="layui-col-md7"> <div class="layui-col-md7">
<div class="content-container"> <div class="main-container">
<div class="content-container">
<div class="title"> <div class="title">
{$post.title} {$post.title}
</div> </div>
<div class="info"> <div class="info">
<span>{$post->publish_time_text}</span> <span>{$post->publish_time_text}</span>
</div> </div>
<div class="ql-snow"> <div class="ql-snow">
<div class="ql-editor">{$post->content_html|raw}</div> <div class="ql-editor">{$post->content_html|raw}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -30,4 +33,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>