feat: tabs栏布局
This commit is contained in:
wang_fan_w
parent
94212b4d5b
commit
cb9efa45fd
1
src/components.d.ts
vendored
1
src/components.d.ts
vendored
@ -7,6 +7,7 @@ export {}
|
||||
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
IconModule: (typeof import("./components/IconModule/index.vue"))["default"];
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<a-layout-header class="header">
|
||||
<div class="header_crumb">
|
||||
<div class="menu_fold"><icon-menu-fold style="font-size: 18px; stroke-width: 3" /></div>
|
||||
<div class="menu_fold">
|
||||
<a-button size="mini" type="text" class="menu_fold_icon">
|
||||
<template #icon>
|
||||
<icon-menu-fold :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="breadcrumb">
|
||||
<a-space direction="vertical">
|
||||
<a-breadcrumb>
|
||||
@ -23,40 +29,51 @@
|
||||
</div>
|
||||
<div class="header_setting">
|
||||
<a-tooltip content="语言">
|
||||
<div>
|
||||
<icon-language />
|
||||
</div>
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-language :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="切换黑夜模式">
|
||||
<div>
|
||||
<icon-sun-fill />
|
||||
</div>
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-sun-fill :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="通知">
|
||||
<div>
|
||||
<icon-notification />
|
||||
</div>
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-notification :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="全屏">
|
||||
<div>
|
||||
<icon-fullscreen />
|
||||
</div>
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-fullscreen :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="系统设置">
|
||||
<div>
|
||||
<icon-settings />
|
||||
</div>
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-settings :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="主题设置">
|
||||
<div>
|
||||
<icon-skin />
|
||||
</div>
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<template #icon>
|
||||
<icon-skin :size="18" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<div class="my_image"><a-image width="32" :src="Tom" /></div>
|
||||
<div class="my_image"><a-image width="36" :src="Tom" /></div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tom from "@/assets/img/tom.jpg";
|
||||
</script>
|
||||
@ -80,6 +97,10 @@ import Tom from "@/assets/img/tom.jpg";
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.menu_fold_icon {
|
||||
color: $color-text-1;
|
||||
border-radius: $radius-box;
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-left: $margin;
|
||||
@ -89,23 +110,23 @@ import Tom from "@/assets/img/tom.jpg";
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
> .icon_btn {
|
||||
width: $icon-box;
|
||||
height: $icon-box;
|
||||
border-radius: $radius-box;
|
||||
box-sizing: border-box;
|
||||
// border: $border-1 solid $color-border-1;
|
||||
margin-left: $margin;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: $color-text-1;
|
||||
}
|
||||
> div:hover {
|
||||
background: $color-fill-1;
|
||||
}
|
||||
|
||||
.my_image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-left: $margin;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,89 @@
|
||||
<template>
|
||||
<div class="tabs">tabs栏</div>
|
||||
<div class="tabs">
|
||||
<a-tabs :editable="true" :hide-content="true" size="medium" show-add-button @add="handleAdd" @delete="handleDelete">
|
||||
<a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2" />
|
||||
</a-tabs>
|
||||
<div class="tabs_setting">
|
||||
<a-dropdown trigger="hover">
|
||||
<div class="setting"><icon-sync :size="18" /></div>
|
||||
<template #content>
|
||||
<a-doption>
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>刷新</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-left /></template>
|
||||
<template #default>关闭左侧</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-right /></template>
|
||||
<template #default>关闭右侧</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-close /></template>
|
||||
<template #default>关闭其它</template>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<template #icon><icon-close-circle /></template>
|
||||
<template #default>全部关闭</template>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
let count = 5;
|
||||
const data = ref([
|
||||
{
|
||||
key: "1",
|
||||
title: "Tab 1",
|
||||
content: "Content of Tab Panel 1"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
title: "Tab 2",
|
||||
content: "Content of Tab Panel 2"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
title: "Tab 3",
|
||||
content: "Content of Tab Panel 3"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
title: "Tab 4",
|
||||
content: "Content of Tab Panel 4"
|
||||
}
|
||||
]);
|
||||
|
||||
const handleAdd = () => {
|
||||
const number = count++;
|
||||
data.value = data.value.concat({
|
||||
key: `${number}`,
|
||||
title: `New Tab ${number}`,
|
||||
content: `Content of New Tab Panel ${number}`
|
||||
});
|
||||
};
|
||||
const handleDelete = key => {
|
||||
data.value = data.value.filter(item => item.key !== key);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: $border-1 solid $color-border-2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.tabs_setting {
|
||||
margin: 0 0 0 $margin;
|
||||
.setting {
|
||||
margin-right: $margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
9
src/style/global-hover.scss
Normal file
9
src/style/global-hover.scss
Normal file
@ -0,0 +1,9 @@
|
||||
// global hover css
|
||||
// 鼠标移入过渡
|
||||
.move-fill {
|
||||
background: rgba($color-fill-1, 0);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.move-fill:hover {
|
||||
background: rgba($color-fill-1, 1);
|
||||
}
|
||||
@ -2,7 +2,9 @@
|
||||
|
||||
$margin: 14px; // 盒子间距
|
||||
$padding: 16px; // 盒子和内容的间距
|
||||
$radius-box: 2px; // 边框圆角
|
||||
$radius-box: 4px; // 边框圆角
|
||||
$icon-box: 24px; // icon盒子通用大小
|
||||
$icon-size: 18px; // icon通用大小
|
||||
|
||||
// 边框宽度
|
||||
$border-1: 1px; // 常规-主要
|
||||
@ -24,7 +26,7 @@ $shadow-border-5: inset 0 0 0 1px violet;
|
||||
$shadow-border-6: inset 0 0 0 1px green;
|
||||
|
||||
// 填充色
|
||||
$color-fill-1: #eeeeee; // 常规填充色/白底悬浮
|
||||
$color-fill-1: #eeeeee; // 常规填充色/灰底悬浮
|
||||
$color-fill-2: #d1d1d1; // 深/灰底悬浮
|
||||
$color-fill-3: #b6b6b6; // 重/特殊场景
|
||||
$color-fill-4: #9b9b9b; // 浅/禁用
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "./global-theme.scss";
|
||||
@import "./global-hover.scss";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user