floraachy/shopxo
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo.git synced 2024-11-30 10:59:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

分类优化

Browse Source
This commit is contained in:
Devil 2019-12-16 01:22:15 +08:00
parent ee082c9b5f
commit 5eb4bd2bf6
4 changed files with 134 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
application/index/view/default/category/index.html
View File

@ -19,35 +19,47 @@
<!-- content -->
<div class="am-container category-list">
{{if !empty($goods_category_list)}}
<section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{}'>
{{foreach $goods_category_list as $v}}
<dl class="am-accordion-item am-active">
<dt class="am-accordion-title">
<a href="{{:MyUrl('index/search/index', ['category_id'=>$v['id']])}}" title="{{$v.name}}">{{$v.name}}</a>
</dt>
<dd class="am-accordion-bd am-collapse am-in">
<div class="am-accordion-content">
{{if !empty($v['items'])}}
{{foreach $v.items as $vs}}
<div class="title">
<a href="{{:MyUrl('index/search/index', ['category_id'=>$vs['id']])}}" title="{{$vs.name}}">{{$vs.name}}</a>
</div>
{{if !empty($vs['items'])}}
<ul>
{{foreach $vs.items as $keyss=>$vss}}
<li class="am-fl">
<a {{if $keyss eq 0}}class="first"{{/if}} href="{{:MyUrl('index/search/index', ['category_id'=>$vss['id']])}}" title="{{$vss.name}}">{{$vss.name}}</a>
</li>
{{/foreach}}
</ul>
{{/if}}
{{/foreach}}
<ul class="category-nav am-fl">
{{foreach $goods_category_list as $k=>$v}}
<li class="am-text-break am-padding-horizontal-sm {{if $k eq 0}} active{{/if}}">{{$v.name}}</li>
{{/foreach}}
</ul>
{{foreach $goods_category_list as $k=>$v}}
<div class="category-content category-content-{{$k}} am-fr am-padding-top-xs {{if $k neq 0}} none{{/if}}">
{{foreach $v.items as $vs}}
<div class="category-item am-padding-sm">
<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>
</p>
</div>
</dd>
</dl>
{{/foreach}}
</section>
</div>
{{if !empty($vs['items'])}}
<ul class="am-margin-top-xs">
{{foreach $vs.items as $kss=>$vss}}
<li class="am-fl am-text-center">
{{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>
{{/foreach}}
</ul>
{{/if}}
</div>
{{/foreach}}
</div>
{{/foreach}}
{{else /}}
<div class="table-no"><i class="am-icon-warning"></i> 没有相关数据</div>
{{/if}}

4
application/index/view/default/public/footer_nav.html
View File

@ -1,7 +1,7 @@
{{if MyC('common_is_app_inside_close_header') neq 1 or !in_array(MiniAppEnv(), config('shopxo.mini_app_type_list'))}}
<!-- 友情链接 -->
{{if !empty($link_list)}}
<div class="friendship-list">
<div class="friendship-list am-hide-sm-only">
<div class="am-container">
<h2>友情链接</h2>
<ul>
@ -33,7 +33,7 @@
{{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">
<!-- 底部导航 -->
{{if !empty($nav_footer)}}

94
public/static/index/default/css/category.css
View File

@ -1,17 +1,87 @@
.category-list ul { overflow: hidden; border-bottom: 1px dotted #dedede; margin-bottom: 20px; }
.category-list ul:last-child { border-bottom: 0; margin-bottom: 0; }
.category-list .title a { font-weight: 500; font-size: 14px; color: #666; }
.category-list ul li { margin-right: 10px; line-height: 38px; }
.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; }
.am-accordion-gapped .am-accordion-title { font-size: 16px; font-weight: 500; }
@media only screen and (min-width:640px) {
.am-accordion-gapped { margin: 0; }
.category-list ul.category-nav,
.category-list .category-content {
overflow-y: auto;
overflow-x: hidden;
}
@media only screen and (max-width:1025px) {
.am-accordion-gapped { margin: 0 5px; }
.category-list .category-content {
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) {
.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 (min-width:1025px) {
.category-list ul.category-nav {
margin-left: 0;
}
.category-list .category-content {
margin-right: 0;
}
}
@media only screen and (max-width:640px) {
.am-footer { padding-bottom: 55px; }
.category-list ul.category-nav,
.category-list .category-content {
height: calc(100vh - 97px);
}
}

11
public/static/index/default/js/category.js Normal file
View File

@ -0,0 +1,11 @@
$(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');
});
});