update 优化 前端样式初步调整并删除无用样式
This commit is contained in:
lau
@@ -0,0 +1,13 @@
|
||||
.el-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-card .el-card__header {
|
||||
border-top-left-radius: var(--app-radius-lg);
|
||||
border-top-right-radius: var(--app-radius-lg);
|
||||
}
|
||||
|
||||
.el-card .el-card__body {
|
||||
border-bottom-left-radius: var(--app-radius-lg);
|
||||
border-bottom-right-radius: var(--app-radius-lg);
|
||||
}
|
||||
+1
-10
@@ -1,4 +1,4 @@
|
||||
/* Dialog and upload-related overlays. */
|
||||
/* 弹窗：遮罩模糊、居中 el-dialog 头身脚与关闭按钮；底部 .upload-container 为上传区宽度占位。 */
|
||||
|
||||
.el-overlay {
|
||||
overflow: hidden;
|
||||
@@ -99,13 +99,4 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
/* Dropdown and inline menu helpers. */
|
||||
/* 下拉菜单面板项样式；日期范围分隔符；折叠菜单隐藏箭头；dropdown-link 主色。 */
|
||||
|
||||
.el-dropdown-menu {
|
||||
padding: 8px;
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
|
||||
|
||||
:root {
|
||||
|
||||
--el-font-size-base: var(--app-font-size-base)
|
||||
}
|
||||
+2
-1
@@ -1,4 +1,4 @@
|
||||
/* Toast, alert, and message-box feedback components. */
|
||||
/* 反馈：MessageBox 卡片化；Message / Notification / Alert 圆角与暗色下 success 等背景微调。 */
|
||||
|
||||
.el-message-box .el-message-box__message {
|
||||
word-break: break-word;
|
||||
@@ -206,6 +206,7 @@
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
// --- 暗色下 Message 类型背景（与 tokens 中按钮色阶独立） ---
|
||||
html.dark {
|
||||
.el-message--success {
|
||||
background: rgba(31, 138, 90, 0.18);
|
||||
|
||||
+5
-1
@@ -1,4 +1,8 @@
|
||||
/* Form controls and generic rounded inputs. */
|
||||
/* 表单：inline 默认宽度；输入类圆角与 focus 环；按钮/tag/单选复选按钮组圆角。 */
|
||||
|
||||
.el-form .el-form-item__label {
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
.el-form--inline .el-form-item__label {
|
||||
width: 68px;
|
||||
|
||||
+7
-5
@@ -1,10 +1,12 @@
|
||||
@use './primitives';
|
||||
@use './base';
|
||||
@use 'element-plus/dist/index.css';
|
||||
@use 'overrides';
|
||||
@use './misc';
|
||||
@use './dialog';
|
||||
@use './dropdown';
|
||||
@use './form';
|
||||
@use './feedback';
|
||||
@use './popper' as element-popper;
|
||||
@use './shell' as element-shell;
|
||||
@use './popper';
|
||||
@use './shell';
|
||||
@use './navigation';
|
||||
@use './table';
|
||||
@use './table';
|
||||
@use './card';
|
||||
+18
-1
@@ -1,5 +1,6 @@
|
||||
/* Baseline Element Plus tweaks reused by the rest of the overrides. */
|
||||
/* 零散 EP 覆盖：折叠、面包屑、上传、表格 .cell 与列辅助 class 等；主题级共用壳层见 _overrides。 */
|
||||
|
||||
// --- 折叠面板标题与内容缩进 ---
|
||||
.el-collapse {
|
||||
.collapse__title {
|
||||
font-weight: 600;
|
||||
@@ -13,16 +14,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// --- 水平分割线上下边距 ---
|
||||
.el-divider--horizontal {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// --- 面包屑链接字重 ---
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
// --- 隐藏原生 file input（配合 EP 上传 UI） ---
|
||||
.el-upload {
|
||||
input[type='file'] {
|
||||
display: none !important;
|
||||
@@ -33,12 +37,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// --- 表格默认 .cell 内 tag 去右间距 ---
|
||||
.cell {
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 列 class：窄内边距 / 固定宽操作列 / 状态列居中 ---
|
||||
.small-padding {
|
||||
.cell {
|
||||
padding-left: 5px;
|
||||
@@ -63,3 +69,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+1
-16
@@ -1,19 +1,4 @@
|
||||
/* Navigation and collection views: tables, tabs, pagination, breadcrumb. */
|
||||
|
||||
.el-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table__row:hover td.el-table__cell {
|
||||
background-color: rgba(53, 109, 255, 0.05) !important;
|
||||
}
|
||||
/* 导航类组件：Tabs、Pagination、面包屑容 */
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 12px 0;
|
||||
|
||||
+8
-1
@@ -1,5 +1,7 @@
|
||||
/* Shared Element Plus primitives used across multiple component overrides. */
|
||||
/* 跨多个 Element Plus 组件的共用覆盖（圆角、描边、阴影、主按钮、表格变量、输入框等）。
|
||||
* 注意：本文件在入口中晚于 components/_card-shell 载入，其中 .el-card 等与卡片壳层重叠的属性以本文件为准（例如阴影强度）。 */
|
||||
|
||||
// --- 卡片、弹层、抽屉及常见 popper 容器的圆角/边线/阴影 ---
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-drawer,
|
||||
@@ -12,16 +14,19 @@
|
||||
box-shadow: var(--app-shadow-md);
|
||||
}
|
||||
|
||||
// --- 实体「面板」背景 ---
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-drawer {
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
// --- 按钮默认字重 ---
|
||||
.el-button {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// --- primary 品牌色（亮色；暗色见 tokens/_theme-dark） ---
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: var(--app-accent-strong);
|
||||
--el-button-border-color: var(--app-accent-strong);
|
||||
@@ -31,6 +36,7 @@
|
||||
--el-button-active-border-color: #2e5ce0;
|
||||
}
|
||||
|
||||
// --- 表格 CSS 变量接业务 token ---
|
||||
.el-table {
|
||||
--el-table-border-color: var(--app-surface-border);
|
||||
--el-table-header-bg-color: var(--tableHeaderBg);
|
||||
@@ -38,6 +44,7 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// --- 输入类默认内描边（与 _form 中 focus 环配合） ---
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select__wrapper {
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
/* Popper-backed widgets: dropdowns, date pickers, popovers, autocomplete. */
|
||||
/* 各类浮层：Select/Cascader/DatePicker/Tooltip/Popover 等边框、列表项 hover、暗色箭头与日历格选中态。 */
|
||||
|
||||
.el-select__popper.el-popper,
|
||||
.el-picker__popper.el-popper,
|
||||
|
||||
+49
-3
@@ -1,9 +1,10 @@
|
||||
|
||||
// 覆盖element plus 表格样式
|
||||
/* Element Plus 表格：通用容器圆角、边线、overflow、行 hover、四角单元格、border/fit 清理（不含业务页表头 token，表头见 components/_legacy-utilities）。 */
|
||||
@use '../../tokens/sass-vars' as *;
|
||||
|
||||
.el-table {
|
||||
border-radius: var(--app-radius-md);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
overflow: hidden;
|
||||
|
||||
// 给右上角表头单元格增加右上角圆角
|
||||
thead tr:first-child th:last-child {
|
||||
@@ -21,6 +22,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table__row:hover td.el-table__cell {
|
||||
background-color: rgba(53, 109, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
// 去掉额外的表格边线，使用表格border
|
||||
.el-table--border:after,
|
||||
.el-table--border:before,
|
||||
@@ -34,4 +44,40 @@
|
||||
.el-table--fit {
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// --- 表格内操作列：固定宽按钮、下拉链接色 ---
|
||||
.el-table .fixed-width .el-button--small {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: $table-header-bg !important;
|
||||
color: $table-header-text-color;
|
||||
height: 40px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*='el-icon-'] + span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user