0419

src/main/resources/static/assets/web/css/style.css

@@ -1,7 +1,8 @@
 .clearFloat:after{content:'';display:block;clear:both}
 .fl{float:left}
 .fr{float:right}
-.banner,.banner img{width:100%;height:630px;min-width:1200px}
+.banner{position: relative;overflow: hidden;width:100%;height:456px;min-width:1200px;}
+.banner img{position: absolute;top: 0;left: 50%;transform: translate(-50%, 0);height: 100%;}
 .nav{width:1200px;margin:-50px auto 0;position:relative;padding:20px 0;background:#fff;-webkit-box-shadow:0 0 10px #eee;box-shadow:0 0 10px #eee;border-radius:5px}
 .nav ul li{width:200px;float:left;-webkit-box-sizing:border-box;box-sizing:border-box;border-right:1px solid #d2d2d2;cursor:pointer;overflow: hidden}
 .nav.child ul li{width: 240px;}
@@ -24,8 +25,8 @@
 .nav ul li.active .left span{color:#3d41b7;font-weight:700;line-height:60px;margin-top:0;position:relative;display: inline-block}
 .nav ul li.active .left span:after{content:'';display:block;width:100%;height:2px;background:#3d41b7;position:absolute;left:0;bottom:10px}
 .nav ul li.active .left p{display:none}
-.mid-link{width:1200px;margin:20px auto;border-top:10px solid #ffd88b;-webkit-box-shadow:0 0 10px #eee;box-shadow:0 0 10px #eee;padding-bottom:30px}
+.mid-link{background: #fff;width:1200px;margin:20px auto;padding-top: 10px;-webkit-box-shadow:0 0 10px #eee;box-shadow:0 0 10px #eee;padding-bottom:30px}
-.mid-link .text{display:block;margin:15px 0 15px 15px}
+.mid-link .text{display:block;margin:0 0 15px 15px}
 .mid-link .link{padding:0 30px;overflow:hidden}
 .mid-link .link .link-box{float:left;width:23.25%;height:120px;margin-right:2%;cursor:pointer;display:block}
 .mid-link .link .link-box:last-child{margin-right:0}

src/main/resources/static/route/web/public.html

@@ -117,20 +117,33 @@
                 <span>功能一览</span>
             </div>
             <div class="nav-tab" v-for="(nav, idx) in navList" :id="'nav' + idx">
-                <div class="tab-title" @click="openDetail(nav.id, nav.childrens, idx)" :id="'item' + nav.id">{{nav.name}}</div>
+                <div class="tab-title" @click="openDetail(nav.id, nav.childrens, idx, '1')" :id="'item' + nav.id">{{nav.name}}</div>
                 <div class="hide-list" v-if="nav.childrens && nav.childrens.length > 0">
                     <ul>
                         <li v-for="(child, idx0) in nav.childrens">
-                            <div class="nav-name" :id="'item' + child.id" @click="openDetail(child.id, child.childrens)">{{child.name}}</div>
+                            <div class="nav-name" :id="'item' + child.id" @click="openDetail(child.id, child.childrens, idx0, '2')">{{child.name}}</div>
                             <div class="hide-list" v-if="child.childrens && child.childrens.length > 0">
                                 <ul>
                                     <li v-for="(child1, idx1) in child.childrens">
-                                        <div class="nav-name" :id="'item' + child1.id" @click="openDetail(child1.id, child1.childrens)">{{child1.name}}</div>
+                                        <div class="nav-name" :id="'item' + child1.id" @click="openDetail(child1.id, child1.childrens, idx1, '3')">{{child1.name}}</div>
                                         <div class="hide-list" v-if="child1.childrens && child1.childrens.length > 0">
                                             <ul>
                                                 <li v-for="(child2, idx2) in child1.childrens">
-                                                    <div class="nav-name">{{child2.name}}</div>
+                                                    <div class="nav-name" :id="'item' + child1.id" @click="openDetail(child1.id, child1.childrens, idx1, '4')">{{child2.name}}</div>
-
+                                                    <div class="hide-list" v-if="child1.childrens && child1.childrens.length > 0">
+                                                        <ul>
+                                                            <li v-for="(child3, idx3) in child2.childrens">
+                                                                <div class="nav-name" :id="'item' + child1.id" @click="openDetail(child1.id, child1.childrens, idx1, '5')">{{child3.name}}</div>
+                                                                <div class="hide-list" v-if="child1.childrens && child1.childrens.length > 0">
+                                                                    <ul>
+                                                                        <li v-for="(child4, idx4) in child3.childrens">
+                                                                            <div class="nav-name">{{child3.name}}</div>
+                                                                        </li>
+                                                                    </ul>
+                                                                </div>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
                                                 </li>
                                             </ul>
                                         </div>
@@ -345,25 +358,36 @@
                 }
             },
             // 展开菜单或加载右侧
-            openDetail: function (id, children, idx) {
+            openDetail: function (id, children, idx, lv) {
                 var self = this
                 var node = $('#item' + id)
-                if (children.length > 0) {
+                if (lv < 5) {
-                    node.next().slideToggle()
+                    if (children.length > 0) {
-                    if (node.hasClass('tab-title')) {
+                        node.next().slideToggle()
+                        if (node.hasClass('tab-title')) {
+                            node.toggleClass('active')
+                            node.toggleClass('bordered')
+                            $('#nav' + idx).siblings().find('.hide-list').slideUp()
+                            $('#nav' + idx).siblings().find('.tab-title').removeClass('active')
+                            $('#nav' + idx).siblings().find('.tab-title').removeClass('bordered')
+                            $('#nav' + idx).siblings().find('.nav-name').removeClass('bordered')
+                            $('#nav' + idx).siblings().find('.nav-name').removeClass('active')
+                        } else if (node.hasClass('nav-name')) {
+                            node.toggleClass('active')
+                            node.toggleClass('bordered')
+                            node.parent().siblings().find('.nav-name').removeClass('active')
+                            node.parent().siblings().find('.nav-name').removeClass('bordered')
+                            node.parent().siblings().find('.hide-list').slideUp()
+                        }
+                    } else {
                         node.toggleClass('active')
-                        node.toggleClass('bordered')
+                        node.parent().siblings().find('.tab-title').removeClass('active')
-                        $('#nav' + idx).siblings().find('.hide-list').slideUp()
+                        node.parent().siblings().find('.tab-title').removeClass('bordered')
-                        $('#nav' + idx).siblings().find('.tab-title').removeClass('active')
+                        node.parent().siblings().find('.hide-list').slideUp()
-                        $('#nav' + idx).siblings().find('.tab-title').removeClass('bordered')
-                        $('#nav' + idx).siblings().find('.nav-name').removeClass('bordered')
-                        $('#nav' + idx).siblings().find('.nav-name').removeClass('active')
-                    } else if (node.hasClass('nav-name')) {
-                        node.toggleClass('active')
-                        node.toggleClass('bordered')
                         node.parent().siblings().find('.nav-name').removeClass('active')
                         node.parent().siblings().find('.nav-name').removeClass('bordered')
-                        node.parent().siblings().find('.hide-list').slideUp()
+                        self.curId = id
+                        self.getMainList(id)
                     }
                 } else {
                     node.toggleClass('active')

src/main/resources/templates/index.html

@@ -7,11 +7,11 @@
     <link rel="stylesheet" href="assets/web/css/reset.css">
     <link rel="stylesheet" href="assets/web/css/style.css">
 </head>
-<body>
+<body style="background: url('assets/web/images/banner.png') no-repeat;background-size: 100% auto;">
 <div id="app">
     <div class="header">
         <div class="banner">
-            <img src="assets/web/images/banner.png" alt="">
+<!--            <img src="assets/web/images/banner.png" alt="">-->
         </div>
         <div class="nav">
             <ul class="clearFloat" v-cloak>