'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="风格2" value="tags-style-two"></el-option>
|
||||||
<el-option label="风格3" value="tags-style-three"></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="风格4" value="tags-style-four"></el-option>
|
||||||
|
<el-option label="风格5" value="tags-style-five"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,7 +20,11 @@
|
|||||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" />
|
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" />
|
||||||
<span>{{ $t(v.meta.title) }}</span>
|
<span>{{ $t(v.meta.title) }}</span>
|
||||||
<template v-if="isActive(v)">
|
<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
|
<SvgIcon
|
||||||
name="elementClose"
|
name="elementClose"
|
||||||
class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
|
class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
|
||||||
@ -648,6 +652,38 @@ export default {
|
|||||||
color: var(--color-primary) !important;
|
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 {
|
.layout-navbars-tagsview-shadow {
|
||||||
box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
|
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 同名
|
// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
|
||||||
tagsStyle: 'tags-style-one',
|
tagsStyle: 'tags-style-five',
|
||||||
// 主页面切换动画:可选值"<slide-right|slide-left|opacitys>",默认 slide-right
|
// 主页面切换动画:可选值"<slide-right|slide-left|opacitys>",默认 slide-right
|
||||||
animation: 'slide-right',
|
animation: 'slide-right',
|
||||||
// 分栏高亮风格:可选值"<columns-round|columns-card>",默认 columns-round
|
// 分栏高亮风格:可选值"<columns-round|columns-card>",默认 columns-round
|
||||||
|
Loading…
Reference in New Issue
Block a user