'admin-21.12.30:新增tagsview风格5'
This commit is contained in:
parent
98e75351b8
commit
920c705421
@ -260,6 +260,7 @@
|
||||
<el-option label="风格2" value="tags-style-two"></el-option>
|
||||
<el-option label="风格3" value="tags-style-three"></el-option>
|
||||
<el-option label="风格4" value="tags-style-four"></el-option>
|
||||
<el-option label="风格5" value="tags-style-five"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -20,7 +20,11 @@
|
||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" />
|
||||
<span>{{ $t(v.meta.title) }}</span>
|
||||
<template v-if="isActive(v)">
|
||||
<SvgIcon name="elementRefreshRight" class="ml5" @click.stop="refreshCurrentTagsView($route.fullPath)" />
|
||||
<SvgIcon
|
||||
name="elementRefreshRight"
|
||||
class="ml5 layout-navbars-tagsview-ul-li-refresh"
|
||||
@click.stop="refreshCurrentTagsView($route.fullPath)"
|
||||
/>
|
||||
<SvgIcon
|
||||
name="elementClose"
|
||||
class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
|
||||
@ -648,6 +652,38 @@ export default {
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
// 风格5
|
||||
.tags-style-five {
|
||||
align-items: flex-end;
|
||||
.tags-style-five-svg {
|
||||
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
|
||||
12 27 15;
|
||||
}
|
||||
.layout-navbars-tagsview-ul-li {
|
||||
padding: 0 5px;
|
||||
border-width: 15px 27px 15px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
margin: 0 -15px;
|
||||
.layout-icon-active,
|
||||
.layout-navbars-tagsview-ul-li-iconfont,
|
||||
.layout-navbars-tagsview-ul-li-refresh {
|
||||
display: none;
|
||||
}
|
||||
.layout-icon-three {
|
||||
display: block;
|
||||
}
|
||||
&:hover {
|
||||
@extend .tags-style-five-svg;
|
||||
background: var(--color-primary-light-9);
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
@extend .tags-style-five-svg;
|
||||
background: var(--color-primary) !important;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-navbars-tagsview-shadow {
|
||||
box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
|
||||
|
@ -110,9 +110,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
/**
|
||||
* 其它设置
|
||||
*/
|
||||
// Tagsview 风格:可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four>",默认 tags-style-one
|
||||
// Tagsview 风格:可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four|tags-style-five>",默认 tags-style-five
|
||||
// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
|
||||
tagsStyle: 'tags-style-one',
|
||||
tagsStyle: 'tags-style-five',
|
||||
// 主页面切换动画:可选值"<slide-right|slide-left|opacitys>",默认 slide-right
|
||||
animation: 'slide-right',
|
||||
// 分栏高亮风格:可选值"<columns-round|columns-card>",默认 columns-round
|
||||
|
Loading…
Reference in New Issue
Block a user