| | |
| | | <div class="panel-title">图层管理</div> |
| | | |
| | | <div class="panel-content"> |
| | | <el-tree :data="layerTree" show-checkbox default-expand-all node-key="key" |
| | | <el-tree class="command-tree" :data="layerTree" show-checkbox default-expand-all node-key="key" |
| | | :props="layerTreeProps" :default-checked-keys="defaultCheckedKeys" /> |
| | | </div> |
| | | </div> |
| | |
| | | flex: 1; |
| | | overflow: auto; |
| | | } |
| | | |
| | | ::v-deep(.el-tree) { |
| | | background: transparent; |
| | | color: #c3c3dd; |
| | | font-size: 12px; |
| | | |
| | | .el-tree-node { |
| | | line-height: 30px !important; |
| | | |
| | | .el-tree-node__content { |
| | | padding-left: 0 !important; |
| | | display: flex; |
| | | align-items: center; |
| | | height: 40px !important; |
| | | line-height: 40px !important; |
| | | border-bottom: 1px solid rgba(70, 70, 100, 0.5); |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .el-tree-node__children { |
| | | .el-tree-node__content { |
| | | border: none; |
| | | } |
| | | } |
| | | |
| | | &:focus { |
| | | .el-tree-node__content { |
| | | background: transparent !important; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node__label) { |
| | | color: #c3c3dd; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node__expand-icon) { |
| | | order: 3; |
| | | margin-left: auto; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node__expand-icon.is-leaf) { |
| | | visibility: hidden; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-checkbox) { |
| | | order: 1; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node__label) { |
| | | order: 2; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node__expand-icon:not(.is-leaf) ~ .el-checkbox) { |
| | | display: none; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node__content:hover), |
| | | .layer-panel :deep(.el-tree-node__content:focus) { |
| | | background: transparent !important; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node.is-current > .el-tree-node__content) { |
| | | background: transparent !important; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-tree-node.is-current > .el-tree-node__content .el-tree-node__label) { |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-checkbox__input.is-checked .el-checkbox__inner) { |
| | | background-color: #023aff; |
| | | border-color: #023aff; |
| | | } |
| | | |
| | | .layer-panel :deep(.el-checkbox__inner) { |
| | | background-color: transparent; |
| | | border-color: #a1a3d4; |
| | | } |
| | | </style> |
| | | |