mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-31 09:12:10 +08:00
'admin-21.01.03:编写布局主题配置页'
This commit is contained in:
lyt-Top
parent
9b4c4a0cae
commit
dd9544d7a5
@ -54,123 +54,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
|
||||
title: '文档3',
|
||||
index: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs4',
|
||||
name: 'docs4',
|
||||
component: () => import('/@/views/docs copy 4/index.vue'),
|
||||
meta: {
|
||||
title: '文档4',
|
||||
index: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs5',
|
||||
name: 'docs5',
|
||||
component: () => import('/@/views/docs copy 5/index.vue'),
|
||||
meta: {
|
||||
title: '文档5',
|
||||
index: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs6',
|
||||
name: 'docs6',
|
||||
component: () => import('/@/views/docs copy 6/index.vue'),
|
||||
meta: {
|
||||
title: '文档6',
|
||||
index: 7
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs7',
|
||||
name: 'docs7',
|
||||
component: () => import('/@/views/docs copy 7/index.vue'),
|
||||
meta: {
|
||||
title: '文档7',
|
||||
index: 8
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs8',
|
||||
name: 'docs8',
|
||||
component: () => import('/@/views/docs copy 8/index.vue'),
|
||||
meta: {
|
||||
title: '文档8',
|
||||
index: 9
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs9',
|
||||
name: 'docs9',
|
||||
component: () => import('/@/views/docs copy 9/index.vue'),
|
||||
meta: {
|
||||
title: '文档9',
|
||||
index: 10
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs10',
|
||||
name: 'docs10',
|
||||
component: () => import('/@/views/docs copy 10/index.vue'),
|
||||
meta: {
|
||||
title: '文档10',
|
||||
index: 11
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs11',
|
||||
name: 'docs11',
|
||||
component: () => import('/@/views/docs copy 11/index.vue'),
|
||||
meta: {
|
||||
title: '文档11',
|
||||
index: 12
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs12',
|
||||
name: 'docs12',
|
||||
component: () => import('/@/views/docs copy 12/index.vue'),
|
||||
meta: {
|
||||
title: '文档12',
|
||||
index: 13
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs13',
|
||||
name: 'docs13',
|
||||
component: () => import('/@/views/docs copy 13/index.vue'),
|
||||
meta: {
|
||||
title: '文档13',
|
||||
index: 14
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs14',
|
||||
name: 'docs14',
|
||||
component: () => import('/@/views/docs copy 14/index.vue'),
|
||||
meta: {
|
||||
title: '文档14',
|
||||
index: 15
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs15',
|
||||
name: 'docs15',
|
||||
component: () => import('/@/views/docs copy 15/index.vue'),
|
||||
meta: {
|
||||
title: '文档15',
|
||||
index: 16
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/docs16',
|
||||
name: 'docs16',
|
||||
component: () => import('/@/views/docs copy 16/index.vue'),
|
||||
meta: {
|
||||
title: '文档16',
|
||||
index: 17
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
||||
@ -29,9 +29,11 @@ body,
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.el-aside {
|
||||
background: #29384d;
|
||||
border-right: 1px solid rgb(230, 230, 230);
|
||||
background: var(--bg-menuBar);
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
|
||||
height: inherit;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.el-header {
|
||||
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
|
||||
|
||||
@ -10,11 +10,11 @@
|
||||
}
|
||||
.slide-right-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
.slide-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
transform: translateX(20px);
|
||||
}
|
||||
.slide-left-enter-from {
|
||||
@extend .slide-right-leave-to;
|
||||
@ -27,7 +27,7 @@
|
||||
------------------------------- */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s ease;
|
||||
position: absolute;
|
||||
}
|
||||
.breadcrumb-enter-from,
|
||||
|
||||
@ -58,6 +58,10 @@ $--color-danger-light-6: mix($--color-whites, $--color-danger, 60%) !default;
|
||||
$--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
|
||||
$--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
|
||||
$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
|
||||
$--bg-topBar: #ffffff;
|
||||
$--bg-menuBar: #29384d;
|
||||
$--bg-topBarColor: #606266;
|
||||
$--bg-menuBarColor: #e6e6e6;
|
||||
|
||||
/* 赋值给:root
|
||||
------------------------------- */
|
||||
@ -114,4 +118,8 @@ $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
|
||||
--color-danger-light-7: #{$--color-danger-light-7};
|
||||
--color-danger-light-8: #{$--color-danger-light-8};
|
||||
--color-danger-light-9: #{$--color-danger-light-9};
|
||||
--bg-topBar: #{$--bg-topBar};
|
||||
--bg-menuBar: #{$--bg-menuBar};
|
||||
--bg-topBarColor: #{$--bg-topBarColor};
|
||||
--bg-menuBarColor: #{$--bg-menuBarColor};
|
||||
}
|
||||
|
||||
@ -666,37 +666,55 @@
|
||||
|
||||
/* NavMenu 导航菜单
|
||||
------------------------------- */
|
||||
// 默认样式修改
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
}
|
||||
.el-menu-item.is-active,
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: var(--bg-menuBarColor);
|
||||
}
|
||||
// horizontal 水平方向时
|
||||
.el-menu--horizontal > .el-menu-item.is-active,
|
||||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom-color: set-color(primary);
|
||||
color: set-color(primary);
|
||||
}
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover,
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title,
|
||||
.el-menu .el-menu-item.is-active,
|
||||
.el-menu .el-submenu.is-active > .el-submenu__title {
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
|
||||
.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
|
||||
.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
|
||||
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
|
||||
color: set-color(primary);
|
||||
}
|
||||
// 外部链接时
|
||||
.el-menu-item a,
|
||||
.el-menu-item a:hover {
|
||||
.el-menu-item a:hover,
|
||||
.el-menu-item i,
|
||||
.el-submenu__title i {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
// default
|
||||
.el-menu-item.is-active {
|
||||
color: set-color(primary);
|
||||
background-color: set-color(primary-light-9);
|
||||
}
|
||||
.el-menu-item:focus,
|
||||
|
||||
// 默认 hover 时
|
||||
.el-menu-item:hover,
|
||||
.el-submenu__title:focus,
|
||||
.el-submenu__title:hover {
|
||||
background-color: set-color(primary-light-9);
|
||||
color: set-color(primary) !important;
|
||||
background-color: transparent !important;
|
||||
i {
|
||||
color: set-color(primary);
|
||||
}
|
||||
}
|
||||
// 高亮时
|
||||
.el-menu-item.is-active {
|
||||
color: #ffffff !important;
|
||||
background-color: set-color(primary) !important;
|
||||
i {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs 标签页
|
||||
@ -721,7 +739,7 @@
|
||||
}
|
||||
.el-breadcrumb__inner a,
|
||||
.el-breadcrumb__inner.is-link {
|
||||
color: #303133;
|
||||
color: var(--bg-topBarColor);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
docs
|
||||
</template>
|
||||
@ -23,9 +23,16 @@ export default {
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/docs3",
|
||||
path: "/home",
|
||||
meta: {
|
||||
title: "文档3",
|
||||
title: "微软",
|
||||
icon: "el-icon-s-flag",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs",
|
||||
meta: {
|
||||
title: "文档",
|
||||
icon: "el-icon-s-flag",
|
||||
},
|
||||
},
|
||||
@ -36,111 +43,20 @@ export default {
|
||||
icon: "el-icon-s-flag",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/docs2",
|
||||
meta: {
|
||||
title: "文档2",
|
||||
icon: "el-icon-s-flag",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/docs",
|
||||
meta: {
|
||||
title: "文档",
|
||||
icon: "el-icon-s-management",
|
||||
isLink: "https://www.ele.me",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs4",
|
||||
path: "/docs3",
|
||||
meta: {
|
||||
title: "文档4",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs5",
|
||||
meta: {
|
||||
title: "文档5",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs6",
|
||||
meta: {
|
||||
title: "文档6",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs7",
|
||||
meta: {
|
||||
title: "文档7",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs8",
|
||||
meta: {
|
||||
title: "文档8",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs9",
|
||||
meta: {
|
||||
title: "文档9",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs10",
|
||||
meta: {
|
||||
title: "文档10",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs11",
|
||||
meta: {
|
||||
title: "文档11",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs12",
|
||||
meta: {
|
||||
title: "文档12",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs13",
|
||||
meta: {
|
||||
title: "文档13",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs14",
|
||||
meta: {
|
||||
title: "文档14",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs15",
|
||||
meta: {
|
||||
title: "文档15",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/docs16",
|
||||
meta: {
|
||||
title: "文档16",
|
||||
title: "文档3",
|
||||
icon: "el-icon-s-management",
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Fashion />
|
||||
<Defaults />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Fashion from "/@/views/layout/fashion.vue";
|
||||
import Defaults from "/@/views/layout/defaults.vue";
|
||||
export default {
|
||||
name: "layout",
|
||||
components: { Fashion },
|
||||
components: { Defaults },
|
||||
};
|
||||
</script>
|
||||
@ -55,9 +55,14 @@ export default {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
margin-right: 15px;
|
||||
color: var(--bg-topBarColor);
|
||||
}
|
||||
.layout-navbars-breadcrumb-span {
|
||||
opacity: 0.8;
|
||||
opacity: 0.7;
|
||||
color: var(--bg-topBarColor);
|
||||
}
|
||||
:deep .el-breadcrumb__separator {
|
||||
@extend .layout-navbars-breadcrumb-span;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -21,5 +21,6 @@ export default {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgb(230, 230, 230);
|
||||
padding: 0 15px;
|
||||
background-color: var(--bg-topBar);
|
||||
}
|
||||
</style>
|
||||
@ -7,43 +7,77 @@
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="primary" show-alpha size="small"></el-color-picker>
|
||||
<el-color-picker v-model="primary" size="small" @change="onColorPickerChange('primary')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">success</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="success" show-alpha size="small"></el-color-picker>
|
||||
<el-color-picker v-model="success" size="small" @change="onColorPickerChange('success')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">info</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="info" show-alpha size="small"></el-color-picker>
|
||||
<el-color-picker v-model="info" size="small" @change="onColorPickerChange('info')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="warning" show-alpha size="small"></el-color-picker>
|
||||
<el-color-picker v-model="warning" size="small" @change="onColorPickerChange('warning')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="danger" show-alpha size="small"></el-color-picker>
|
||||
<el-color-picker v-model="danger" size="small" @change="onColorPickerChange('danger')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">菜单 / 顶栏</el-divider>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="topBar" show-alpha size="small"></el-color-picker>
|
||||
<el-color-picker v-model="topBar" size="small" @change="onBgColorPickerChange('topBar')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="menuBar" show-alpha size="small"></el-color-picker>
|
||||
<el-color-picker v-model="menuBar" size="small" @change="onBgColorPickerChange('menuBar')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')">
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt10">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="isCollapse"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景渐变</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="isCollapse"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -134,7 +168,7 @@
|
||||
<el-switch v-model="isCollapse"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">水印文案</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-input v-model="menuWidth" size="mini" style="width:90px;"></el-input>
|
||||
@ -143,9 +177,9 @@
|
||||
|
||||
<!-- 布局切换 -->
|
||||
<el-divider content-position="left">布局切换</el-divider>
|
||||
<div class="drawer-layout-content-flex">
|
||||
<!-- fashion 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<div class="layout-drawer-content-flex">
|
||||
<!-- defaults 布局 -->
|
||||
<div class="layout-drawer-content-item">
|
||||
<section class="el-container drawer-layout-active el-circular">
|
||||
<aside class="el-aside" style="width: 20px"></aside>
|
||||
<section class="el-container is-vertical">
|
||||
@ -155,12 +189,12 @@
|
||||
</section>
|
||||
<div class="layout-tips-warp-active layout-tips-warp">
|
||||
<div class="layout-tips-box">
|
||||
<p class="layout-tips-txt">时尚</p>
|
||||
<p class="layout-tips-txt">默认</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- classic 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<div class="layout-drawer-content-item">
|
||||
<section class="el-container is-vertical el-circular">
|
||||
<header class="el-header" style="height: 10px"></header>
|
||||
<section class="el-container">
|
||||
@ -176,8 +210,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- elegant 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<!-- transverse 布局 -->
|
||||
<div class="layout-drawer-content-item">
|
||||
<section class="el-container is-vertical el-circular">
|
||||
<header class="el-header" style="height: 10px"></header>
|
||||
<section class="el-container">
|
||||
@ -188,12 +222,12 @@
|
||||
</section>
|
||||
<div class="layout-tips-warp">
|
||||
<div class="layout-tips-box">
|
||||
<p class="layout-tips-txt">典雅</p>
|
||||
<p class="layout-tips-txt">横向</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- scitech 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<!-- columns 布局 -->
|
||||
<div class="layout-drawer-content-item">
|
||||
<section class="el-container el-circular">
|
||||
<aside class="el-aside-dark" style="width: 10px"></aside>
|
||||
<aside class="el-aside" style="width: 20px"></aside>
|
||||
@ -204,7 +238,7 @@
|
||||
</section>
|
||||
<div class="layout-tips-warp">
|
||||
<div class="layout-tips-box">
|
||||
<p class="layout-tips-txt">科技</p>
|
||||
<p class="layout-tips-txt">分栏</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -224,6 +258,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from "vue";
|
||||
import { getLightColor } from "/@/utils/theme.ts";
|
||||
export default {
|
||||
name: "layoutBreadcrumbSeting",
|
||||
setup() {
|
||||
@ -236,6 +271,8 @@ export default {
|
||||
danger: "#f56c6c",
|
||||
topBar: "#ffffff",
|
||||
menuBar: "#29384d",
|
||||
topBarColor: "#606266",
|
||||
menuBarColor: "#e6e6e6",
|
||||
isCollapse: false,
|
||||
menuWidth: 240,
|
||||
});
|
||||
@ -245,9 +282,26 @@ export default {
|
||||
const closeDrawer = () => {
|
||||
state.isDrawer = false;
|
||||
};
|
||||
const onColorPickerChange = (color: string) => {
|
||||
setPropertyFun(`--color-${color}`, state[color]);
|
||||
};
|
||||
const setPropertyFun = (color: string, targetVal: any) => {
|
||||
document.documentElement.style.setProperty(color, targetVal);
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
document.documentElement.style.setProperty(
|
||||
`${color}-light-${i}`,
|
||||
getLightColor(targetVal, i / 10)
|
||||
);
|
||||
}
|
||||
};
|
||||
const onBgColorPickerChange = (bg: string) => {
|
||||
document.documentElement.style.setProperty(`--bg-${bg}`, state[bg]);
|
||||
};
|
||||
return {
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
onColorPickerChange,
|
||||
onBgColorPickerChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
@ -258,7 +312,9 @@ export default {
|
||||
.layout-breadcrumb-seting-bar {
|
||||
height: calc(100vh - 50px);
|
||||
padding: 0 15px;
|
||||
:deep .el-scrollbar__view {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
.layout-breadcrumb-seting-bar-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -267,13 +323,13 @@ export default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.drawer-layout-content-flex {
|
||||
.layout-drawer-content-flex {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.drawer-layout-content-item {
|
||||
.layout-drawer-content-item {
|
||||
width: 50%;
|
||||
height: 70px;
|
||||
cursor: pointer;
|
||||
@ -311,14 +367,14 @@ export default {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid var(--color-primary-light-6);
|
||||
border: 1px solid var(--color-primary-light-4);
|
||||
border-radius: 100%;
|
||||
padding: 4px;
|
||||
.layout-tips-box {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 9;
|
||||
border: 1px solid var(--color-primary-light-6);
|
||||
border: 1px solid var(--color-primary-light-4);
|
||||
border-radius: 100%;
|
||||
.layout-tips-txt {
|
||||
position: relative;
|
||||
@ -327,7 +383,7 @@ export default {
|
||||
line-height: 1;
|
||||
letter-spacing: 2px;
|
||||
white-space: nowrap;
|
||||
color: var(--color-primary-light-6);
|
||||
color: var(--color-primary-light-4);
|
||||
text-align: center;
|
||||
transform: rotate(30deg);
|
||||
left: -1px;
|
||||
|
||||
@ -63,12 +63,15 @@ export default {
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: #000000;
|
||||
color: var(--bg-topBarColor);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
:deep .el-dropdown {
|
||||
color: var(--bg-topBarColor);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -50,23 +50,10 @@ export default {
|
||||
tagsRefsIndex: 0,
|
||||
arr2: [
|
||||
{ id: 11, name: "微软", path: "/home" },
|
||||
{ id: 12, name: "亚马逊", path: "/docs" },
|
||||
{ id: 13, name: "京东1", path: "/docs1" },
|
||||
{ id: 15, name: "谷歌2", path: "/docs2" },
|
||||
{ id: 1, name: "苹果3", path: "/docs3" },
|
||||
{ id: 14, name: "苹果4", path: "/docs4" },
|
||||
{ id: 14, name: "苹果5", path: "/docs5" },
|
||||
{ id: 14, name: "苹果6", path: "/docs6" },
|
||||
{ id: 14, name: "苹果7", path: "/docs7" },
|
||||
{ id: 14, name: "苹果8", path: "/docs8" },
|
||||
{ id: 14, name: "苹果9", path: "/docs9" },
|
||||
{ id: 14, name: "苹果10", path: "/docs10" },
|
||||
{ id: 14, name: "苹果11", path: "/docs11" },
|
||||
{ id: 14, name: "苹果12", path: "/docs12" },
|
||||
{ id: 14, name: "苹果13", path: "/docs13" },
|
||||
{ id: 14, name: "苹果14", path: "/docs14" },
|
||||
{ id: 14, name: "苹果15", path: "/docs15" },
|
||||
{ id: 14, name: "苹果16", path: "/docs16" },
|
||||
{ id: 12, name: "文档", path: "/docs" },
|
||||
{ id: 13, name: "文档1", path: "/docs1" },
|
||||
{ id: 15, name: "文档2", path: "/docs2" },
|
||||
{ id: 1, name: "文档3", path: "/docs3" },
|
||||
],
|
||||
});
|
||||
const initSortable = () => {
|
||||
@ -126,6 +113,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.layout-navbars-tagsview {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
&-ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -149,8 +137,9 @@ export default {
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
background: #f6f6f6;
|
||||
background-color: var(--color-primary-light-9);
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary-light-6);
|
||||
}
|
||||
&-iconfont {
|
||||
position: relative;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-menu router :default-active="defaultActive" background-color="#29384D" text-color="#e6e6e6">
|
||||
<el-menu router :default-active="defaultActive" background-color="transparent">
|
||||
<template v-for="val in menuList">
|
||||
<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<template #title>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user