更新vxetable框架并升级前端组件框架
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
@import './variables.module.scss';
|
||||
@import './variables.module.scss';
|
||||
@import './mixin.scss';
|
||||
@import './transition.scss';
|
||||
@import './element-ui.scss';
|
||||
@@ -7,6 +7,8 @@
|
||||
@import './openhis.scss';
|
||||
@import './font.scss';
|
||||
@import './ui-standard.scss';
|
||||
@import './vxe-table.scss';
|
||||
@import './screen-1080p.scss';
|
||||
|
||||
/* 强制使用鸿蒙字体 */
|
||||
* {
|
||||
|
||||
90
openhis-ui-vue3/src/assets/styles/screen-1080p.scss
Normal file
90
openhis-ui-vue3/src/assets/styles/screen-1080p.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* 1080P 最小分辨率适配
|
||||
* 目标：1920x1080 下表格尽量多显示行，页面用滚动条而非溢出
|
||||
*/
|
||||
|
||||
// === 全局容器 ===
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// === 主内容区 ===
|
||||
.app-container {
|
||||
padding: 12px 16px !important;
|
||||
height: calc(100vh - 84px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// === 卡片间距压缩 ===
|
||||
.el-card {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.el-card__body {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// === 表单区域压缩 ===
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// === 表格区高度自适应 ===
|
||||
.table-container {
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
// === 按钮栏紧凑 ===
|
||||
.el-button + .el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
// === 弹窗适配 ===
|
||||
.el-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 12px 20px;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// === 分页栏紧凑 ===
|
||||
.pagination-container {
|
||||
margin-top: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
// === 1080P：表格列紧凑，允许横向滚动 ===
|
||||
@media (max-width: 1920px) {
|
||||
.vxe-table {
|
||||
// 1080P 下不强制撑满，允许滚动
|
||||
.vxe-table--body-x-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// === 大于 1080P：表格列自动撑满 ===
|
||||
@media (min-width: 1921px) {
|
||||
.vxe-table {
|
||||
// 列宽自动分配，填满容器
|
||||
table-layout: auto;
|
||||
width: 100% !important;
|
||||
|
||||
.vxe-header--column,
|
||||
.vxe-body--column {
|
||||
// 有 min-width 的列自动扩展
|
||||
&[style*="min-width"] {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
212
openhis-ui-vue3/src/assets/styles/vxe-table.scss
Normal file
212
openhis-ui-vue3/src/assets/styles/vxe-table.scss
Normal file
@@ -0,0 +1,212 @@
|
||||
/**
|
||||
* vxe-table 样式适配 — 与 Element Plus 视觉风格统一
|
||||
*/
|
||||
|
||||
// === 变量：对齐 Element Plus 默认主题 ===
|
||||
$vxe-header-bg: #f5f7fa;
|
||||
$vxe-header-color: #303133;
|
||||
$vxe-header-font-weight: 600;
|
||||
$vxe-row-hover-bg: #f5f7fa;
|
||||
$vxe-stripe-bg: #fafafa;
|
||||
$vxe-border-color: #ebeef5;
|
||||
$vxe-font-size: 14px;
|
||||
$vxe-cell-padding: 0 8px;
|
||||
$vxe-row-height: 40px;
|
||||
$vxe-header-height: 40px;
|
||||
$vxe-radius: 4px;
|
||||
|
||||
// === 全局覆盖 ===
|
||||
.vxe-table {
|
||||
font-family: 'HarmonyOS Sans', 'Helvetica Neue', Helvetica, 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif !important;
|
||||
font-size: $vxe-font-size;
|
||||
color: #303133;
|
||||
border-radius: $vxe-radius;
|
||||
|
||||
// --- 边框 ---
|
||||
&.vxe-table--border {
|
||||
border: 1px solid $vxe-border-color;
|
||||
|
||||
.vxe-header--column,
|
||||
.vxe-body--column {
|
||||
border-right: 1px solid $vxe-border-color;
|
||||
border-bottom: 1px solid $vxe-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 表头 ---
|
||||
.vxe-header--column {
|
||||
background-color: $vxe-header-bg;
|
||||
color: $vxe-header-color;
|
||||
font-weight: $vxe-header-font-weight;
|
||||
padding: $vxe-cell-padding;
|
||||
min-height: $vxe-header-height;
|
||||
line-height: 1.4;
|
||||
font-size: $vxe-font-size;
|
||||
|
||||
.vxe-cell {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.vxe-header--row {
|
||||
background-color: $vxe-header-bg;
|
||||
}
|
||||
|
||||
// --- 表体行 ---
|
||||
.vxe-body--row {
|
||||
&:hover,
|
||||
&.row--hover {
|
||||
background-color: $vxe-row-hover-bg;
|
||||
}
|
||||
|
||||
&.row--stripe {
|
||||
background-color: $vxe-stripe-bg;
|
||||
|
||||
&:hover,
|
||||
&.row--hover {
|
||||
background-color: $vxe-row-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.row--current {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 单元格 ---
|
||||
.vxe-body--column {
|
||||
padding: $vxe-cell-padding;
|
||||
height: $vxe-row-height;
|
||||
line-height: $vxe-row-height;
|
||||
font-size: $vxe-font-size;
|
||||
color: #303133;
|
||||
|
||||
&.col--ellipsis {
|
||||
.vxe-cell {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vxe-cell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// --- 让 el-select / el-input 等表单组件在单元格内正常展示 ---
|
||||
.vxe-body--column {
|
||||
.el-select,
|
||||
.el-input,
|
||||
.el-input-number,
|
||||
.el-date-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-select .el-input__inner,
|
||||
.el-input__inner {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 禁用 show-overflow 对含表单组件的列的影响 ---
|
||||
.vxe-body--column.col--ellipsis {
|
||||
// 如果列内有表单组件，取消 ellipsis
|
||||
.el-select,
|
||||
.el-input,
|
||||
.el-input-number,
|
||||
.el-date-editor {
|
||||
.vxe-cell {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- 复选框列 ---
|
||||
.vxe-cell--checkbox {
|
||||
.vxe-checkbox--icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
|
||||
&.is--checked {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- 序号列 ---
|
||||
.vxe-cell--seq {
|
||||
color: #606266;
|
||||
font-size: $vxe-font-size;
|
||||
}
|
||||
|
||||
// --- 空数据 ---
|
||||
.vxe-table--empty-placeholder {
|
||||
color: #909399;
|
||||
font-size: $vxe-font-size;
|
||||
}
|
||||
|
||||
// --- 展开行 ---
|
||||
.vxe-table--expanded {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
// --- 固定列阴影 ---
|
||||
.vxe-table--fixed-left-wrapper {
|
||||
box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.vxe-table--fixed-right-wrapper {
|
||||
box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
// === 让 vxe-table 在容器中撑满 ===
|
||||
.table-wrapper,
|
||||
.table-container {
|
||||
.vxe-table {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// === 行级 hover 优先于单元格 hover ===
|
||||
.vxe-table--body-wrapper {
|
||||
.vxe-body--row:hover > td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// === 紧凑模式 ===
|
||||
.vxe-table.vxe-table--size.small,
|
||||
.vxe-table.size--small {
|
||||
.vxe-header--column,
|
||||
.vxe-body--column {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// === 下拉弹出层不受表格 overflow 影响 ===
|
||||
.vxe-table {
|
||||
overflow: visible !important;
|
||||
|
||||
.vxe-table--body-wrapper,
|
||||
.vxe-table--header-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.vxe-table--body-x-wrapper,
|
||||
.vxe-table--body-y-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user