0419
This commit is contained in:
dong_bo0602
parent
95ea597178
commit
af114b2cb8
@ -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 .text{display:block;margin:15px 0 15px 15px}
|
||||
.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: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}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
@ -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,9 +358,10 @@
|
||||
}
|
||||
},
|
||||
// 展开菜单或加载右侧
|
||||
openDetail: function (id, children, idx) {
|
||||
openDetail: function (id, children, idx, lv) {
|
||||
var self = this
|
||||
var node = $('#item' + id)
|
||||
if (lv < 5) {
|
||||
if (children.length > 0) {
|
||||
node.next().slideToggle()
|
||||
if (node.hasClass('tab-title')) {
|
||||
@ -375,6 +389,16 @@
|
||||
self.curId = id
|
||||
self.getMainList(id)
|
||||
}
|
||||
} else {
|
||||
node.toggleClass('active')
|
||||
node.parent().siblings().find('.tab-title').removeClass('active')
|
||||
node.parent().siblings().find('.tab-title').removeClass('bordered')
|
||||
node.parent().siblings().find('.hide-list').slideUp()
|
||||
node.parent().siblings().find('.nav-name').removeClass('active')
|
||||
node.parent().siblings().find('.nav-name').removeClass('bordered')
|
||||
self.curId = id
|
||||
self.getMainList(id)
|
||||
}
|
||||
},
|
||||
// 获取右侧列表
|
||||
getMainList: function (id) {
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user