// cover some element-ui styles .el-breadcrumb__inner, .el-breadcrumb__inner a { font-weight: 400 !important; } .el-upload { input[type="file"] { display: none !important; } } .el-upload__input { display: none; } .cell { .el-tag { margin-right: 0px; } } .small-padding { .cell { padding-left: 5px; padding-right: 5px; } } .fixed-width { .el-button--mini { padding: 7px 10px; width: 60px; } } .status-col { .cell { padding: 0 10px; text-align: center; .el-tag { margin-right: 0px; } } } // to fixed https://github.com/ElemeFE/element/issues/2461 .el-dialog { transform: none; left: 0; position: relative; margin: 0 auto; } // refine element ui upload .upload-container { .el-upload { width: 100%; .el-upload-dragger { width: 100%; height: 200px; } } } // dropdown .el-dropdown-menu { a { display: block } } // fix date-picker ui bug in filter-item .el-range-editor.el-input__inner { display: inline-flex !important; } // to fix el-date-picker css style .el-range-separator { box-sizing: content-box; } .el-menu--collapse > div > .el-submenu > .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; } } }