From 77d30f37f74eb506a2413aea77f8ea26e1dba332 Mon Sep 17 00:00:00 2001 From: 670788339 <670788339@qq.com> Date: Mon, 3 Nov 2025 18:31:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/tag/TagManage.vue | 124 ++++++++++++++++++++++++++---------- 1 file changed, 89 insertions(+), 35 deletions(-) diff --git a/src/views/tag/TagManage.vue b/src/views/tag/TagManage.vue index 4f33b5dc..526d1776 100644 --- a/src/views/tag/TagManage.vue +++ b/src/views/tag/TagManage.vue @@ -685,7 +685,7 @@ export default { flex-wrap: wrap; width: 100%; gap: 15px; - align-items: flex-start; // 确保顶部对齐 + align-items: flex-start; .select { flex: 1; @@ -693,12 +693,12 @@ export default { max-width: 300px; display: flex; align-items: center; - height: 40px; // 固定高度确保一致 + height: 40px; :deep(.filter-input), :deep(.filter-select) { width: 100%; - height: 40px !important; // 强制设置高度 + height: 40px !important; border-radius: 8px; // 输入框样式 @@ -717,19 +717,74 @@ export default { 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; + } } } } @@ -741,7 +796,7 @@ export default { flex-wrap: wrap; min-width: 300px; align-items: center; - height: 40px; // 按钮组也保持相同高度 + height: 40px; } .btn, .btnn { @@ -924,7 +979,7 @@ export default { width: 100%; word-break: break-all; line-height: 1.4; - max-height: 2.8em; + max-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; @@ -942,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; @@ -968,7 +1023,7 @@ export default { .select { min-width: 180px; max-width: 250px; - height: 38px; // 调整高度 + height: 38px; :deep(.filter-input), :deep(.filter-select) { @@ -983,9 +1038,9 @@ export default { height: 38px !important; .ant-select-selection-item, - .ant-select-selection-placeholder { - line-height: 36px !important; - } + .ant-selectselection-placeholder { + line-height: 36px !important; + } } } } @@ -1023,7 +1078,7 @@ export default { .select { min-width: 160px; max-width: 220px; - height: 36px; // 调整高度 + height: 36px; :deep(.filter-input), :deep(.filter-select) { @@ -1054,7 +1109,7 @@ export default { .button-group { min-width: 250px; - height: 36px; // 调整按钮组高度 + height: 36px; .btn, .btnn { height: 36px; @@ -1187,11 +1242,11 @@ export default { font-size: 11px; line-height: 1.2; max-height: 2.4em; - } + } .other-tags-cell { max-width: 150px; - font-size: 11px; + fontsize: 11px; line-height: 1.2; max-height: 2.4em; } @@ -1214,12 +1269,12 @@ export default { } .course-dialog-content { - .course-table { - :deep(.ant-table) { - font-size: 14px; - } + .course-table { + :deep(.ant-table) { + font-size: 14px; } } + } .course-id-cell, .course-name-cell, @@ -1241,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; } } @@ -1268,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; } } } @@ -1298,11 +1353,11 @@ export default { // 确认框样式优化 .ant-popconfirm { .ant-popconfirm-message { - .ant-popconfirm-message-title { - font-size: 14px; - color: #333; - } - } + .ant-popconfirm-message-title { + font-size: 14px; + color: #333; + } + } .ant-popconfirm-buttons { button { @@ -1375,7 +1430,7 @@ export default { font-size: 12px; } } - } + } } @media (max-width: 480px) { @@ -1383,13 +1438,13 @@ export default { width: 95% !important; max-width: none !important; - .ant-modal-content { - .ant-modal-body { - padding: 12px; - max-height: 50vh; - } + .ant-modal-content { + .ant-modal-body { + padding: 12px; + max-height: 50vh; } } + } } } @@ -1437,5 +1492,4 @@ export default { } } } - \ No newline at end of file