parent
45564d6643
commit
63ad76379f
After Width: | Height: | Size: 443 B |
@ -1,20 +1,112 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-tabs"></div>
|
<div class="layout-tabs">
|
||||||
|
<el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
|
||||||
|
<el-tab-pane v-for="(item, index) in tabs" :key="index" :name="item.name">
|
||||||
|
<template #label>
|
||||||
|
<XIcon :name="item.meta.icon" />
|
||||||
|
<span>{{ item.meta.title }}</span>
|
||||||
|
</template>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<div class="operation">
|
||||||
|
<el-dropdown trigger="hover">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<XIcon name="apps-fill" />
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>关闭全部</el-dropdown-item>
|
||||||
|
<el-dropdown-item>关闭其他</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
const activeTab = ref('home');
|
||||||
|
const tabs = computed(() => [
|
||||||
|
{ path: '/', name: 'home', meta: { title: '首页', icon: 'home-fill' } },
|
||||||
|
{ path: '/', name: 'route1', meta: { title: '菜单1', icon: 'home-fill' } },
|
||||||
|
{ path: '/', name: 'route2', meta: { title: '菜单2', icon: 'home-fill' } },
|
||||||
|
{ path: '/', name: 'route3', meta: { title: '菜单3', icon: 'home-fill' } },
|
||||||
|
{ path: '/', name: 'route4', meta: { title: '菜单4', icon: 'home-fill' } },
|
||||||
|
{ path: '/', name: 'route5', meta: { title: '菜单5', icon: 'home-fill' } },
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.layout-tabs {
|
.layout-tabs {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: @layout-tabs-height;
|
height: @layout-tabs-height;
|
||||||
border-top: 1px solid @color-ghost-white;
|
padding: 0 @layout-space-large;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
align-items: flex-end;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
box-shadow: @layout-shadow;
|
overflow: hidden;
|
||||||
|
box-shadow: fade(@layout-header-fc, 15%) 0 1px 5px;
|
||||||
background-color: @layout-header-bgc;
|
background-color: @layout-header-bgc;
|
||||||
color: @layout-header-fc;
|
color: @layout-header-fc;
|
||||||
|
.el-tabs {
|
||||||
|
height: 80%;
|
||||||
|
width: 100%;
|
||||||
|
flex-shrink: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
:deep(.el-tabs__header) {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
.el-tabs__nav-wrap {
|
||||||
|
height: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
> * {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-scroll {
|
||||||
|
.el-tabs__nav {
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
padding: 0 @layout-space-large;
|
||||||
|
.el-tabs__item {
|
||||||
|
height: 100%;
|
||||||
|
min-width: 100px;
|
||||||
|
margin-right: -8px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
mask-image: url('~/layouts/tabs-bgp.png');
|
||||||
|
-webkit-mask-image: url('~/layouts/tabs-bgp.png');
|
||||||
|
mask-size: 100% 100%;
|
||||||
|
-webkit-mask-size: 100% 100%;
|
||||||
|
&:hover {
|
||||||
|
background-color: @color-white-dark;
|
||||||
|
}
|
||||||
|
&.is-active {
|
||||||
|
background-color: @color-primary-white;
|
||||||
|
}
|
||||||
|
.x-icon {
|
||||||
|
margin-right: @layout-space-small;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.operation {
|
||||||
|
height: 80%;
|
||||||
|
margin-left: @layout-space;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
&:hover {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in new issue