feat: entity列表（部分）、css架构更改
This commit is contained in:
chenjinsong
2
src/assets/css/common/index.scss
Normal file
2
src/assets/css/common/index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import './rightBoxCommon';
|
||||
@import './tableCommon';
|
||||
303
src/assets/css/common/rightBoxCommon.scss
Normal file
303
src/assets/css/common/rightBoxCommon.scss
Normal file
@@ -0,0 +1,303 @@
|
||||
.el-drawer__body {
|
||||
height: 100%;
|
||||
}
|
||||
.right-box, .right-sub-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.el-date-editor {
|
||||
.el-input__inner {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
|
||||
.header__title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.header__operation {
|
||||
i {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box__container {
|
||||
height: calc(100% - 130px);
|
||||
padding: 0 30px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-textarea__inner {
|
||||
padding: 5px 70px 4px 15px;
|
||||
}
|
||||
.container__form-width.container__form{
|
||||
.input-box {
|
||||
.el-textarea {
|
||||
.el-textarea__inner {
|
||||
width: 530px;
|
||||
height: 32px;
|
||||
padding: 5px 70px 4px 10px;
|
||||
}
|
||||
.el-input__count {
|
||||
right: -40px;
|
||||
line-height: 29px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input-group--prepend {
|
||||
width: 626px;
|
||||
height: 32px;
|
||||
}
|
||||
.input-box {
|
||||
.el-textarea {
|
||||
.el-textarea__inner {
|
||||
width: 517px;
|
||||
height: 32px;
|
||||
padding: 5px 70px 4px 10px;
|
||||
}
|
||||
.el-input__count {
|
||||
right: -40px;
|
||||
line-height: 29px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-row-item {
|
||||
.input-box {
|
||||
.el-textarea {
|
||||
.el-textarea__inner {
|
||||
width: 466px;
|
||||
height: 32px;
|
||||
padding: 5px 70px 4px 10px;
|
||||
}
|
||||
.el-input__count {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
.el-input__count {
|
||||
line-height: 29px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
.el-input--small.not-fixed-height {
|
||||
height: 32px;
|
||||
.el-input__count {
|
||||
line-height: 29px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-input__inner, .el-textarea__inner {
|
||||
padding: 0 10px;
|
||||
border-radius: $--border-radius-primary;
|
||||
border: 1px solid $--right-box-border-color;
|
||||
}
|
||||
.el-textarea__inner {
|
||||
padding: 5px 70px 4px 15px;
|
||||
}
|
||||
.el-form {
|
||||
padding-top: 20px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
.el-form-item__label{
|
||||
padding-bottom: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-input__inner:hover {
|
||||
border-color: darken($--right-box-border-color, 10%);
|
||||
}
|
||||
.el-input__inner:focus {
|
||||
border-color: darken($--right-box-border-color, 20%);
|
||||
}
|
||||
}
|
||||
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
|
||||
border-color: #F56C6C
|
||||
}
|
||||
|
||||
.form__sub-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
/* 虚线框类型的form-item */
|
||||
.form__dotted-item {
|
||||
padding: 10px 10px 6px 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px dashed $--border-color-primary;
|
||||
border-radius: $--border-radius-primary;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.el-form-item__label {
|
||||
width: 100%;
|
||||
}
|
||||
.form__labels-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form__create-btn {
|
||||
margin-bottom: 20px;
|
||||
width: 300px;
|
||||
height: 28px;
|
||||
border: 1px solid lighten($--color-primary, 60%);
|
||||
border-radius: $--border-radius-primary;
|
||||
background-color: lighten($--color-primary, 95%);
|
||||
|
||||
i {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
.form__flex-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.one-third-form-item-left{
|
||||
display: inline-block;
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
.one-third-form-item-right{
|
||||
display: inline-block;
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
.form-item--half-width-other-two{
|
||||
display: inline-block;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
.form-item--half-width-other{
|
||||
display: inline-block;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
|
||||
|
||||
.footer__btn {
|
||||
margin: 0 15px;
|
||||
height: 30px;
|
||||
min-width: 74px;
|
||||
padding: 0 15px;
|
||||
color: white;
|
||||
background-color: $--color-primary;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color linear .2s, color linear .1s;
|
||||
}
|
||||
.footer__btn:hover:not(.footer__btn--disabled) {
|
||||
background-color: lighten($--color-primary, 10%);
|
||||
}
|
||||
.footer__btn--light {
|
||||
background-color: white;
|
||||
border: 1px solid $--border-color-primary;
|
||||
color: #333;
|
||||
}
|
||||
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
|
||||
background-color: white;
|
||||
border-color: lighten($--color-primary, 40%);
|
||||
color: $--color-primary;
|
||||
}
|
||||
.footer__btn--disabled {
|
||||
opacity: .6;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
/* 隐藏label新增按钮处级联选择器的input */
|
||||
.hide-casc-input {
|
||||
position: relative;
|
||||
|
||||
.hide-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.label__multi-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.right-box__select {
|
||||
width: 100%;
|
||||
}
|
||||
.right-box-select-dropdown {
|
||||
width: 625px;
|
||||
}
|
||||
.limit-height .el-cascader-menu {
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.form-items--half-width-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.form-item--half-width {
|
||||
width: calc(50% - 10px);
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-icon-minus-position {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
transform: translateY(-50%);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.form-item--end-with-btn { // 末尾留出btn宽度空间的form item
|
||||
|
||||
}
|
||||
.el-form-item__content .el-autocomplete .el-input-group {
|
||||
vertical-align: unset;
|
||||
}
|
||||
322
src/assets/css/common/tableCommon.scss
Normal file
322
src/assets/css/common/tableCommon.scss
Normal file
@@ -0,0 +1,322 @@
|
||||
/*列表table通用样式*/
|
||||
.list-page {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.main-list {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.main-container {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
&>div {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.main-list.main-list-with-sub {
|
||||
height: 50%;
|
||||
}
|
||||
.main-modal {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
}
|
||||
.top-tools {
|
||||
display: flex;
|
||||
align-items : center;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
|
||||
&.top-tools--sub {
|
||||
align-items: center;
|
||||
padding: 0 70px 0 15px;
|
||||
height: 44px;
|
||||
background-color: white;
|
||||
border: 1px solid #E6EAED;
|
||||
|
||||
}
|
||||
|
||||
.top-tool-right {
|
||||
display: flex;
|
||||
}
|
||||
.top-tool-left {
|
||||
display: flex;
|
||||
}
|
||||
.top-tool-btn-group {
|
||||
display: flex;
|
||||
.top-tool-btn:not(:last-of-type):not(:first-of-type) {
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.top-tool-btn:first-of-type:not(:last-of-type) {
|
||||
border-radius: $--button-border-radius 0 0 $--button-border-radius;
|
||||
}
|
||||
.top-tool-btn:last-of-type:not(:first-of-type) {
|
||||
border-radius: 0 $--button-border-radius $--button-border-radius 0;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
.top-tool-btn {
|
||||
height: 32px;
|
||||
width: 36px;
|
||||
border: 1px solid $--border-color-primary;
|
||||
outline: none;
|
||||
border-radius: $--button-border-radius;
|
||||
background-color: $--button-gray-background-color;
|
||||
transition: background-color linear .1s;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $--button-gray-color;
|
||||
}
|
||||
}
|
||||
.top-tool-btn.top-tool-btn--text {
|
||||
padding: 0 8px;
|
||||
width: unset;
|
||||
color: #666;
|
||||
}
|
||||
.top-tool-btn:hover:not(.cn-btn-disabled) {
|
||||
background-color: $--button-gray-hover-background-color;
|
||||
}
|
||||
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
|
||||
background-color: $--button-gray-hover-background-color;
|
||||
border: 1px solid $--color-primary !important;
|
||||
i {
|
||||
color: $--button-gray-active-color;
|
||||
}
|
||||
}
|
||||
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
|
||||
background-color: $--button-gray-hover-background-color;
|
||||
border-color: #FFC4B9;
|
||||
|
||||
i {
|
||||
color: #F0745A;
|
||||
}
|
||||
}
|
||||
.top-tool-btn--dropdown {
|
||||
position: relative;
|
||||
width: auto;
|
||||
min-width: 36px;
|
||||
}
|
||||
}
|
||||
.cn-table {
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
|
||||
flex: auto;
|
||||
height: calc(100% - 58px);
|
||||
|
||||
.el-table:not(.chart-table) {
|
||||
position: absolute;
|
||||
width: calc(100% - 40px);
|
||||
border: 1px solid $--right-box-border-color;
|
||||
border-bottom: none;
|
||||
|
||||
.caret-wrapper {
|
||||
height: 23px;
|
||||
.sort-caret.ascending {
|
||||
top: 1px;
|
||||
}
|
||||
.sort-caret.descending {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table-column--selection {
|
||||
width: 55px !important;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
}
|
||||
th {
|
||||
border-color: $--right-box-border-color;
|
||||
padding: 8px 0;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
.el-table__header th:first-of-type {
|
||||
border-left: none;
|
||||
}
|
||||
.gutter {
|
||||
position: fixed;
|
||||
right: 31px;
|
||||
height: 49px;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
background-color: white;
|
||||
}
|
||||
thead {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
|
||||
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
|
||||
.el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
|
||||
background-color: lighten($--color-primary, 95%) !important;
|
||||
}
|
||||
.table-operation-title {
|
||||
text-align: center;
|
||||
}
|
||||
.table-operation-items {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.table-operation-item {
|
||||
display: flex;
|
||||
height: 22px;
|
||||
border-radius: $--button-border-radius;
|
||||
outline: none;
|
||||
transition: background-color linear .1s;
|
||||
}
|
||||
.table-operation-item.table-operation-item--disable{
|
||||
border: 1px solid $--border-color-primary;
|
||||
background-color: #DEDEDE;
|
||||
opacity: 0.6;
|
||||
outline: none;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&>.table-operation-item {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
border: none;
|
||||
border-radius: $--button-border-radius;
|
||||
background-color: $--button-primary-background-color;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
i {
|
||||
color: $--button-primary-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&>.table-operation-item:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
.table-operation-item.table-operation-item--more {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $--border-color-primary;
|
||||
width: 30px;
|
||||
i {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* start--覆盖el-table边框、gutter等样式 */
|
||||
.el-table__body-wrapper, .el-table__fixed-body-wrapper {
|
||||
box-shadow: 1px 0 $--right-box-border-color;
|
||||
|
||||
.cell {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.cn-table {
|
||||
.el-table--border td {
|
||||
border-right: none !important;
|
||||
}
|
||||
/* 最后一列用box-shadow模拟边框 */
|
||||
.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
|
||||
box-shadow: 1px 0 $--right-box-border-color;
|
||||
}
|
||||
.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
|
||||
border-right: none !important;
|
||||
box-shadow: 1px 0 $--right-box-border-color;
|
||||
}
|
||||
.el-table__fixed-body-wrapper {
|
||||
td:not(.is-hidden) {
|
||||
border-left: 1px solid $--right-box-border-color;
|
||||
}
|
||||
}
|
||||
.el-table__fixed-header-wrapper {
|
||||
th:not(.is-hidden) {
|
||||
border-left: 1px solid $--right-box-border-color;
|
||||
}
|
||||
th:last-of-type {
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
.el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
/* end--覆盖el-table边框、gutter等样式 */
|
||||
.cn-pagination{
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
height: 48px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
.operation-dropdown-text {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
.click-search-dropdown {
|
||||
width: calc(100% - 300px) !important;
|
||||
left: 270px !important;
|
||||
margin-top: -3px !important;
|
||||
box-shadow: none;
|
||||
|
||||
border-radius: 0;
|
||||
border-color: #c7c7c7;
|
||||
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
.el-cascader-menu__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
.el-popper.el-cascader__dropdown.click-search-dropdown::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
height: 1px;
|
||||
background-color: white;
|
||||
}
|
||||
.col-resize-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
}
|
||||
.margin-r-10{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.margin-r-20{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.margin-l-10{
|
||||
margin-left: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user