/** * 通用css样式布局处理 * Copyright (c) 2019 gassafety */ /** 基础通用 **/ .pt5 { padding-top: 5px; } .pr5 { padding-right: 5px; } .pb5 { padding-bottom: 5px; } .mt5 { margin-top: 5px; } .mr5 { margin-right: 5px; } .mb5 { margin-bottom: 5px; } .mb8 { margin-bottom: 8px; } .ml5 { margin-left: 5px; } .mt10 { margin-top: 10px; } .mr10 { margin-right: 10px; } .mb10 { margin-bottom: 10px; } .ml0 { margin-left: 10px; } .mt20 { margin-top: 20px; } .mr20 { margin-right: 20px; } .mb20 { margin-bottom: 20px; } .m20 { margin-left: 20px; } .el-dialog:not(.is-fullscreen) { margin-top: 6vh !important; } .el-dialog__header { border-bottom: 1px solid #cccccc; } .bigwindow { .el-table__header { width: 350px !important; } // 全局表格样式 .el-table { .el-table__header-wrapper, .el-table__fixed-header-wrapper { th { word-break: break-word; background-color: #679ecf; color: #fff; height: 40px; font-size: 13px; } } .el-table__body-wrapper { .el-table__body { border-spacing: 0 5px; font-size: 14px; td:nth-child(4) .cell { text-align: center; } } .el-table__row { width: 100%; // display: block; vertical-align: 5px; height: 36px; width: 350px; } .el-table__row:nth-child(2n + 1) { background-color: #e6e6e6; // &:hover { // td { // background-color: #f4f4f4; // } // } td { .cell { color: #525252; } } } .el-table__row:nth-child(2n) { background-color: #f4f4f4; // &:hover { // td { // background-color: #e6e6e6; // } // } td { .cell { color: #053b6a; } } } } .el-table__body-wrapper { .el-button [class*="el-icon-"]+span { margin-left: 1px; } } } // gis地图中底部table样式 .drawer { .el-button { color: #ffffff; &:not(.is-disabled):hover { color: rgb(46, 231, 231); } &.is-disabled { border-color: #ccccccc3 !important; color: #ccccccc3; } } } .right-bottom-data-left { .el-table { background-color: rgb(11 22 37 / 0%) !important; .el-table__body { width: 100% !important; } &::before { height: 0px !important; } td { border-bottom: none !important; } .el-table__header-wrapper, .el-table__fixed-header-wrapper { tr { // background-color: #213b52 !important; background: rgba(9, 101, 172, 0.56) !important; } th { word-break: break-word; // background-color: #213b52 !important; // color: rgba(123, 248, 244, 1); background: rgba(9, 101, 172, 0.56) !important; box-sizing: border-box; border: 1px solid rgba(54, 136, 255, 0.2392); color: #fff; height: 30px; font-size: 13px; padding: 0; &.is-leaf { border-bottom: none; } } } .el-table__body-wrapper { .el-table__row:nth-child(2n + 1) { background-color: #062A45; &:hover td { background-color: #7bf8f430 !important; } td { .cell { // color: #525252; // color: rgba(123, 248, 244, 1); line-height: 14px; color: #fff; } } } .el-table__row:nth-child(2n) { // background-color: #213b52; background-color: #062A45; &:hover td { background-color: #7bf8f430 !important; } td { .cell { line-height: 14px; color: #fff; } } } } .el-table__body-wrapper { .el-button [class*="el-icon-"]+span { // margin-left: 1px; } } } // 滚动条样式 .el-table--scrollable-y { .el-table__body-wrapper { &::-webkit-scrollbar { width: 10px; background: #012a53; position: absolute; top: 0; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ // border-radius: 10px; // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #00000052; border-radius: 8px; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // border-radius: 10px; // background-color: red; } &::-webkit-scrollbar-button:start { // overflow: hidden; } &::-webkit-scrollbar-button:end { // overflow: hidden; } // overflow-y: none !important; } } } // gis地图右上角的滚动条隐藏 .rightPic { .el-table { .el-table__body-wrapper { overflow-y: hidden; overflow-x: hidden; } } } .videoView { .el-dialog__body { padding: 0; } } // center下的分页 .myCenter { .el-pagination { button:disabled { background-color: rgba(0, 0, 0, 0); } .el-pager li { background-color: rgba(0, 0, 0, 0); color: #fff; cursor: pointer; &.active { color: #1890ff; } &:hover { color: #7bf8f4; } } .btn-prev, .el-pagination .btn-next { background-color: rgba(0, 0, 0, 0); } } .el-pagination .btn-prev, .el-pagination .btn-next { background-color: rgba(0, 0, 0, 0); } // 禁用状态的左箭头 button[disabled] { &:hover { .el-icon-arrow-left, .el-icon-arrow-right { &::before { color: #909399 !important; } } } .el-icon-arrow-left, .el-icon-arrow-right { &::before { color: #909399; } } } button { &:hover { .el-icon-arrow-left, .el-icon-arrow-right { &::before { color: #7bf8f4 !important; } } } } // 平常状态下的 .el-icon-arrow-left, .el-icon-arrow-right { &::before { color: #ffffff; } } .el-pagination__jump { color: #fff; } .el-input__inner { background-color: rgba(0, 0, 0, 0); border-color: #1890ff; color: #fff; } } // gis地图里抽屉的搜索样式 .search-input { .el-input__inner { height: 28px; min-height: 28px; outline: #053b6a; background: none !important; color: #fff; &:focus { // outline: #053b6a; border-color: #fff; } } } /** 表单布局 **/ .form-header { 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; } /* tree border */ .tree-border { margin-top: 5px; border: 1px solid #e5e6e7; background: #ffffff none; border-radius: 4px; } .pagination-container .el-pagination { right: 0; position: absolute; } .el-table .fixed-width .el-button--mini { padding-left: 0; padding-right: 0; width: inherit; } .el-tree-node__content>.el-checkbox { margin-right: 8px; } .list-group-striped>.list-group-item { border-left: 0; border-right: 0; border-radius: 0; padding-left: 0; padding-right: 0; } .list-group { 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; } .pull-right { float: right !important; } .el-card__header { padding: 14px 15px 7px; min-height: 40px; } .el-card__body { padding: 15px 20px 20px 20px; } .card-box { padding-right: 15px; padding-left: 15px; margin-bottom: 10px; } /* button color */ .el-button--cyan.is-active, .el-button--cyan:active { background: #20b2aa; border-color: #20b2aa; color: #ffffff; } .el-button--cyan:focus, .el-button--cyan:hover { background: #48d1cc; border-color: #48d1cc; color: #ffffff; } .el-button--cyan { background-color: #20b2aa; border-color: #20b2aa; color: #ffffff; } /* text color */ .text-navy { color: #1ab394; } .text-primary { color: inherit; } .text-success { color: #1c84c6; } .text-info { color: #23c6c8; } .text-warning { color: #f8ac59; } .text-danger { color: #ed5565; } .text-muted { color: #888888; } /* image */ .img-circle { border-radius: 50%; } .img-lg { 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; } /* 拖拽列样式 */ .sortable-ghost { opacity: 0.8; color: #fff !important; background: #42b983 !important; } .top-right-btn { position: relative; float: right; } // 上传按钮 .hide { .el-upload--picture-card { display: none; } } // 所有的提示框标题 .el-dialog__header { padding-bottom: 0; padding: 0px; height: 51px; line-height: 50px; background-color: #053b6a; .el-dialog__title { display: inline-block; margin-left: 22px; color: #fff; } .el-dialog__headerbtn { i { color: #fff; } } // background-color: ; } // gis地图内的bottom列表,如果隐藏在出现会有一个bug,这样可以解决 .b { &>.el-bottom { .el-table__body-wrapper { height: 140px !important; } } } // center .myCenter { .el-bottom { .el-table__body-wrapper { max-height: 600px !important; } } } .rightPic { .el-bottom { .el-table__body-wrapper { max-height: 250px !important; } } } // 设备巡检详情页表格样式 .inspectiondetail { .el-table { .el-table__header-wrapper, .el-table__fixed-header-wrapper { th { word-break: break-word; background-color: #1181e8; color: #fff; height: 40px; font-size: 14px; } } .el-table__body-wrapper { .el-table__row:nth-child(2n + 1) { background-color: #e6e6e6; // &:hover { // td { // background-color: #f4f4f4; // } // } td { .cell { color: #053b6a; } } } .el-table__row:nth-child(2n) { background-color: #f4f4f4; // &:hover { // td { // background-color: #e6e6e6; // } // } td { .cell { color: #053b6a; } } } } .el-table__body-wrapper { .el-button [class*="el-icon-"]+span { margin-left: 1px; } } } } .zzz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // 滚动条公共样式 .scrollStyle { &::-webkit-scrollbar { width: 10px; background: rgba(6, 29, 51, 0.8); // position: absolute; // top: 0; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ // border-radius: 10px; // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #00000053; border-radius: 8px; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // border-radius: 10px; // background-color: red; } &::-webkit-scrollbar-button:start { // overflow: hidden; } &::-webkit-scrollbar-button:end { // overflow: hidden; } // overflow-y: none !important; } } // 巡检巡查table样式修改 .map-bottom-wrapper { .el-table { .el-table__body-wrapper { // 滚动条样式 &::-webkit-scrollbar { width: 10px; // background: rgba(6, 29, 51, 0.8); // position: absolute; // top: 0; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ // border-radius: 10px; // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #00000053; border-radius: 8px; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // border-radius: 10px; // background-color: red; } &::-webkit-scrollbar-button:start { overflow: hidden; } &::-webkit-scrollbar-button:end { overflow: hidden; } } } .el-table::before { height: 0px; } .el-table__fixed::before { height: 0px; } .el-table__header { tr th { background-color: rgba(24, 144, 255, 0.1); &.gutter { display: none; } } } .el-table__row { td { padding: 0 !important; } } } // map里的label .amap-info { position: fixed !important; z-index: 999 !important; } .amap-marker-label { background-color: rgba(9, 18, 32, 0.6) !important; color: #fff !important; border: none !important; padding: 10px; } .left { .el-table__body-wrapper { overflow-x: hidden !important; overflow-y: hidden !important; } } // 后台系统右上角消息图标 .el-badge { position: relative; vertical-align: middle; display: inline-block; margin-bottom: 25px; margin-right: 25px; } .el-icon-chat-dot-round { font-family: "element-icons" !important; speak: none; font-style: normal; font-weight: 900 !important; font-variant: normal; text-transform: none; vertical-align: text-bottom; vertical-align: baseline; display: inline-block; -webkit-font-smoothing: antialiased; display: inline-block; padding: 0 8px; height: 100% !important; font-size: 22px; color: #5a5e66; -moz-osx-font-smoothing: grayscale; } .el-badge__content.is-fixed { top: 15px !important; right: -5px !important; } .el-badge__content { padding: 0 2px !important; } //去除高德logo .amap-logo { display: none; opacity: 0 !important; } .amap-copyright { opacity: 0; } .paddingnone { padding: 0 !important; } .zzz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .echarts-tooltip { background-color: transparent !important; box-shadow: none !important; // pointer-events:auto !important; // top:-30px !important; } .gdt { &::-webkit-scrollbar { width: 10px; background: #012a53; position: absolute; top: 0; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ // border-radius: 10px; // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #00000052; border-radius: 8px; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // border-radius: 10px; // background-color: red; } &::-webkit-scrollbar-button:start { // overflow: hidden; } &::-webkit-scrollbar-button:end { // overflow: hidden; } }