页面美化：菜单管理树的美化
This commit is contained in:
sheng
@@ -26,6 +26,7 @@
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-wordcloud": "^2.1.0",
|
||||
"element-plus": "^2.2.26",
|
||||
"element-tree-line": "^0.2.1",
|
||||
"font-awesome": "^4.7.0",
|
||||
"js-cookie": "^3.0.1",
|
||||
"js-table2excel": "^1.0.3",
|
||||
|
||||
BIN
web/src/assets/img/menu-tree-head-icon.png
Normal file
BIN
web/src/assets/img/menu-tree-head-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 B |
BIN
web/src/assets/img/menu-tree-hidden-icon.png
Normal file
BIN
web/src/assets/img/menu-tree-hidden-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 663 B |
BIN
web/src/assets/img/menu-tree-show-icon.png
Normal file
BIN
web/src/assets/img/menu-tree-show-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 737 B |
@@ -1,13 +1,10 @@
|
||||
<template>
|
||||
<el-main class="layout-main" :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
|
||||
<el-scrollbar
|
||||
ref="layoutMainScrollbarRef"
|
||||
class="layout-main-scroll layout-backtop-header-fixed"
|
||||
wrap-class="layout-main-scroll"
|
||||
view-class="layout-main-scroll"
|
||||
>
|
||||
<el-main class="layout-main"
|
||||
:style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
|
||||
<el-scrollbar ref="layoutMainScrollbarRef" class="layout-main-scroll layout-backtop-header-fixed"
|
||||
wrap-class="layout-main-scroll" view-class="layout-main-scroll">
|
||||
<LayoutParentView />
|
||||
<LayoutFooter v-if="isFooter" />
|
||||
<!-- <LayoutFooter v-if="isFooter" /> -->
|
||||
</el-scrollbar>
|
||||
<el-backtop :target="setBacktopClass" />
|
||||
</el-main>
|
||||
|
||||
@@ -29,6 +29,8 @@ import '/@/assets/iconfont/iconfont.css'; //引入css
|
||||
import { scanAndInstallPlugins } from '/@/views/plugins/index';
|
||||
import VXETable from 'vxe-table'
|
||||
import 'vxe-table/lib/style.css'
|
||||
|
||||
import 'element-tree-line/dist/style.css'
|
||||
let forIconfont = analyzingIconForIconfont(iconfont); //解析class
|
||||
iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
|
||||
iconList.addIcon(elementPlus); // 添加element plus的图标
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<p>Copyright © 2021-2022 django-vue-admin.com 版权所有</p>
|
||||
<p class="la-other">
|
||||
<a href="https://beian.miit.gov.cn" target="_blank">晋ICP备18005113号-3</a>
|
||||
|
|
||||
|
|
||||
<a href="https://django-vue-admin.com" target="_blank">帮助</a>
|
||||
|
|
||||
<a href="#">隐私</a>
|
||||
@@ -92,11 +92,13 @@ onMounted(() => {
|
||||
.login-container {
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
|
||||
.login-left {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: rgba(211, 239, 255, 1);
|
||||
margin-right: 100px;
|
||||
|
||||
.login-left-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -105,24 +107,29 @@ onMounted(() => {
|
||||
left: 80px;
|
||||
z-index: 1;
|
||||
animation: logoAnimation 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.login-left-logo-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
font-size: 20px;
|
||||
color: #26a59a;
|
||||
font-size: 16px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.login-left-logo-text-msg {
|
||||
font-size: 12px;
|
||||
color: #32a99e;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-left-img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -130,20 +137,24 @@ onMounted(() => {
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 52%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: error-num 0.6s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.login-left-waves {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
width: 700px;
|
||||
|
||||
.login-right-warp {
|
||||
border: 1px solid var(--el-color-primary-light-3);
|
||||
border-radius: 3px;
|
||||
@@ -152,12 +163,14 @@ onMounted(() => {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--el-color-white);
|
||||
|
||||
.login-right-warp-one,
|
||||
.login-right-warp-two {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
@@ -165,6 +178,7 @@ onMounted(() => {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right-warp-one {
|
||||
&::before {
|
||||
filter: hue-rotate(0deg);
|
||||
@@ -175,6 +189,7 @@ onMounted(() => {
|
||||
background: linear-gradient(90deg, transparent, var(--el-color-primary));
|
||||
animation: loginLeft 3s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
filter: hue-rotate(60deg);
|
||||
top: -100%;
|
||||
@@ -186,6 +201,7 @@ onMounted(() => {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right-warp-two {
|
||||
&::before {
|
||||
filter: hue-rotate(120deg);
|
||||
@@ -197,6 +213,7 @@ onMounted(() => {
|
||||
animation: loginRight 3s linear infinite;
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
filter: hue-rotate(300deg);
|
||||
bottom: -100%;
|
||||
@@ -208,10 +225,12 @@ onMounted(() => {
|
||||
animation-delay: 2.1s;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right-warp-mian {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.login-right-warp-main-title {
|
||||
height: 130px;
|
||||
line-height: 130px;
|
||||
@@ -222,9 +241,11 @@ onMounted(() => {
|
||||
animation-delay: 0.3s;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.login-right-warp-main-form {
|
||||
flex: 1;
|
||||
padding: 0 50px 50px;
|
||||
|
||||
.login-content-main-sacn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -235,6 +256,7 @@ onMounted(() => {
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
color: var(--el-color-primary);
|
||||
|
||||
&-delta {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
@@ -245,11 +267,13 @@ onMounted(() => {
|
||||
background: var(--el-color-white);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transition: all ease 0.3s;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
@@ -267,15 +291,18 @@ onMounted(() => {
|
||||
|
||||
.login-authorization {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409eff;
|
||||
color: var(--el-color-primary);
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +1,48 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<el-row class="s-el-row">
|
||||
<el-col :span="5">
|
||||
<el-col :span="6">
|
||||
<div class="menu-box menu-left-box">
|
||||
<p class="font-mono font-black text-center text-xl pb-5">
|
||||
菜单列表
|
||||
<el-tooltip effect="dark" :content="content" placement="right">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</p>
|
||||
<el-input v-model="filterText" :placeholder="placeholder" />
|
||||
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
|
||||
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
|
||||
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
<span v-if="data.status" class="text-center font-black font-normal">
|
||||
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||
</span>
|
||||
<span v-else class="text-center font-black text-red-700 font-normal">
|
||||
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
<div class="menu-left-tree">
|
||||
<div class="mlt-head">
|
||||
<img src="../../../assets/img/menu-tree-head-icon.png" alt="" />
|
||||
菜单列表
|
||||
<el-tooltip effect="dark" placement="right"
|
||||
content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;">
|
||||
<el-icon size="16" class="mlt-tooltip">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
|
||||
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
|
||||
@node-drop="nodeDrop" lazy :indent="45" draggable @node-click="handleNodeClick" default-expand-all>
|
||||
<template #default="{ node, data }">
|
||||
<element-tree-line :node="node" :showLabelLine="false" :indent="32">
|
||||
<span v-if="data.status" class="text-center font-black font-normal">
|
||||
<SvgIcon :name="node.data.icon" />
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span v-else class="text-center font-black text-red-700 font-normal">
|
||||
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||
</span>
|
||||
</element-tree-line>
|
||||
<!-- -->
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-col :span="8">
|
||||
<div class="menu-box menu-center-box">
|
||||
<div class="mcb-alert">
|
||||
1.红色菜单代表状态禁用;<br />
|
||||
2.添加菜单，如果是目录，组件地址为空即可;<br />
|
||||
3.添加根节点菜单，父级ID为空即可;<br />
|
||||
4.支持拖拽菜单;
|
||||
</div>
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
|
||||
<el-alert :title="content" type="success" effect="dark" :closable="false" center />
|
||||
<el-divider>
|
||||
<strong>菜单配置</strong>
|
||||
</el-divider>
|
||||
@@ -44,7 +57,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="组件地址" prop="component">
|
||||
<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
|
||||
:trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
|
||||
:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
|
||||
</el-form-item>
|
||||
<el-form-item required label="Url" prop="web_path">
|
||||
<el-input v-model="form.web_path" />
|
||||
@@ -77,10 +90,10 @@
|
||||
<el-divider></el-divider>
|
||||
<div class="menus-btns">
|
||||
<el-button @click="saveMenu()" type="primary" round>保存</el-button>
|
||||
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
|
||||
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
|
||||
<el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
|
||||
<el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级
|
||||
</el-button>
|
||||
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
|
||||
<el-button @click="deleteMenu()" type="primary" round :disabled="!form.id">删除菜单
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,107 +104,15 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <splitpanes>
|
||||
<pane max-size="30" min-size="30">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<p class="font-mono font-black text-center text-xl pb-5">
|
||||
菜单列表
|
||||
<el-tooltip effect="dark" :content="content" placement="right">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</p>
|
||||
<el-input v-model="filterText" :placeholder="placeholder" />
|
||||
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
|
||||
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
|
||||
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
<span v-if="data.status" class="text-center font-black font-normal">
|
||||
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||
</span>
|
||||
<span v-else class="text-center font-black text-red-700 font-normal">
|
||||
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</pane>
|
||||
<pane min-size="30">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
|
||||
<el-alert :title="content" type="success" effect="dark" :closable="false" center />
|
||||
<el-divider>
|
||||
<strong>菜单配置</strong>
|
||||
</el-divider>
|
||||
<el-form-item label="菜单ID" prop="id">
|
||||
<el-input v-model="form.id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="父级ID" prop="parent">
|
||||
<el-input v-model="form.parent" />
|
||||
</el-form-item>
|
||||
<el-form-item required label="菜单名称" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组件地址" prop="component">
|
||||
<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
|
||||
:trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
|
||||
</el-form-item>
|
||||
<el-form-item required label="Url" prop="web_path">
|
||||
<el-input v-model="form.web_path" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="form.sort" controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio :label="true">启用</el-radio>
|
||||
<el-radio :label="false">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边可见">
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio :label="true">启用</el-radio>
|
||||
<el-radio :label="false">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="缓存">
|
||||
<el-radio-group v-model="form.cache">
|
||||
<el-radio :label="true">启用</el-radio>
|
||||
<el-radio :label="false">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<IconSelector clearable v-model="form.icon" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-divider></el-divider>
|
||||
<div class="menus-btns">
|
||||
<el-button @click="saveMenu()" type="primary" round>保存</el-button>
|
||||
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
|
||||
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
|
||||
</el-button>
|
||||
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</pane>
|
||||
<pane min-size="30">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<menuButton :select-menu="form" />
|
||||
</el-card>
|
||||
</pane>
|
||||
</splitpanes> -->
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="menu">
|
||||
import { Splitpanes, Pane } from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
import { getElementLabelLine } from "element-tree-line";
|
||||
import * as api from './api';
|
||||
import * as menuButoonApi from './components/menuButton/api';
|
||||
import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
|
||||
import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef, onActivated } from 'vue';
|
||||
import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, onActivated, h } from 'vue';
|
||||
import XEUtils from 'xe-utils';
|
||||
import { errorMessage, successMessage } from '../../../utils/message';
|
||||
|
||||
@@ -217,6 +138,8 @@ interface ComponentFileItem {
|
||||
label: string;
|
||||
}
|
||||
|
||||
const ElementTreeLine = getElementLabelLine(h);
|
||||
|
||||
// 引入组件
|
||||
const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
|
||||
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
|
||||
@@ -302,13 +225,6 @@ let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保
|
||||
|
||||
const permissionDrawerVisible = ref(false);
|
||||
|
||||
const content = `
|
||||
1.红色菜单代表状态禁用;
|
||||
2.添加菜单，如果是目录，组件地址为空即可;
|
||||
3.添加根节点菜单，父级ID为空即可;
|
||||
4.支持拖拽菜单;
|
||||
`;
|
||||
|
||||
let form: Form<any> = reactive({
|
||||
id: '',
|
||||
parent: '',
|
||||
@@ -469,12 +385,14 @@ onActivated(() => {
|
||||
.s-el-row {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.el-col {
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
@@ -485,11 +403,42 @@ onActivated(() => {
|
||||
|
||||
.menu-left-box {
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
//margin-right: 10px;
|
||||
.mlt-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -8px;
|
||||
color: #606266;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.mlt-tooltip {
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-center-box {
|
||||
border-radius: 8px;
|
||||
margin: 0 10px;
|
||||
|
||||
.mcb-alert {
|
||||
color: #fff;
|
||||
line-height: 24px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-right-box {
|
||||
@@ -505,3 +454,65 @@ onActivated(() => {
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-left-tree {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon svg {
|
||||
display: none !important;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-tree-node__content>.el-tree-node__expand-icon {
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin-right: 5px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.is-leaf {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon:before {
|
||||
background: url("../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded:before {
|
||||
background: url("../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .is-leaf.el-tree-node__expand-icon::before {
|
||||
display: block;
|
||||
background: none !important;
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user