/* 全局 */ #app, body, html { width: 100%; height: 100%; // background-color: #f6f8f9; font-size: 12px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; // font-family: var(--font-family), Helvetica, sans-serif !important; // text-shadow: 0px 1px 1px rgba(0, 0, 0, .6); // font-variation-settings: "wght" 400, "opsz" 8; } a { color: #333; text-decoration: none; } a:hover, a:focus { color: #000; text-decoration: none; } a:link { text-decoration: none; } a:-webkit-any-link { text-decoration: none; } a, button, input, textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; outline: none !important; -webkit-appearance: none; // font-family: var(--font-family); } * { margin: 0; padding: 0; box-sizing: border-box; outline: none; } /* 大布局样式 */ .aminui { display: flex; flex-flow: column; } .aminui-wrapper { display: flex; flex: 1; overflow: auto; } /* 全局滚动条样式 */ .scrollable { -webkit-overflow-scrolling: touch; } ::-webkit-scrollbar { width: 0; background-color: transparent; } ::-webkit-scrollbar-thumb { // background-color: rgba(50, 50, 50, 0.3); background-color: transparent; } ::-webkit-scrollbar-thumb:hover { // background-color: rgba(50, 50, 50, 0.6); background-color: transparent; } ::-webkit-scrollbar-track { // background-color: rgba(50, 50, 50, 0.1); background-color: transparent; } ::-webkit-scrollbar-track:hover { // background-color: rgba(50, 50, 50, 0.2); background-color: transparent; } @keyframes flash { 0% { background-color: #f00; } 50% { transform: scale(1.3); /* 可选:放大效果 */ } 100% { background-color: #f00; } } /*布局设置*/ .layout-setting { position: fixed; width: 40px; height: 40px; border-radius: 3px 0 0 3px; bottom: 100px; right: 20px; z-index: 100; background: #409EFF; display: flex; border-radius: 100%; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .layout-setting span{ color: #fff; position: fixed; bottom: 130px; right: 20px; animation: flash 0.5s ease-in-out infinite; background-color: #f00; border-radius: 100%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .layout-setting i { font-size: 18px; color: #fff; } /* 头部 */ .adminui-header { height: 58px; // background: rgba(255, 255, 255); color: #333; display: flex; justify-content: space-between; border-bottom: 1px solid #f0f2f5; box-shadow: 0 1px 10px #272b3c1a; } .adminui-header-left { display: flex; align-items: center; padding-left: 20px; } .adminui-header-right { display: flex; align-items: center; } .adminui-header .logo-bar { font-size: 18px; font-weight: bold; display: flex; align-items: center; } .adminui-header .logo-bar .logo { margin-right: 10px; height: 25px; } .adminui-header .nav { display: flex; height: 100%; margin-left: 40px; } .adminui-header .nav li { padding: 0 15px; margin: 0 10px 0 0; font-size: 14px; color: #333; list-style: none; height: 100%; display: flex; align-items: center; cursor: pointer; font-weight: 600; position: relative; } .adminui-header .nav li::after { position: absolute; content: ""; width: 80%; left: 10%; height: 2px; // background-color: #fff; bottom: 0; } .adminui-header .nav li i { margin-right: 5px; } .adminui-header .nav li:hover { color: var(--el-color-primary); } .adminui-header .nav li.active { background: rgba(255, 255, 255, 0.1); color: var(--el-color-primary); font-weight: 700; } .adminui-header .nav li.active::after { background-color: var(--el-color-primary); } .adminui-header .user-bar .panel-item:hover { background: rgba(255, 255, 255, 0.1) !important; } .adminui-header .user-bar .user label { color: #333; } /* 左侧菜单 */ .aminui-side-split { width: 65px; flex-shrink: 0; background: #000; display: flex; flex-flow: column; } .aminui-side-split-top { height: 49px; } .aminui-side-split-top a { display: inline-block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .aminui-side-split-top .logo { height: 30px; vertical-align: bottom; } .adminui-side-split-scroll { overflow: auto; overflow-x: hidden; height: 100%; flex: 1; } .aminui-side-split li { cursor: pointer; width: 65px; height: 65px; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .aminui-side-split li i { font-size: 18px; } .aminui-side-split li p { margin-top: 5px; } .aminui-side-split li:hover { background: rgba(255, 255, 255, 0.1); } .aminui-side-split li.active { background: #409EFF; } .adminui-side-split-scroll::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.4); border-radius: 5px; } .adminui-side-split-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.5); } .adminui-side-split-scroll::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0); } .adminui-side-split-scroll::-webkit-scrollbar-track:hover { background-color: rgba(255, 255, 255, 0); } .aminui-side { display: flex; flex-flow: column; flex-shrink: 0; width: 210px; background: #f2f3f5; // background: #f8f8fa; // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05); transition: width 0.3s; border-right: 1px solid var(--el-border-color-light); } .adminui-side-top { border-bottom: 1px solid #ebeef5; height: 50px; line-height: 50px; } .adminui-side-top h2 { padding: 0 20px; font-size: 17px; color: #3c4a54; } .adminui-side-scroll { overflow: auto; overflow-x: hidden; flex: 1; } .adminui-side-bottom { border-top: 1px solid #ebeef5; height: 51px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .adminui-side-bottom i { font-size: 16px; } .adminui-side-bottom:hover { color: var(--el-color-primary); } .aminui-side.isCollapse { width: 65px; } .el-menu { background: none; } .el-menu .menu-tag { position: absolute; height: 18px; line-height: 18px; background: var(--el-color-danger); font-size: 12px; color: #fff; right: 20px; border-radius: 18px; padding: 0 6px; } .el-menu .el-sub-menu__title .menu-tag { right: 40px; } .el-menu--horizontal>li .menu-tag { display: none; } /* 右侧内容 */ .aminui-body { flex: 1; display: flex; flex-flow: column; } .adminui-topbar { height: 50px; border-bottom: 1px solid #ebeef5; // background: #fff; // box-shadow: 0 1px 4px rgba(0, 21, 41, .08); display: flex; justify-content: space-between; } .adminui-topbar .left-panel { display: flex; align-items: center; } .adminui-topbar .right-panel { display: flex; align-items: center; } .right-panel-search { display: flex; align-items: center; } .right-panel-search>*+* { margin-left: 10px; } .adminui-tags { height: 35px; background: #fff; border-bottom: 1px solid #e6e6e6; } .adminui-tags ul { display: flex; overflow: hidden; } .adminui-tags li { cursor: pointer; display: inline-block; float: left; height: 34px; line-height: 34px; position: relative; flex-shrink: 0; } .adminui-tags li::after { content: " "; width: 1px; height: 100%; position: absolute; right: 0px; background-image: linear-gradient(#fff, #e6e6e6); } .adminui-tags li a { display: inline-block; padding: 0 10px; width: 100%; height: 100%; color: #999; text-decoration: none; display: flex; align-items: center; } .adminui-tags li i { margin-left: 10px; border-radius: 3px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } .adminui-tags li i:hover { background: rgba(0, 0, 0, .2); color: #fff; } .adminui-tags li.active { background: #fff; } .adminui-tags li.active a { // color: var(--el-color-primary); color:#fff; font-weight: bold; } .adminui-tags li.active i { // background: var(--el-color-primary); color: #fff; } .adminui-tags li.sortable-ghost { opacity: 0; } .adminui-main { overflow: auto; // background-color: #f0f2f5; background-color: #f8f8f8; flex: 1; } /*页面最大化*/ .aminui.main-maximize { .main-maximize-exit { display: block; } .aminui-side-split, .aminui-side, .adminui-header, .adminui-topbar, .adminui-tags { display: none; } } .main-maximize-exit { display: none; position: fixed; z-index: 3000; top: -20px; left: 50%; margin-left: -20px; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; background: rgba(0, 0, 0, 0.2); text-align: center; } .main-maximize-exit i { font-size: 14px; margin-top: 22px; color: #fff; } .main-maximize-exit:hover { background: rgba(0, 0, 0, 0.4); } /*定宽页面*/ .sc-page { width: 1230px; margin: 0 auto; } .el-menu-item.is-active { background-color: #efeff3; // background-color: #e6eeff; // border-right: 4px solid var(--el-color-primary); color: var(--el-color-primary); } .flex-column { flex-direction: column; } .mt10 { margin-top: 10px; } .search-box { background-color: #fff; padding: 15px 15px 10px 15px; margin-bottom: 10px; } .op-header { background-color: #fff; padding: 10px 10px 0 10px; display: flex; align-items: center; justify-content: space-between; } .search-btn { width: 100%; display: flex; align-items: center; } fieldset { margin: 0 0 10px 0; border: 1px solid #EEE; padding: 10px 20px; background: #fff; border-radius: 3px; } fieldset legend { color: #666; padding: 0 10px; font-size: 12px; letter-spacing: 1px; } .search-form { display: flex; justify-content: flex-start; } .search-form .form-left { flex: 1 1 0%; } .search-form .form-left .el-input { margin-bottom: 10px; } .search-form.mt0 .form-left .el-input { margin-bottom: 0; } .line-5{ height: 5px; width: 100%; } .search-form .form-line { display: flex; min-width: 1px; max-width: 1px; min-height: 30px; margin: 0 12px; justify-content: center; align-items: center; vertical-align: middle; border-left: 1px solid var(--el-color-info-light-9); } .search-form .form-right { flex: 0 0 86px; text-align: right; } .search-form .form-right-inline { flex: 0 0 186px; text-align: right; } .search-form .form-right .el-button { margin-bottom: 10px; } .el-table th.el-table__cell { background-color: var(--el-fill-color-light) !important; } .hide-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .nopadding .el-button-group+.el-button-group { margin-left: 0; } .channel-tabs { background-color: #fff; padding: 0 10px; } .channel_menu { border-bottom: 1px solid var(--el-color-info-light-9) !important; } .channel-tabs .el-tabs__header { margin: 0; } .channel-tabs .el-menu-item { line-height: 46px; } .channel-tabs .el-menu-item.is-active { border-right: 0; background-color: #fff; font-weight: bold; } .el-sub-menu.is-active .el-sub-menu__title { // font-weight: bolder; } .el-sub-menu.is-active .el-sub-menu__title, .el-sub-menu.is-active .el-sub-menu__title span { // color: var(--el-menu-active-color); } .el-sub-menu.is-active .el-sub-menu__title { background-color: #e6eeff; border-right: 4px solid var(--el-color-primary); color: var(--el-menu-active-color); } .el-sub-menu.is-active .el-menu .el-sub-menu__title{ border-right:0; color: var(--el-menu-text-color);; background-color: #f2f3f5; } .dark .el-sub-menu.is-active .el-sub-menu__title { background-color: var(--el-fill-color-light); } .dark .adminui-header .logo-bar{ color: #fff; } .h40{height: 36px !important;} .tip-container { margin: 20px 0; } .el-table__header-wrapper { border-top: 1px solid var(--el-table-border-color); } .log-detail .el-table__header-wrapper { border-top: 0; } .el-table th.el-table__cell { padding: 13px 0; } .w-150px { width: 150px; } .el-text { display: inline-block; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; font-size: 12px; color: #666; } .status-danger { color: var(--el-color-danger); cursor: pointer; } .status-info { color: var(--el-color-primary); cursor: pointer; } .status-success { color: var(--el-color-success); cursor: pointer; } .bl_tags { cursor: pointer; } .icon-right { margin-left: 10px; } .el-dialog { border-radius: 5px; } .el-dialog__header { margin-right: 0; border-radius: 5px 5px 0 0; padding-bottom: 20px; border-bottom: 1px solid #f8f8f8; } .el-dialog__footer { border-top: 1px solid #f1f1fa; padding: 10px 15px; } .el-dialog__title { font-weight: 500 !important; } .left-panel .el-dropdown, .right-panel .el-dropdown { margin-left: 10px; } .flex { display: flex; align-items: center; } .el-select.diy-select .el-input__wrapper { padding: 1px 11px; padding-left: 1px; } .el-select.diy-select .el-input__prefix{ margin-right: 10px; } .el-select.diy-select .el-input__prefix-inner { background-color: var(--el-fill-color-light); color: var(--el-color-info); border-right: 1px solid var(--el-input-border-color); padding-left: 11px; } .left-panel .el-button.el-button--default.is-disabled { // background-color: #f5f5f5; // border-color: #d9d9d9; } .popover-form-right { text-align: right; margin-top: 10px; } .popover-form-line { border-top: 1px solid var(--el-color-info-light-9); } .table-container { display: flex; flex-direction: column; height: 100%; flex: 1; padding: 10px; background-color: #fff; border-radius: 10px; } .table-container .table-data { flex: 1; } .flex-footer { margin-top: 5px; } .ml10 { margin-left: 10px; } .op-header.none { display: block; } .right-panel.none { margin-top: 10px; } .table-search { background-color: #fff; padding: 15px 15px 0 15px; border-bottom: 1px solid var(--el-color-info-light-9); } .table-search-menu { background-color: #fff; padding: 15px; border-bottom: 1px solid var(--el-color-info-light-9); display: flex; justify-content: space-between; align-items: center; } .table-search-menu .menu-left { font-size: 16px; color: #333; } .drawer-detail-main { background-color: var(--el-fill-color-light); border-bottom: 1px solid #ebeef5; } .op-header-no{margin-bottom: 10px;} .drawer-detail-header { padding: 12px 12px; .drawer-detail-header-subtitle { margin-bottom: 2px; font-size: 14px; color: #6b778c; } .drawer-detail-header-body { display: flex; align-items: center; width: 100%; text-align: left; justify-content: space-between; .drawer-detail-header-left { display: flex; align-items: center; overflow: hidden; font-size: 18px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; .tips { color: #666; font-size: 13px; margin-left: 10px; } } .drawer-detail-header-right { .el-form-item--default { margin-right: 0; margin-bottom: 0 } } } }