Refactor code structure and remove redundant changes
This commit is contained in:
wangqiao
358
assets/scss/app.scss
Normal file
358
assets/scss/app.scss
Normal file
@ -0,0 +1,358 @@
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Microsoft YaHei, PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
body {
|
||||
min-width: 1500px;
|
||||
}
|
||||
img {
|
||||
user-select: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:root {
|
||||
--el-text-color-regular: #484b52; //调整全局色
|
||||
--el-border-color: #ced4de;
|
||||
--el-color-primary-light-1: rgba(8, 88, 247, 0.9);
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
.page-content {
|
||||
overflow-x: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
background-color: #f5f6f7;
|
||||
.page-table-wrap {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
.el-table {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.page-card {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#nprogress {
|
||||
.bar {
|
||||
background: var(--el-color-primary) !important;
|
||||
z-index: 9999999 !important;
|
||||
}
|
||||
.spinner-icon {
|
||||
border-top-color: var(--el-color-primary) !important;
|
||||
border-left-color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
.color-primary {
|
||||
color: $color-primary;
|
||||
}
|
||||
.color-gray {
|
||||
color: #858c99;
|
||||
}
|
||||
.text-line-2 {
|
||||
@include ellipsis(2);
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0 !important;
|
||||
}
|
||||
// 滚动条的宽度
|
||||
::-webkit-scrollbar {
|
||||
width: 10px !important; // 横向滚动条
|
||||
height: 10px !important; // 纵向滚动条 必写
|
||||
}
|
||||
// 滚动条的滑块
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.el-button {
|
||||
outline: none !important;
|
||||
font-weight: normal !important; // 普通字重
|
||||
padding: 8px 10px !important; // 间距调整
|
||||
[class*='el-icon'] + span {
|
||||
margin-left: 4px !important; // 按钮字标间距
|
||||
}
|
||||
}
|
||||
.el-tabs__item {
|
||||
// 表格标签字色间距
|
||||
color: #9da0a3 !important;
|
||||
padding: 0 24px 6px 0 !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
.el-tabs__item.is-active,
|
||||
.el-tabs__item:hover {
|
||||
// 表格标签活动字色
|
||||
color: #333538 !important;
|
||||
}
|
||||
.page-header .el-tabs__item.is-active {
|
||||
font-weight: 700 !important; //页面头部导航，字重改为blod
|
||||
}
|
||||
.el-badge {
|
||||
// 徽章样式优化
|
||||
font-weight: 400;
|
||||
--el-badge-size: 16px !important;
|
||||
--el-badge-padding: 5px !important;
|
||||
}
|
||||
.el-table {
|
||||
.el-link__inner {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.el-table th {
|
||||
background-color: #f2f3f5 !important;
|
||||
padding: 7px 0 !important;
|
||||
.cell {
|
||||
color: #484b52; // 更改颜色为二级
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
&.el-table-column--selection > .cell {
|
||||
display: flex;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.el-table td .cell {
|
||||
color: #333538;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.el-table .caret-wrapper {
|
||||
//add 表头排序按钮上下标间距
|
||||
height: 10px !important;
|
||||
}
|
||||
.el-table .sort-caret {
|
||||
//add 表头排序按钮上下标大小右边间距
|
||||
border-width: 4px !important;
|
||||
left: 4px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.el-table__body tr:hover > td {
|
||||
background-color: #f7f8fa !important;
|
||||
}
|
||||
.el-table--default td.el-table__cell {
|
||||
padding: 9px 0 !important;
|
||||
height: 33px;
|
||||
}
|
||||
.el-table__body-wrapper .el-table-column--selection > .cell,
|
||||
.el-table__header-wrapper .el-table-column--selection > .cell {
|
||||
height: unset !important;
|
||||
display: flex !important;
|
||||
}
|
||||
.el-table .el-scrollbar__bar {
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
.el-table tbody td .cell:empty::after {
|
||||
content: '-';
|
||||
}
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
width: 10px !important;
|
||||
}
|
||||
.el-scrollbar__bar.is-horizontal {
|
||||
height: 10px !important;
|
||||
}
|
||||
.page-title {
|
||||
color: #333538;
|
||||
font-weight: 600;
|
||||
padding: 6px 10px 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: #484b52 !important; // 输入title文字颜色
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-dialog {
|
||||
border-radius: 4px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 16px 10px 16px 16px !important;
|
||||
max-height: calc(100vh - 300px) !important;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
.page-table-wrap {
|
||||
height: calc(100vh - 300px) !important;
|
||||
min-height: 300px;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
min-height: 30px;
|
||||
}
|
||||
}
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #e6e8ed;
|
||||
margin: 0 15px;
|
||||
padding: 0 !important;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
position: relative;
|
||||
.el-dialog__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.el-dialog__headerbtn {
|
||||
right: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.el-dialog__footer {
|
||||
border-top: 1px solid #e6e8ed;
|
||||
margin: 0 15px;
|
||||
padding-bottom: 14px !important;
|
||||
padding-right: 0 !important;
|
||||
.el-button {
|
||||
min-width: 60px;
|
||||
}
|
||||
.el-button.is-text {
|
||||
color: #333538;
|
||||
}
|
||||
}
|
||||
.el-drawer__header {
|
||||
margin: 0 !important;
|
||||
.el-drawer__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #23272e;
|
||||
}
|
||||
}
|
||||
.el-drawer__body {
|
||||
.el-input__inner {
|
||||
min-height: 30px;
|
||||
}
|
||||
}
|
||||
.table-tooltip {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.el-input .el-input__wrapper {
|
||||
padding: 1px 10px !important; //更改input框内间距
|
||||
}
|
||||
|
||||
.el-form-item .el-form-item__label {
|
||||
padding: 0 10px 0 0; //更改输入框标题间距
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
--el-pagination-font-size-small: 13px !important; //列表页分页器字号修改
|
||||
--el-pagination-font-size: 13px !important; //列表页分页器字号修改
|
||||
--el-pagination-button-color: var(--el-text-color-regular) !important;
|
||||
--el-pagination-border-radius: 4px !important;
|
||||
--el-pagination-button-bg-color: #fff !important;
|
||||
--el-pagination-button-height-small: 28px !important;
|
||||
--el-pagination-button-width-small: 28px !important;
|
||||
--el-pagination-button-height: 28px !important;
|
||||
--el-pagination-button-width: 28px !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
border: 1px solid #ced4de; //分页样式增加边框
|
||||
}
|
||||
.el-pagination.is-background .btn-next.is-active,
|
||||
.el-pagination.is-background .btn-prev.is-active,
|
||||
.el-pagination.is-background .el-pager li.is-active {
|
||||
border: none; //分页活动样式去除边框
|
||||
}
|
||||
|
||||
.el-pagination .el-pagination__sizes .el-select__wrapper {
|
||||
min-height: 28px !important;
|
||||
box-shadow: 0 0 0 1px #ced4de inset; //分页每页显示样式调整
|
||||
}
|
||||
|
||||
.el-pagination .el-pagination__sizes .el-select .el-select__wrapper .el-select__suffix .el-icon {
|
||||
width: 12px;
|
||||
height: 12px; //分页每页显示样式下拉箭头大小
|
||||
}
|
||||
|
||||
.el-pagination .el-pagination__jump .el-input .el-input__wrapper .el-input__inner {
|
||||
height: 28px !important;
|
||||
min-height: 28px; //分页页面跳转办输入高
|
||||
}
|
||||
|
||||
.el-pagination .el-input--small .el-input__wrapper,
|
||||
.el-pagination .el-input__wrapper {
|
||||
padding: 0 !important; //分页页面跳转办输入内间距
|
||||
}
|
||||
|
||||
.el-pagination .el-pagination__jump .el-pagination__editor.el-input {
|
||||
width: 40px; //分页页面跳转办输入宽
|
||||
}
|
||||
|
||||
.kl-fwn {
|
||||
font-weight: normal !important;
|
||||
* {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
.kl-table-btn {
|
||||
padding: 0 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left !important;
|
||||
height: 37px !important;
|
||||
}
|
||||
|
||||
.el-form-item--large .el-form-item__error {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.el-select__wrapper {
|
||||
min-height: 37px !important;
|
||||
}
|
||||
|
||||
// 文字显示1行 超出显示点点
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 文字显示2行 超出显示点点
|
||||
.ellipsis-2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
Reference in New Issue
Block a user