test #47
@ -9,10 +9,15 @@
|
|||||||
<div style="flex: 1; display: flex; background: #f2f4f9">
|
<div style="flex: 1; display: flex; background: #f2f4f9">
|
||||||
<div
|
<div
|
||||||
class="app-container"
|
class="app-container"
|
||||||
style="margin-right: 12px; border-radius: 8px; background: #fff">
|
style="
|
||||||
|
margin-right: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0;
|
||||||
|
">
|
||||||
<div
|
<div
|
||||||
class="factory-list__selector"
|
class="factory-list__selector"
|
||||||
style=""
|
style="margin: 12px"
|
||||||
title="点击切换工厂"
|
title="点击切换工厂"
|
||||||
@mouseenter="factoryListOpen = true"
|
@mouseenter="factoryListOpen = true"
|
||||||
@mouseleave="factoryListOpen = false">
|
@mouseleave="factoryListOpen = false">
|
||||||
@ -37,14 +42,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- side bar -->
|
<!-- side bar -->
|
||||||
<div
|
<div class="side-bar__left" style="width: 240px; height: 100%">
|
||||||
class="side-bar__left"
|
|
||||||
style="width: 240px; padding: 12px; height: 100%">
|
|
||||||
<el-tree
|
<el-tree
|
||||||
v-if="currentFactory"
|
class="custom-tree-class"
|
||||||
:data="currentFactory?.children"
|
:data="currentFactory?.children"
|
||||||
:props="treeProps"
|
:props="treeProps"
|
||||||
@node-click="handleSidebarItemClick" />
|
:empty-text="' - 暂无数据 - '"
|
||||||
|
icon-class="custom-icon-class"
|
||||||
|
@node-click="handleSidebarItemClick">
|
||||||
|
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
|
<span class="icon"></span>
|
||||||
|
<span>{{ node.label }}</span>
|
||||||
|
</div> -->
|
||||||
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -385,6 +395,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.side-bar__left >>> .is-current {
|
.side-bar__left >>> .is-current {
|
||||||
|
padding: 0;
|
||||||
color: #111;
|
color: #111;
|
||||||
background: #f2f4f7;
|
background: #f2f4f7;
|
||||||
}
|
}
|
||||||
@ -464,6 +475,8 @@ export default {
|
|||||||
left: 90px;
|
left: 90px;
|
||||||
/* max-width: 128px; */
|
/* max-width: 128px; */
|
||||||
height: auto;
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* transition: all 0.3s ease-out; */
|
/* transition: all 0.3s ease-out; */
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
@ -501,11 +514,46 @@ li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.factory-list__item.is-current::after {
|
.factory-list__item.is-current::after {
|
||||||
content: "√";
|
content: '√';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tree-class >>> .el-tree-node__content {
|
||||||
|
height: auto !important;
|
||||||
|
padding: 8px 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tree-class >>> .el-tree-node__children .el-tree-node__content {
|
||||||
|
padding: 8px 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tree-class >>> .el-tree-node__children .el-tree-node__children .el-tree-node__content {
|
||||||
|
padding: 8px 24px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.custom-icon-class {
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 20px;
|
||||||
|
height: 24px;
|
||||||
|
background: url('../../../assets/images/tree-icon-1.png') 100% / contain
|
||||||
|
no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-icon-class.el-tree-node__expand-icon.expanded {
|
||||||
|
transform: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__children .custom-icon-class {
|
||||||
|
background: url('../../../assets/images/tree-icon-2.png') 100% / contain
|
||||||
|
no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__children .el-tree-node__children .custom-icon-class {
|
||||||
|
background: unset;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user