向文可
2 years ago
parent
45564d6643
commit
63ad76379f
|
After Width: | Height: | Size: 443 B |
@ -1,20 +1,112 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
.layout-tabs {
|
||||
width: 100%;
|
||||
height: @layout-tabs-height;
|
||||
border-top: 1px solid @color-ghost-white;
|
||||
padding: 0 @layout-space-large;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
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;
|
||||
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>
|
||||
|
||||
Loading…
Reference in new issue