Skip to content

M
mes-ui
Commit 4770e7cd authored by 康振飞's avatar 康振飞
Browse files
Options

导航菜单ok

parent a066d392
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 100 deletions
layouts/basic-layout/product.vue
View file @ 4770e7cd
<template> <template>
<Layout class="product-layout"> <Layout class="product-layout">
<Header> <Header>
<span class="menu"> <a class="menu">
<a class="home"> <span class="home">
<Icon type="ios-keypad" /> <Icon type="ios-keypad" />
<div class="top_menu_box"> <div class="top_menu_box">
<table class="t_table_box">
<ul class="top_menu"> <tr v-for="(item,i) in filterSider">
<li v-for="(item,i) in filterSider"> <td class="t_title">
<ul class="row_ul"> <b class="title"
<b :class="item.children.length<6 ? 'title' : item.children.length<11 ? 'title02': item.children.length>11 ? 'title03' : '' " >{{item.title}}</b> >{{item.title}}</b>
<!-- <b class="title02" >{{item.title}}</b> --> </td>
<!-- <li class="title">{{item.title}}</li> --> <td>
<li v-for="(li,j) in item.children"> <ul class="table_row_ul">
<a >{{li.title}}</a> <li v-for="(li,j) in item.children">
</li> <a @click="goPage(li)">{{li.title}}</a>
</ul> </li>
</li> </ul>
</ul> </td>
</tr>
</table>
</div> </div>
</a>
</span> </span>
</a>
<i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" /> <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
<i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" /> <i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
<div class="header_right"> <div class="header_right">
...@@ -268,7 +270,10 @@ export default { ...@@ -268,7 +270,10 @@ export default {
this.keepAlivePush(pageName); this.keepAlivePush(pageName);
} }
}); });
} },
goPage(u) {
this.$router.push(u.path)
},
}, },
mounted() { mounted() {
document.addEventListener("scroll", this.handleScroll, { passive: true }); document.addEventListener("scroll", this.handleScroll, { passive: true });
...@@ -282,7 +287,6 @@ export default { ...@@ -282,7 +287,6 @@ export default {
}; };
</script> </script>
<style lang="less"> <style lang="less">
.product-layout { .product-layout {
.ivu-layout-header { .ivu-layout-header {
height: 50px; height: 50px;
...@@ -292,10 +296,7 @@ export default { ...@@ -292,10 +296,7 @@ export default {
margin: 0 10px; margin: 0 10px;
display: block; display: block;
float: left; float: left;
// position: absolute; width: 100px;
// top: 10px;
// left: 10px;
width: 60px;
height: 60px; height: 60px;
.home { .home {
position: relative; position: relative;
...@@ -307,114 +308,89 @@ export default { ...@@ -307,114 +308,89 @@ export default {
color: white; color: white;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari */
-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s;/* Safari */
transition: width 0.5s, height 0.5s, transform 0.5s; transition: width 0.5s, height 0.5s, transform 0.5s;
i{ i {
-webkit-transition: font-size 0.5s, margin 0.5s, -webkit-transform 0.5s;/* Safari */ -webkit-transition: font-size 0.5s, margin 0.5s, -webkit-transform 0.5s; /* Safari */
transition: font-size 0.5s, margin 0.5s, transform 0.5s; transition: font-size 0.5s, margin 0.5s, transform 0.5s;
} }
} }
.top_menu_box{ .top_menu_box {
display: none; display: none;
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
z-index: 99999; z-index: 99999;
left: 70%; left: 56%;
top: 66%; top: 57%;
min-width: 1084px; min-width: 1084px;
min-height: 300px; min-height: 300px;
box-shadow: 0px 5px 17px 5px rgba(0,0,0,0.28);
background: #f5f6fa; background: #f5f6fa;
-webkit-transition: display 0.5s, -webkit-transform 0.5s;/* Safari */ .t_table_box{
transition: display 0.5s, transform 0.5s; border-collapse:collapse;
} border-radius: 5px;
.top_menu { tr:first-of-type {
border-radius: 4px;
color: #2680eb;
list-style: none;
text-align: left;
li:first-of-type{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
ul:first-of-type{
border-top-right-radius: 5px; border-top-right-radius: 5px;
b:first-of-type{ td:first-of-type {
border-top-left-radius: 5px; border-top-left-radius: 5px;
} }
} }
} tr:last-of-type {
li { border-bottom-right-radius: 5px;
width: 100%; td:first-of-type {
display: block; border-bottom-left-radius: 5px;
// float: left; }
// height: 47px; }
line-height: 46px; tr{
border-bottom: 1px solid #ccc; height: 40px;
ul { line-height: 40px;
width: 100%; td{
list-style: none; padding: 5px 10px;
li { .table_row_ul{
display: inline-block; list-style: none;
list-style: none; border-bottom: 1px solid #E0E0E0;
margin-right: 10px; text-align: left;
width: 150px; li{
border: none; list-style: none;
a{ display: inline-block;
display: inline-block; a {
padding: 0 10px; float: left;
height: 30px; padding: 0px 10px;
line-height: 30px; margin: 0 6px;
} }
a:hover{ a:hover {
background: #2680EB; background: #2680eb;
color: white; color: white;
border-radius: 4px; border-radius: 4px;
}
} }
}
} }
.title { }
display: inline-block; .t_title{
background: #515a6e; min-width: 120px;
width: 104px; background: #515a6e;
color: white; .title{
text-align: center; padding: 5px 10px;
margin: 0 10px 0 0; font-size: 16px;
}
.title:hover{
color: #ddd;
}
.title02{
background: #515a6e;
width: 104px;
color: white;
text-align: center;
float: left;
margin: 0 10px 10px 0;
}
.title03{
background: #515a6e;
width: 104px;
color: white;
text-align: center;
float: left;
margin: 0 10px 70px 0;
} }
} }
} }
} }
.home:hover{ }
.menu:hover .home {
margin-top: 10px; margin-top: 10px;
height: 60px; height: 60px;
width: 60px; width: 60px;
z-index: 88888; z-index: 88888;
} }
.home:hover .top_menu_box { .menu:hover .home .top_menu_box {
display: block; display: block;
} }
.home:hover i{ .menu:hover .home i {
font-size: 33px; font-size: 33px;
margin: 13px 0 0; margin: 13px 0 0;
} }
}
.ivu-breadcrumb { .ivu-breadcrumb {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
...@@ -429,10 +405,9 @@ export default { ...@@ -429,10 +405,9 @@ export default {
color: white; color: white;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
// background: #343b4a!important;
} }
.i-layout-header-trigger:hover { .i-layout-header-trigger:hover {
background: #343b4a; background: #343b4a;
} }
.ivu-tooltip { .ivu-tooltip {
color: white; color: white;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment