#main_pending { width: 100%; height: 100%; background: white; overflow: hidden; box-shadow: 0px 0px 8px 0px #D9E5FF; border-radius: 8px; .main_pending-left { padding-top: 30px; box-sizing: border-box; float: left; width: 198px; height: 100%; overflow-x: auto; // border-right: 1px solid #ccc; background: #F7F7F7; .main_pending-left-dyspepsia { width: 100%; height: 30px; line-height: 30px; overflow: hidden; overflow-y: hidden; padding-left: 20px; padding-right: 20px; box-sizing: border-box; // background: #e4eef8; margin-bottom: 2px; color: #999999; span { float: left; width: calc(100% - 35px); overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space: nowrap; /*强制不换行*/ // color:#40A0FF; // color: #999999; cursor: pointer; font-size: 14px; } a { float: right; min-width: 20px; height: 20px; border: 1px solid #ccc; //border-radius: 50%; border-radius: 100px; padding-left: 2px; padding-right: 2px; margin-top: 5px; b { display: block; text-align: center; font-weight: 100; font-size: 12px; line-height: 20px; color: #999999; } } .headNum { background: #fc4d54; border: none; b { color: white; font-weight: 600; } } } .main_pending_select { // 选中 background:#e4eef8; color: #46d2db; } .main_pending-left-dyspepsia:hover span { color: #46d2db; } .main_pending-left-dyspepsia:hover a { border: none; background: #fc4d54; } .main_pending-left-dyspepsia:hover b { color: white; font-weight: 600; } ul { width: 100%; min-height: 30px; .noData { line-height: 60px; width: 100%; display: block; text-align: center; color: #909399; } .soft-heading { width: 196px; height: 30px; cursor: pointer; overflow: hidden; margin-bottom: 5px; .headTitle { color: #46d2db; } .headNum { background: #fc4d54; border: none; b { color: white; font-weight: 600; } } span { float: left; width: calc(100% - 80px); overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space: nowrap; /*强制不换行*/ margin-left: 20px; line-height: 30px; font-size: 14px; color: #999999; } a { float: right; margin-right: 20px; min-width: 20px; height: 20px; border: 1px solid #ccc; /* border-radius: 50%; */ border-radius: 100px; margin-top: 5px; overflow: hidden; padding-right: 2px; padding-left: 2px; b { display: block; text-align: center; font-weight: 100; font-size: 12px; line-height: 20px; color: #9c9d9f; } } } .soft-heading-select { background: #e4eef8; } .soft-heading:hover span { color: #46d2db; } .soft-heading:hover a { border: none; background: #fc4d54; } .soft-heading:hover b { color: white; font-weight: 600; } } } .main_pending-right { float: left; //width: 950px; width: calc(100% - 198px); height: 100%; .main_pending-right-theme { margin-top: 10px; width: 100%; height: 54px; overflow: hidden; .main_pending-right-right { display: -webkit-flex; display: flex; justify-content: flex-end; width: 100%; height: 100%; .right-header { width: 100%; height: 100%; display: -webkit-flex; display: flex; justify-content: flex-end; flex-wrap: nowrap; overflow-x: auto; align-items: center; .right-read-btn { margin-right: 5px; .btn { // width: 100px; height: 30px; line-height: 22px; color: white; font-size: 13px; cursor: pointer; text-align: center; } .btn-add { background: -webkit-gradient(linear, left top, right top, from(#40B2FF), to(#409EFF)); background: linear-gradient(90deg, #40B2FF 0%, #409EFF 100%); -webkit-box-shadow: 2px 2px 6px 0px #b7daff; box-shadow: 2px 2px 6px 0px #b7daff; } } .right-btn { margin-left: 5px; .btn { width: 80px; height: 30px; line-height: 22px; color: white; font-size: 13px; cursor: pointer; } .btn-add { background: -webkit-gradient(linear, left top, right top, from(#40B2FF), to(#409EFF)); background: linear-gradient(90deg, #40B2FF 0%, #409EFF 100%); -webkit-box-shadow: 2px 2px 6px 0px #b7daff; box-shadow: 2px 2px 6px 0px #b7daff; } .btn-clear { background: -webkit-gradient(linear, left top, right top, from(#F2842C), to(#F2842C)); background: linear-gradient(90deg, #F2842C 0%, #F2842C 100%); -webkit-box-shadow: 2px 2px 6px 0px #f0cfb8; box-shadow: 2px 2px 6px 0px #f0cfb8; } .btn-search { background: -webkit-gradient(linear, left top, right top, from(#7AD34E), to(#67C33A)); background: linear-gradient(90deg, #7AD34E 0%, #67C33A 100%); -webkit-box-shadow: 2px 2px 6px 0px #c1e7af; box-shadow: 2px 2px 6px 0px #c1e7af; margin-right: 15px; } } .el-input { width: 150px; height: 30px; margin-right: 5px; } .el-input__inner { -webkit-appearance: none; background-color: #FFF; background-image: none; border-radius: 4px; border: 1px solid #DCDFE6; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 30px; line-height: 30px; outline: 0; padding: 0 15px; -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1); transition: border-color .2s cubic-bezier(.645,.045,.355,1); width: 100%; } .el-input__prefix, .el-input__suffix { position: absolute; top: 6px; transition: all .3s; -webkit-transition: all .3s; height: 100%; color: #C0C4CC; text-align: center; } } } } .view-list { width: 100%; height: calc(100% - 65px); overflow: hidden; position: relative; padding-left: 15px; padding-right: 15px; .scrollbar { height: calc(100% - 45px); width:100%; overflow-x: hidden; .el-table th { padding: 8px 0; min-width: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-overflow: ellipsis; vertical-align: middle; position: relative; text-align: left; } .el-table__row.table-row-color { background: #F4F8F9; } .el-table td{ padding: 0px 0; min-width: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-overflow: ellipsis; vertical-align: middle; position: relative; text-align: left; } .el-table th, .el-table tr { background-color: #FFF; color: #999; } .view-table { width: 100%; .applicant { width: 100%; height:40px; //border: 1px solid red; display:-webkit-flex; display: flex; flex-direction: row; align-items: center; .avatar-box { width: 33px; height: 33px; border-radius: 3px; position: relative; .avatar { display: inline-block; width: 30px; height: 30px; background-color: #428bcb; color: white; font-size: 12px; text-align: center; line-height: 30px; border-radius: 50%; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } .red-dot { position: absolute; top:-2px; right:5px; width: 10px; height: 10px; border-radius: 50%; background-color: #d9544d; } .isagent { position: absolute; border-radius: 21px; width: 20px; bottom: 10px; right: -8px; font-size: 12px; text-align: center; background: #00abf3; color: #fff; line-height: 20px; transform: scale(calc(9 / 12)); cursor: pointer; } } .app-right { width: calc(100% - 33px); height: 33px; line-height: 33px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; padding-left: 10px; box-sizing: border-box; color:#0c86d5; } } .stateLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .cell { -webkit-box-sizing: border-box; box-sizing: border-box; white-space: normal; word-break: normal; line-height: 23px; } } } .el-scrollbar__wrap { overflow-x: hidden; } .page { width: 100%; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: white; position: absolute; bottom: 0; left: 0; z-index: 100; padding-right: 12px; } } // .el-table { // cursor: pointer; // } // .el-pagination { // margin-left: 330px; // } .first-box { width: 100%; min-height: 300px; overflow: hidden; position: relative; .first-item { float: left; width: 200px; min-height: 300px; margin-right: 10px; border: 1px solid #ccc; span { display: block; width: 100%; height: 40px; font-size: 12px; padding-left: 20px; padding-top: 14px; box-sizing: border-box; border-bottom: 1px solid #ccc; } ul { width: 100%; min-height: 40px; li { width: 100%; min-height: 40px; border-bottom: 1px solid #ccc; span { display: block; } } li:hover span { color: #46d2db; cursor: pointer; } } .first-list { width: 100%; min-height: 300px; } } .el-transfer-panel { border: 1px solid #ebeef5; border-radius: 4px; overflow: hidden; background: #fff; display: inline-block; vertical-align: middle; width: 200px; max-height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } } } .comm-dialog { @media (min-width: 1367px){ .el-dialog { width: 50%; } } @media (max-width: 1367px){ .el-dialog { width: 55%; } } //用户选择框弹窗样式 .el-dialog { position: relative; margin: 0 auto 50px; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3); box-shadow: 0 1px 3px rgba(0,0,0,.3); -webkit-box-sizing: border-box; box-sizing: border-box; // width: 50%; border-radius: 6px; .el-dialog__header { border-top-left-radius: 6px; border-top-right-radius: 6px; padding: 0 10px 0 10px; box-sizing: content-box; height: 40px; background:linear-gradient(270deg,rgba(87,197,159,1) 0%,rgba(78,116,242,1) 100%); .el-dialog__title { line-height: 40px; font-size: 16px; color: #FFFFFF; } .el-dialog__headerbtn { position: absolute; top: 10px; right: 20px; padding: 0; background: 0 0; border: none; outline: 0; cursor: pointer; font-size: 16px; .el-dialog__close { color: #FFF; } } } .el-dialog__body { padding: 0; color: #606266; font-size: 14px; word-break: break-all; } .el-dialog__footer { padding: 0 20px 10px 10px; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box; } .user-container { width: 100%; height: 380px; .tab-title-list { width: 100%; height: 40px; padding-right: 20px; padding-left: 20px; box-sizing: border-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; span { display: inline-block; height: 22px; line-height: 22px; padding-left: 8px; padding-right: 8px; font-size: #5A6779; cursor: pointer; } .tabActive { width:60px; height:22px; background:rgba(113,144,245,1); border-radius:2px; color: #fff } .search-box { width: 230px; height: 40px; display: -webkit-flex; display: flex; align-items: center; .el-input__inner { -webkit-appearance: none; background-color: #FFF; background-image: none; border-radius: 0px; border-top-left-radius:2px; border-bottom-left-radius:2px; border: 1px solid #dddddd; border-right-color: #4e74f2; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 30px; line-height: 30px; outline: 0; padding: 0 15px; -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1); transition: border-color .2s cubic-bezier(.645,.045,.355,1); width: 100%; } .el-input-group__append, .el-input-group__prepend { background-color: #4e74f2; color: #fff; vertical-align: middle; display: table-cell; position: relative; border: 0px solid #4e74f2; border-radius: 0px; border-top-right-radius:2px; border-bottom-right-radius:2px; padding: 0px 13px; width: 1px; white-space: nowrap; } } } .tab-container { height: 340px; width: 100%; padding: 10px 20px 8px 20px; .tab-container-box { width: 100%; height: 100%; //按部门和通讯录 .contact { width:100%; height:310px; display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; .left { width:30%; margin-right:15px; display: -webkit-flex; display: flex; flex-direction: column; border:1px solid rgba(242,242,242,1); .top-title { text-align:center; height:30px; line-height: 30px; color: #5A6779; background: #F2F2F2; border-bottom: 1px solid rgba(242,242,242,1); } .scrollbar { height:288px; width: 100%; overflow-x: hidden; .dept-tree { padding-top:10px; height: 100%; padding-left:10px; overflow: auto; } } .el-scrollbar__wrap { overflow-x: hidden; } .all-contact { height:30px; line-height: 30px; padding-left:10px; background: #fafafa; border-bottom: 1px solid rgba(242,242,242,1); cursor: pointer; .icon-img { width:8px; height:10px; margin-right:5px; } } } } //按角色 .role { width:100%; min-height:310px; display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; .role-left { width:30%; height:310px; border:1px solid rgba(242,242,242,1); margin-right:15px; .top-title { width: 100%; display: inline-block; text-align:center; height:30px; line-height: 30px; color: #5A6779; background: #F2F2F2; border-bottom: 1px solid rgba(242,242,242,1); } .scrollbar { height:288px; width: 100%; overflow-x: hidden; display: -webkit-flex; display: flex; flex-direction: column; ul { display: -webkit-box; display: flex; flex-direction: column; &>li{ height:40px; line-height: 35px; padding-left:10px; border-bottom:1px solid rgba(242,242,242,1); cursor: pointer; .icon-img { width:8px; height:10px; margin-right:5px; } } } } .el-scrollbar__wrap { overflow-x: hidden; } } } //最近 .recent-box { width:100%; min-height:310px; display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; .left { width:65%; height:310px; border:1px solid rgba(242,242,242,1); .top-title { width: 100%; display: inline-block; text-align:center; height:30px; line-height: 30px; color: #5A6779; background: #F2F2F2; border-bottom: 1px solid rgba(242,242,242,1); } .scrollbar { height:280px; width: 100%; overflow-x: hidden; .list-box { width: 100%; padding: 10px 10px 0 10px; box-sizing: border-box; } } .el-scrollbar__wrap { overflow-x: hidden; } } .center { height: 100%; line-height: 310px; width: 25px; text-align: center; font-size: 25px; color:#ccc; } .right { width: 30%; border: 1px solid red; width:30%; border: 1px solid rgba(242,242,242,1); height:310px; overflow: auto; .add-all-data { padding-left:10px; padding-right: 10px; box-sizing: border-box; display: -webkit-box; display: flex; height:30px; align-items: center; font-size:12px; justify-content: space-between; border-bottom: 1px solid rgba(242,242,242,1); span { font-size: 12px; text-align: center; display: inline-block; width:49px; height:22px; line-height: 22px; background:rgba(255,255,255,1); border-radius:2px; background-color: #f56c6c; color: #fff; cursor: pointer; // border:1px solid rgba(221,221,221,1); } } .scrollbar { height:278px; width: 100%; overflow-x: hidden; .tag-lists { box-sizing: border-box; width:100%; height: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; // height: calc(100% - 70px); .tag { margin-left: 10px; margin-top: 10px; } } } .el-scrollbar__wrap { overflow-x: hidden; } .group-num { width: 100%; height: 30px; border-top: 1px solid #ccc; font-size: 12px; display: -webkit-flex; justify-content: center; } } } //共同样式 .user-common { .role-page { width:34%; border: 1px solid rgba(242,242,242,1); height:310px; overflow: auto; .user-list { width:100%; height:calc(100% - 36px); overflow: auto; white-space: nowrap; text-overflow: ellipsis; // padding-left: 10px; box-sizing: border-box; .add-all-data { display: -webkit-box; display: flex; justify-content: center; height:30px; align-items: center; border-bottom: 1px solid rgba(242,242,242,1); span { width:100px; height:22px; background:rgba(255,255,255,1); border-radius:2px; border:1px solid rgba(221,221,221,1); color:#5A6779; font-size: 12px; display: inline-block; line-height: 21px; text-align: center; } } .current-role { text-align: center; line-height: 30px; height:30px; background: #fafafa; border-bottom: 1px solid rgba(242,242,242,1); } .scrollbar { height:208px; width: 100%; overflow-x: hidden; .list-box { width: 100%; padding: 10px 10px 0 10px; box-sizing: border-box; } } .el-scrollbar__wrap { overflow-x: hidden; } } .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 0; font-size: 14px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: flex; justify-content: center; height:36px; align-items: center; .el-pagination { white-space: nowrap; padding: 0; color: #303133; font-weight: 700; } .el-pagination button, .el-pagination span:not([class*=suffix]) { display: inline-block; font-size: 12px; min-width: 30.5px; height: 28px; line-height: 28px; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box; } } } .selected-role { border:1px solid red; width:30%; border: 1px solid rgba(242,242,242,1); height:310px; overflow: auto; margin-left: 15px; .add-all-data { padding-left:10px; padding-right: 10px; box-sizing: border-box; display: -webkit-box; display: flex; height:30px; align-items: center; font-size:12px; justify-content: space-between; border-bottom: 1px solid rgba(242,242,242,1); span { font-size: 12px; text-align: center; display: inline-block; width:49px; height:22px; line-height: 22px; background:rgba(255,255,255,1); border-radius:2px; background-color: #f56c6c; color: #fff; cursor: pointer; // border:1px solid rgba(221,221,221,1); } } .scrollbar { height:278px; width: 100%; overflow-x: hidden; .tag-lists { box-sizing: border-box; width:100%; height: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; // height: calc(100% - 70px); .tag { margin-left: 10px; margin-top: 10px; } } } .el-scrollbar__wrap { overflow-x: hidden; } .group-num { width: 100%; height: 30px; border-top: 1px solid #ccc; font-size: 12px; display: -webkit-flex; justify-content: center; } } } } .tabBoxBlock { display: block; } .tabBoxNone { display: none; } } } .dialog-footer { display: -webkit-flex; display: flex; justify-content: flex-end; padding-right: 20px; } } //子流程-并行流程 .list-wrap { width: 100%; overflow: auto; .list { width:100%; min-height:36px; color: black; .flow { background: #fafafa; cursor: pointer; height: 36px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #efeff4; .name { margin-left: 10px; } .flow-right { display: -webkit-flex; display: flex; flex-direction: row; align-items: center; .add-icon { width:24px; height:24px; display: flex; align-items: center; justify-content: center; margin-right: 10px; color: red; cursor: pointer; font-size: 16px; } } } .active { background: #8fe1e7; color: black; } .users { width: 95%; height:36px; margin-left:5%; box-sizing: border-box; border-bottom:1px solid #efeff4; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; .user-left { display: flex; flex-direction: row; align-items: center; // .photo { // width:32px; // height: 32px; // border-radius: 50%; // overflow: hidden; // img { // width:32px; // height: 32px; // } // } .user-name { font-size: 14px; margin-left: 10px; } } .del-icon { margin-right:10px; color:#888888; } } } .view-nodata { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 14px; color: #666666; .view-nodata-img, .view-nodata-text { display: flex; justify-content: center; i { color: #d9d9d9; } } } } //子流程-并行流程 .list-wrap { width: 100%; overflow: auto; .list { width:100%; min-height:36px; color: black; .flow { background: #fafafa; cursor: pointer; height: 36px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #efeff4; .name { margin-left: 10px; } .flow-right { display: -webkit-flex; display: flex; flex-direction: row; align-items: center; .add-icon { width:24px; height:24px; display: flex; align-items: center; justify-content: center; margin-right: 10px; color: red; cursor: pointer; font-size: 16px; } } } .active { background: #8fe1e7; color: black; } .users { width: 95%; height:36px; margin-left:5%; box-sizing: border-box; border-bottom:1px solid #efeff4; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; .user-left { display: flex; flex-direction: row; align-items: center; // .photo { // width:32px; // height: 32px; // border-radius: 50%; // overflow: hidden; // img { // width:32px; // height: 32px; // } // } .user-name { font-size: 14px; margin-left: 10px; } } .del-icon { margin-right:10px; color:#888888; } } } .view-nodata { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 14px; color: #666666; .view-nodata-img, .view-nodata-text { display: flex; justify-content: center; i { color: #d9d9d9; } } } } } }