用户列表新增抽屉效果详细信息

RuoYi

2026-04-09 a67ca21f15b952d8626e58550a501f4c7a9c822f

 ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -1,118 +1,150 @@
 /**

 * 通用css样式布局处理

 * Copyright (c) 2019 ruoyi

 */

/**

* 通用css样式布局处理

* Copyright (c) 2019 ruoyi

*/



 /** 基础通用 **/

/** 基础通用 **/

.pt5 {

   padding-top: 5px;

  padding-top: 5px;

}



.pr5 {

   padding-right: 5px;

  padding-right: 5px;

}



.pb5 {

   padding-bottom: 5px;

  padding-bottom: 5px;

}



.mt5 {

   margin-top: 5px;

  margin-top: 5px;

}



.mr5 {

   margin-right: 5px;

  margin-right: 5px;

}



.mb5 {

   margin-bottom: 5px;

  margin-bottom: 5px;

}



.mb8 {

   margin-bottom: 8px;

  margin-bottom: 8px;

}



.ml5 {

   margin-left: 5px;

  margin-left: 5px;

}



.mt10 {

   margin-top: 10px;

  margin-top: 10px;

}



.mr10 {

   margin-right: 10px;

  margin-right: 10px;

}



.mb10 {

   margin-bottom: 10px;

  margin-bottom: 10px;

}

.ml0 {

.ml10 {

   margin-left: 10px;

}



.mt20 {

   margin-top: 20px;

  margin-top: 20px;

}



.mr20 {

   margin-right: 20px;

  margin-right: 20px;

}



.mb20 {

   margin-bottom: 20px;

  margin-bottom: 20px;

}

.m20 {

.ml20 {

   margin-left: 20px;

}



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

   font-family: inherit;

   font-weight: 500;

   line-height: 1.1;

   color: inherit;

  font-family: inherit;

  font-weight: 500;

  line-height: 1.1;

  color: inherit;

}



.el-dialog:not(.is-fullscreen){

   margin-top: 6vh !important;

.el-message-box__status + .el-message-box__message{

  word-break: break-word;

}



.el-dialog:not(.is-fullscreen) {

  margin-top: 6vh !important;

}



.el-dialog__body {

  padding: 8px 20px !important;

}



.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {

  overflow: auto;

  overflow-x: hidden;

  max-height: 70vh;

  padding: 10px 20px 0;

}



.el-table {

   .el-table__header-wrapper, .el-table__fixed-header-wrapper {

      th {

         word-break: break-word;

         background-color: #f8f8f9;

         color: #515a6e;

         height: 40px;

         font-size: 13px;

      }

   }

   .el-table__body-wrapper {

      .el-button [class*="el-icon-"] + span {

         margin-left: 1px;

      }

   }

  .el-table__header-wrapper, .el-table__fixed-header-wrapper {

    th {

      word-break: break-word;

      background-color: #f8f8f9;

      color: #515a6e;

      height: 40px;

      font-size: 13px;

    }

  }



  .el-table__body-wrapper {

    .el-button [class*="el-icon-"] + span {

      margin-left: 1px;

    }

  }

}



/** 表单布局 **/

.form-header {

    font-size:15px;

   color:#6379bb;

   border-bottom:1px solid #ddd;

   margin:8px 10px 25px 10px;

   padding-bottom:5px

  font-size: 15px;

  color: #6379bb;

  border-bottom: 1px solid #ddd;

  margin: 8px 10px 25px 10px;

  padding-bottom: 5px

}



/** 表格布局 **/

.pagination-container {

   position: relative;

   height: 25px;

   margin-bottom: 10px;

   margin-top: 15px;

   padding: 10px 20px !important;

  display: flex;

  justify-content: flex-end;

  margin-top: 20px;

}



/* tree border */

.tree-border {

    margin-top: 5px;

    border: 1px solid #e5e6e7;

    background: #FFFFFF none;

    border-radius:4px;

  margin-top: 5px;

  border: 1px solid #e5e6e7;

  background: #FFFFFF none;

  border-radius: 4px;

}



.pagination-container .el-pagination {

   right: 0;

   position: absolute;

/* horizontal el menu */

.el-menu--horizontal .el-menu-item .svg-icon + span,

.el-menu--horizontal .el-submenu__title .svg-icon + span {

  margin-left: 3px;

}



@media ( max-width : 768px) {

.el-menu--horizontal .el-menu--popup {

  min-width: 120px !important;

}



@media (max-width: 768px) {

  .pagination-container .el-pagination > .el-pagination__jump {

    display: none !important;

  }

@@ -122,64 +154,61 @@
}



.el-table .fixed-width .el-button--mini {

   padding-left: 0;

   padding-right: 0;

   width: inherit;

  padding-left: 0;

  padding-right: 0;

  width: inherit;

}



/** 表格更多操作下拉样式 */

.el-table .el-dropdown-link {

.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {

   cursor: pointer;

   color: #1890ff;

   margin-left: 5px;

}



.el-table .el-dropdown, .el-icon-arrow-down {

   font-size: 12px;

  font-size: 12px;

}



.el-tree-node__content > .el-checkbox {

   margin-right: 8px;

  margin-right: 8px;

}



.list-group-striped > .list-group-item {

   border-left: 0;

   border-right: 0;

   border-radius: 0;

   padding-left: 0;

   padding-right: 0;

  border-left: 0;

  border-right: 0;

  border-radius: 0;

  padding-left: 0;

  padding-right: 0;

}



.list-group {

   padding-left: 0px;

   list-style: none;

  padding-left: 0px;

  list-style: none;

}



.list-group-item {

   border-bottom: 1px solid #e7eaec;

   border-top: 1px solid #e7eaec;

   margin-bottom: -1px;

   padding: 11px 0px;

   font-size: 13px;

  border-bottom: 1px solid #e7eaec;

  border-top: 1px solid #e7eaec;

  margin-bottom: -1px;

  padding: 11px 0px;

  font-size: 13px;

}



.pull-right {

   float: right !important;

  float: right !important;

}



.el-card__header {

   padding: 14px 15px 7px;

   min-height: 40px;

  padding: 14px 15px 7px;

  min-height: 40px;

}



.el-card__body {

   padding: 15px 20px 20px 20px;

  padding: 15px 20px 20px 20px;

}



.card-box {

   padding-right: 15px;

   padding-left: 15px;

   margin-bottom: 10px;

  margin-bottom: 10px;

}



/* button color */

@@ -203,64 +232,250 @@
  color: #FFFFFF;

}



/** 详细卡片样式 */

.detail-drawer {

  .el-drawer__header {

    margin-bottom: 6px;

    padding: 8px 12px 6px;

    font-size: 15px;

    color: #303133;

    background: #f8f8f8;

  }

  .section-header {

    font-size: 15px;

    color: #6379bb;

    border-bottom: 1px solid #ddd;

    margin: 12px 0 16px 0;

    padding-bottom: 8px;

  }

  .drawer-content {

    padding: 0 20px 20px 20px;

    .info-item {

      display: flex;

      align-items: flex-start;

      padding: 8px 0;

      min-height: 40px;

    }

    .info-label {

      flex-shrink: 0;

      width: 200px;

      color: #606266;

      font-size: 13px;

      line-height: 1.6;

      padding-top: 4px;

      text-align: right;

      margin-right: 14px;

    }

    .info-value {

      flex: 1;

      color: #303133;

      font-size: 13px;

      font-weight: 500;

      line-height: 1.6;

      word-break: break-all;

      padding-top: 4px;

      min-height: 1.6em;

      &.plaintext {

        border-bottom: 1px dashed #dde1e6;

      }

    }

  }

}



.detail-wrap { padding: 0 4px; }



.detail-card {

  border: 1px solid #ebeef5;

  border-radius: 6px;

  margin-bottom: 14px;

  overflow: hidden;

}



.detail-card-title {

  background: #f7f9fb;

  padding: 8px 16px;

  font-size: 13px;

  font-weight: 600;

  color: #333;

  border-bottom: 1px solid #ebeef5;

}

.detail-card-title i { margin-right: 5px; color: #409EFF; }



.detail-row { padding: 0 8px; }



.detail-item {

  display: flex;

  align-items: flex-start;

  padding: 10px 8px;

  font-size: 13px;

  border-bottom: 1px solid #f5f7fa;

}

.detail-item:last-child { border-bottom: none; }



.detail-label {

  flex-shrink: 0;

  width: 72px;

  color: #909399;

  margin-right: 12px;

}

.detail-value { color: #303133; flex: 1; word-break: break-all; }

.detail-location { color: #999; font-size: 12px; }



.method-tag {

  display: inline-block;

  padding: 1px 7px;

  border-radius: 3px;

  font-size: 11px;

  font-weight: 700;

  margin-right: 6px;

  vertical-align: middle;

}

.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }

.code-body { padding: 14px; }

.code-wrap {

  background: #f7f9fb;

  border: 1px solid #e8ecf0;

  border-radius: 4px;

  overflow: hidden;

  max-height: 260px;

  position: relative;

}

.code-action {

  position: absolute;

  top: 8px;

  right: 8px;

  z-index: 10;

  margin: 0;

  padding: 0;

}

.code-action .el-button { 
  height: 24px; 
  font-size: 12px; 
  padding: 4px 8px; 
  background: rgba(255, 255, 255, 0.9);

  border: 1px solid #dcdcdc;

}

.code-action .el-button:hover { 
  background: #ffffff;

  border-color: #409EFF;

}

.code-pre {

  margin: 0;

  padding: 12px 14px;

  font-size: 12px;

  line-height: 1.6;

  font-family: Consolas, 'SFMono-Regular', monospace;

  color: #444;

  white-space: pre-wrap;

  word-break: break-all;

  overflow: auto;

  max-height: 240px;

  display: block;

}



/* tree-sidebar content */

.tree-sidebar-manage-wrap {

  display: flex;

  gap: 0;

  min-height: calc(100vh - 130px);

  padding: 0 !important;

  overflow: hidden;

}



.tree-sidebar-content {

  flex: 1;

  min-width: 0;

  overflow: hidden;

  background: #fff;



  .content-inner {

    padding: 12px 16px;

    height: 100%;

    overflow-y: auto;

  }

}



/* error */

.error-title { color: #c0392b !important; }

.error-title i { color: #c0392b !important; }

.error-body { padding: 12px 16px; }

.error-msg {

  background: #fff8f8;

  border-left: 3px solid #e74c3c;

  border-radius: 3px;

  padding: 8px 12px;

  color: #c0392b;

  font-size: 12px;

  line-height: 1.7;

  word-break: break-all;

  white-space: pre-wrap;

}



/* http method */

.method-GET    { background: #e8f5e9; color: #27ae60; }

.method-POST   { background: #e3f2fd; color: #1565c0; }

.method-PUT    { background: #fff3e0; color: #e65100; }

.method-DELETE { background: #ffebee; color: #c62828; }



/* text color */

.text-navy {

   color: #1ab394;

  color: #1ab394;

}



.text-primary {

   color: inherit;

  color: inherit;

}



.text-success {

   color: #1c84c6;

  color: #1c84c6;

}



.text-info {

   color: #23c6c8;

  color: #23c6c8;

}



.text-warning {

   color: #f8ac59;

  color: #f8ac59;

}



.text-danger {

   color: #ed5565;

  color: #ed5565;

}



.text-muted {

   color: #888888;

  color: #888888;

}



/* image */

.img-circle {

   border-radius: 50%;

  border-radius: 50%;

}



.img-lg {

   width: 120px;

   height: 120px;

  width: 120px;

  height: 120px;

}



.avatar-upload-preview {

   position: absolute;

   top: 50%;

   transform: translate(50%, -50%);

   width: 200px;

   height: 200px;

   border-radius: 50%;

   box-shadow: 0 0 4px #ccc;

   overflow: hidden;

  position: relative;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 200px;

  height: 200px;

  border-radius: 50%;

  box-shadow: 0 0 4px #ccc;

  overflow: hidden;

}



/* 拖拽列样式 */

.sortable-ghost{

   opacity: .8;

   color: #fff!important;

   background: #42b983!important;

.sortable-ghost {

  opacity: .8;

  color: #fff !important;

  background: #42b983 !important;

}



.top-right-btn {

   position: relative;

   float: right;

  position: relative;

  float: right;

}