| | |
| | | ]" |
| | | ></My-bread> |
| | | <el-divider /> |
| | | <div class="menuTreeBox"> |
| | | <div class="left_tree"> |
| | | <div class="menuTreeBox "> |
| | | <div class="left_tree subpage_Div"> |
| | | <el-tree |
| | | :data="depList" |
| | | :props="defaultProps" |
| | |
| | | > |
| | | </el-tree> |
| | | </div> |
| | | <div class="right_menu"> |
| | | <div class="right_menu subpage_Div"> |
| | | <div |
| | | style=" |
| | | font-size: 14px; |
| | |
| | | size="small" |
| | | :disabled="roleid == null ? true : false" |
| | | @click="adduser" |
| | | style="background: #409eff" |
| | | |
| | | >{{ |
| | | $t('operatManage.UserRoleAuthorizationObj.Added') |
| | | }}</el-button |
| | |
| | | </el-pagination> |
| | | </div> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogTableVisible = false">{{ |
| | | <el-button size="small" @click="dialogTableVisible = false">{{ |
| | | $t('dataManage.dictionaryManageObj.cancel') |
| | | }}</el-button> |
| | | <el-button |
| | | style="background: #409eff; border: 1px solid #409eff; color: white" |
| | | size="small" type="primary" |
| | | @click="addConfirm" |
| | | >{{ $t('dataManage.dictionaryManageObj.confirm') }}</el-button |
| | | > |
| | |
| | | height: 98%; |
| | | width: 98%; |
| | | padding: 1%; |
| | | position: absolute; |
| | | |
| | | .menuTreeBox { |
| | | width: 100%; |
| | | height: 91%; |
| | | .left_tree { |
| | | width: 30%; |
| | | width: 29%; |
| | | height: 92%; |
| | | padding: 10px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | |
| | | border-radius: 5px; |
| | | float: left; |
| | | overflow-y: auto; |
| | | // 更改指标树图标颜色 |
| | | /deep/ .el-tree .el-icon-caret-right:before { |
| | | color: white; /** 这里是要修改图标的颜色 **/ |
| | | } |
| | | /deep/ .el-tree { |
| | | color: white; /** 这里是要修改图标的颜色 **/ |
| | | background: transparent; |
| | | } |
| | | /deep/.el-tree-node__content { |
| | | &:hover { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | } |
| | | /deep/.el-tree-node.is-current > .el-tree-node__content { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | color: #409eff; |
| | | } |
| | | |
| | | } |
| | | .right_menu { |
| | | width: 65%; |
| | | width: 67%; |
| | | height: 92%; |
| | | padding: 10px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | |
| | | border-radius: 5px; |
| | | float: right; |
| | | } |
| | | } |
| | | /*里面的代码可以根据自己需求去进行更改*/ |
| | | /* 设置滚动条的样式 */ |
| | | ::-webkit-scrollbar { |
| | | width: 4px; |
| | | } |
| | | /* 滚动槽 */ |
| | | ::-webkit-scrollbar-track { |
| | | -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3); |
| | | border-radius: 10px; |
| | | } |
| | | /* 滚动条滑块 */ |
| | | ::-webkit-scrollbar-thumb { |
| | | border-radius: 10px; |
| | | background: #8b8b8b; |
| | | -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); |
| | | } |
| | | ::-webkit-scrollbar-thumb:window-inactive { |
| | | background: #8b8b8b; |
| | | height: 289px; |
| | | } |
| | | .pagination_box { |
| | | /deep/.el-input__inner { |
| | | background-color: transparent !important; |
| | | border: 1px solid; |
| | | color: white; |
| | | } |
| | | /deep/.el-pagination__total { |
| | | color: white; |
| | | } |
| | | /deep/.el-pagination__jump { |
| | | color: white; |
| | | } |
| | | /deep/.el-pager li.active { |
| | | color: #1890ff; |
| | | } |
| | | /deep/.el-pager li { |
| | | color: white; |
| | | background: transparent; |
| | | } |
| | | /deep/.el-pager li { |
| | | color: white; |
| | | } |
| | | /deep/.btn-prev { |
| | | background: transparent; |
| | | } |
| | | /deep/.btn-next { |
| | | background: transparent; |
| | | } |
| | | } |
| | | /deep/ .el-dialog { |
| | | background: #303030; |
| | | } |
| | | /deep/.el-range-editor.is-active, |
| | | .el-range-editor.is-active:hover, |
| | | .el-select .el-input.is-focus .el-input__inner { |
| | | border: 1px solid; |
| | | } |
| | | /deep/.el-dialog__title { |
| | | color: white; |
| | | } |
| | | /*修改table 表体的背景颜色和文字颜色*/ |
| | | /deep/ .el-table { |
| | | background-color: transparent; |
| | | |
| | | th, |
| | | td { |
| | | background-color: transparent; |
| | | } |
| | | .el-table__expanded-cell { |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | // 表头背景色 |
| | | th.el-table__cell { |
| | | background-color: #303030; |
| | | color: #fff; |
| | | } |
| | | tr > td { |
| | | background-color: #303030; |
| | | color: #fff; |
| | | } |
| | | |
| | | // hover效果 |
| | | tr:hover > td { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | |
| | | tbody tr:hover { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | // text-align: center; |
| | | } |
| | | |
| | | // 滚动条宽高 |
| | | .el-table__body-wrapper::-webkit-scrollbar { |
| | | width: 5px; |
| | | height: 5px; |
| | | } |
| | | |
| | | .el-table__body-wrapper::-webkit-scrollbar { |
| | | width: 5px; |
| | | /*滚动条宽度*/ |
| | | height: 10px; |
| | | /*滚动条高度*/ |
| | | } |
| | | /*定义滚动条轨道 内阴影+圆角*/ |
| | | .el-table__body-wrapper::-webkit-scrollbar-track { |
| | | box-shadow: 0px 1px 3px #216fe6 inset; |
| | | /*滚动条的背景区域的内阴影*/ |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | /*定义滑块 内阴影+圆角*/ |
| | | .el-table__body-wrapper::-webkit-scrollbar-thumb { |
| | | box-shadow: 0px 1px 3px #216fe6 inset; |
| | | border-radius: 6px; |
| | | background-color: #216fe6; |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | .divider { |
| | | margin-top: 8px; |
| | | } |
| | | } |
| | | </style> |
| | | <style> |
| | | .el-select-dropdown { |
| | | background: #303030 !important; |
| | | border-color: 1px solid !important; |
| | | } |
| | | |
| | | .el-scrollbar__wrap { |
| | | margin-bottom: -20px !important; |
| | | margin-right: -20px !important; |
| | | } |
| | | .el-select-dropdown__item.hover, |
| | | .el-select-dropdown__item:hover { |
| | | background: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | .el-select-dropdown__item { |
| | | color: white !important; |
| | | } |
| | | </style> |
| | | |