样式调整

This commit is contained in:
670788339
2025-11-03 18:12:46 +08:00
parent ac31ebb6cd
commit 69b0c066df

View File

@@ -10,6 +10,7 @@
allowClear
showSearch
@pressEnter="searchSubmit"
class="filter-input"
>
</a-input>
</div>
@@ -19,14 +20,16 @@
placeholder="请选择热点标签状态"
:options="hotOptions"
allowClear
class="filter-select"
></a-select>
</div>
<div class="select">
<a-select
v-model:value="searchParam.isPublic"
placeholder="请选择前台公共显示状态"
:options="hotOptions"
:options="publicOptions"
allowClear
class="filter-select"
></a-select>
</div>
<div class="button-group">
@@ -114,9 +117,9 @@
<div class="tableBox">
<div class="pa">
<!-- <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
{{ tableDataTotal }} 条记录
</div>-->
<!-- <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
{{ tableDataTotal }} 条记录
</div>-->
<a-pagination
v-if="tableDataTotal > 0"
:showSizeChanger="false"
@@ -155,11 +158,11 @@
>
<template #bodyCell="{ record, column }">
<!-- 关联课程ID -->
<!-- <template v-if="column.key === 'courseId'">
<div class="course-id-cell" :title="record.courseId">
{{ record.courseId }}
</div>
</template>-->
<!-- <template v-if="column.key === 'courseId'">
<div class="course-id-cell" :title="record.courseId">
{{ record.courseId }}
</div>
</template>-->
<!-- 关联课程名称 -->
<template v-if="column.key === 'courseName'">
@@ -207,9 +210,9 @@
</a-table>
<div class="course-pagination">
<!-- <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
{{ courseTableTotal }} 条记录
</div>-->
<!-- <div class="pagination-info" style="margin-bottom: 10px; text-align: center; color: #666;">
{{ courseTableTotal }} 条记录
</div>-->
<a-pagination
v-if="courseTableTotal > 0"
:showSizeChanger="false"
@@ -271,6 +274,11 @@ export default {
hotOptions: [
{ value: "true", label: "开启" },
{ value: "false", label: "关闭" }
],
publicOptions: [
{ value: "true", label: "开启" },
{ value: "false", label: "关闭" }
]
});
@@ -677,17 +685,53 @@ export default {
flex-wrap: wrap;
width: 100%;
gap: 15px;
align-items: flex-start; // 确保顶部对齐
.select {
flex: 1;
min-width: 200px;
max-width: 300px;
display: flex;
align-items: center;
height: 40px; // 固定高度确保一致
:deep(.ant-input),
:deep(.ant-select) {
:deep(.filter-input),
:deep(.filter-select) {
width: 100%;
height: 40px;
height: 40px !important; // 强制设置高度
border-radius: 8px;
// 输入框样式
&.ant-input {
height: 40px !important;
line-height: 40px;
padding: 0 11px;
}
// 选择器样式
&.ant-select {
height: 40px !important;
.ant-select-selector {
height: 40px !important;
border-radius: 8px;
display: flex;
align-items: center;
.ant-select-selection-item {
line-height: 38px !important;
}
.ant-select-selection-placeholder {
line-height: 38px !important;
}
}
.ant-select-arrow {
top: 50%;
transform: translateY(-50%);
}
}
}
}
@@ -696,6 +740,8 @@ export default {
gap: 10px;
flex-wrap: wrap;
min-width: 300px;
align-items: center;
height: 40px; // 按钮组也保持相同高度
}
.btn, .btnn {
@@ -922,6 +968,26 @@ export default {
.select {
min-width: 180px;
max-width: 250px;
height: 38px; // 调整高度
:deep(.filter-input),
:deep(.filter-select) {
height: 38px !important;
&.ant-input {
height: 38px !important;
line-height: 38px;
}
&.ant-select .ant-select-selector {
height: 38px !important;
.ant-select-selection-item,
.ant-select-selection-placeholder {
line-height: 36px !important;
}
}
}
}
}
}
@@ -957,10 +1023,43 @@ export default {
.select {
min-width: 160px;
max-width: 220px;
height: 36px; // 调整高度
:deep(.filter-input),
:deep(.filter-select) {
height: 36px !important;
&.ant-input {
height: 36px !important;
line-height: 36px;
font-size: 13px;
}
&.ant-select {
height: 36px !important;
.ant-select-selector {
height: 36px !important;
font-size: 13px;
.ant-select-selection-item,
.ant-select-selection-placeholder {
line-height: 34px !important;
font-size: 13px;
}
}
}
}
}
.button-group {
min-width: 250px;
height: 36px; // 调整按钮组高度
.btn, .btnn {
height: 36px;
padding: 0 16px;
}
}
}
}