朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 71c2bd7c881850987bb281006519457e8c9dc9f9 1 个父辈 24fafcba

新增顶部导航栏组件 顶部背景图更改 index样式添加

内嵌 并排对比
正在显示 3 个修改的文件 包含 181 行增加 和 21 行删除
... ... @@ -5,31 +5,29 @@
:closable = "tabCloseable"
@tab-click='tabClick'
@tab-remove="tabRemove"
style="width: 100%">
style="width: 100%;margin-top: 18px;height: 50px">
<el-tab-pane
v-for="(item, index) in this.$store.state.openTab"
:key="item.name"
:label="item.name"
:name="item.route"
>
<section class="content-container">
<div class="grid-content bg-purple-light">
<!-- <el-col :span="24" class="breadcrumb-container">-->
<!-- <strong class="title">{{$route.name}}</strong>-->
<!-- <el-breadcrumb separator="/" class="breadcrumb-inner">-->
<!-- <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
<!-- {{ item.name }}-->
<!-- </el-breadcrumb-item>-->
<!-- </el-breadcrumb>-->
<!-- </el-col>-->
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
</div>
</section>
:name="item.route">
<section class="content-container">
<div class="grid-content bg-purple-light">
<!-- <el-col :span="24" class="breadcrumb-container">-->
<!-- <strong class="title">{{$route.name}}</strong>-->
<!-- <el-breadcrumb separator="/" class="breadcrumb-inner">-->
<!-- <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
<!-- {{ item.name }}-->
<!-- </el-breadcrumb-item>-->
<!-- </el-breadcrumb>-->
<!-- </el-col>-->
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
</div>
</section>
</el-tab-pane>
</el-tabs>
</template>
... ... @@ -138,4 +136,48 @@
</script>
<style>
/*底层背景色*/
.el-tabs__nav-scroll{
background-color: rgb(239,243,246);
}
/*首个内部边框*/
.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
border: 1px solid rgba(80,109,130,.64);
}
/*其他内部边框*/
.el-tabs--card>.el-tabs__header .el-tabs__item{
border: 1px solid rgba(80,109,130,.64);
}
/*外部大边框取消表格样式*/
.el-tabs--card>.el-tabs__header .el-tabs__nav{
border: 0px;
}
/*黑框及内字体样式*/
.el-tabs__item{
color:#495060;
height: 26px;
border: 1px solid rgba(80,109,130,.64);
margin: 4px 3px;
line-height: 26px;
border-radius: 5px 5px 0 0;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
}
/* 选中的黑框的样式*/
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
border-bottom: 1px solid rgba(80,109,130,.64);
border-radius: 5px 5px 0 0;
background-color: #398af1;
color: #fff;
border-color: #398af1;
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active:before{
content: "";
background: #fff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
</style>
... ...
<template>
<div id="me">
<div id="menu">
<ul>
<li> <a href="" class="drop">企业公共服务</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="">货主服务</a></li>
<li><a href="">代理人服务</a></li>
<li><a href="">航空公司服务</a></li>
<li><a href="">卡车运输服务</a></li>
<li><a href="">报关服务</a></li>
</ul>
</div>
</li>
<li><a href="" class="drop">增值服务</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="">在线物流交易</a></li>
<li><a href="">航空货运操作管理</a></li>
<li><a href="">智能通关服务</a></li>
<li><a href="">智慧组板服务</a></li>
<li><a href="">物流金融服务</a></li>
</ul>
</div>
</li>
<li><a href="" class="drop">综合查询</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="">实时查询服务</a></li>
<li><a href="">综合查询服务</a></li>
</ul>
</div></li>
<li><a href="" class="drop">政府监管服务</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="">货物监管辅助管理</a></li>
<li><a href="">卡口辅助管理</a></li>
<li><a href="">安检信息服务</a></li>
<li><a href="">特种货物监管</a></li>
<li><a href="">企业信用监管</a></li>
</ul>
</div></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "NaBar"
}
</script>
<style scoped>
/*去除序列点*/
li{
list-style-type: none;
}
#me{
height: 100px;
}
/*菜单栏底层div*/
#menu {
width: 1000px;
height: 50px;
border-bottom: 3px solid rgb(111,130,148);
position:relative;
}
/*一级菜单栏样式*/
#menu li{
float: left;
width: 130px;
height: 50px;
text-align: center;
/*position:relative;*/
border:none;
}
/*一级菜单栏字体*/
#menu li a {
font-size:17px;
display:block;
/*outline:0;*/
/*删除下划线*/
text-decoration:none;
}
/*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
#menu li:hover .dropdown_1column {
left:0px;
top:45px;
float: left;
display:inline-block;
width: 720px;
font-size:17px;
color:#ffffff;
}
/*二级菜单栏样式*/
.dropdown_1column{
position: absolute;
left: -999em;
/*text-align: center;*/
background: rgb(14,119,238);
width: 160px;
}
/*鼠标移至二级菜单栏颜色改变*/
#menu li:hover div li:hover{background-color: rgb(18,170,255)}
/*二级菜单栏样式*/
#menu li ul li {
font-size:17px;
float:left;
line-height:50px;
}
</style>
... ...