userclass/UserclassFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): 去掉卡片包裹边框，收紧页面留白

Browse Source 
- .main-container 去掉通道默认的 1px 描边（保留白底/圆角/阴影）
- 24 个视图根容器剥离自带的 border/圆角/背景/padding——它与卡片 16px 叠加成 32px，
  是「双层边框 + 空隙过大」的主因
- 学科管理不再 flex:1 把图例推到卡片底部；时段设置工具条去灰底，避免与表头双色带
- 教师管理页签 activeTab 统一为字符串，与 TabPane name 一致
This commit is contained in:
lijing
2026-10-20 15:16:55 +08:00
parent a99b3073cf
commit 45a758adea
24 changed files with 42 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+5
View File
@@ -157,4 +157,9 @@ body {
vertical-align: middle;
margin: 0 2px;
}
/* 卡片只要白底/圆角，去掉通道默认的描边（页面自身也不再包边框，避免双层） */
.base-wrap-main .main-container {
border: 0 !important;
}
</style>
src/views/areaOperateDaily.vue
+1 -8
View File
@@ -114,14 +114,7 @@
<style scoped>
/* 页面撑满父容器高度，必须设置父级html、body高度100% */
.page-wrap {
height: 100%;
display: flex;
flex-direction: column;
padding: 16px;
box-sizing: border-box;
background: #fff;
}
.page-wrap {height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
.search-wrap {
flex-shrink: 0; /* 固定高度，不压缩 */
src/views/classManage/ChristianityDetail.vue
+1 -12
View File
@@ -267,18 +267,7 @@
</script>
<style scoped>
.outer-wrap {
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 16px;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.outer-wrap {width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto}
.header-bar {
display: flex;
src/views/classManage/HigherEducation.vue
+1 -11
View File
@@ -573,17 +573,7 @@ onClick: () => this.delRow(params.index)})
<style scoped>
/* 外层统一边框，和前面所有管理页面样式统一 */
.outer-wrap {
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 16px;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
display: flex;
flex-direction: column;
}
.outer-wrap {width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column}
.page-container {
display: flex;
flex: 1;
src/views/electiveClassManage.vue
+1 -9
View File
@@ -618,15 +618,7 @@ onClick: () => this.singleSync(params.row)})
</script>
<style scoped>
.page-container {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 16px;
gap: 14px;
}
.page-container {width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px}
/* 顶部Tab栏整体布局 */
.tab-header {
display: flex;
src/views/electiveClassManageDetail.vue
+1 -9
View File
@@ -255,15 +255,7 @@
</script>
<style scoped>
.student-class-page {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 16px;
gap: 16px;
}
.student-class-page {width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px}
/* 顶部标题栏 */
.page-top-bar {
display: flex;
src/views/historySearch.vue
+1 -8
View File
@@ -233,14 +233,7 @@
</script>
<style scoped>
.class-history-wrap {
width: 100%;
height: 100%;
display: flex;
gap: 16px;
box-sizing: border-box;
padding: 12px;
}
.class-history-wrap {width: 100%; height: 100%; display: flex; gap: 16px; box-sizing: border-box}
/* 左侧树固定宽度+固定高度滚动 */
.left-tree-box {
src/views/historySearchDetail.vue
+1 -8
View File
@@ -79,14 +79,7 @@
</script>
<style scoped>
.student-teach-detail-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 16px;
}
.student-teach-detail-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
/* 顶部头部行 */
.top-header-bar {
src/views/itemSet.vue
+3 -8
View File
@@ -533,20 +533,15 @@ onClick: () => {
};
</script>
<style scoped>
.page-container {
padding:0 16px;
background: #fff;
}
.page-container {}
.page-title {
font-size: 24px;
font-weight: 500;
margin: 0 0 12px;
}
.btn-top-wrap {
background: #f7f8fa;
border-radius: 4px;
padding: 10px;
/* margin: 10px 0 15px; */
/* 卡片内不再铺灰底（会与表头形成双色带），只留底部间距 */
padding: 0 0 12px;
}
.term-table :deep(.ivu-table-row td) {
padding: 6px 0;
src/views/schoolSetting.vue
+4 -11
View File
@@ -219,13 +219,13 @@ class: 'drag-handle drag-icon'})
// 切换标签页重新初始化拖拽
activeTab(val) {
if (val === 'major') {
this.$nextTick(() => this.initTableDrag())
// this.$nextTick(() => this.initTableDrag())
this.getmajorslist();
} else if(val === 'campus') {
if (this.tableDrag) this.tableDrag.destroy();
// if (this.tableDrag) this.tableDrag.destroy();
this.getcampuslist();
}else{
if (this.tableDrag) this.tableDrag.destroy();
// if (this.tableDrag) this.tableDrag.destroy();
this.getdivisionlist();
}
}
@@ -544,14 +544,7 @@ class: 'drag-handle drag-icon'})
</script>
<style scoped>
.page-wrap {
padding: 16px;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.page-wrap {width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column}
.page-title {
margin: 0 0 12px;
font-size: 18px;
src/views/studentManage/Christianity.vue
+1 -8
View File
@@ -846,14 +846,7 @@ onClick: () => this.openEditStudent(params.row)})
</script>
<style scoped>
.student-manage-wrap {
width: 100%;
height: 100%;
display: flex;
gap: 16px;
box-sizing: border-box;
padding: 12px;
}
.student-manage-wrap {width: 100%; height: 100%; display: flex; gap: 16px; box-sizing: border-box}
/* 左侧树固定高度 */
.left-tree-box {
width: 220px;
src/views/studentManage/HigherEducation.vue
+1 -8
View File
@@ -829,14 +829,7 @@ onClick: () => this.openEditStudent(params.row)})
</script>
<style scoped>
.student-manage-wrap {
width: 100%;
height: 100%;
display: flex;
gap: 16px;
box-sizing: border-box;
padding: 12px;
}
.student-manage-wrap {width: 100%; height: 100%; display: flex; gap: 16px; box-sizing: border-box}
/* 左侧树固定高度 */
.left-tree-box {
width: 220px;
src/views/studentYDManage/Christianity.vue
+1 -8
View File
@@ -287,14 +287,7 @@ onClick: () => this.openEditModal(params.row)})
</script>
<style scoped>
.student-manage-wrap {
width: 100%;
height: 100%;
display: flex;
gap: 16px;
box-sizing: border-box;
padding: 12px;
}
.student-manage-wrap {width: 100%; height: 100%; display: flex; gap: 16px; box-sizing: border-box}
/* 左侧树固定高度 */
.left-tree-box {
width: 220px;
src/views/studentYDManage/HigherEducation.vue
+1 -8
View File
@@ -280,14 +280,7 @@ onClick: () => this.openEditModal(params.row)})
</script>
<style scoped>
.student-manage-wrap {
width: 100%;
height: 100%;
display: flex;
gap: 16px;
box-sizing: border-box;
padding: 12px;
}
.student-manage-wrap {width: 100%; height: 100%; display: flex; gap: 16px; box-sizing: border-box}
/* 左侧树固定高度 */
.left-tree-box {
width: 220px;
src/views/studySystemChoice.vue
+1 -6
View File
@@ -243,12 +243,7 @@ export default {
</script>
<style scoped>
.edu-layout-wrap {
width: 100%;
height: 100%;
padding: 10px;
background: #fff;
}
.edu-layout-wrap {width: 100%; height: 100%}
.layout-row {
height: 100%;
}
src/views/subjectManForZy.vue
+2 -12
View File
@@ -374,18 +374,8 @@ onClick: () => this.delRow(params.index)})
<style scoped>
/* 全局外边框，和之前校区/系部/专业页面样式统一 */
.outer-wrap {
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 16px;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
display: flex;
/* margin:0 10px; */
flex-direction: column;
}
.outer-wrap {width: 100%; height: 100%; box-sizing: border-box; display: flex; /* margin:0 10px; */
flex-direction: column}
/* 顶部操作筛选栏 */
.top-bar {
src/views/subjectSetzhi.vue
+3 -13
View File
@@ -263,24 +263,14 @@
</script>
<style scoped>
.outer-wrap {
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 16px;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #ffffff;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.outer-wrap {width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto}
.top-select-wrap {
margin-bottom: 16px;
}
.subject-box {
flex: 1;
/* 不再 flex:1 撑高，否则图例被推到卡片底部留出大片空白 */
flex: none;
}
.btn-container {
display: flex;
src/views/teacherManage.vue
+5 -5
View File
@@ -7,10 +7,10 @@
<TabPane label="教师分组管理" name="3"></TabPane>
<!-- <TabPane label="教师变动查询" name="4"></TabPane> -->
</Tabs>
<teacherinfo v-if="activeTab==1"></teacherinfo>
<teachseeting v-if="activeTab==2"></teachseeting>
<Teachergrouping v-if="activeTab==3"></Teachergrouping>
<Teachertransfer v-if="activeTab==4"></Teachertransfer>
<teacherinfo v-if="activeTab=='1'"></teacherinfo>
<teachseeting v-if="activeTab=='2'"></teachseeting>
<Teachergrouping v-if="activeTab=='3'"></Teachergrouping>
<Teachertransfer v-if="activeTab=='4'"></Teachertransfer>
</div>
</template>
@@ -24,7 +24,7 @@
components: { teacherinfo,teachseeting,Teachergrouping,Teachertransfer },
data() {
return {
activeTab:1,
activeTab:'1',
}
},
methods: {
src/views/teacherManage/Teachergrouping.vue
+1 -8
View File
@@ -440,14 +440,7 @@
</script>
<style scoped>
.group-manage-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 12px;
}
.group-manage-page {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
/* 顶部栏 */
.top-header {
display: flex;
src/views/teacherManage/Teachertransfer.vue
+1 -8
View File
@@ -141,14 +141,7 @@ export default {
<style scoped>
/* 页面根容器：占满父高度，纵向弹性布局 */
.page-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 12px;
}
.page-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
/* 顶部搜索栏 固定高度不压缩 */
.top-search-bar {
src/views/teacherManage/teacherinfo.vue
+3 -13
View File
@@ -913,18 +913,8 @@ onClick: () => this.editSingleTeacher(params.row, params.index)})
<style scoped>
/* 全局布局逐级修复高度 + min-height:0 解决flex塌陷 */
.outer-wrap {
/* border: 1px solid #e5e7eb; */
border-radius: 4px;
padding: 16px;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.outer-wrap {/* border: 1px solid #e5e7eb; */
border-radius: 4px; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto}
.page-flex-layout {
display: flex;
flex: 1;
@@ -932,7 +922,7 @@ onClick: () => this.editSingleTeacher(params.row, params.index)})
min-height: 0; /* 第一层修复 */
}
.tree-sidebar {
width: 225px;
width: 250px;
border: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
src/views/zhuanruinfo.vue
+1 -8
View File
@@ -273,14 +273,7 @@ onClick: () => this.openTransferModal(params.row)},'转入')
</script>
<style scoped>
.teacher-transfer-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 12px;
}
.teacher-transfer-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
/* 顶部筛选行 */
.top-filter-bar {
src/views/zhuanruinfostu/Christianity.vue
+1 -8
View File
@@ -296,14 +296,7 @@ onClick: () => this.openMoveModal(params.row)},'转入')
</script>
<style scoped>
.student-move-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 12px;
}
.student-move-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
/* 顶部筛选栏 */
.top-filter-bar {
src/views/zhuanruinfostu/HigherEducation.vue
+1 -8
View File
@@ -241,14 +241,7 @@ export default {
</script>
<style scoped>
.student-move-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 12px;
}
.student-move-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
/* 顶部筛选栏 */
.top-filter-bar {