* { box-sizing: border-box; } :root { --primary: #409eff; --success: #48c978; --danger: #F56C6C; --textGray: #999999; } .text-color-primary { color: var(--primary, #409eff); } .text-color-success { color: var(--success, #67C23A) } .text-color-danger { color: var(--danger, #F56C6C) } /* 滚动条背景 */ ::-webkit-scrollbar { width: 8px; height: 8px; background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.15); padding: 0; border: none; overflow-x: visible; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); padding: 0; border: none; width: 20px; } @font-face { font-family: "HarmonyOS"; src: url("ttf/HarmonyOS_Sans_Regular.TTF") format("truetype"); } body { font-size: 13px; font-family: 'HarmonyOS', sans-serif; } [text-sm] { font-size: 12px; } [text-success] { color: #67C23A; } [text-warning] { color: #E6A23C; } [text-danger] { color: #F56C6C; } [text-info] { color: #909399; } .el-pagination[center] { text-align: center; padding: 15px 0; } .table-body, .form-body{ padding: 20px; background-color: #FFFFFF; } #_header { /* background-color: #313131; */ /* height: 64px; */ background: #FFFFFF; box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.16); opacity: 1; } .el-input .el-input__count .el-input__count-inner { background: #FFF; display: inline-block; padding: 0 5px; line-height: normal; } .el-form--label-top .el-form-item__label { float: none; display: inline-block; text-align: left; padding: 0; font-size:13px; } .el-form-item__content { font-size: 13px; } .el-switch__label * { font-size: 13px; } .el-dialog__body { padding: 10px 10px; } .el-dialog__title { line-height: 24px; font-size: 14px; font-weight: 700; color: #303133; } .el-table td, .el-table th { padding: 5px 0; } html, body { min-height: 100%; padding: 0; margin: 0; } p, ul, ol, li { padding: 0; margin: 0; border: 0; } ul { list-style: none; } a { color: #419EFB; text-decoration: none; } #app { height: 100%; } .el-header { padding: 0; } .el-container { height: 100%; } [v-cloak] { display: none !important; } input, textarea, select { appearance: none; outline: none !important; box-shadow: none; } .el-dialog { min-width: 600px; } /*新左侧菜单 start*/ #_aside { position: relative; } .is-show-menu-2 { position: absolute; width: 30px; background: #F3F3F3; color: #A1A4A9; border-radius: 0 10px 10px 0; padding: 2px 8px; right: -30px; top: 17px; cursor: pointer; z-index: 10; } .menu-item { height: 60px; padding: 10px; } .left-menu { position: relative; width: 130px; /* height: 100%; */ overflow-y: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .menu-item-box.active { width: 100%; /* height: 100%; */ border-radius: 4px; background: #ebedf0; cursor: pointer; } /*一级菜单 start*/ .aside-logo { height: 60px; width: 100%; /*background: #24303c;*/ color: #f2f2f2; cursor: pointer; font-weight: bold; text-align: center; padding: 0 15px; } .aside-logo:hover { /*background: #30353a;*/ /*color: #fff;*/ /*background: #ffffff;*/ /*color: #f2f2f2;*/ } .aside-logo div { background: rgba(0, 0, 0, 0.5); padding: 6px 6px; width: 100%; border-radius: 3px; } .left-menu-1 { /*background: #24303c;*/ background-color: #313131; cursor: pointer; width: 120px; } .menu-item-1 { color: #ffffff; } .menu-item-1.active { /* color: #000000; */ background: #1C2536; } .menu-item-1.hover { color: #FFFFFF; background: #666666; cursor: pointer; } .menu-item-1 .icon { margin-right: 5px; } /*一级菜单 end*/ /*二级菜单 start*/ .left-menu-2 .is-show-menu-1 { position: absolute; width: 30px; background: #F3F3F3; color: #A1A4A9; border-radius: 10px 0 0 10px; padding: 2px 8px; right: 0; top: 17px; cursor: pointer; } .menu-item-2 { cursor: pointer; } .menu-item-2.active { background: #edf6ff; color: #409eff; } .menu-item-2-title { color: #909399; border-bottom: 1px solid #E6E6E6; padding-left: 28px; } .menu-item-2:hover { color: #5DA8FC; } .menu-item-2 .icon-box { width: 14px; margin-right: 5px; } /*二级菜单 end*/ /*三级菜单 start*/ .menu-item-3 { cursor: pointer; margin-left: 12px !important; } .menu-item-3.active { background: #edf6ff; color: #409eff; } .menu-item-3:hover { color: #409eff; } .menu-item-3 .icon-box { width: 14px; margin-right: 5px; } /*三级菜单 end*/ /*定义元素最终移动到的位置,以及移动到此位置需要的时间*/ .slide-enter-active, .slide-leave-active { transition: all .5s ease; } .slide-enter, .slide-leave-active { width: 0px !important; } .slide-leave, .slide-enter-active { width: 130px; } .tips-text{ color:#999; font-size:12px; } .el-table th>.cell{ color: #333; font-weight: bold; font-size: 14px; } .el-table { font-size: 13px; } .form-body { padding: 20px 60% 0 10px; background-color: #fff; margin-bottom: 20px; } .text { cursor: pointer; color: #419EFB; } /* 上传图片组件样式 */ .card-coverimg { position: relative; width: 100px; height: 90px; } .card-upload { width: 80px; height: 80px; line-height: 80px; border: 1px dashed #ededed; text-align: center; color: #dad9d9; font-size: 30px; } .icon-close { position: absolute; top: -10px; left: 66px; } /* 上传图片组件样式 */ /* diy组件公共样式 */ .diy-model-cop{ padding: 20px 19px 24px; /* margin: 9px 0; */ border-bottom: 9px solid #F4F6F8; background: #FFF; } .diy-title{ font-size: 14px; font-weight: bold; color: #333333; } .diy-name{ margin-right: 26px; min-width: 60px; text-align: end; } .diy-text-btn{ background: #F4F3F7; border-radius: 3px; font-size: 14px; color: #666666; padding: 5px 9px; min-width: 86px; max-width: 86px; } .diy-text-btn .el-input__inner{ background: none; border: none; height: 100%; padding: 0; color: #666666; } .over1{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .over2 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 带标题的card */ .edit-card { margin-bottom: 20px; } .card-title { display: inline-block; width: auto; line-height: 28px; font-size: 14px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .card-sub-title { color: #999; font-size: 12px; font-weight: 400; padding-left: 5px; } /* 公共宽度css */ .width-150 { width: 150px; } .width-200 { width: 200px; } .width-350 { width: 350px; } .width-560 { width: 560px; } .table-info-img-text{ display: flex; align-items: center; justify-content: flex-start; flex: 1 } .table-info-img-text .table-info-img{ width: 50px; height: 50px; min-width: 50px; } .circle{ border-radius: 50%; } .table-info-img-text .table-info-text{ margin-left: 5px; }