forked from liweijie/education
全局操作栏固定修复 和切换学期配色调整
This commit is contained in:
@@ -98,6 +98,15 @@
|
|||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
// 教学管理系统的列表字段统一居中,避免各业务页面单独声明后出现视觉错位。
|
||||||
|
.el-table__cell,
|
||||||
|
.el-table__cell.is-left,
|
||||||
|
.el-table__cell.is-right,
|
||||||
|
.el-table__cell.is-center,
|
||||||
|
.el-table__cell > .cell {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||||
th {
|
th {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
@@ -129,6 +138,17 @@
|
|||||||
.el-table__fixed-body-wrapper.is-dragging {
|
.el-table__fixed-body-wrapper.is-dragging {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 横向滚动条被隐藏后,Element UI 仍会为右侧固定列预留滚动条高度。
|
||||||
|
// 仅在宽表格发生横向溢出时补齐该高度,保证“操作”列与普通数据行底部对齐。
|
||||||
|
&.el-table--scrollable-x .el-table__fixed-right {
|
||||||
|
height: 100% !important; // 组件通过行内样式写入高度,只能在此处覆盖。
|
||||||
|
}
|
||||||
|
|
||||||
|
&.el-table--scrollable-x .el-table__fixed-right .el-table__fixed-body-wrapper {
|
||||||
|
bottom: 0;
|
||||||
|
height: auto !important; // 组件通过行内样式写入高度,只能在此处覆盖。
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表格横拖期间锁定整页光标与文本选中:
|
/* 表格横拖期间锁定整页光标与文本选中:
|
||||||
|
|||||||
@@ -247,28 +247,40 @@ export default {
|
|||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-input__inner {
|
}
|
||||||
background: rgba(255, 255, 255, 0.12);
|
}
|
||||||
border: 1px solid rgba(255, 255, 255, 0.35);
|
</style>
|
||||||
color: #fff;
|
|
||||||
border-radius: 7px;
|
<style lang="scss">
|
||||||
height: 36px;
|
/* 顶部学期选择器使用导航栏色系,避免被全局白色表单控件样式覆盖。 */
|
||||||
padding: 0 12px;
|
#app .semester-bar__switch .semester-select {
|
||||||
display: flex;
|
.el-input__inner {
|
||||||
align-items: center;
|
height: 36px;
|
||||||
|
padding: 0 34px 0 13px;
|
||||||
&::placeholder {
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||||
color: rgba(255, 255, 255, 0.7);
|
border-radius: 7px;
|
||||||
}
|
color: #ffffff;
|
||||||
}
|
background: rgba(255, 255, 255, 0.10);
|
||||||
|
box-shadow: none;
|
||||||
::v-deep .el-input__inner:hover {
|
|
||||||
border-color: rgba(255, 255, 255, 0.6);
|
&::placeholder {
|
||||||
}
|
color: rgba(255, 255, 255, 0.68);
|
||||||
|
}
|
||||||
::v-deep .el-input__icon {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
&:hover {
|
||||||
}
|
border-color: rgba(255, 255, 255, 0.38);
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: rgba(255, 255, 255, 0.55);
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__icon {
|
||||||
|
color: rgba(255, 255, 255, 0.82);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -23,7 +23,15 @@
|
|||||||
<!-- ==================== 2. 数据表格 ==================== -->
|
<!-- ==================== 2. 数据表格 ==================== -->
|
||||||
<el-card shadow="never" class="table-card">
|
<el-card shadow="never" class="table-card">
|
||||||
<!-- 课时费方案 -->
|
<!-- 课时费方案 -->
|
||||||
<el-table v-if="activeTab === 'fee'" v-loading="feeState.loading" :data="feeState.list" border stripe style="width: 100%">
|
<el-table
|
||||||
|
v-if="activeTab === 'fee'"
|
||||||
|
v-loading="feeState.loading"
|
||||||
|
:data="feeState.list"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
class="plan-data-table"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
<el-table-column type="index" label="序号" width="55" align="center" />
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
||||||
<el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip />
|
<el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip />
|
||||||
<el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip />
|
<el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip />
|
||||||
@@ -55,17 +63,27 @@
|
|||||||
<template slot-scope="{ row }">{{ fmtValue(row.jxbjgbz) }}</template>
|
<template slot-scope="{ row }">{{ fmtValue(row.jxbjgbz) }}</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip />
|
<el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip />
|
||||||
<el-table-column label="操作" width="160" align="center" fixed="right">
|
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||||
<template slot-scope="{ row }">
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-actions">
|
||||||
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
|
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
|
||||||
<el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
|
<el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
|
||||||
<el-button type="text" size="small" class="text-danger" @click="handleDelete(row)">删除</el-button>
|
<el-button type="text" size="small" class="text-danger" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<!-- 课时方案 -->
|
<!-- 课时方案 -->
|
||||||
<el-table v-else v-loading="coeffState.loading" :data="coeffState.list" border stripe style="width: 100%">
|
<el-table
|
||||||
|
v-else
|
||||||
|
v-loading="coeffState.loading"
|
||||||
|
:data="coeffState.list"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
class="plan-data-table"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
<el-table-column type="index" label="序号" width="55" align="center" />
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
||||||
<el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip />
|
<el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip />
|
||||||
<el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip />
|
<el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip />
|
||||||
@@ -100,10 +118,12 @@
|
|||||||
<template slot-scope="{ row }">{{ fmtValue(row.hbxssx) }}</template>
|
<template slot-scope="{ row }">{{ fmtValue(row.hbxssx) }}</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip />
|
<el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip />
|
||||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
<el-table-column label="操作" width="140" align="center" fixed="right">
|
||||||
<template slot-scope="{ row }">
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-actions">
|
||||||
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
|
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
|
||||||
<el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
|
<el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -654,6 +674,13 @@ export default {
|
|||||||
|
|
||||||
// ==================== 2. 数据表格 ====================
|
// ==================== 2. 数据表格 ====================
|
||||||
.table-card {
|
.table-card {
|
||||||
|
.table-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|||||||
Reference in New Issue
Block a user