From 5eb4bd2bf6f9d584dc073473cee85ec47478cc60 Mon Sep 17 00:00:00 2001
From: Devil <fuxiang.gong@qq.com>
Date: Mon, 16 Dec 2019 01:22:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=B1=BB=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index/view/default/category/index.html    | 66 +++++++------
 .../index/view/default/public/footer_nav.html |  4 +-
 public/static/index/default/css/category.css  | 94 ++++++++++++++++---
 public/static/index/default/js/category.js    | 11 +++
 4 files changed, 134 insertions(+), 41 deletions(-)
 create mode 100644 public/static/index/default/js/category.js

diff --git a/application/index/view/default/category/index.html b/application/index/view/default/category/index.html
index a51419f2e..d206c25e5 100755
--- a/application/index/view/default/category/index.html
+++ b/application/index/view/default/category/index.html
@@ -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}}
diff --git a/application/index/view/default/public/footer_nav.html b/application/index/view/default/public/footer_nav.html
index 3cd124652..7e69eb6e5 100755
--- a/application/index/view/default/public/footer_nav.html
+++ b/application/index/view/default/public/footer_nav.html
@@ -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)}}
diff --git a/public/static/index/default/css/category.css b/public/static/index/default/css/category.css
index 573d25077..45e4cdc8c 100755
--- a/public/static/index/default/css/category.css
+++ b/public/static/index/default/css/category.css
@@ -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);
+    }
 }
\ No newline at end of file
diff --git a/public/static/index/default/js/category.js b/public/static/index/default/js/category.js
new file mode 100644
index 000000000..e4bcd1c38
--- /dev/null
+++ b/public/static/index/default/js/category.js
@@ -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');
+    });
+});
\ No newline at end of file