184 lines
6.2 KiB
SCSS
184 lines
6.2 KiB
SCSS
/* USERCENTER */
|
||
.page-user {
|
||
.user-info-top {text-align: center;}
|
||
.user-info-top h2 {font-size: 18px;margin-top: 5px;}
|
||
.user-info-top p {margin: 8px 0 10px 0;}
|
||
.menu {background: none;}
|
||
.menu .el-menu-item {font-size: 12px;--el-menu-item-height:50px;}
|
||
.menu .el-menu-item-group {border-top: 1px solid var(--el-border-color-light);}
|
||
.menu .el-menu-item-group:first-child {border: 0;}
|
||
}
|
||
|
||
/*static-table*/
|
||
.static-table {border-collapse: collapse;width: 100%;font-size: 14px;margin-bottom: 45px;line-height: 1.5em;}
|
||
.static-table th {text-align: left;white-space: nowrap;color: #909399;font-weight: 400;border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;}
|
||
.static-table td {border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;color: #606266;}
|
||
|
||
/*header-tabs*/
|
||
.header-tabs {padding:10px 0 0 0;display:block;border:0!important;height:50px;background: none;}
|
||
.header-tabs .el-tabs__header {padding-left:10px;margin: 0;}
|
||
.header-tabs .el-tabs__content {display: none;}
|
||
.header-tabs .el-tabs__nav {border-radius: 0 !important;}
|
||
.header-tabs .el-tabs__item {font-size: 13px;}
|
||
.header-tabs .el-tabs__item.is-active {background-color: var(--el-bg-color-overlay);}
|
||
|
||
/*common-page*/
|
||
.common-page {}
|
||
.common-header-left {display: flex;align-items: center;}
|
||
.common-header-logo {display: flex;align-items: center;}
|
||
.common-header-logo img {height:30px;margin-right: 10px;vertical-align: bottom;}
|
||
.common-header-logo label {font-size: 20px;}
|
||
.common-header-title {font-size: 16px;border-left: 1px solid var(--el-border-color-light);margin-left: 15px;padding-left: 15px;}
|
||
.common-header-right {display: flex;align-items: center;}
|
||
.common-header-right a {font-size: 14px;color: var(--el-color-primary);cursor: pointer;}
|
||
.common-header-right a:hover {color: var(--el-color-primary-light-3);}
|
||
.common-container {max-width: 1240px;margin:30px auto 30px auto;}
|
||
.common-main {padding:20px;}
|
||
.common-title {font-size: 26px;margin-bottom: 20px;font-weight: normal;}
|
||
.common-main .el-form {width: 500px;margin:30px auto;}
|
||
.common-main .el-steps .el-step__title {font-size: 14px;}
|
||
.common-main .el-steps .el-step__icon {border: 1px solid;}
|
||
.common-main .yzm {display: flex;width: 100%;}
|
||
.common-main .yzm .el-button {margin-left: 10px;}
|
||
.common-main .link {color: var(--el-color-primary);cursor: pointer;}
|
||
.common-main .link:hover {color: var(--el-color-primary-light-3);}
|
||
|
||
/* ============================================================
|
||
* 工作流表单结构化样式
|
||
* 抽屉内打开的所有 *_form.vue 流程表单统一布局规范
|
||
* - 主区: el-main > el-form 内容卡片化、分组分区
|
||
* - 底部: 操作按钮 sticky 底栏
|
||
* - 侧栏: 提升与正文的视觉区分
|
||
* ============================================================ */
|
||
.el-drawer__body {
|
||
.el-container {
|
||
height: 100%;
|
||
background: var(--el-fill-color-light);
|
||
}
|
||
|
||
.el-main {
|
||
padding: 18px 20px 0 20px;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
}
|
||
|
||
/* 表单卡片化 */
|
||
.el-main > .el-form {
|
||
background: var(--el-bg-color);
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
border-radius: 12px;
|
||
padding: 22px 26px 8px 22px;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
|
||
margin-bottom: 76px; /* 给 sticky footer 让位 */
|
||
max-width: 1240px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.el-main > .el-form .el-form-item {
|
||
margin-bottom: 18px;
|
||
}
|
||
.el-main > .el-form .el-form-item__label {
|
||
font-weight: 500;
|
||
color: var(--el-text-color-regular);
|
||
}
|
||
|
||
/* 关键：除非显式 grid（el-row/el-col）或表格类输入，单列 form-item 内容控件不拉满 */
|
||
.el-main > .el-form > .el-form-item .el-form-item__content > .el-input,
|
||
.el-main > .el-form > .el-form-item .el-form-item__content > .el-input-number,
|
||
.el-main > .el-form > .el-form-item .el-form-item__content > .el-select,
|
||
.el-main > .el-form > .el-form-item .el-form-item__content > .el-cascader,
|
||
.el-main > .el-form > .el-form-item .el-form-item__content > .el-date-editor:not(.el-date-editor--datetimerange):not(.el-date-editor--daterange) {
|
||
max-width: 460px;
|
||
width: 100%;
|
||
}
|
||
/* textarea 单独放宽，便于书写多行 */
|
||
.el-main > .el-form > .el-form-item .el-form-item__content > .el-input.el-input--textarea,
|
||
.el-main > .el-form > .el-form-item .el-form-item__content > .el-textarea {
|
||
max-width: 720px;
|
||
}
|
||
/* 复选/单选组保持自然宽度 */
|
||
|
||
/* 复用：表单内分区标题 */
|
||
.wf-form-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 6px 0 14px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
}
|
||
.wf-form-section::before {
|
||
content: "";
|
||
width: 3px;
|
||
height: 14px;
|
||
border-radius: 2px;
|
||
background: var(--el-color-primary);
|
||
}
|
||
.wf-form-section > .title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
letter-spacing: 0.4px;
|
||
}
|
||
.wf-form-section > .desc {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-secondary);
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* sticky 底部操作栏 */
|
||
.el-main > .el-footer,
|
||
.el-main > .el-form + .el-footer,
|
||
.el-main > .el-form .el-footer {
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: auto !important;
|
||
padding: 12px 22px;
|
||
background: var(--el-bg-color);
|
||
border-top: 1px solid var(--el-border-color-lighter);
|
||
box-shadow: 0 -4px 16px -10px rgba(0, 0, 0, 0.15);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
z-index: 5;
|
||
margin: 0 -20px -18px;
|
||
}
|
||
.el-main > .el-footer .el-button + .el-button,
|
||
.el-main > .el-form + .el-footer .el-button + .el-button {
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* 右侧审批栏 */
|
||
.el-aside {
|
||
background: var(--el-fill-color-light);
|
||
border-left: 1px solid var(--el-border-color-lighter);
|
||
padding: 14px 10px 14px 14px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
* 抽屉头部美化（所有工单详情）
|
||
* ============================================================ */
|
||
.el-drawer__header {
|
||
padding: 14px 22px !important;
|
||
margin-bottom: 0 !important;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
background: linear-gradient(
|
||
180deg,
|
||
var(--el-bg-color) 0%,
|
||
var(--el-fill-color-light) 100%
|
||
);
|
||
}
|
||
.el-drawer__header > h4 {
|
||
font-size: 16px !important;
|
||
font-weight: 600;
|
||
letter-spacing: 0.4px;
|
||
margin: 0;
|
||
}
|
||
|