'admin-21.01.09:布局配置新增其它设置及逻辑'
This commit is contained in:
parent
e7e65b750c
commit
f54128568d
@ -6,7 +6,7 @@
|
|||||||
"build": "vite build"
|
"build": "vite build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"element-plus": "^v1.0.1-beta.20",
|
"element-plus": "^v1.0.1-beta.23",
|
||||||
"mitt": "^2.1.0",
|
"mitt": "^2.1.0",
|
||||||
"sortablejs": "^1.10.2",
|
"sortablejs": "^1.10.2",
|
||||||
"vue": "^3.0.5",
|
"vue": "^3.0.5",
|
||||||
|
@ -9,7 +9,7 @@ export default {
|
|||||||
name: "app",
|
name: "app",
|
||||||
setup() {
|
setup() {
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
setIconfont(["//at.alicdn.com/t/font_2298093_8wsrw2zw3rg.css"]);
|
setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -7,16 +7,14 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
|||||||
component: () => import('/@/views/layout/index.vue'),
|
component: () => import('/@/views/layout/index.vue'),
|
||||||
redirect: '/home',
|
redirect: '/home',
|
||||||
meta: {
|
meta: {
|
||||||
title: '首页',
|
title: '首页'
|
||||||
index: 0
|
|
||||||
},
|
},
|
||||||
children: [{
|
children: [{
|
||||||
path: '/home',
|
path: '/home',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import('/@/views/home/index.vue'),
|
component: () => import('/@/views/home/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '首页',
|
title: '首页'
|
||||||
index: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -24,8 +22,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
|||||||
name: 'docs',
|
name: 'docs',
|
||||||
component: () => import('/@/views/docs/index.vue'),
|
component: () => import('/@/views/docs/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '文档',
|
title: '文档'
|
||||||
index: 1
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -33,8 +30,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
|||||||
name: 'docs1',
|
name: 'docs1',
|
||||||
component: () => import('/@/views/docs copy 1/index.vue'),
|
component: () => import('/@/views/docs copy 1/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '文档1',
|
title: '文档1'
|
||||||
index: 2
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -42,8 +38,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
|||||||
name: 'docs2',
|
name: 'docs2',
|
||||||
component: () => import('/@/views/docs copy 2/index.vue'),
|
component: () => import('/@/views/docs copy 2/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '文档2',
|
title: '文档2'
|
||||||
index: 3
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -51,8 +46,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
|||||||
name: 'docs3',
|
name: 'docs3',
|
||||||
component: () => import('/@/views/docs copy 3/index.vue'),
|
component: () => import('/@/views/docs copy 3/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '文档3',
|
title: '文档3'
|
||||||
index: 4
|
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
@ -30,7 +30,9 @@ export interface RootStateTypes {
|
|||||||
isGrayscale: boolean,
|
isGrayscale: boolean,
|
||||||
isInvert: boolean,
|
isInvert: boolean,
|
||||||
isWartermark: boolean,
|
isWartermark: boolean,
|
||||||
wartermarkText: string
|
wartermarkText: string,
|
||||||
|
tagsStyle: string,
|
||||||
|
animation: string
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -22,6 +22,16 @@
|
|||||||
.slide-left-leave-to {
|
.slide-left-leave-to {
|
||||||
@extend .slide-right-enter-from;
|
@extend .slide-right-enter-from;
|
||||||
}
|
}
|
||||||
|
.opacitys-enter-active,
|
||||||
|
.opacitys-leave-active {
|
||||||
|
will-change: transform;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.opacitys-enter-from,
|
||||||
|
.opacitys-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* Breadcrumb 面包屑过渡动画
|
/* Breadcrumb 面包屑过渡动画
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
|
@ -11,6 +11,9 @@
|
|||||||
color: set-color(primary-light-3);
|
color: set-color(primary-light-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-button--text:active {
|
||||||
|
color: set-color(primary-light-3);
|
||||||
|
}
|
||||||
// default
|
// default
|
||||||
.el-button--default:hover,
|
.el-button--default:hover,
|
||||||
.el-button--default:focus {
|
.el-button--default:focus {
|
||||||
@ -20,6 +23,9 @@
|
|||||||
.el-button--default.is-plain:focus {
|
.el-button--default.is-plain:focus {
|
||||||
@include Button(primary, whites, primary-light-1);
|
@include Button(primary, whites, primary-light-1);
|
||||||
}
|
}
|
||||||
|
.el-button--default:active {
|
||||||
|
@include Button(primary, whites, primary-light-1);
|
||||||
|
}
|
||||||
// primary
|
// primary
|
||||||
.el-button--primary {
|
.el-button--primary {
|
||||||
@include Button(whites, primary, primary);
|
@include Button(whites, primary, primary);
|
||||||
@ -41,6 +47,10 @@
|
|||||||
.el-button--primary.is-disabled:hover {
|
.el-button--primary.is-disabled:hover {
|
||||||
@include Button(whites, primary-light-7, primary-light-7);
|
@include Button(whites, primary-light-7, primary-light-7);
|
||||||
}
|
}
|
||||||
|
.el-button--primary.is-active,
|
||||||
|
.el-button--primary:active {
|
||||||
|
@include Button(whites, primary, primary);
|
||||||
|
}
|
||||||
// success
|
// success
|
||||||
.el-button--success {
|
.el-button--success {
|
||||||
@include Button(whites, success, success);
|
@include Button(whites, success, success);
|
||||||
@ -56,6 +66,10 @@
|
|||||||
@include Button(whites, success, success);
|
@include Button(whites, success, success);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-button--success.is-active,
|
||||||
|
.el-button--success:active {
|
||||||
|
@include Button(whites, success, success);
|
||||||
|
}
|
||||||
// info
|
// info
|
||||||
.el-button--info {
|
.el-button--info {
|
||||||
@include Button(whites, info, info);
|
@include Button(whites, info, info);
|
||||||
@ -71,6 +85,10 @@
|
|||||||
@include Button(whites, info, info);
|
@include Button(whites, info, info);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-button--info.is-active,
|
||||||
|
.el-button--info:active {
|
||||||
|
@include Button(whites, info, info);
|
||||||
|
}
|
||||||
// warning
|
// warning
|
||||||
.el-button--warning {
|
.el-button--warning {
|
||||||
@include Button(whites, warning, warning);
|
@include Button(whites, warning, warning);
|
||||||
@ -86,6 +104,10 @@
|
|||||||
@include Button(whites, warning, warning);
|
@include Button(whites, warning, warning);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-button--warning.is-active,
|
||||||
|
.el-button--warning:active {
|
||||||
|
@include Button(whites, warning, warning);
|
||||||
|
}
|
||||||
// danger
|
// danger
|
||||||
.el-button--danger {
|
.el-button--danger {
|
||||||
@include Button(whites, danger, danger);
|
@include Button(whites, danger, danger);
|
||||||
@ -101,6 +123,10 @@
|
|||||||
@include Button(whites, danger, danger);
|
@include Button(whites, danger, danger);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-button--danger.is-active,
|
||||||
|
.el-button--danger:active {
|
||||||
|
@include Button(whites, danger, danger);
|
||||||
|
}
|
||||||
|
|
||||||
/* Link 文字链接
|
/* Link 文字链接
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
|
@ -27,5 +27,7 @@ export default {
|
|||||||
isGrayscale: false,
|
isGrayscale: false,
|
||||||
isInvert: false,
|
isInvert: false,
|
||||||
isWartermark: false,
|
isWartermark: false,
|
||||||
wartermarkText: 'small@小柒'
|
wartermarkText: 'small@小柒',
|
||||||
|
tagsStyle: 'tagsStyleOne',
|
||||||
|
animation: 'slideRight'
|
||||||
}
|
}
|
@ -1,3 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
docs
|
<p v-for="v in 100" :key="v">docs</p>
|
||||||
</template>
|
</template>
|
@ -3,7 +3,7 @@
|
|||||||
<el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}"
|
<el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}"
|
||||||
ref="layoutScrollbarRef">
|
ref="layoutScrollbarRef">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition :name="transitionName" mode="out-in">
|
<transition :name="setTransitionName" mode="out-in">
|
||||||
<div :key="key">
|
<div :key="key">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
@ -25,7 +25,7 @@ import {
|
|||||||
getCurrentInstance,
|
getCurrentInstance,
|
||||||
watch,
|
watch,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { useRoute, onBeforeRouteUpdate } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
import { useStore } from "/@/store/index.ts";
|
import { useStore } from "/@/store/index.ts";
|
||||||
import Footer from "/@/views/layout/footer/index.vue";
|
import Footer from "/@/views/layout/footer/index.vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -39,14 +39,19 @@ export default defineComponent({
|
|||||||
transitionName: "slide-right",
|
transitionName: "slide-right",
|
||||||
headerHeight: "84px",
|
headerHeight: "84px",
|
||||||
});
|
});
|
||||||
|
const setTransitionName = computed(() => {
|
||||||
|
let { animation } = store.state.themeConfig;
|
||||||
|
if (animation === "slideRight")
|
||||||
|
return (state.transitionName = "slide-right");
|
||||||
|
else if (animation === "slideLeft")
|
||||||
|
return (state.transitionName = "slide-left");
|
||||||
|
else if (animation === "opacitys")
|
||||||
|
return (state.transitionName = "opacitys");
|
||||||
|
});
|
||||||
const getThemeConfig = computed(() => {
|
const getThemeConfig = computed(() => {
|
||||||
return store.state.themeConfig;
|
return store.state.themeConfig;
|
||||||
});
|
});
|
||||||
const key = computed(() => route.path);
|
const key = computed(() => route.path);
|
||||||
onBeforeRouteUpdate((to, from) => {
|
|
||||||
state.transitionName =
|
|
||||||
to.meta.index > from.meta.index ? "slide-right" : "slide-left";
|
|
||||||
});
|
|
||||||
watch(store.state.themeConfig, (val) => {
|
watch(store.state.themeConfig, (val) => {
|
||||||
state.headerHeight = val.isTagsview ? "84px" : "50px";
|
state.headerHeight = val.isTagsview ? "84px" : "50px";
|
||||||
if (val.isFixedHeaderChange !== val.isFixedHeader) {
|
if (val.isFixedHeaderChange !== val.isFixedHeader) {
|
||||||
@ -55,6 +60,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
getThemeConfig,
|
getThemeConfig,
|
||||||
|
setTransitionName,
|
||||||
key,
|
key,
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
};
|
};
|
||||||
|
@ -182,20 +182,21 @@
|
|||||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-select placeholder="请选择" size="mini" style="width:90px;">
|
<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;">
|
||||||
<el-option label="风格1" value="风格1"></el-option>
|
<el-option label="风格1" value="tagsStyleOne"></el-option>
|
||||||
<el-option label="风格2" value="风格2"></el-option>
|
<el-option label="风格2" value="tagsStyleTwo"></el-option>
|
||||||
<el-option label="风格3" value="风格3"></el-option>
|
<el-option label="风格3" value="tagsStyleThree"></el-option>
|
||||||
|
<el-option label="风格4" value="tagsStyleFour"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt15 mb26">
|
<div class="layout-breadcrumb-seting-bar-flex mt15 mb26">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-select placeholder="请选择" size="mini" style="width:90px;">
|
<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
|
||||||
<el-option label="slide-right" value="slide-right"></el-option>
|
<el-option label="slideRight" value="slideRight"></el-option>
|
||||||
<el-option label="slide-right" value="slide-right"></el-option>
|
<el-option label="slideLeft" value="slideLeft"></el-option>
|
||||||
<el-option label="slide-right" value="slide-right"></el-option>
|
<el-option label="opacitys" value="opacitys"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -488,6 +489,8 @@ export default defineComponent({
|
|||||||
.el-circular {
|
.el-circular {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
.drawer-layout-active {
|
.drawer-layout-active {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
@ -495,6 +498,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.layout-tips-warp,
|
.layout-tips-warp,
|
||||||
.layout-tips-warp-active {
|
.layout-tips-warp-active {
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -504,6 +508,7 @@ export default defineComponent({
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
.layout-tips-box {
|
.layout-tips-box {
|
||||||
|
transition: inherit;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
@ -511,6 +516,7 @@ export default defineComponent({
|
|||||||
border-color: var(--color-primary-light-4);
|
border-color: var(--color-primary-light-4);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
.layout-tips-txt {
|
.layout-tips-txt {
|
||||||
|
transition: inherit;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -540,6 +546,26 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
|
.el-circular {
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
border: 1px solid;
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.layout-tips-warp {
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
.layout-tips-box {
|
||||||
|
transition: inherit;
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
.layout-tips-txt {
|
||||||
|
transition: inherit;
|
||||||
|
color: var(--color-primary) !important;
|
||||||
|
background-color: #e9eef3 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.copy-config {
|
.copy-config {
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<i class="el-icon-search" title="菜单搜索"></i>
|
<i class="el-icon-search" title="菜单搜索"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
||||||
<i class="el-icon-setting" title="布局配置"></i>
|
<i class="icon-skin iconfont" title="布局配置"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" title="消息"></i></div>
|
<div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" title="消息"></i></div>
|
||||||
<div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>
|
<div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
|
<div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
|
||||||
<Scroll ref="scrollRef">
|
<Scroll ref="scrollRef">
|
||||||
<ul class="layout-navbars-tagsview-ul">
|
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
|
||||||
<li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
|
<li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
|
||||||
@contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
|
@contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
|
||||||
:ref="el => { if (el) tagsRefs[k] = el }">
|
:ref="el => { if (el) tagsRefs[k] = el }">
|
||||||
@ -9,8 +9,9 @@
|
|||||||
<span>{{v.name}}</span>
|
<span>{{v.name}}</span>
|
||||||
<template v-if="isActive(v.path)">
|
<template v-if="isActive(v.path)">
|
||||||
<i class="el-icon-refresh-right ml5"></i>
|
<i class="el-icon-refresh-right ml5"></i>
|
||||||
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon"></i>
|
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"></i>
|
||||||
</template>
|
</template>
|
||||||
|
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"></i>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Scroll>
|
</Scroll>
|
||||||
@ -58,6 +59,14 @@ export default {
|
|||||||
{ id: 1, name: "文档3", path: "/docs3" },
|
{ id: 1, name: "文档3", path: "/docs3" },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
const setTagsStyle = computed(() => {
|
||||||
|
let { tagsStyle } = store.state.themeConfig;
|
||||||
|
if (tagsStyle === "tagsStyleTwo") return "layout-navbars-tagsview-ul-two";
|
||||||
|
else if (tagsStyle === "tagsStyleThree")
|
||||||
|
return "layout-navbars-tagsview-ul-three";
|
||||||
|
else if (tagsStyle === "tagsStyleFour")
|
||||||
|
return "layout-navbars-tagsview-ul-four";
|
||||||
|
});
|
||||||
const getThemeConfig = computed(() => {
|
const getThemeConfig = computed(() => {
|
||||||
return store.state.themeConfig;
|
return store.state.themeConfig;
|
||||||
});
|
});
|
||||||
@ -110,6 +119,7 @@ export default {
|
|||||||
contextmenuRef,
|
contextmenuRef,
|
||||||
scrollRef,
|
scrollRef,
|
||||||
getThemeConfig,
|
getThemeConfig,
|
||||||
|
setTagsStyle,
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -141,6 +151,8 @@ export default {
|
|||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -165,6 +177,12 @@ export default {
|
|||||||
background-color: var(--color-primary-light-3);
|
background-color: var(--color-primary-light-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.layout-icon-active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.layout-icon-three {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.is-active {
|
.is-active {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@ -172,5 +190,122 @@ export default {
|
|||||||
border-color: var(--color-primary);
|
border-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 风格2
|
||||||
|
&-ul-two {
|
||||||
|
.layout-navbars-tagsview-ul-li {
|
||||||
|
height: 34px !important;
|
||||||
|
line-height: 34px !important;
|
||||||
|
border: none !important;
|
||||||
|
.layout-navbars-tagsview-ul-li-iconfont {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.layout-icon-active {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.layout-icon-three {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is-active {
|
||||||
|
background: none !important;
|
||||||
|
color: var(--color-primary) !important;
|
||||||
|
border-bottom: 2px solid !important;
|
||||||
|
border-color: var(--color-primary) !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 风格3
|
||||||
|
&-ul-three {
|
||||||
|
.layout-navbars-tagsview-ul-li {
|
||||||
|
height: 34px !important;
|
||||||
|
line-height: 34px !important;
|
||||||
|
border: 1px solid #e6e6e6 !important;
|
||||||
|
border-top: none !important;
|
||||||
|
border-left: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
&:first-of-type {
|
||||||
|
border-left: 1px solid #e6e6e6 !important;
|
||||||
|
}
|
||||||
|
.layout-icon-active {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.layout-icon-three {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is-active {
|
||||||
|
background: white !important;
|
||||||
|
color: var(--color-primary) !important;
|
||||||
|
border-bottom: 1px solid !important;
|
||||||
|
border-bottom-color: var(--color-primary) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 风格4
|
||||||
|
&-ul-four {
|
||||||
|
.layout-navbars-tagsview-ul-li {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
.layout-icon-active {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.layout-icon-three {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is-active {
|
||||||
|
border-top-left-radius: 8px !important;
|
||||||
|
border-top-right-radius: 8px !important;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
left: -36px;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: -51px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: white;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
left: -10px;
|
||||||
|
transform: rotate(-4deg);
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: -10px;
|
||||||
|
transform: rotate(4deg) !important;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-primary) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -73,8 +73,8 @@ export default {
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%) translate3d(0, 0, 0);
|
transform: translate(-50%, -50%) translate3d(0, 0, 0);
|
||||||
background-color: rgba(255, 255, 255, 0.95);
|
background-color: rgba(255, 255, 255, 0.99);
|
||||||
box-shadow: 0 2px 12px 0 var(--color-primary-light-7);
|
box-shadow: 0 2px 12px 0 var(--color-primary-light-5);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: height 0.2s linear;
|
transition: height 0.2s linear;
|
||||||
height: 480px;
|
height: 480px;
|
||||||
|
Loading…
Reference in New Issue
Block a user