hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-06 09:26:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
670788339
2025-11-03 18:37:30 +08:00
parent 03789762a9
commit 783a60a257
1 changed files with 175 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/views/tag/TagManage.vue
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,108 @@ 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: 30px;
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;
padding: 0 11px;
.ant-select-selection-item {
line-height: 38px !important;
display: flex;
align-items: center;
}
.ant-select-selection-placeholder {
line-height: 38px !important;
display: flex;
align-items: center;
}
.ant-select-selection-search {
display: flex;
align-items: center;
.ant-select-selection-search-input {
height: 38px;
display: flex;
align-items: center;
}
}
}
// 下拉箭头居中样式
.ant-select-arrow {
right: 11px;
top: 50%;
transform: translateY(-50%);
margin-top: 0;
width: 12px;
height: 12px;
.anticon {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
transition: transform 0.3s;
svg {
width: 12px;
height: 12px;
}
}
}
// 下拉框打开时箭头旋转
&.ant-select-open {
.ant-select-arrow {
.anticon {
transform: rotate(180deg);
}
}
}
// 清除按钮样式
.ant-select-clear {
right: 30px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
margin-top: 0;
.anticon-close-circle {
font-size: 12px;
}
}
}
}
}
@@ -696,6 +795,8 @@ export default {
gap: 10px;
flex-wrap: wrap;
min-width: 300px;
align-items: center;
height: 40px;
}
.btn, .btnn {
@@ -896,7 +997,7 @@ export default {
line-height: 1.4;
max-height: 2.8em;
overflow: hidden;
display: -webkit-box;
//display: -webkitbox;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
@@ -922,6 +1023,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-selectselection-placeholder {
line-height: 36px !important;
}
}
}
}
}
}
@@ -957,10 +1078,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;
}
}
}
}
@@ -1092,7 +1246,7 @@ export default {
.other-tags-cell {
max-width: 150px;
font-size: 11px;
fontsize: 11px;
line-height: 1.2;
max-height: 2.4em;
}
@@ -1142,14 +1296,14 @@ export default {
overflow: hidden;
.ant-modal-header {
background: #4ea6ff !important; // 修改为蓝色背景
background: #4ea6ff !important;
border-bottom: 1px solid #4ea6ff;
padding: 16px 24px;
.ant-modal-title {
font-size: 16px;
font-weight: 600;
color: #fff !important; // 修改文字为白色
color: #fff !important;
}
}
@@ -1169,14 +1323,14 @@ export default {
line-height: 44px;
.ant-modal-close-icon {
color: #fff !important; // 关闭按钮改为白色
color: #fff !important;
}
}
&:hover {
.ant-modal-close-x {
.ant-modal-close-icon {
color: #f0f0f0 !important; // 鼠标悬停时浅灰色
color: #f0f0f0 !important;
}
}
}
@@ -1338,5 +1492,4 @@ export default {
}
}
}
</style>