diff --git a/klp-ui/src/assets/styles/btn.scss b/klp-ui/src/assets/styles/btn.scss index e6ba1a8e..45f65930 100644 --- a/klp-ui/src/assets/styles/btn.scss +++ b/klp-ui/src/assets/styles/btn.scss @@ -41,11 +41,11 @@ @include colorBtn($yellow) } -.pan-btn { +.el-button.pan-btn { font-size: 14px; color: #fff; - padding: 14px 36px; - border-radius: 8px; + padding: 4px !important; + border-radius: 4px; border: none; outline: none; transition: 600ms ease all; @@ -81,7 +81,7 @@ } } -.custom-button { +.el-button.custom-button { display: inline-block; line-height: 1; white-space: nowrap; @@ -93,7 +93,7 @@ box-sizing: border-box; outline: 0; margin: 0; - padding: 10px 15px; + padding: 2px !important; font-size: 14px; - border-radius: 4px; + border-radius: 2px; } diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss index d986b00c..4ad1d7b6 100644 --- a/klp-ui/src/assets/styles/element-ui.scss +++ b/klp-ui/src/assets/styles/element-ui.scss @@ -1,6 +1,5 @@ /* 基础变量定义 - 工业风浅色配色 */ :root { - --primary-color: #3c6382; /* 深蓝色作为主色调,体现工业感 */ --secondary-color: #78909c; /* 辅助色 */ --accent-color: #e67e22; /* 强调色,用于突出按钮和重要操作 */ --background-color: #f5f7fa; /* 浅色背景 */ @@ -11,6 +10,9 @@ --spacing-sm: 4px; --spacing-md: 8px; --spacing-lg: 16px; + --spacing-base: 8px; /* 基础间距,表单、表格统一用这个值做倍数调整 */ + --form-item-margin: var(--spacing-base); /* 表单项底部间距 */ + --btn-height: 20px; /* 按钮统一高度 */ } /* 全局样式调整 */ @@ -45,16 +47,6 @@ body { transition: all 0.2s ease; } -.el-button--primary { - background-color: var(--primary-color); - border-color: var(--primary-color); -} - -.el-button--primary:hover { - background-color: #2c3e50; - border-color: #2c3e50; -} - .el-button--success { background-color: #2ecc71; border-color: #2ecc71; @@ -66,7 +58,7 @@ body { } .el-button--mini { - padding: 3px 8px; + padding: 2px 4px; font-size: 12px; } @@ -92,11 +84,12 @@ body { .el-table { border: 1px solid var(--border-color); border-radius: 2px; + margin-top: 0 !important; } .el-table th, .el-table td { - padding: 8px 10px; + padding: 2px 4px; font-size: 13px; } @@ -241,13 +234,16 @@ body { .cell { padding: 0 10px; text-align: center; - - .el-tag { - margin-right: 0px; - } } } +.el-tag { + margin-right: 0px; + padding: 1px !important; + height: auto !important; + border-radius: 0 !important; +} + .cell { .el-tag { margin-right: 0px; @@ -277,6 +273,88 @@ body { line-height: 30px; } -.pagination-container { +div.pagination-container { background-color: transparent !important; + padding: 0 !important; + + .el-pagination { + padding: 0 !important; + margin: 0 !important; + } } + +.el-table--medium .el-table__cell { + padding: 0 !important; +} + +.el-table--mini .el-table__cell { + padding: 0 !important; +} + +.el-table .el-table__header-wrapper th, +.el-table .el-table__fixed-header-wrapper th { + height: auto; + padding: 0 !important; +} + +/* 【优化】表单项整体布局:压缩间距、对齐标签 */ +.el-form-item { + margin-bottom: var(--form-item-margin) !important; + /* 让标签和表格列头对齐,可根据实际需求微调 */ + label-align: right; +} + +/* 【优化】表单标签:缩小文字大小,匹配表格列头 */ +.el-form-item__label { + font-size: 13px; + padding-right: var(--spacing-base); +} + +/* 【优化】表单输入框:统一高度、压缩内边距 */ +.el-input__inner, +.el-textarea__inner, +.el-select .el-input__inner { + height: var(--btn-height); + padding: 0 var(--spacing-base); + font-size: 13px; +} + +/* 【优化】表格与表单的间距:避免表单和表格贴太近 */ +.el-table { + margin-top: calc(var(--form-item-margin) * 2); +} + +/* 【补充】搜索按钮组:如果是 inline 布局,强制对齐 */ +.search-form .el-form-item { + display: inline-block; + margin-right: var(--spacing-base); + vertical-align: middle; +} + +/* 【补充】适配原有工具类,让紧凑度更统一 */ +.small-padding .cell { + padding-left: calc(var(--spacing-base)/2); + padding-right: calc(var(--spacing-base)/2); +} + +.el-input { + height: var(--btn-height); +} + + + +.el-input--small .el-input__inner, +.el-input--medium .el-input__inner { + height: var(--btn-height); + line-height: var(--btn-height); +} + +// .el-input-number--medium .el-input-number__increase, +// .el-input-number--medium .el-input-number__decrease { +// height: calc(var(--btn-height) - 2px); +// line-height: calc(var(--btn-height) - 2px); +// } + +.el-input--medium .el-input__icon { + line-height: var(--btn-height); +} \ No newline at end of file diff --git a/klp-ui/src/assets/styles/sidebar.scss b/klp-ui/src/assets/styles/sidebar.scss index abe5b631..6442aed4 100644 --- a/klp-ui/src/assets/styles/sidebar.scss +++ b/klp-ui/src/assets/styles/sidebar.scss @@ -86,6 +86,7 @@ & .theme-dark .is-active > .el-submenu__title { color: $base-menu-color-active !important; + // border-right: 3px solid $base-menu-color-active !important; } & .nest-menu .el-submenu>.el-submenu__title, @@ -225,3 +226,7 @@ } } } + +.el-menu-item.is-active { + border-left: 4px solid !important; +} \ No newline at end of file diff --git a/klp-ui/src/components/Breadcrumb/index.vue b/klp-ui/src/components/Breadcrumb/index.vue index 1696f547..d00aaee4 100644 --- a/klp-ui/src/components/Breadcrumb/index.vue +++ b/klp-ui/src/components/Breadcrumb/index.vue @@ -65,6 +65,7 @@ export default { font-size: 14px; line-height: 50px; margin-left: 8px; + padding: 0; .no-redirect { color: #97a8be; diff --git a/klp-ui/src/components/Crontab/day.vue b/klp-ui/src/components/Crontab/day.vue index f6c4026d..9a5679e5 100644 --- a/klp-ui/src/components/Crontab/day.vue +++ b/klp-ui/src/components/Crontab/day.vue @@ -15,23 +15,23 @@ 周期从 - - - 日 + - + 从 - 号开始,每 - 日执行一次 + 号开始,每 + 日执行一次 每月 - 号最近的那个工作日 + 号最近的那个工作日 diff --git a/klp-ui/src/components/Crontab/hour.vue b/klp-ui/src/components/Crontab/hour.vue index 098b7112..e0a34f8b 100644 --- a/klp-ui/src/components/Crontab/hour.vue +++ b/klp-ui/src/components/Crontab/hour.vue @@ -9,16 +9,16 @@ 周期从 - - - 小时 + - + 小时 从 - 小时开始,每 - 小时执行一次 + 小时开始,每 + 小时执行一次 diff --git a/klp-ui/src/components/Crontab/min.vue b/klp-ui/src/components/Crontab/min.vue index 43cab900..2f2bb562 100644 --- a/klp-ui/src/components/Crontab/min.vue +++ b/klp-ui/src/components/Crontab/min.vue @@ -9,16 +9,16 @@ 周期从 - - - 分钟 + - + 分钟 从 - 分钟开始,每 - 分钟执行一次 + 分钟开始,每 + 分钟执行一次 diff --git a/klp-ui/src/components/Crontab/month.vue b/klp-ui/src/components/Crontab/month.vue index fd0ac384..5ae6cd08 100644 --- a/klp-ui/src/components/Crontab/month.vue +++ b/klp-ui/src/components/Crontab/month.vue @@ -9,16 +9,16 @@ 周期从 - - - 月 + - + 从 - 月开始,每 - 月月执行一次 + 月开始,每 + 月月执行一次 diff --git a/klp-ui/src/components/Crontab/second.vue b/klp-ui/src/components/Crontab/second.vue index e7b77617..978d9069 100644 --- a/klp-ui/src/components/Crontab/second.vue +++ b/klp-ui/src/components/Crontab/second.vue @@ -9,16 +9,16 @@ 周期从 - - - 秒 + - + 从 - 秒开始,每 - 秒执行一次 + 秒开始,每 + 秒执行一次 diff --git a/klp-ui/src/components/Crontab/week.vue b/klp-ui/src/components/Crontab/week.vue index 1cec700e..639c79e1 100644 --- a/klp-ui/src/components/Crontab/week.vue +++ b/klp-ui/src/components/Crontab/week.vue @@ -40,7 +40,7 @@ 第 - 周的星期 + 周的星期 {{item.value}} diff --git a/klp-ui/src/components/Crontab/year.vue b/klp-ui/src/components/Crontab/year.vue index 5487a6c7..73faa45e 100644 --- a/klp-ui/src/components/Crontab/year.vue +++ b/klp-ui/src/components/Crontab/year.vue @@ -15,16 +15,16 @@ 周期从 - - - + - + 从 - 年开始,每 - 年执行一次 + 年开始,每 + 年执行一次 diff --git a/klp-ui/src/components/KLPService/WarehouseTree/index.vue b/klp-ui/src/components/KLPService/WarehouseTree/index.vue index 0d4a2eca..5a3b19cd 100644 --- a/klp-ui/src/components/KLPService/WarehouseTree/index.vue +++ b/klp-ui/src/components/KLPService/WarehouseTree/index.vue @@ -56,7 +56,7 @@ export default { }; - + --> diff --git a/klp-ui/src/components/KLPUI/KLPTable/index.vue b/klp-ui/src/components/KLPUI/KLPTable/index.vue new file mode 100644 index 00000000..62e8ba0d --- /dev/null +++ b/klp-ui/src/components/KLPUI/KLPTable/index.vue @@ -0,0 +1,148 @@ + + + + + diff --git a/klp-ui/src/components/Pagination/index.vue b/klp-ui/src/components/Pagination/index.vue index 56f5a6b9..13573cb3 100644 --- a/klp-ui/src/components/Pagination/index.vue +++ b/klp-ui/src/components/Pagination/index.vue @@ -8,6 +8,7 @@ :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" + small v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange" @@ -46,7 +47,7 @@ export default { }, layout: { type: String, - default: 'total, sizes, prev, pager, next, jumper' + default: 'total, sizes, prev, pager, next' }, background: { type: Boolean, diff --git a/klp-ui/src/main.js b/klp-ui/src/main.js index ced9cc70..5c8dc618 100644 --- a/klp-ui/src/main.js +++ b/klp-ui/src/main.js @@ -39,6 +39,7 @@ import DictTag from '@/components/DictTag' import VueMeta from 'vue-meta' // 字典数据组件 import DictData from '@/components/DictData' +import KLPTable from '@/components/KLPUI/KLPTable/index.vue' // 全局方法挂载 Vue.prototype.getDicts = getDicts @@ -60,7 +61,7 @@ Vue.component('Editor', Editor) Vue.component('FileUpload', FileUpload) Vue.component('ImageUpload', ImageUpload) Vue.component('ImagePreview', ImagePreview) - +Vue.component('KLPTable', KLPTable) Vue.use(vueFlvPlayer) Vue.use(directive) diff --git a/klp-ui/src/views/finance/pay/index.vue b/klp-ui/src/views/finance/pay/index.vue index 52f67cfc..3f63ac64 100644 --- a/klp-ui/src/views/finance/pay/index.vue +++ b/klp-ui/src/views/finance/pay/index.vue @@ -156,7 +156,7 @@ - +