CC/ruoyi-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Leo
2026-01-05 18:32:29 +08:00
parent 1a4e56bfed
commit a3291f7a31
22 changed files with 3180 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

444
src/assets/styles/element-ui.scss
View File

@@ -89,4 +89,448 @@
> .el-submenu__title
.el-submenu__icon-arrow {
display: none;
}
// 移动端 Element UI 组件优化
@media (max-width: 768px) {
// 表格优化
.el-table {
font-size: 12px;
.el-table__header-wrapper,
.el-table__body-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
th,
td {
padding: 8px 5px !important;
font-size: 12px;
}
.el-table__cell {
padding: 8px 5px !important;
}
// 操作列按钮优化
.el-button {
padding: 5px 8px;
font-size: 12px;
margin: 2px;
&.el-button--mini {
padding: 4px 6px;
font-size: 11px;
}
}
}
// 表格工具栏优化
.el-table__header-wrapper {
.el-table__header {
th {
font-size: 12px;
font-weight: 600;
}
}
}
// 表单优化
.el-form {
.el-form-item {
margin-bottom: 18px;
}
.el-form-item__label {
font-size: 14px;
line-height: 1.5;
padding-bottom: 5px;
width: 100% !important;
text-align: left !important;
}
.el-form-item__content {
margin-left: 0 !important;
}
// 表单项内联优化
.el-form-item--mini,
.el-form-item--small {
.el-form-item__label {
font-size: 13px;
}
}
}
// 输入框优化
.el-input {
.el-input__inner {
font-size: 16px; // 防止iOS自动缩放
height: 44px; // 增大触摸目标
line-height: 44px;
}
}
// 选择器优化
.el-select {
width: 100%;
.el-input__inner {
font-size: 16px;
height: 44px;
line-height: 44px;
}
}
// 日期选择器优化
.el-date-editor {
width: 100% !important;
.el-input__inner {
font-size: 16px;
height: 44px;
line-height: 44px;
}
}
// 按钮优化
.el-button {
min-height: 44px; // 增大触摸目标
padding: 10px 15px;
font-size: 14px;
&.el-button--mini {
min-height: 36px;
padding: 6px 10px;
font-size: 12px;
}
&.el-button--small {
min-height: 40px;
padding: 8px 12px;
font-size: 13px;
}
}
// 对话框优化
.el-dialog {
width: 95% !important;
margin: 5vh auto !important;
border-radius: 8px;
.el-dialog__header {
padding: 15px;
font-size: 16px;
}
.el-dialog__body {
padding: 15px;
max-height: calc(90vh - 120px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.el-dialog__footer {
padding: 10px 15px;
.el-button {
width: 100%;
margin: 5px 0;
}
}
}
// 消息框优化
.el-message-box {
width: 90% !important;
.el-message-box__content {
padding: 15px;
}
.el-message-box__btns {
.el-button {
width: 48%;
margin: 0 1%;
}
}
}
// 抽屉优化
.el-drawer {
width: 85% !important;
.el-drawer__header {
padding: 15px;
font-size: 16px;
}
.el-drawer__body {
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
// 分页优化
.el-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
padding: 10px 0;
.el-pagination__sizes,
.el-pagination__total,
.el-pagination__jump {
display: none;
}
.btn-prev,
.btn-next,
.el-pager li {
min-width: 36px;
height: 36px;
line-height: 36px;
font-size: 13px;
}
}
// 标签页优化
.el-tabs {
.el-tabs__header {
margin: 0 0 15px 0;
}
.el-tabs__nav-wrap {
&::after {
height: 1px;
}
}
.el-tabs__item {
padding: 0 12px;
font-size: 14px;
height: 44px;
line-height: 44px;
}
.el-tabs__content {
padding: 10px 0;
}
}
// 卡片优化
.el-card {
margin-bottom: 10px;
border-radius: 8px;
.el-card__header {
padding: 12px 15px;
font-size: 14px;
font-weight: 600;
}
.el-card__body {
padding: 15px;
}
}
// 步骤条优化
.el-steps {
.el-step__title {
font-size: 12px;
}
.el-step__description {
font-size: 11px;
}
}
// 上传组件优化
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
padding: 20px;
}
}
// 标签优化
.el-tag {
font-size: 12px;
padding: 4px 8px;
margin: 2px;
}
// 开关优化
.el-switch {
.el-switch__core {
min-width: 44px;
height: 24px;
}
}
// 单选框组优化
.el-radio-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
.el-radio {
margin-right: 0;
margin-bottom: 10px;
}
}
// 复选框组优化
.el-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
.el-checkbox {
margin-right: 0;
margin-bottom: 10px;
}
}
// 级联选择器优化
.el-cascader {
width: 100%;
.el-input__inner {
font-size: 16px;
height: 44px;
line-height: 44px;
}
}
// 时间选择器优化
.el-time-picker {
width: 100%;
.el-input__inner {
font-size: 16px;
height: 44px;
line-height: 44px;
}
}
// 数字输入框优化
.el-input-number {
width: 100%;
.el-input__inner {
font-size: 16px;
height: 44px;
line-height: 44px;
}
}
// 滑块优化
.el-slider {
margin: 15px 0;
.el-slider__button {
width: 20px;
height: 20px;
}
}
// 评分优化
.el-rate {
.el-rate__item {
font-size: 20px;
}
}
// 颜色选择器优化
.el-color-picker {
.el-color-picker__trigger {
width: 44px;
height: 44px;
}
}
// 穿梭框优化
.el-transfer {
.el-transfer-panel {
width: 45%;
}
}
// 树形控件优化
.el-tree {
.el-tree-node__content {
height: 40px;
line-height: 40px;
}
}
// 折叠面板优化
.el-collapse {
.el-collapse-item__header {
font-size: 14px;
height: 44px;
line-height: 44px;
padding: 0 15px;
}
.el-collapse-item__content {
padding: 15px;
font-size: 13px;
}
}
// 时间线优化
.el-timeline {
.el-timeline-item__content {
font-size: 13px;
}
}
// 描述列表优化
.el-descriptions {
.el-descriptions__label {
font-size: 13px;
width: 30%;
}
.el-descriptions__content {
font-size: 13px;
}
}
// 空状态优化
.el-empty {
padding: 20px;
.el-empty__description {
font-size: 13px;
}
}
// 骨架屏优化
.el-skeleton {
.el-skeleton__item {
margin-bottom: 10px;
}
}
// 结果页优化
.el-result {
padding: 20px;
.el-result__title {
font-size: 16px;
}
.el-result__subtitle {
font-size: 13px;
}
}
}