Browse Source

refactor(port): 优化运输周期表格输入组件样式

- 移除表格区域注释中的冗余描述
- 将 el-input 替换为原生 input 并设置数字类型
- 添加聚焦和失焦事件控制背景色变化
- 移除负边距并调整输入框居中方式
- 简化表格单元格样式,统一高度和对齐方式
- 优化输入框内部样式和文本居中显示
master
qiankanghui 4 weeks ago
parent
commit
f5f23cd0f8
  1. 79
      src/views/modules/port/portTransit.vue

79
src/views/modules/port/portTransit.vue

@ -80,7 +80,7 @@
</el-row> </el-row>
</el-form> </el-form>
<!-- 表格区域关键撑满 -->
<!-- 表格区域 -->
<div class="table-area"> <div class="table-area">
<div class="table-title">运输周期</div> <div class="table-title">运输周期</div>
@ -108,11 +108,13 @@
align="center" align="center"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-input
v-model="scope.row.transitDays"
<input
v-model.number="scope.row.transitDays"
type="number"
placeholder="请输入天数" placeholder="请输入天数"
class="centered-input"
size="mini"
style="width: 100%; border: none; text-align: center; outline: none; background: transparent;"
@focus="$event.target.style.background = '#f5f7fa'"
@blur="$event.target.style.background = 'transparent'"
/> />
</template> </template>
</el-table-column> </el-table-column>
@ -519,65 +521,32 @@ export default {
} }
</script> </script>
<style scoped lang="scss">/* 表格行高 */
::v-deep .el-table__row {
height: 60px !important;
}
/* 单元格内边距 */
::v-deep .el-table td {
padding: 8px 0;
vertical-align: middle;
}
/* input 样式 */
::v-deep .el-input__inner {
height: 36px !important;
line-height: 36px !important;
}
<style scoped lang="scss">
/* 移除负边距,改用 flex 居中 */
/deep/ .centered-input { /deep/ .centered-input {
width: 80%; width: 80%;
margin: -5px auto 0 auto; /* 负的上边距向上移动 */
}
/* 整个弹窗拉高 */
::v-deep .upload-dialog .el-dialog {
height: 90vh;
max-height: 90vh;
display: flex;
flex-direction: column;
margin: 0 auto;
} }
/* body变成flex */
::v-deep .upload-dialog .el-dialog__body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 总容器 */
.upload-container {
flex: 1;
display: flex;
flex-direction: column;
/* 统一处理单元格样式 */
::v-deep .el-table td {
padding: 0; /* 移除默认 padding */
height: 40px; /* 固定单元格高度 */
} }
/* 顶部区域固定 */
.upload-header {
flex-shrink: 0;
::v-deep .el-table td .cell {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px;
}
/* 表格区域自动撑满 */
.upload-table {
flex: 1;
overflow: hidden;
justify-content: center;
padding: 0;
height: 100%;
overflow: visible; /* 允许边框溢出 */
} }
/* 表格填满 */
.upload-table .el-table {
height: 100%;
/* 输入框样式 */
/deep/ .centered-input .el-input__inner {
height: 28px;
line-height: 28px;
text-align: center;
} }
</style> </style>
Loading…
Cancel
Save