提交 5eb4bd2b 编写于 作者: D Devil

分类优化

上级 ee082c9b
...@@ -19,35 +19,47 @@ ...@@ -19,35 +19,47 @@
<!-- content --> <!-- content -->
<div class="am-container category-list"> <div class="am-container category-list">
{{if !empty($goods_category_list)}} {{if !empty($goods_category_list)}}
<section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{}'> <ul class="category-nav am-fl">
{{foreach $goods_category_list as $v}} {{foreach $goods_category_list as $k=>$v}}
<dl class="am-accordion-item am-active"> <li class="am-text-break am-padding-horizontal-sm {{if $k eq 0}} active{{/if}}">{{$v.name}}</li>
<dt class="am-accordion-title"> {{/foreach}}
<a href="{{:MyUrl('index/search/index', ['category_id'=>$v['id']])}}" title="{{$v.name}}">{{$v.name}}</a> </ul>
</dt> {{foreach $goods_category_list as $k=>$v}}
<dd class="am-accordion-bd am-collapse am-in"> <div class="category-content category-content-{{$k}} am-fr am-padding-top-xs {{if $k neq 0}} none{{/if}}">
<div class="am-accordion-content">
{{if !empty($v['items'])}}
{{foreach $v.items as $vs}} {{foreach $v.items as $vs}}
<div class="category-item am-padding-sm">
<div class="title"> <div class="title">
<div class="title-value am-fl">
{{if !empty($vs['icon'])}}
<a href="{{:MyUrl('index/search/index', ['category_id'=>$vs['id']])}}" title="{{$vs.name}}" class="am-block">
<img src="{{$vs.icon}}" alt="{{$vs.name}}" class="category-icon am-block" />
</a>
{{/if}}
<p class="am-margin-top-xs">
<a href="{{:MyUrl('index/search/index', ['category_id'=>$vs['id']])}}" title="{{$vs.name}}">{{$vs.name}}</a> <a href="{{:MyUrl('index/search/index', ['category_id'=>$vs['id']])}}" title="{{$vs.name}}">{{$vs.name}}</a>
</p>
</div>
</div> </div>
{{if !empty($vs['items'])}} {{if !empty($vs['items'])}}
<ul> <ul class="am-margin-top-xs">
{{foreach $vs.items as $keyss=>$vss}} {{foreach $vs.items as $kss=>$vss}}
<li class="am-fl"> <li class="am-fl am-text-center">
<a {{if $keyss eq 0}}class="first"{{/if}} href="{{:MyUrl('index/search/index', ['category_id'=>$vss['id']])}}" title="{{$vss.name}}">{{$vss.name}}</a> {{if !empty($vss['icon'])}}
<a href="{{:MyUrl('index/search/index', ['category_id'=>$vss['id']])}}" title="{{$vss.name}}" class="am-block am-margin-top-xs">
<img src="{{$vss.icon}}" alt="{{$vss.name}}" class="category-icon am-block" />
</a>
{{/if}}
<p class="am-margin-top-xs">
<a href="{{:MyUrl('index/search/index', ['category_id'=>$vss['id']])}}" title="{{$vss.name}}" class="am-block">{{$vss.name}}</a>
</p>
</li> </li>
{{/foreach}} {{/foreach}}
</ul> </ul>
{{/if}} {{/if}}
</div>
{{/foreach}} {{/foreach}}
{{/if}}
</div> </div>
</dd>
</dl>
{{/foreach}} {{/foreach}}
</section>
{{else /}} {{else /}}
<div class="table-no"><i class="am-icon-warning"></i> 没有相关数据</div> <div class="table-no"><i class="am-icon-warning"></i> 没有相关数据</div>
{{/if}} {{/if}}
......
{{if MyC('common_is_app_inside_close_header') neq 1 or !in_array(MiniAppEnv(), config('shopxo.mini_app_type_list'))}} {{if MyC('common_is_app_inside_close_header') neq 1 or !in_array(MiniAppEnv(), config('shopxo.mini_app_type_list'))}}
<!-- 友情链接 --> <!-- 友情链接 -->
{{if !empty($link_list)}} {{if !empty($link_list)}}
<div class="friendship-list"> <div class="friendship-list am-hide-sm-only">
<div class="am-container"> <div class="am-container">
<h2>友情链接</h2> <h2>友情链接</h2>
<ul> <ul>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
{{if MyC('common_is_app_inside_close_header') neq 1 or !in_array(MiniAppEnv(), config('shopxo.mini_app_type_list'))}} {{if MyC('common_is_app_inside_close_header') neq 1 or !in_array(MiniAppEnv(), config('shopxo.mini_app_type_list'))}}
<!-- 底部导航 --> <!-- 底部导航 -->
<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{}"> <footer data-am-widget="footer" class="am-footer am-footer-default am-hide-sm-only" data-am-footer="{}">
<div class="am-container"> <div class="am-container">
<!-- 底部导航 --> <!-- 底部导航 -->
{{if !empty($nav_footer)}} {{if !empty($nav_footer)}}
......
.category-list ul { overflow: hidden; border-bottom: 1px dotted #dedede; margin-bottom: 20px; } .category-list ul.category-nav,
.category-list ul:last-child { border-bottom: 0; margin-bottom: 0; } .category-list .category-content {
.category-list .title a { font-weight: 500; font-size: 14px; color: #666; } overflow-y: auto;
.category-list ul li { margin-right: 10px; line-height: 38px; } overflow-x: hidden;
.category-list ul li a { color: #787878; border-left: 1px solid #dedede; padding-left: 10px; font-size: 12px; } }
.category-list ul li a.first { border-left: 0; padding-left: 0; } .category-list .category-content {
.am-accordion-gapped .am-accordion-title { font-size: 16px; font-weight: 500; } width: calc(100% - 120px);
}
.category-list ul.category-nav {
width: 100px;
background: #f1f1f1;
}
.category-list ul.category-nav li {
height: 45px;
line-height: 45px;
font-weight: 500;
font-size: 14px;
color: #888;
border-left: 3px solid transparent;
cursor: pointer;
}
.category-list ul.category-nav li.active {
background: #fff;
color: #d2364c;
border-left: 3px solid #d2364c;
}
.category-list ul.category-nav li:not(:first-child) {
border-top: 1px solid #e5e5e5;
}
.category-list .category-content .category-icon {
max-width: 50px;
max-height: 50px;
}
.category-list .category-content .category-item {
border: 1px solid #eee;
}
.category-list .category-content .category-item:not(:last-child) {
margin-bottom: 15px;
}
.category-list .category-content ul {
border-top: 1px dotted #f4f4f4;
}
.category-list ul.category-nav li,
.category-list .category-content .title,
.category-list .category-content ul {
overflow: hidden;
}
.category-list .category-content .title a {
font-weight: 500;
color: #888;
}
.category-list .category-content ul li:not(:last-child) {
margin-right: 20px;
}
.category-list .category-content ul li a {
color: #787878;
font-size: 12px;
line-height: 22px;
}
@media only screen and (min-width:640px) { @media only screen and (min-width:640px) {
.am-accordion-gapped { margin: 0; } .category-list ul.category-nav,
.category-list .category-content {
height: 100vh;
}
.category-list ul.category-nav {
margin-left: 5px;
}
.category-list .category-content {
margin-right: 5px;
}
} }
@media only screen and (max-width:1025px) { @media only screen and (min-width:1025px) {
.am-accordion-gapped { margin: 0 5px; } .category-list ul.category-nav {
margin-left: 0;
}
.category-list .category-content {
margin-right: 0;
}
} }
@media only screen and (max-width:640px) { @media only screen and (max-width:640px) {
.am-footer { padding-bottom: 55px; } .am-footer { padding-bottom: 55px; }
.category-list ul.category-nav,
.category-list .category-content {
height: calc(100vh - 97px);
}
} }
\ No newline at end of file
$(function()
{
// 分类显/隐
$('.category-list ul.category-nav li').on('mouseover', function(){
var index = $(this).index();
$('.category-list ul.category-nav li').removeClass('active');
$(this).addClass('active');
$('.category-content').addClass('none');
$('.category-content-'+index).removeClass('none');
});
});
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册