【修改】修改tab
This commit is contained in:
zhoulingpo
@@ -3,21 +3,24 @@
|
||||
<!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
|
||||
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
|
||||
<!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
|
||||
<a-tabs
|
||||
@contextmenu.native="e => onContextmenu(e)"
|
||||
v-if="multipage"
|
||||
:active-key="activePage"
|
||||
class="tab-layout-tabs"
|
||||
style="height:52px"
|
||||
:hide-add="true"
|
||||
type="editable-card"
|
||||
@change="changePage"
|
||||
@tabClick="tabCallBack"
|
||||
@edit="editPage">
|
||||
<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
|
||||
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class='topHeadertabList'>
|
||||
<a-tabs
|
||||
@contextmenu.native="e => onContextmenu(e)"
|
||||
v-if="multipage"
|
||||
:active-key="activePage"
|
||||
class="tab-layout-tabs "
|
||||
style="height:52px"
|
||||
:hide-add="true"
|
||||
type="editable-card"
|
||||
@change="changePage"
|
||||
@tabClick="tabCallBack"
|
||||
@edit="editPage">
|
||||
<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList" :closable='page.closable' >
|
||||
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title +'hhhh '}}</span>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<div style="margin: 12px 12px 0;">
|
||||
<!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
|
||||
<keep-alive v-if="multipage">
|
||||
@@ -298,85 +301,128 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.topHeadertabList .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab.ant-tabs-tab-active{
|
||||
color: #0F6FC4;
|
||||
text-shadow: none;
|
||||
background-color: #fff!important;
|
||||
}
|
||||
.topHeadertabList .ant-tabs-nav{
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="page-transition" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the page transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
}
|
||||
.topHeadertabList .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
|
||||
border-radius: 0;
|
||||
line-height: 40px!important;
|
||||
}
|
||||
.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
|
||||
border-bottom: none!important;
|
||||
border-top: none!important;
|
||||
border-left: none!important;
|
||||
border-right: 1px solid #E5E6EB!important;
|
||||
}
|
||||
.topHeadertabList .ant-tabs-nav-wrap{
|
||||
border-right: 1px solid #E5E6EB!important;
|
||||
border-left: 1px solid #E5E6EB!important;
|
||||
}
|
||||
.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card .ant-tabs-tab{
|
||||
padding: 0 36px 0 12px!important;
|
||||
margin-right: 0!important;
|
||||
background-color: #F7F8FA!important;
|
||||
}
|
||||
.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card .ant-tabs-tab .ant-tabs-close-x{
|
||||
right: 15px;
|
||||
opacity: 1!important;
|
||||
}
|
||||
.topHeadertabList .tab-layout-tabs.ant-tabs{
|
||||
border-bottom: 1px solid #E5E6EB;
|
||||
height: 40px!important;
|
||||
}
|
||||
.topHeadertabList .ant-tabs-nav-container,.topHeadertabList .tab-layout-tabs.ant-tabs .ant-tabs-bar{
|
||||
margin-top: 0;
|
||||
}
|
||||
.topHeadertabList .ant-tabs-nav-wrap,.topHeadertabList .tab-layout-tabs.ant-tabs{
|
||||
background: #F7F8FA;
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
|
||||
.page-transition-enter {
|
||||
opacity: 0;
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="page-transition" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the page transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
|
||||
.page-transition-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.page-transition-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.page-transition-enter .page-transition-container,
|
||||
.page-transition-leave-active .page-transition-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/*美化弹出Tab样式*/
|
||||
.ant-tabs-nav-container {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 修改 ant-tabs 样式 */
|
||||
.tab-layout-tabs.ant-tabs {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
background-color: white;
|
||||
padding: 0 20px;
|
||||
|
||||
.ant-tabs-bar {
|
||||
margin: 4px 0 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.page-transition-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-transition-enter .page-transition-container,
|
||||
.page-transition-leave-active .page-transition-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.tab-layout-tabs.ant-tabs {
|
||||
|
||||
/*美化弹出Tab样式*/
|
||||
.ant-tabs-nav-container {
|
||||
margin-top: 4px;
|
||||
}
|
||||
&.ant-tabs-card .ant-tabs-tab {
|
||||
|
||||
/* 修改 ant-tabs 样式 */
|
||||
.tab-layout-tabs.ant-tabs {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
background-color: white;
|
||||
padding: 0 20px;
|
||||
padding: 0 24px !important;
|
||||
background-color: white !important;
|
||||
margin-right: 10px !important;
|
||||
|
||||
.ant-tabs-bar {
|
||||
margin: 4px 0 0;
|
||||
border: none;
|
||||
.ant-tabs-close-x {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
opacity: 0 !important;
|
||||
cursor: pointer !important;
|
||||
font-size: 12px !important;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
&:hover .ant-tabs-close-x {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tab-layout-tabs.ant-tabs {
|
||||
|
||||
&.ant-tabs-card .ant-tabs-tab {
|
||||
|
||||
padding: 0 24px !important;
|
||||
background-color: white !important;
|
||||
margin-right: 10px !important;
|
||||
|
||||
.ant-tabs-close-x {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
opacity: 0 !important;
|
||||
cursor: pointer !important;
|
||||
font-size: 12px !important;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
&:hover .ant-tabs-close-x {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
|
||||
.ant-tabs-tab {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
|
||||
.ant-tabs-tab {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
.ant-tabs-tab-active {
|
||||
border-color: @primary-color!important;
|
||||
}
|
||||
.ant-tabs-tab-active {
|
||||
border-color: @primary-color!important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -17,7 +17,21 @@
|
||||
:style="smenuStyle">
|
||||
</s-menu>
|
||||
<!-- <div style='width: 100px;height:100px;background: pink'></div>-->
|
||||
<img src='../../assets/bgImg.png' alt='' class='bgImg'>
|
||||
<img v-if='!collapsed' src='../../assets/bgImg.png' alt='' class='bgImg'>
|
||||
<div v-else></div>
|
||||
|
||||
|
||||
<!-- <a-icon-->
|
||||
<!-- class='bgImg'-->
|
||||
<!-- v-if="device==='mobile'"-->
|
||||
<!-- class="trigger"-->
|
||||
<!-- :type="collapsed ? 'menu-fold' : 'menu-unfold'"-->
|
||||
<!-- @click="toggle"></a-icon>-->
|
||||
<!-- <a-icon-->
|
||||
<!-- class="bgImg trigger"-->
|
||||
<!-- :type="collapsed ? 'menu-unfold' : 'menu-fold'"-->
|
||||
<!-- @click="toggle"/>-->
|
||||
|
||||
</a-layout-sider>
|
||||
|
||||
</template>
|
||||
@@ -152,6 +166,22 @@ export default {
|
||||
|
||||
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
||||
<style lang="less">
|
||||
.trigger {
|
||||
width: 53px;
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
padding: 0 18px;
|
||||
cursor: pointer;
|
||||
transition: color 300ms, background 300ms;
|
||||
bottom: 4px;
|
||||
/* right: -12px; */
|
||||
left: 129px;
|
||||
color: #fff;
|
||||
background-color: #FFFFFF14;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
.sider.light {
|
||||
background-color: #001529 !important;
|
||||
}
|
||||
|
||||
@@ -198,7 +198,7 @@ export default {
|
||||
display: inline-block;
|
||||
.ant-breadcrumb {
|
||||
a {
|
||||
color:#efefef;
|
||||
color:#898989;
|
||||
}
|
||||
span{
|
||||
color: #1D2129;
|
||||
@@ -226,9 +226,10 @@ export default {
|
||||
|
||||
.header {
|
||||
z-index: 2;
|
||||
color: white;
|
||||
color: #333;
|
||||
height: @height;
|
||||
background-color: @primary-color;
|
||||
//background-color: @primary-color;
|
||||
background-color: #fff;
|
||||
transition: background 300ms;
|
||||
|
||||
/* dark 样式 */
|
||||
|
||||
Reference in New Issue
Block a user