JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-10-09 10:44:19 +08:00
Code Issues Projects Releases Wiki Activity

✨多标签页适配手机端

Browse Source
This commit is contained in:
chuzhixin 2020-10-06 00:25:04 +08:00
parent f2dd815dc1
commit 64c03fd686
1 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/layout/vab-tabs/index.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="vab-tabs"> <div class="vab-tabs">
<a-row type="flex"> <div class="vab-tabs-left-panel">
<a-col flex="auto">
<a-tabs <a-tabs
@tab-click="handleTabClick" @tab-click="handleTabClick"
@edit="handleTabRemove" @edit="handleTabRemove"
@ -16,8 +15,8 @@
:tab="item.meta.title" :tab="item.meta.title"
></a-tab-pane> ></a-tab-pane>
</a-tabs> </a-tabs>
</a-col> </div>
<a-col flex="88px"> <div class="vab-tabs-right-panel">
<a-dropdown> <a-dropdown>
<template v-slot:overlay> <template v-slot:overlay>
<a-menu @click="handleClick"> <a-menu @click="handleClick">
@ -40,8 +39,7 @@
<DownOutlined /> <DownOutlined />
</a-button> </a-button>
</a-dropdown> </a-dropdown>
</a-col> </div>
</a-row>
</div> </div>
</template> </template>
@ -180,6 +178,14 @@
.vab-tabs { .vab-tabs {
padding: 0 @vab-margin; padding: 0 @vab-margin;
background: #ffffff; background: #ffffff;
&-left-panel {
float: left;
width: calc(100% - 52px - @vab-margin - @vab-margin);
}
&-right-panel {
float: left;
width: 52px;
}
.ant-tabs { .ant-tabs {
&-bar { &-bar {
margin: 0 !important; margin: 0 !important;
@ -191,6 +197,11 @@
background: #ffffff !important; background: #ffffff !important;
border: 1px solid #dedede !important; border: 1px solid #dedede !important;
} }
&-tab-prev,
&-tab-next {
height: 32px !important;
line-height: 32px !important;
}
&-tab-active { &-tab-active {
border: 1px solid #1890ff !important; border: 1px solid #1890ff !important;
.ant-tabs-close-x { .ant-tabs-close-x {