@import './element-ui.scss'; body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-size: 14px; } button, input, optgroup, select, textarea { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; /* 1 */ } html, body { margin: 0; padding: 0; height: 100%; } b, strong { font-weight: bold; } //common css .mt-10 { margin-top: 10px } .mr-10 { margin-right: 10px } .h100 { height: 100% } .hide { display: none; } .fr { float: right; } .fl { float: left; } .pt { position: relative; } .pr-5 { padding-right: 5px; } .pl-5 { padding-left: 5px; } .block { display: block; } .pointer { cursor: pointer; } .inlineBlock { display: block; } textarea { resize: none; } //.l-block { // display: inline-block //} label { font-weight: normal; } html { box-sizing: border-box; } li { list-style: none; } *, *:before, *:after { box-sizing: inherit; } .no-padding { padding: 0px !important; } .padding-content { padding: 4px 0; } a:focus, a:active { outline: none; } a, a:focus, a:hover { cursor: pointer; color: inherit; text-decoration: none; } //去除chrome input上下箭头 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } code { background: #eef1f6; padding: 15px 10px; margin-bottom: 20px; display: block; line-height: 36px; a { color: #337ab7; cursor: pointer; &:hover { color: rgb(32, 160, 255); } } } .fade-enter-active, .fade-leave-active { transition: all .2s ease } .fade-enter, .fade-leave-active { opacity: 0; } //main-container全局样式 .app-container { padding: 20px; } .components-container { margin: 30px 50px; position: relative; } .pagination-container { margin-top: 20px; text-align: center; } .editor-container .CodeMirror { height: 100% !important; } .wscn-icon { } .sub-navbar { height: 50px; line-height: 50px; position: relative; width: 100%; text-align: right; padding-right: 20px; transition: 600ms ease position; background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); .subtitle { font-size: 20px; color: #fff; } &.draft { background: #d0d0d0; } &.deleted { background: #d0d0d0; } } .link-type, .link-type:focus { color: #337ab7; cursor: pointer; &:hover { color: rgb(32, 160, 255); } } .publishedTag, .draftTag, .deletedTag { color: #fff; background-color: $panGreen; line-height: 1; text-align: center; margin: 0; padding: 8px 12px; font-size: 14px; border-radius: 4px; position: absolute; left: 20px; top: 10px; } .draftTag { background-color: $yellow; } .deletedTag { background-color: $red; } .input-label { font-size: 14px; color: #48576a; line-height: 1; padding: 11px 5px 11px 0; } .clearfix { &:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } } .no-marginLeft { .el-checkbox { margin: 0 20px 15px 0; } .el-checkbox + .el-checkbox { margin-left: 0px; } } .filter-container { padding-bottom: 10px; .filter-item { display: inline-block; vertical-align: middle; margin-bottom: 10px; } } .filter-container { margin: 15px 0 10px; padding-bottom: 0; float: right; } //refine vue-multiselect plugin .multiselect { line-height: 16px; } .multiselect--active { z-index: 1000 !important; } //refine simplemde .simplemde-container { .editor-toolbar.fullscreen, .CodeMirror-fullscreen { z-index: 1003; } } @keyframes octocat-wave { 0%, 100% { transform: rotate(0) } 20%, 60% { transform: rotate(-25deg) } 40%, 80% { transform: rotate(10deg) } } //table 部分 .blue-table { thead { th { // height:40px; // line-height:40px; // border: none; background-color: #f3f3f3; } td { border-color: #FFF; } } tbody { .cell { border: none; text-align: center; height: 44px; line-height: 44px; } tr { // height: 40px; // line-height: 40px; } td { border-bottom: none; // padding:5px 0; } } } .el-table { .cell { height: 44px; line-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } th { background-color: #eef1f6; text-align: center; .cell { height: 40px; line-height: 40px; color: #000; } } td { border-bottom: none; text-align: center; } } .cell { height: 40px; line-height: 40px; border: none; } .cell { height: 40px; line-height: 40px; border: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } //button //big button in table head .btn { width: 82px; height: 28px; line-height: 28px; border: none; font-size: 12px; border-radius: 4px; padding: 0 14px; letter-spacing: 1px; } .btn-add, .el-button--primary.btn-add:hover { background: #4d84ba } .btn-edit, .el-button--primary.btn-edit:hover { background: #46be94 } .btn-delete, .el-button--danger.btn-delete:hover { background: #de5237; } .btn-reset { background-color: #ddd; } .btn-add, .el-button--primary.btn-add:hover { background: #4d84ba; color: #FFF; } .btn-edit, .el-button--primary.btn-edit:hover { background: #46be94; color: #FFF; } .btn-delete, .el-button--danger.btn-delete:hover { background: #de5237; color: #FFF; } .icon-add1, .icon-delete1, .icon-edit1, .icon-tag, .icon-cancel, .icon-sucai { overflow: hidden; width: 13px; height: 13px; fill: #ffffff; vertical-align: middle; position: relative; right: 0; bottom: 1px; } .icon-sucai { width: 16px; height: 16px; fill: #444; } .btn-tags .el-button { padding: 4px; border: none; background: none; } .btn-tags .el-button:hover .icon-tag { fill: #000; } .icon-tag { fill: #666; width: 20px; height: 20px; } .icon-cancel { fill: #666 } .icon-btn, .data-table { .icon { width: 16px; height: 16px; fill: #8ab4da; border: none; } .icon:hover { fill: #5c8cb4; } } .cell .el-button--small { padding: 4px 5px; border: none; background: none; } // big save button container .button-container { margin-top: 40px; button { width: 120px; border: 1px solid #5584ff; border-radius: 30px; background-color: #fff; color: #5584ff; font-size: 14px; } .save { background-color: #5584ff; color: #fff; } .icon { width: 14px; height: 14px; padding-top: 2px; margin-right: 5px; } .icon-save { fill: #fff; } } .search-dialog .el-button { // border: 1px solid #c4c4c4; width: 48%; } .search-dialog{ overflow-x: hidden; } .el-table__row .el-button + .el-button { margin-left: 0px; } .account-filter-container { float: right; margin: 15px 0 10px; padding-bottom: 0; } .el-table th { font-weight: normal; } .v-content { clear: both; background-color: #fff; padding: 10px 20px 20px; // border:solid 1px #c6cad6; } .cell img { height: 36px; width: 36px; vertical-align: middle; border-radius: 50%; } .dialogForm .el-dialog { width: 800px; margin-bottom: 0; top: 50% !important; left: 50% !important; margin-top: -290px; margin-left: -300px; transform: translateX(0); // height: 550px; } .dialogShowFansForm .el-dialog { width: 1200px; margin-bottom: 0; top: 50% !important; left: 50% !important; margin-top: -295px; margin-left: -600px; transform: translateX(0); } .dialogFans360Form .el-dialog { width: 1200px; margin-bottom: 0; top: 50% !important; left: 50% !important; margin-top: -295px; margin-left: -600px; transform: translateX(0); height: 630px; } .dialogFormBox { overflow: auto; max-height: 420px; } .el-form-item { margin-bottom: 20px; } ::-webkit-scrollbar { width: 8px; height: 8px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 3px; background-color: #eee; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 3px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .2); background-color: #ccc; } .radioLabel { width: 90%; overflow: hidden; text-overflow: ellipsis; } //sharing-material //组织机构组件横向滚动条 .sharing-material { .item { position: relative; margin-top: 15px; .icon-container { padding-left: 10px; padding-right: 10px; margin-top: 5px; } .icon-container:after { content: "\0020"; display: block; height: 0; clear: both; } .item-wrapper { box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px 6px 0px; padding-bottom: 10px; border: solid 1px #c8cbd0; overflow: hidden; .icon-wrapper { margin-left: 5px; } .icon-wrapper:first-child { margin-left: 0; } .icon-wrapper:last-child { float: right; } .image-cover { position: absolute; top: 0; width: 100%; height: 192px; } .image-cover-black { background-color: rgba(0, 0, 0, 0.6); } .image-cover-white { background-color: rgba(255, 255, 255, 0.6); } } } .material-content .account-filter-container { margin: 0; } //account 实例下拉框 .control-bar { color: #999; .select-all-wrapper { position: relative; } .select-all { vertical-align: middle; margin-left: 25px; font-size: 14px; line-height: 14px; color: #999; } .float-right{ float: right; } a { //float: right; font-size: 14px; line-height: 14px; vertical-align: middle; margin-top: 2px; color: #999; // text-decoration: underline; } a:hover { color: #4d84ba; } } .el-scrollbar__view { max-width: 300px; } .material-content { display: inline-block; } .icon-edit1 { fill: #61c2c4; width: 14px; height: 14px; } .icon-wrapper { display: inline-block; width: 28px; height: 28px; border-radius: 100%; border: 1px solid #61c2c4; text-align: center; line-height: 28px; } .delete { border: 1px solid #e46456; } .delete .icon-edit1 { fill: #e46456; } //material .material-wrapper { border: 1px solid #c8cbd0; padding-top: 20px; padding-bottom: 30px; margin-top: 38px; background: #fff; } .material-title { text-align: center; height: 40px; line-height: 40px; margin: 0; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .checkbox { width: 16px; height: 16px; position: absolute; top: 1px; left: 0; } .item-checkbox { right: 20px; left: auto; top: 10px; z-index: 999; } .material-content { width: 100%; overflow: auto; .delete:hover { background: #e46456 } } } //upload-img-container .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #20a0ff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #ccc; } .avatar { width: 84px; height: 84px; display: block; } //push-message .exhibition .el-tabs__nav-wrap { padding-left: 155px; .el-tabs__nav-next, .el-tabs__nav-prev { display: none; } } .select-radio .el-radio__label { display: none; } .message-country label { text-indent: 14px; } .message-city label { text-indent: 14px; } .message-province label { text-indent: 28px; } .material-icon { width: 100px; height: 100px; line-height: 100px; } .dataRport { text-align: right; } .fans-filter-container { float: right; margin: 15px 0 10px; padding-bottom: 0; } .message-container { width: 100%; .message { height: 350px; padding: 10px 15px; overflow: auto; background-color: #F5F5F5; border-bottom: 1px solid #ccc; } .message-wrapper { border-right: solid 1px #d5d5d5; } .el-icon-close:before { content: "\E60C"; color: #999; font-size: 14px; display: inline-block; margin: 10px 15px 0 0; } .message li { margin-bottom: 15px; left: 0; position: relative; display: block; } .message .time { margin: 10px 0; text-align: center; } .message .text { display: inline-block; position: relative; max-width: calc(100% - 75px); min-height: 35px; line-height: 2.1; font-size: 14px; padding: 3px 10px; text-align: left; word-break: break-all; background-color: #fff; color: #000; border-radius: 4px; // box-shadow: 0px 1px 7px -5px #000; } .message .avatar { float: left; margin: 0 10px 0 0; border-radius: 3px; background: #fff; } .message .time > span { display: inline-block; padding: 5px 5px; font-size: 12px; color: #999; } .message .system > span { padding: 4px 9px; text-align: left; } .message .text:before { content: " "; position: absolute; top: 12px; right: 100%; border: 5px solid transparent; border-right-color: #fff; } .message .self { text-align: right; } .message .self .avatar { float: right; margin: 0 0 0 10px; width: 35px; height: 35px; } .message .self .text { background-color: rgb(158, 234, 106); // border:none; } .message .self .text:before { right: inherit; left: 100%; border-right-color: transparent; border-left-color: rgb(158, 234, 106); } .message .image { max-width: 200px; } img.static-emotion-gif, img.static-emotion { vertical-align: middle !important; } .an-move-left { left: 0; animation: moveLeft .7s ease; -webkit-animation: moveLeft .7s ease; } .an-move-right { left: 0; animation: moveRight .7s ease; -webkit-animation: moveRight .7s ease; } @keyframes moveRight { 0% { left: -20px; opacity: 0 } 100% { left: 0; opacity: 1 } } @-webkit-keyframes moveRight { 0% { left: -20px; opacity: 0 } 100% { left: 0; opacity: 1 } } @keyframes moveLeft { 0% { left: 20px; opacity: 0 } 100% { left: 0; opacity: 1 } } @-webkit-keyframes moveLeft { 0% { left: 20px; opacity: 0; } 100% { left: 0; opacity: 1 } } .el-dialog__body { padding: 0; } .history-message { position: absolute; top: 0; left: 100%; width: 50%; background-color: #fff; .el-dialog__header { height: 47px; } } .el-dialog__header { padding: 0px; } .el-dialog--small { width: 40%; top: 50% !important; margin-top: -275px; } .el-dialog { border-radius: 0; } .material-btn { border: 0; } .history-message-btn { float: right; border: 0; border-radius: 0; } .message_send textarea { border: 0; resize: none; padding-left: 10px; } .el-dialog__body { .el-dialog__header { padding-left: 15px; background-color: #f3efeb; height: 47px; line-height: 47px; border-bottom: solid 1px #d5d5d5; } .el-dialog__title { color: #333; font-size: 16px; font-weight: 700; font-family: "微软雅黑" } .el-dialog__close { color: #de5237; } } .message_send textarea { height: 63px; } } .user-info-dialog { .el-dialog { top: 50%; left: 39%; width: 16%; } .el-dialog:before { content: " "; position: absolute; bottom: 100%; left: 20px; border: 6px solid transparent; border-bottom-color: #fff; } } //qr-code .add-code { .el-menu--horizontal .el-menu-item { height: 50px; line-height: 50px; } .el-menu-item.is-active { border-bottom: none; color: #48576a; } .el-menu--horizontal .el-menu-item { float: left; } .code-main { padding-top: 53px; } .navbar-container { .router-link-active .el-menu-item { border-bottom: 5px solid #4d84ba; color: #4d84ba; } } .child-code { padding: 20px; background: #fff; min-height: 450px; } .show-all-btn { float: right; height: 100%; padding: 0; padding-right: 5px; border: none; background-color: inherit; } tbody { .cell { border-bottom: 1px solid #ccc; } } .el-input.is-disabled { .el-input__inner { background-color: #fff; color: #000; } } .el-textarea.is-disabled { .el-textarea__inner { background-color: #fff; color: #000; } } .code-list { .el-table { height: 400px; overflow-y: auto; } } .el-select { width: 100%; } .connected-car { .el-select { width: auto; } } .code-edit-bar { position: absolute; left: 250px; top: 200px; ul { padding: 0; margin-left: 10px; li { margin-top: 10px; .el-button--small { padding: 4px 5px; } } } } .el-date-editor--date { width: 100%; } .qr-code-container { margin-left: 50px; text-align: center; img { width: 100px; } } } .code-part { .el-date-editor.el-input { width: 100%; } } .item-wrapper-img { height: 175px; overflow: hidden; display: table-cell; display: block\0; vertical-align: middle; border-bottom: solid 1px #dedede; padding: 4px; line-height: 0; width: 1000px; width: 100%\0; text-align: center; } .item-wrapper-img img { max-height: 100%; max-width: 100%; position: relative; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } // 标签管理 .container { position: absolute; top: 111px; background: #fff; border: solid 1px #c6cad6; bottom: 20px; right: 20px; left: 20px; padding: 20px; } .userlabel-content { height: 100%; } .userlabel-tree { overflow: auto; position: absolute; left: 0; right: 0; bottom: 0; top: 45px; border-radius: 5px; } .icon-wrapper:hover { background: #61c2c4 } .icon-wrapper:hover svg, .delete:hover .icon-edit1 { fill: #fff; } .dashboard-container { clear: both; } //disabled .is-disabled { svg { fill: #bfcbd9; } } .triangle-topright { position: absolute; right: 15px; top: 0; width: 0; height: 0; border-top: 60px solid rgba(0, 0, 0, 0.4); border-left: 60px solid transparent; z-index: 999; } .checkbox-normal { width: 22px; height: 22px; position: absolute; } .item-checkbox-topleft { left: 20px; top: 5px; z-index: 999; //top: 1px; //left: 0; } .triangle-topleft { position: absolute; left: 15px; top: 0; width: 0; height: 0; border-top: 60px solid rgba(108,226,108, 0.4); border-right: 60px solid transparent; z-index: 999; } .count-contaner { .el-form-item__content { margin-left: 0 !important; } } .material-select-btn { display: inline-block; button { border: 0; } } //小分页 .small-page { margin-top: 4px; position: relative; height: 33px; .el-pager li.active + li { border-left: 0; } .el-pagination .btn-next, .el-pagination .btn-prev { border: 0; padding-top: 5px; } .el-pagination { position: absolute; right: 0; } .message-filter-icon { position: absolute; left: 5px; padding: 0; border: 0; top: 10px; display: inline-block; } .el-input { width: 80px; } .el-input__inner { height: 28px; } .el-autocomplete { width: 100%; } .search-bar-btn { position: absolute; top: 5px; right: 10px; height: 28px; padding: 4px 15px; } .search-bar { height: 37px; width: 100%; position: absolute; bottom: 33px; background: #fff; left: 0; border-bottom: 1px solid #ccc; } } .card-container { .card-wrapper { max-width: 100%; width: 150px; height: 78px; background-color: white; border-radius: 5px; } .card-body { border-bottom: dashed 1px gray; height: 50px; } .card-img-container { float: left; margin: 10px; height: 30px; width: 20%; img { width: 30px; height: 30px; border-radius: 50%; } } .card-title { margin-top: 15px; float: left; width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-foot { font-size: 12px; color: gray; text-align: center; } .push-msg-card-foot{ padding: 10px; } } // 消息提示 .msg-error{ background-color: #e44c3c; // border:solid 1px #fedddd; } .msg-error .errorCode{ font-size:12px;color:#f99; } .msg-error:before{ content: "\D7";background-color: #ac382c; } .msg-success:before{ content: "\2714";background-color:#1c8048; } .msg-error:before,.msg-success:before{ width: 62px; height: 52px; display: block; float: left; font-size: 28px; font-weight: 700; text-align: center; line-height: 52px; color: #fff; } .msg-success{ background-color: #24ac60; // border:solid 1px #fedddd; } .reply-message-container{ overflow: hidden; } //行内多行表格 .filter-table .el-table__row .cell{ height: auto; padding: 0; } .inner-table { border: 0; .el-table__header { display: none; } .el-table__row td:last-child{ border: 0; } .el-table__row>td:last-child{ border: 0; } } //问卷 .question-item{ .option-item{ margin-bottom: 20px; .el-form-item__label{ width: 40px!important; } .el-form-item__content{ margin-left: 40px!important; } } .title{ margin-left: 10px; } } .report-btn{ width: 82px; height: 28px; line-height: 28px; font-size: 12px; border-radius: 4px; padding: 0 14px; letter-spacing: 1px; } .underline{ color: #0000cc; text-decoration:underline; } .box-show{ .corner{ display:none; } } .box-show:hover{ .corner{ display:block; } } .box-show .corner-show{ display:block !important; } .material-tag-topright { position: absolute; right: 0; top: 5px; width: 0; height: 0; margin-right: 50px; z-index: 999; } .material-tag-item { margin-top: 5px; margin-left: 5px; line-height: 30px; color: #409EFF; } .bookmark-box { width: 50px; height: 33px; background: url("../bookmarks.png") no-repeat; background-size:cover; opacity:0.85; filter:Alpha(opacity=85); /* IE8 以及更早的浏览器 */ transform: rotate(-15deg); -ms-transform: rotate(-15deg); /* IE 9 */ -webkit-transform: rotate(-15deg); /* Safari and Chrome */ -o-transform: rotate(-15deg); /* Opera */ -moz-transform: rotate(-15deg); /* Firefox */ } .icon-info{ width: 26px; height: 26px; //fill: #4d84b; } .icon-enable1,.icon-disable1{ width: 26px; height: 26px; } .icon-enable { overflow: hidden; width: 13px; height: 13px; fill: #ffffff; vertical-align: middle; position: relative; right: 0; bottom: 1px; } .icon-disable{ overflow: hidden; width: 13px; height: 13px; fill: #ffffff; vertical-align: middle; position: relative; right: 0; bottom: 1px; }