帮助中心H5

src/main/java/com/caimei/www/controller/unlimited/HelpPageController.java

@@ -34,6 +34,8 @@ public class HelpPageController extends BaseController {
         // 默认平台介绍
         if(null == id) {id = 1016;}
         PageContent helpPage = helpService.getHelpPageById(id);
+        model.addAttribute("pageId", id);
+        model.addAttribute("pageTypeId", helpPage.getType());
         model.addAttribute("pageInfo", helpPage);
         return HELP_PAGE_PATH;
     }

src/main/resources/static/css/help/help.css

@@ -8,13 +8,13 @@ li{list-style:none}
 .navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5}
 .navLayout .navList .tab{display:block;color:#22272e;position:relative}
 .navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:10px;top:0;transform:rotate(90deg);width:32px;height:32px;line-height:32px;text-align:center;color:#bec2c9}
-.navLayout .navList .tab.on:before{top:18px;transform:rotate(270deg);color:#e15616}
-.navLayout .navList .tab.on{color:#e15616}
-.navLayout .navList .con{position:relative}
+.navLayout .navList .con{position:relative;}
 .navLayout .navList .con:before,.navLayout .navList .con:after{content:'';position:absolute;width:168px;border-top:1px solid #f5f5f5;left:16px}
 .navLayout .navList .con:before{top:0}
 .navLayout .navList .con:after{bottom:0}
 .navLayout .navList .con a{display:block;font-size:14px;color:#627386;text-indent:32px}
+.navLayout .navList.on .tab:before{top:18px;transform:rotate(270deg);color:#e15616}
+.navLayout .navList.on .tab{color:#e15616}
 .navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
 .navLayout .right{float:right;width:968px}
 .pageContent{background:#FFF;padding:16px}
@@ -30,6 +30,21 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
+.navLayout{background:#FFF;border-top:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;}
+.navLayout .crumbs{display:none;}
+.navLayout .left{width:29.3vw;border-right:1px solid #F5F5F5;line-height:11.8vw;white-space:nowrap;text-indent:3.3vw;font-size:3.4vw;}
+.navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5;font-size: 3.7vw;}
+.navLayout .navList .tab{display:block;color:#22272e;position:relative}
+.navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:1.4vw;top:1vw;transform:rotate(90deg);width:6.4vw;height:6.4vw;line-height:6.4vw;text-align:center;color:#bec2c9}
+.navLayout .navList .con a{display:block;color:#9aa5b5;}
+.navLayout .navList.on .tab:before{top:4vw;transform:rotate(270deg);color:#e15616}
+.navLayout .navList.on .tab{color:#e15616}
+.navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
+.navLayout .right{width:70.5vw}
+.pageContent{padding:3.3vw}
+
+
+
 
 
 }

src/main/resources/static/js/help/help.js

@@ -0,0 +1,3 @@
+
+
+jqMultipleShow("click", ".navList", ".tab", ".con");

src/main/resources/templates/help/help.html

@@ -18,13 +18,13 @@
         <span>&gt;</span>
         <span th:text="${pageInfo?.title}"></span>
     </div>
-    <div class="wrap clear">
+    <div class="wrap clear mf">
         <div class="left">
             <div class="title">帮助中心</div>
-            <div class="navList" th:each="type: ${helpPages}">
+            <div th:each="type: ${helpPages}" th:attr="class=${pageTypeId==type.id?'navList on':'navList'}">
                 <span class="tab" th:text="${type.name}"></span>
-                <div class="con">
-                    <a th:each="page: ${type.linkList}" th:href="'/help/'+${page.id}+'.html'" th:text="${page.name}"  th:attr="class=${pageInfo?.id==page.id?'on':''}"></a>
+                <div class="con" th:attr="style=${pageTypeId==type.id?'':'display:none'}">
+                    <a th:each="page: ${type.linkList}" th:href="'/help/'+${page.id}+'.html'" th:text="${page.name}"  th:attr="class=${pageId==page.id?'on':''}"></a>
                 </div>
             </div>
         </div>