// 公共的mixin混入(可以把重复的样式封装为mixin 混入到复用的地方) // .iconBg(@width: 3rem, @height: 3rem, @bgUrl: 'icons.png') { // /*图片背景,大小作为参数传递,默认是30*30*/ // display: inline-block; // width: @width; // height: @height; // cursor: pointer; // background-image: url('../images/@{bgUrl}'); // background-color: transparent; // } .position(@position: static, @top: auto, @right: auto, @bottom: auto, @left: auto) { // 定位方式 position: @position; top: @top; right: @right; bottom: @bottom; left: @left; } .boxShadow(@color, @xWdh, @yWdh, @wdh) { box-shadow: @color @xWdh @yWdh @wdh; -webkit-box-shadow: @color @xWdh @yWdh @wdh; -moz-box-shadow: @color @xWdh @yWdh @wdh; } .link-colors(@normal: @black-color, @hover-color: @hover-color, @visited: @black-color) { /*a标签经过以及访问颜色变化混合器*/ color: @normal; &:hover { color: @hover-color; } &:visited { color: @visited; } } .rounded-corners(@border-radius: 5px, @border-radius1: @border-radius, @border-radius2: @border-radius, @border-radius3: @border-radius) { /*圆角兼容性*/ -moz-border-radius: @border-radius @border-radius1 @border-radius2 @border-radius3; -webkit-border-radius: @border-radius @border-radius1 @border-radius2 @border-radius3; border-radius: @border-radius @border-radius1 @border-radius2 @border-radius3; } // 线性渐变 .linearGradient(@point, @start, @stop) { background-color: @stop; background: linear-gradient(@point, @start, @stop); background: -moz-linear-gradient(@point, @start, @stop); background: -webkit-linear-gradient(@point, @start, @stop); } .transition-animation(@property: all, @duration: 0.2s, @timing-function: linear) { /*过渡动画*/ transition: @property @duration @timing-function; -webkit-transition: @property @duration @timing-function; -moz-transition: @property @duration @timing-function; } .borderStyle(@width: 1px, @style: solid, @color: #181d1f) { border: @width @style @color; } .resetElement(@border: 0, @background: transparent, @radius: 0) { border: @border; background-color: @background; border-radius: @radius; } /* 定制宽高按钮 */ .btn(@width: @width, @height: @height) { width: @width; height: @height; line-height: @height; cursor: pointer; } // flex弹性布局兼容性 .flex { display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ } // 行内flex 弹性布局兼容性 .inlineflex { display: -webkit-inline-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-inline-box; /* Firefox 17- */ display: -webkit-inline-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-inline-flex; /* Firefox 18+ */ display: -ms-inline-flexbox; /* IE 10 */ display: inline-flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ } // 行内元素span强转块元素 .specailSpan(@width: 50%, @height: 2.6rem) { display: inline-block; text-align: center; float: left; width: @width; height: @height; line-height: @height; cursor: pointer; } .inputStyle(@height: 2.8rem, @fontSize: 1.3rem) { height: @height; line-height: @height; border-color: @money-border-color; color: @black-color; font-size: @fontSize; @if @skin == 'black' { background-color: transparent; } @else if @skin == 'white' { background-color: @white-color; } } .ellipse { // 一行显示,超过显示省略号 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .dateInputStyle(@width: 12rem, @height: 2.2rem, @fontSize: 1.3rem) { width: @width; height: @height; line-height: @height; @if @skin == 'black' { background-color: transparent; } @else if @skin == 'white' { background-color: @white-color; } border-color: @money-border-color; font-size: @fontSize; } .submitBtnStyle(@width: 12rem, @height: 2.8rem, @fontSize: 1.4rem, @rounded: 2px) { width: @width; height: @height; line-height: @height; padding: 0; color: @white-color; background-color: @hover-color; border-color: @hover-color; font-size: @fontSize; .rounded-corners(@rounded); } .resetBtnStyle(@width: 7rem, @height: 2.2rem, @fontSize: 1.3rem, @rounded: 2px) { width: @width; height: @height; line-height: @height; padding: 0; color: @hover-color; background-color: transparent; border-color: @hover-color; font-size: @fontSize; .rounded-corners(@rounded); } .ant-input { &::placeholder { color: @m-grey10; } } .commonInput { background: @m-grey21; border: 1px solid @m-grey14; border-radius: 3px; color: #E5E5E5; .ant-input { color: #E5E5E5; background: transparent; } .ant-input-suffix { color: #E5E5E5; } &:hover, &:focus { border-color:#0C95FF; } } .tableConditionInput { width: 140px; height: 30px; line-height: 30px; background: @m-grey9; .rounded-corners(3px); border: 0; color: @m-white1; font-size: 14px; } .tableConditionInput+.tableConditionInput { margin-left: 10px; } .ant-select-dropdown { background: #424E59; border: 1px solid #48545F; box-shadow: 0px 10px 10px 0px rgba(18, 22, 24, 0.36); border-radius: 5px; .ant-select-item { color:@m-grey1; } .ant-select-item-option-active,.ant-select-item-option-selected,.ant-select-item-option-hover { background: @m-blue0; color: @m-white1; } } .srcollYTable { .ant-table { width: 100%; table { border: 0; } .ant-table-thead { tr { box-shadow: 0px 1px 0px 0px #2E3539; th { line-height: 34px; background: @m-black8; padding-top: 0; padding-bottom: 0; color: @m-grey17; font-size: 14px; border-right: 1px solid @m-black9; border-bottom: 1px solid @m-black9; } } } .ant-table-tbody { tr { td { height: 34px; line-height: 34px; padding: 0 8px; border-right: 1px solid @m-black9; border-bottom: 1px solid @m-black9; font-size: 16px; color: @m-white1; } } tr.ant-table-expanded-row:hover { //tr.ant-table-expanded-row, td { background-color: @m-blue3; } } tr.ant-table-expanded-row { td { text-align: right; } } } .ant-table-placeholder { border: 0; background: @m-black2; } } .ant-table-row-expand-icon { border-color: @m-grey17; background-color: transparent; color: @m-grey17; } .operBtn.ant-btn { margin-top: 0; margin-bottom: 0; height: 26px; line-height: 26px; } } // 左边菜单展开后 表格展开行操作按钮显示在最右侧 .expandLeftTable { .ant-table { .ant-table-content { .ant-table-tbody { .ant-table-expanded-row { width: calc(100vw - 180px); } } } } } // 上面表格样式 .topTable { .ant-table { width: 100%; table { border: 0; } .ant-table-thead { tr { box-shadow: 0px 1px 0px 0px #2E3539; th { line-height: 34px; background: @m-black8; padding-top: 0; padding-bottom: 0; color: @m-grey17; font-size: 14px; border-right: 1px solid @m-black9; border-bottom: 1px solid @m-black9; // white-space: nowrap; // text-overflow: ellipsis; // overflow: hidden; } } } .ant-table-tbody { tr { td { height: 34px; line-height: 34px; padding: 0 8px; border-right: 1px solid @m-black9; border-bottom: 1px solid @m-black9; font-size: 16px; color: @m-white1; // white-space: nowrap; // text-overflow: ellipsis; // overflow: hidden; } } tr.ant-table-expanded-row:hover { //tr.ant-table-expanded-row, td { background-color: @m-blue3; } } tr.ant-table-expanded-row { td { text-align: right; } } } .ant-table-placeholder { border: 0; background: @m-black2; } } .ant-table-row-expand-icon { border-color: @m-grey17; background-color: transparent; color: @m-grey17; } .operBtn.ant-btn { margin-top: 0; margin-bottom: 0; height: 26px; line-height: 26px; } } // 展开行操作按钮显示问题 .topOrderTable { .ant-table { width: 100%; table { border: 0; } .ant-table-thead { tr { box-shadow: 0px 1px 0px 0px #2E3539; th { line-height: 34px; background: @m-black8; padding-top: 0; padding-bottom: 0; color: @m-grey17; font-size: 14px; border-right: 1px solid @m-black9; border-bottom: 1px solid @m-black9; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } } .ant-table-tbody { tr { td { height: 34px; line-height: 34px; padding: 0 8px; border-right: 1px solid @m-black9; border-bottom: 1px solid @m-black9; font-size: 16px; color: @m-white1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } tr.ant-table-expanded-row:hover { //tr.ant-table-expanded-row, td { background-color: @m-blue3; } } tr.ant-table-expanded-row { td { text-align: right; } td:last-child { position: relative; .btn-list { position: absolute; left: calc(100vw - 530px); top: 4px; width: 300px; text-align: right; .operBtn.ant-btn { margin-top: 0; margin-bottom: 0; height: 26px; line-height: 26px; } } } } } .ant-table-placeholder { border: 0; background: @m-black2; } } .ant-table-row-expand-icon { border-color: @m-grey17; background-color: transparent; color: @m-grey17; } } // 折叠菜单后右侧表格中展开后操作按钮的位置 .collapsed { .topOrderTable { .ant-table { .ant-table-tbody { tr.ant-table-expanded-row { td:last-child { .btn-list { left: calc(100vw - 430px); } } } } } } } // 弹窗表格 .dialogTable { .ant-table { width: 100%; background: transparent; table { border: 1px solid @m-grey20; border-radius: 0; } .ant-table-thead { tr { box-shadow: 0px 1px 0px 0px #2E3539; th { line-height: 36px; background: @m-grey11; padding-top: 0; padding-bottom: 0; color: @m-grey2; font-size: 16px; border-right: 1px solid @m-grey20; border-bottom: 1px solid @m-grey20; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } } .ant-table-tbody { tr { td { height: 36px; line-height: 36px; padding: 0 8px; border-right: 1px solid @m-grey20; border-bottom: 1px solid @m-grey20; font-size: 14px; color: @m-white1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: @m-grey11; } } } .ant-table-placeholder { border: 0; background: @m-grey11; } } } .ant-empty-normal { color: @m-grey17; } .ant-empty-img-simple-path,.ant-empty-img-simple-ellipse { fill: @m-grey17; } .ant-empty-img-simple-g { stroke: @m-grey17; } .ant-modal-wrap { overflow: hidden; } .add-custom,.commonModal { top: 0; max-height: 100%; padding-bottom: 0; .ant-modal-content { background: #0F1A25; border-radius: 5px; height: 100%; .ant-modal-close { .ant-modal-close-x { width: 40px; height: 40px; line-height: 40px; .ant-modal-close-icon { color: #1271BA; } } } .ant-modal-header { height: 40px; background: linear-gradient(0deg, #112C43, #084258); border-radius: 5px; padding: 0; text-align: center; border-bottom: 0; .ant-modal-title { line-height: 40px; font-size: 16px; color: @m-white0; } } .ant-modal-body { min-height: 380px; max-height: calc(100vh - 115px); overflow-y: auto; } .ant-modal-footer { border-top: 0; text-align: center; padding-bottom: 31px; height: 75px; .ant-btn-primary { width: 200px; height: 34px; line-height: 32px; border: 0; background: linear-gradient(0deg, @m-blue8 0%, @m-blue9 100%); border-radius: 3px; font-size: 16px; color: @m-white0; &:hover { background: linear-gradient(0deg, @m-blue8-hover 0%, @m-blue9-hover 100%); color: @m-white0-hover; } } .ant-btn.cancelBtn { width: 200px; height: 34px; line-height: 32px; border: 1px solid @m-blue10; border-radius: 3px; background: transparent; font-size: 16px; color: @m-blue10; margin-right: 20px; &:hover { border-color: rgba(@m-blue10, .8); } } } } } .ant-form.inlineForm { .ant-row.ant-form-item { margin-bottom: 21px; .ant-form-item-label { position: relative; width: 130px; line-height: 30px; text-align: left; label { color: @m-grey1; padding-left: 16px; &::after { content: '' } &::before { .position(absolute, 0, auto, auto, 0); font-size: 16px; line-height: 21px; color: @m-red1; } label { padding-left: 0; } } } .ant-form-item-control-wrapper { .ant-form-item-control { line-height: 30px; } } } .relative.ant-form-item { position: relative; // .itemTip { // position: absolute; // color: @m-grey1; // } .tip { position: absolute; font-size: 14px; color: @m-grey1; width: 100%; // div:nth-child(2){ // margin-top: -10px; // } } .ant-form-item-control { width: 200px; .unit { float: right; color: @m-grey2; } .backUnit { position: absolute; right: -20px; top: -7px; line-height: 32px; height: 32px; color: @m-grey2; } } } .tc.ant-form-item { .ant-form-item-control-wrapper { margin: 0 auto; } } .pl40.ant-form-item { .ant-form-item-label { label { padding-left: 40px; } } } } .ant-form.dialogForm { .ant-row.ant-form-item { .ant-form-item-label { width: 70px; label { padding-left: 0; &::before { display: none; } } } .ant-form-item-control-wrapper { width: calc(100% - 70px); } } } .ant-select-single { .ant-select-selector { height: 30px; padding: 0 8px; background: @m-grey21; border: 1px solid #0C95FF; border-radius: 3px; color: #E5E5E5; } .ant-select-arrow { right: 8px; color: #3A87F7; } } .inlineFormSelect.ant-select-single { .rounded-corners(3px); border: 1px solid #2B3F52; &:hover, &:focus { border-color:#0C95FF; } .ant-select-selector { height: 30px; padding: 0 8px; background: @m-grey21; border: 0; color: #E5E5E5; .ant-select-selection-placeholder { color: @m-grey10; } } .ant-select-arrow { right: 8px; color: #3A87F7 !important; } } .shortSelect.ant-select-single:extend(.inlineFormSelect.ant-select-single) { margin-right: 0; .ant-select-selector { padding: 0 5px; .ant-select-selection-item { padding-right: 14px; } } } .typeSelect.ant-select-single { .rounded-corners(3px); border: 1px solid #2B3F52; &:hover, &:focus { border-color:#0C95FF; } .ant-select-selector { height: 30px; padding: 0 8px; background: @m-grey21; border: 0; color: #E5E5E5; .ant-select-selection-placeholder { color: @m-grey10; } } .ant-select-arrow { right: 8px; color: @m-blue0; } } .input-enumdicname { color: #394753; margin-left: 5px; font-size: 16px; } .dialogInput { background: @m-grey21; border: 1px solid @m-grey14; border-radius: 3px; color: #E5E5E5; .ant-input { color: #E5E5E5; background: transparent } .ant-input-suffix { color: #E5E5E5; } .ant-input-suffix { .ant-input-password-icon { color: #E5E5E5; } } &:hover,&:focus { border-color: @m-blue10; } } .yellowInput { .ant-input,.ant-input-number-input { color: @m-yellow1; font-size: 16px; text-align: center; } } .suffixGrey { .ant-input-suffix { color: @m-grey2; } } .formFieldSet { border: 1px solid @m-grey19; padding: 0 20px 20px; legend { color: @m-white0; } } .formFieldSet+.formFieldSet { margin-top: 35px; } .ant-form { legend { width: auto; margin-left: 20px; font-size: 16px; color: @m-white0; border-bottom: 0; padding: 0 10px; } } .paddingDialog,.fieldsetDialog { .formFieldSet { legend { width: auto; margin-left: 20px; font-size: 16px; color: @m-white0; border-bottom: 0; padding: 0 10px; } } } .paddingDialog { .ant-modal-content { .ant-modal-body { padding: 24px; } } } // 上传 .upload { display: inline-flex; .ant-btn.uploadBtn { width: 60px; height: 30px; background: @m-blue0; border: 0; padding: 0; text-align: center; font-size: 14px; color: @m-white0; .rounded-corners(3px); &:hover { background: rgba(@m-blue0, 0.8); color: rgba(@m-white0, 0.8); } } .ant-upload-list-item-info { .anticon-loading,.anticon-paper-clip { color: @m-white0; } .ant-upload-list-item-name { color: @m-white0; } .ant-upload-list-item-card-actions { .anticon { color: @m-white0; } } &:hover { background: transparent; .anticon-loading,.anticon-paper-clip { color: @m-blue0; } .ant-upload-list-item-name { color: @m-blue0; } .ant-upload-list-item-card-actions { .anticon { color: @m-blue0; } } } } .look { color: @m-blue0; font-size: 14px; margin-left: 10px; cursor: pointer; } } .fl { float: left; } .fr { float: right; } .ml10 { margin-left: 10px; } .ml35 { margin-left: 35px; } .ml9 { margin-left: 9px; } .ml5{ margin-left: 5px; } .mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; } .mt25 { margin-top: 25px; } .mt30 { margin-top: 30px; } .mb40 { margin-bottom: 40px !important; } .mr10 { margin-right: 10px; } .red { color: @m-red0; } .grey { color: @m-grey2; } .white { color: @m-white0; } .blue { color: @m-blue0; } .green { color: @m-green0; } .yellow { color: @m-yellow0; } .orange { color: @m-orange0; } .selectBtn.ant-btn { margin-left: 10px; width: 80px; height: 30px; line-height: 31px; text-align: center; background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%); border: 0; color: @m-white0; font-size: 14px; .rounded-corners(3px); &:hover, &:focus { background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%); color: rgba(@m-white0, 0.8); border: 0; } } .btnPrimary.ant-btn,.operBtn.ant-btn { margin-left: 10px; width: auto; min-width: 80px; height: 30px; line-height: 31px; text-align: center; background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%); border: 0; color: @m-white0; font-size: 14px; .rounded-corners(3px); &:hover, &:focus { background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%); color: rgba(@m-white0, 0.8); border: 0; } } .operBtn.ant-btn { margin-top: 9px; margin-bottom: 6px; } .ant-table-expanded-row { .btn-list { padding-right: 10px; text-align: right; } .btnPrimary.ant-btn { width: 80px; height: 26px; line-height: 27px; border: 0; background: linear-gradient(0deg, @m-blue2, @m-blue0); box-shadow: -1px 0px 0px 0px @m-black10; .rounded-corners(3px); &:hover, &:focus { background: linear-gradient(0deg, @m-blue2-hover 0%, @m-blue0-hover 99%); color: rgba(@m-white0, 0.8); border: 0; } } .ant-btn+.ant-btn { margin-left: 10px; } } .btnDanger.ant-btn{ margin-left: 10px; width: 80px; height: 26px; line-height: 27px; text-align: center; border: 0; color: @m-white0; font-size: 14px; background: linear-gradient(0deg, @m-red0 0%, @m-red1 99%); .rounded-corners(3px); &:hover, &:focus { background: linear-gradient(0deg, @m-red0-hover 0%, @m-red1-hover 99%); color: rgba(@m-white0, 0.8); border: 0; } } .btnDeafault.ant-btn { margin-left: 10px; width: 80px; height: 26px; line-height: 27px; text-align: center; border: 0; color: @m-white0; font-size: 14px; background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%); .rounded-corners(3px); &:hover, &:focus { background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 99%); color: rgba(@m-white0, 0.8); border: 0; } } // .hiddenFirstCol { // .ant-table { // .ant-table-content { // .ant-table-scroll { // .ant-table-hide-scrollbar { // .ant-table-fixed { // .ant-table-thead { // .ant-table-expand-icon-th { // width: 0 !important; // } // } // } // } // } // .ant-table-body { // table { // .ant-table-thead { // .ant-table-expand-icon-th { // width: 0 !important; // } // } // .ant-table-tbody { // .ant-table-row { // .ant-table-row-expand-icon-cell { // width: 0 !important; // } // } // tr.ant-table-expanded-row { // td:first-child { // width: 0 !important; // } // } // } // } // } // } // } // } .to { font-size: 14px; color: @m-grey2; margin-left: -8px; margin-right: 2px; } .filterTable { display: inline-flex; width: calc(100% - 3px); padding-left: 3px; } .ant-row.dialogRowTitle { margin-left: 0 !important; margin-right: 0 !important; border: 1px solid @m-grey20; .ant-col { border-top: 1px solid @m-grey20; border-right: 1px solid @m-grey20; padding-left: 0 !important; padding-right: 0 !important; height: 34px; line-height: 34px; font-size: 16px; color: @m-grey2; .red { color: @m-red1; } } .ant-col:nth-child(1),.ant-col:nth-child(2),.ant-col:nth-child(3),.ant-col:nth-child(4){ border-top: 0; text-align: center; } .ant-col:last-child { border-right: 1px solid @m-grey20; } .bt1 { border-top: 1px solid @m-grey20 !important; } } // 日期输入框 @m-grey21 .commonPicker.ant-calendar-picker { .ant-input { background: @m-grey21; border-color: @m-grey14; padding: 4px 8px; .rounded-corners(3px); .ant-calendar-range-picker-input { color: @m-white0; font-size: 14px; &::placeholder { color: @m-grey10; } } .ant-calendar-picker-clear { background: @m-white0; } .ant-calendar-range-picker-separator { font-size: 14px; color: @m-grey2; } } } // 日期输入框 .commonDatePicker.ant-calendar-picker { .ant-input { background: @m-grey9; padding: 0 8px; height: 30px; line-height: 30px; border: 0; color: @m-white1; } .ant-calendar-picker-icon { color: @m-grey1; } .ant-calendar-picker-clear { background: transparent; color: @m-grey1; svg { fill: @m-grey1; } } } .ant-popover { .ant-popover-content { border: 1px solid @m-grey22; .rounded-corners(5px); .ant-popover-arrow { border-top-color: @m-grey22; border-left-color: @m-grey22; } .ant-popover-inner { .ant-popover-inner-content { border-image-width: 0; background: @m-grey22; color: @m-white0; padding: 5px 15px; &:hover { color: @m-blue0; } } } } } .ant-calendar-picker-container { .ant-calendar-range,.ant-calendar { background: @m-grey22; border-color: @m-grey22; .ant-calendar-panel { .ant-calendar-input-wrap { border-bottom-color: @m-grey23; .ant-calendar-input { background: transparent; border: 1px solid @m-grey1; color: @m-white0; &::placeholder { color: @m-grey1; } } } .ant-calendar-date-panel { // .ant-calendar-range-part { .ant-calendar-header { border-color: @m-grey1; .ant-calendar-prev-year-btn,.ant-calendar-prev-month-btn { color: @m-grey1; &::before,&::after { border-color: @m-grey2; } } .ant-calendar-month-select,.ant-calendar-year-select { color: @m-grey1; } } .ant-calendar-body { border-top-color: @m-grey1; .ant-calendar-column-header-inner { color: @m-grey1; } .ant-calendar-cell { .ant-calendar-date { background: transparent; color: @m-white0; } &:hover { .ant-calendar-date { color: @m-blue0; } } } .ant-calendar-last-day-of-month,.ant-calendar-next-month-btn-day { .ant-calendar-date { color: @m-white1; } } .ant-calendar-disabled-cell { .ant-calendar-date { color: @m-grey1; } } .ant-calendar-selected-day { .ant-calendar-date { color: @m-blue0; } } .ant-calendar-active-week { .ant-calendar-cell { .ant-calendar-date { background: transparent; } } } // } } .ant-calendar-range-middle { color: @m-white1; } } } .ant-calendar-footer { border-top-color: @m-grey1; .ant-calendar-time-picker-btn { color: @m-grey1; } .ant-calendar-ok-btn { background-color: @m-blue0; border-color: @m-blue0; color: @m-white0; &:hover { background-color: @m-blue0-hover; border-color: @m-blue0-hover; color: @m-white0-hover; } } } } .ant-calendar-month-calendar { .ant-calendar-month-calendar-content { .ant-calendar-month-header-wrap { .ant-calendar-header { .ant-calendar-prev-year-btn,.ant-calendar-prev-month-btn { color: @m-grey1; &::before,&::after { border-color: @m-grey2; } } .ant-calendar-month-panel-year-select { color: @m-grey1; } } .ant-calendar-month-panel-body { .ant-calendar-month-panel-table { .ant-calendar-month-panel-tbody { .ant-calendar-month-panel-cell { .ant-calendar-month-panel-month { color: @m-white1; &:hover { background: transparent; color: @m-blue0; } } } } } } } } .ant-calendar-month-panel { background: @m-grey22; border-color: @m-grey22; .ant-calendar-month-panel-header { border-color: @m-grey1; } } } } .ant-calendar-range { .ant-calendar-in-range-cell::before { background: @m-grey22-hover; } } .has-error .ant-input:not(.has-error .ant-input-disabled), -has-error .ant-input:not(.has-error .ant-input-disabled), .has-error .ant-input:not(-has-error .ant-input-disabled), -has-error .ant-input:not(-has-error .ant-input-disabled) { background: @m-grey21; } .ant-modal-confirm-confirm { top: 50%; padding-bottom: 0; margin-top: -64px; .ant-modal-content { background: @m-grey11; .ant-modal-close { .ant-modal-close-x { width: 40px; height: 40px; line-height: 40px; .ant-modal-close-icon { color: @m-blue11; } } } .ant-modal-body { padding: 24px; .ant-modal-confirm-body-wrapper { .ant-modal-confirm-body { .ant-modal-confirm-title { color: @m-white0; text-align: center; } .ant-modal-confirm-content { color: @m-white0; font-size: 14px; } } .ant-modal-confirm-btns { float: none; text-align: center; .ant-btn { width: 100px; height: 34px; line-height: 32px; border: 1px solid @m-blue10; border-radius: 3px; background: transparent; font-size: 16px; color: @m-blue10; margin-right: 20px; &:hover { border-color: rgba(@m-blue10, .8); } } .ant-btn-primary { margin-left: 20px; width: 100px; height: 34px; line-height: 32px; border: 0; background: linear-gradient(0deg, @m-blue8 0%, @m-blue9 100%); border-radius: 3px; font-size: 16px; color: @m-white0; &:hover { background: linear-gradient(0deg, @m-blue8-hover 0%, @m-blue9-hover 100%); color: @m-white0-hover; } } } } } } } .tltLeft { font-size: 16px; text-align: left; .icon { font-size: 20px; fill: @m-blue0; margin-right: 10px; } } .ant-collapse.spotCollapse.ant-collapse-borderless { margin-top: 10px; background-color: transparent; .ant-collapse-item { border-bottom: 0; .ant-collapse-header { color: @m-grey17; font-size: 14px; border-bottom: 1px solid @m-grey18; padding: 10px 8px 10px 44px; height: 43px; .ant-collapse-arrow { fill: @m-grey17; width: 16px; height: 16px; font-size: 16px; left: 0; } } .ant-collapse-content { .ant-collapse-content-box { padding: 0 0 0 30px; background-color: transparent; .ant-row.contRow { width: 100%; height: 40px; line-height: 40px; font-size: 16px; color: @m-white1; margin-bottom: 10px; background: #0f161c; border: 1px solid @m-blue3; border-radius: 3px; padding-left: 14px; padding-right: 12px; .ant-col:last-child { text-align: right; } .ant-col:first-child { text-align: left; } } .contRow:first-child { margin-top: 9px; } .contRow:last-child { margin-bottom: 20px; } } } } } .ant-collapse.busyCollapse.ant-collapse-borderless { margin-top: 10px; background: #0f161c; border: 1px solid #172b56; .rounded-corners(3px); .ant-collapse-item { border-bottom: 0; .ant-collapse-header { color: @m-grey17; font-size: 14px; border-bottom: 0; padding: 0; line-height: 43px; .ant-collapse-arrow { fill: @m-grey17; width: 16px; height: 16px; font-size: 16px; left: 0; } .ant-row.contRow { width: 100%; // height: 40px; line-height: 40px; font-size: 16px; color: @m-white1; margin-bottom: 10px; // background: #0f161c; border: 0 !important; // border-radius: 3px; padding-left: 14px; padding-right: 12px; .ant-col:last-child { text-align: right; } .ant-col:first-child { text-align: left; } } .contRow:first-child { margin-top: 0 !important; } .contRow:last-child { margin-bottom: 0 !important; } } .ant-collapse-content.ant-collapse-content-active { .ant-collapse-content-box { padding: 0 0 0 30px; background-color: transparent; .btn-list { width: calc(100% - 10px); justify-content: flex-end; padding-right: 10px; padding-bottom: 10px; } } } } } .ant-row.headRow { .ant-col:first-child { text-align: left; } .ant-col:nth-child(3) { text-align: right; } } // 输入框自动填充背景色和字体颜色 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, .dialogInput:-webkit-autofill { box-shadow: inset 0 0 0 1000px @m-grey21; -webkit-text-fill-color: #e5e5e5; } input:-internal-autofill-selected { background-color: @m-grey21 !important; } .login { input:-webkit-autofill { box-shadow: inset 0 0 0 1000px @m-white0; } } .ant-checkbox-group.commonCheckboxGroup { width: 100%; .ant-checkbox-wrapper { color: @m-white0; font-size: 14px; .ant-checkbox { margin-right: 2px; .ant-checkbox-inner { background: #15202B; border: 1px solid @m-grey14; border-radius: 3px; } } .ant-checkbox.ant-checkbox-checked { .ant-checkbox-inner { &::after { border-color: #3A87F7; } } &::after { border-color: #3A87F7; } } span+span { margin-right: 15px; color: @m-white0; font-size: 14px; } } .ant-checkbox-wrapper-disabled { .ant-checkbox-disabled { outline-color: #2B3F52; .ant-checkbox-input { color: @m-white0; font-size: 14px; } .ant-checkbox-inner { border-color: #2B3F52 !important; } } } } .commonRadioGroup { .ant-radio-wrapper { color: @m-white0; font-size: 14px; .ant-radio { .ant-radio-inner { border-color:#3A87F7; background: #15202B; &::after { left: 4px; top: 4px; width: 6px; height: 6px; background: #3A87F7; border-radius: 50%; } } } } .ant-radio-wrapper-disabled { .ant-radio-disabled { .ant-radio-inner { border-color:#3A87F7 !important; background: #15202B; &::after { left: 4px; top: 4px; width: 6px; height: 6px; background: #3A87F7; border-radius: 50%; } } } span+span { color: @m-white0; font-size: 14px; } } } .tc { text-align: center; } .checkboxGroupItem { .ant-col.ant-form-item-control-wrapper { max-width: calc(100% - 130px); } } .ant-spin-container::after,.ant-drawer-content { background-color: transparent; } .ant-layout-sider-has-trigger { padding-bottom: 40px; } // 弹窗中表格内容居中 .tableContextCenter { .dialogTable { .ant-table-thead { tr { th { text-align: center; } } } .ant-table-tbody { tr { td { text-align: center; } } } } } .filter-check { > span { &:nth-of-type(2) { color: @m-grey2; height: 30px; line-height: 30px; } } } .topTableHeight { height: calc(100% - 28px); // .srcollYTable { // display: none; // } } .topTableHeight40 { height: calc(100% - 40px); } // 折叠底部上面左边菜单高度 .hiddenBottomLayout .layout-top .middleLayout .m-layout-left .ant-layout-sider-children ul.ant-menu.ant-menu-inline.left-menu { height: calc(100vh - 126px); } // 买卖大厅 .buy-sell-market { width: 100%; height: 100%; position: absolute; z-index: 9; left: 0; top: 0; background-color: @m-black1; .buy-sell-market-title { width: 100%; height: 60px; background: @m-black1; display: inline-flex; font-size: 14px; position: relative; line-height: 60px; border-bottom: 1PX solid @m-blue0; div { align-self: center; align-items: center; } .backIcon { width: 52px; line-height: 60px; } .titleBtn { min-width: 90px; height: 40px; display: inline-flex; .name { background: @m-blue12; text-align: center; flex: 1; padding: 0 16px; .rounded-corners(3px, 0, 0, 3px); color: @m-white0; height: 40px; line-height: 40px; font-size: 16px; } .arrowRightIcon,.arrowLeftIcon { width: 12px; height: 40px; background-image: url(../images/titleArrow.png); background-position: 0 0; background-repeat: no-repeat; } .arrowLeftIcon { background-position: -12px 0; } } .titleBtn2 { .name { .rounded-corners(0); } } .titleBtn3 { position: relative; .name { .rounded-corners(0, 5px, 5px, 0); } margin-right: 20px; .anticon { font-size: 16px; color: @m-grey1; .position(absolute, auto, 16px, 0, auto); line-height: 36px; z-index: 2; } } .numBlock { display: inline-flex; white-space: nowrap; .first { font-size: 14px; } .last { font-size: 18px; margin-left: 10px; } } .numBlock+.numBlock { margin-left: 25px; } .market { margin-left: 28px; min-width: 160px; height: 40px; display: inline-flex; background: @m-blue3; border: 1px solid @m-blue13; .rounded-corners(3px); color: @m-grey2; padding: 0 14px; > div { align-self: center; align-items: center; } .first { font-size: 14px; } .last { font-size: 18px; margin-left: 10px; margin-right: 10px; } .red { color: @m-red1; } } .ant-btn { align-items: center; align-self: center; } .publishBuy.ant-btn { min-width: 80px; height: 30px; line-height: 30px; background: linear-gradient(0deg, @m-blue2, @m-blue0); .rounded-corners(3px); font-size: 14px; color: @m-white0; text-align: center; border: none; margin-left: 10px; &:hover { background: linear-gradient(0deg, @m-blue2-hover, @m-blue0-hover); color: @m-white0-hover; } } .detailBtn.ant-btn { min-width: 80px; height: 30px; line-height: 30px; background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%); .rounded-corners(3px); font-size: 14px; color: @m-white0; text-align: center; border: none; &:hover { background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%); color: @m-white0-hover; } } .ant-btn+.ant-btn { margin-left: 10px; } .btn-list { position: absolute; right: 10px; } } } // 买卖大厅表格 .buyHallTable,.sellHallTable { .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body { min-height: calc(100vh - 470px); background: transparent; } .ant-table { width: 100%; table { border: 0; } .ant-table-content { background: @m-red2; } .ant-table-thead { tr { box-shadow: 0px 1px 0px 0px #2E3539; th { line-height: 34px; background: @m-black8; padding-top: 0; padding-bottom: 0; color: @m-grey17; font-size: 14px; border-right: 1px solid @m-black10; border-bottom: 1px solid @m-black10; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } } .ant-table-tbody { min-height: calc(100vh - 470px); background: @m-red2; tr { td { height: 43px; line-height: 43px; padding: 0 8px; border-right: 1px solid @m-black10; border-bottom: 1px solid @m-black10; font-size: 16px; color: @m-grey17; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } td:first-child { background: @m-black8; color: @m-grey17; } td:not(:first-child :nth-child(1)) { background: @m-red2; color: @m-white1; } } tr.ant-table-expanded-row, tr.ant-table-expanded-row:hover { td { background-color: @m-black2; } } tr.ant-table-expanded-row { td { text-align: right; } } tr:hover { td { background-color: @m-blue3 !important; } } } .ant-table-placeholder { border: 0; background: @m-black2; } } .ant-table-row-expand-icon { border-color: @m-grey17; background-color: transparent; color: @m-grey17; } } .sellHallTable { .ant-table { .ant-table-content { background: @m-green1; } .ant-table-tbody { background: @m-green1; tr { td:first-child { background: @m-black8; color: @m-grey17; } td:not(:first-child :nth-child(1)) { background: @m-green1; } } } } } .sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child),.buyHallTable .ant-table .ant-table-tbody tr td:not(:first-child) { background-color: @m-black2; } // 表单里面的内容 .formBar { ::v-deep.formProgress { width: 140px; // height: 3px; // .rounded-corners(2px); margin-left: 70px; .ant-progress-outer { margin-right: 0; padding-right: 0; .ant-progress-inner { background: @m-grey14; .rounded-corners(2px); .ant-progress-bg { height: 3px !important; border-radius: 2px !important; background-color: @m-blue0; } } } .ant-progress-text { display: none; } } .listedBtn { width: 120px; height: 30px; line-height: 30px; background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%); border-radius: 3px; color: @m-white0; font-size: 14px; text-align: center; border: 0; &:hover { background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%); color: @m-white0-hover; } } .cancelBtn:extend(.listedBtn) { background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%); &:hover { background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%); color: @m-white0-hover; } } } .ant-slider.formSlider { width: 140px; margin-left: 70px; .ant-slider-rail { margin-right: 0; padding-right: 0; height: 3px !important; border-radius: 2px !important; background-color: @m-blue14; } .ant-slider-track { height: 3px; background-color: @m-blue0; } .ant-slider-step { height: 3px; } .ant-progress-text { display: none; } } // 暂无数据 .noData { width: 80px; height: 80px; background: url(../images/nodata.png) center center no-repeat; background-size: cover; } .ant-empty.ant-empty-normal { .ant-empty-image { width: 80px; height: 80px; background: url(../images/nodata.png) center center no-repeat; background-size: cover; .ant-empty-img-simple { display: none; } } .ant-empty-description { display: none; } } // 底部表格行背景色 .layout-bottom { .srcollYTable { .ant-table { .ant-table-tbody { tr { td { background: @m-black14; } } } .ant-table-placeholder { border-top: 1PX solid @m-black9; background: @m-black14; } } } } // 仓单预售查询条件 日期到月份 .conditionPicker.ant-calendar-picker { .ant-input { width: 90px; background: transparent; font-size: 16px; color: @m-white0; } .ant-calendar-picker-icon { display: none; } } // 表格按钮列表固定在右边 .btn-list-sticky { position: sticky; position: -webkit-sticky; right: 2px; }