客户案例页面新增分类导航栏

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/assets/css/customerMo.css

@@ -76,29 +76,33 @@ body {
     flex:1;
     width:100%;
 }
-.solution .section-2 .head-title{
+.solution .section-2 .head-title ul{
     width:100%;
-    height:1.3rem;
-    border-bottom:0.01rem solid rgb(90,90,90);
+    height:1rem;
 }
-.solution .section-2 .head-title>h3{
+.solution .section-2 .head-title ul li{
     float:left;
-    font-size:0.6rem;
-    color:rgb(90,90,90);
-    margin:0.24rem 0 0 0.4rem;
+    width:33%;
+    font-size:0.35rem;
+    text-align:center;
+    height:1rem;
+    line-height:1rem;
+    color:rgb(0,0,0);
 }
-.solution .section-2 .head-title>a {
-    float:right;
-    font-size:0.4rem;
-    height:1.3rem;
-    line-height:1.30rem;
-    margin-right:0.3rem;
-    color:rgb(17, 85, 204);
+.solution .section-2 .head-title ul .click{
+    border-bottom:0.08rem solid #28af22;
+    color:#28af22;
 }
 .solution .section-2 .solution-icon-list{
     width:100%;
     height: 100%;
 }
+.solution .section-2 .solution-icon-list>ul{
+    display:none;
+}
+.solution .section-2 .solution-icon-list .showClassify{
+    display:block;
+}
 .solution .section-2 .solution-icon-list>ul>li{
     width:100%;
     display:block;

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/assets/js/customerMo.js

@@ -1,17 +1,55 @@
-(function (doc, win) {
-    var docEl = doc.documentElement,
-        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
-        recalc = function () {
-            var clientWidth = docEl.clientWidth;
-            if (!clientWidth) return;
-            if(clientWidth>=640){
-                docEl.style.fontSize = '100px';
-            }else{
-                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
-            }
-        };
+document.addEventListener('readystatechange',function(){
+    //自适应
+    (function (doc, win) {
+        var docEl = doc.documentElement,
+            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+            recalc = function () {
+                var clientWidth = docEl.clientWidth;
+                if (!clientWidth) return;
+                if(clientWidth>=640){
+                    docEl.style.fontSize = '100px';
+                }else{
+                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
+                }
+            };
+        if (!doc.addEventListener) return;
+        win.addEventListener(resizeEvt, recalc, false);
+        doc.addEventListener('DOMContentLoaded', recalc, false);
+    })(document, window);
 
-    if (!doc.addEventListener) return;
-    win.addEventListener(resizeEvt, recalc, false);
-    doc.addEventListener('DOMContentLoaded', recalc, false);
-})(document, window);
+    //点击分类
+    var btn = document.getElementsByClassName("fenlei");
+    var classify = document.getElementsByClassName("classify");
+    var btn1 = btn[0];
+    var btn2 = btn[1];
+    var btn3 = btn[2];
+    var classify1 = classify[0];
+    var classify2 = classify[1];
+    var classify3 = classify[2];
+
+    btn1.onclick = function(){
+        btn1.classList.add("click");
+        btn2.classList.remove("click");
+        btn3.classList.remove("click");
+        classify1.classList.add("showClassify");
+        classify2.classList.remove("showClassify");
+        classify3.classList.remove("showClassify");
+    }
+    btn2.onclick = function(){
+        btn2.classList.add("click");
+        btn1.classList.remove("click");
+        btn3.classList.remove("click");
+        classify2.classList.add("showClassify");
+        classify1.classList.remove("showClassify");
+        classify3.classList.remove("showClassify");
+    }
+    btn3.onclick = function(){
+        btn3.classList.add("click");
+        btn1.classList.remove("click");
+        btn2.classList.remove("click");
+        classify3.classList.add("showClassify");
+        classify1.classList.remove("showClassify");
+        classify2.classList.remove("showClassify");
+    }
+
+})

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/page_customerCaseMo.html

@@ -24,11 +24,32 @@
     <div class="section section-2">
         <div class="content">
             <div class="head-title">
-                <h3>经典案例</h3>
+                <ul>
+                    <li class="fenlei click">电子方案集成</li>
+                    <li class="fenlei">电子分销贸易</li>
+                    <li class="fenlei">电子智能制造</li>
+                </ul>
             </div>
             <div class="solution-icon-list">
-                <ul>
-                    <@jp.contents module="customers" tag="经典案例" orderBy="order_number desc">
+                <ul class="classify showClassify">
+                    <@jp.contents module="customers" style="电子方案集成" pageSize="100" orderBy="order_number desc">
+                    <#list contents as content>
+                        <#if content_index==8><#break></#if>
+                        <li>
+                            <a href="${content.url!}">
+                                <div class="contentText">
+                                    <p>${(content.getMetadataByKey("Abbreviation"))!}：${(content.getMetadataByKey("description"))!}</p>
+                                </div>
+                                <div class="contentImg">
+                                    <img src="${content.thumbnail!}" alt="">
+                                </div>
+                            </a>
+                        </li>
+                    </#list>
+                    </@jp.contents>
+                </ul>
+                <ul class="classify">
+                    <@jp.contents module="customers" style="电子分销贸易" pageSize="100" orderBy="order_number desc">
                     <#list contents as content>
                         <#if content_index==8><#break></#if>
                         <li>
@@ -44,6 +65,23 @@
                     </#list>
                     </@jp.contents>
                 </ul>
+                <ul class="classify">
+                    <@jp.contents module="customers" style="电子智能制造" pageSize="100" orderBy="order_number desc">
+                    <#list contents as content>
+                    <#if content_index==8><#break></#if>
+                        <li>
+                            <a href="${content.url!}">
+                                <div class="contentText">
+                                    <p>${(content.getMetadataByKey("Abbreviation"))!}：${(content.getMetadataByKey("description"))!}</p>
+                                </div>
+                                <div class="contentImg">
+                                    <img src="${content.thumbnail!}" alt="">
+                                </div>
+                            </a>
+                        </li>
+                    </#list>
+                    </@jp.contents>
+                </ul>
             </div>
         </div>
     </div>