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

自适应调试其他细节调整

Browse Source
This commit is contained in:
670788339
2025-11-01 10:15:17 +08:00
parent d2424d0909
commit cf13f63a6a
1 changed files with 181 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
src/views/tag/TagManage.vue
View File

@@ -169,7 +169,14 @@
<!-- 操作列 -->
<template v-else-if="column.key === 'operation'">
<a-button type="link" @click="unbindCurrentTag(record)" class="unbind-btn">解绑</a-button>
<a-popconfirm
title="确认解绑该课程？"
ok-text="确认"
cancel-text="取消"
@confirm="unbindCurrentTag(record)"
>
<a-button type="link" class="unbind-btn">解绑</a-button>
</a-popconfirm>
</template>
</template>
</a-table>
@@ -193,14 +200,15 @@
<script>
import { reactive, toRefs, ref } from "vue";
import { message, Tooltip } from "ant-design-vue";
import { message, Tooltip, Popconfirm } from "ant-design-vue";
import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
import moment from "moment";
export default {
name: "TagManage",
components: {
ATooltip: Tooltip
ATooltip: Tooltip,
APopconfirm: Popconfirm
},
setup() {
const state = reactive({
@@ -742,13 +750,14 @@ export default {
// 关联课程弹窗样式
.course-dialog-content {
width: 100%;
min-height: 400px;
min-height: 300px;
display: flex;
flex-direction: column;
.course-table {
flex: 1;
min-height: 300px;
min-height: 200px;
margin-bottom: 20px;
:deep(.ant-table) {
.ant-table-thead > tr > th {
@@ -756,22 +765,28 @@ export default {
text-align: center !important;
white-space: nowrap;
font-weight: 600;
padding: 12px 8px;
padding: 16px 8px;
}
.ant-table-tbody > tr > td {
text-align: center;
padding: 8px;
padding: 12px 8px;
vertical-align: top;
}
.ant-table-placeholder {
.ant-table-cell {
padding: 40px 0;
}
}
}
}
.course-pagination {
margin-top: 20px;
margin-top: 10px;
display: flex;
justify-content: center;
padding: 10px 0;
padding: 15px 0;
}
.unbind-btn {
@@ -808,11 +823,10 @@ export default {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
text-align: center;
// 每行显示15个汉字，2行显示30个字
max-width: 240px; // 15个汉字 * 16px ≈ 240px
max-width: 240px;
margin: 0 auto;
}
@@ -828,7 +842,7 @@ export default {
text-align: center;
// 每行5个汉字，2行显示10个字
max-width: 80px; // 5个汉字 * 16px ≈ 80px
max-width: 80px;
margin: 0 auto;
}
@@ -841,11 +855,10 @@ export default {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
text-align: center;
// 每行15个汉字，2行显示30个字
max-width: 240px; // 15个汉字 * 16px ≈ 240px
max-width: 240px;
margin: 0 auto;
}
@@ -913,12 +926,12 @@ export default {
font-size: 12px;
.ant-table-thead > tr > th {
padding: 10px 6px;
padding: 14px 6px;
font-size: 12px;
}
.ant-table-tbody > tr > td {
padding: 6px 4px;
padding: 10px 4px;
}
}
}
@@ -965,106 +978,110 @@ export default {
}
.course-dialog-content {
min-height: 350px;
min-height: 280px;
.course-table {
min-height: 250px;
}
}
}
.course-dialog-content {
min-height: 280px;
/* 弹窗在小屏幕下的适配 */
@media (max-width: 768px) {
.course-dialog-content {
.course-table {
:deep(.ant-table) {
font-size: 12px;
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 6px 4px;
font-size: 11px;
}
.course-table {
min-height: 180px;
}
}
}
.course-pagination {
:deep(.ant-pagination) {
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
min-width: 28px;
height: 28px;
line-height: 26px;
}
.ant-pagination-item a {
padding: 0 6px;
/* 弹窗在小屏幕下的适配 */
@media (max-width: 768px) {
.course-dialog-content {
.course-table {
:deep(.ant-table) {
font-size: 12px;
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 10px 4px;
font-size: 11px;
}
}
}
}
}
.course-id-cell {
font-size: 10px;
max-width: 120px;
line-height: 1.2;
max-height: 2.4em;
}
.course-pagination {
:deep(.ant-pagination) {
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
min-width: 28px;
height: 28px;
line-height: 26px;
}
.course-name-cell {
max-width: 150px;
font-size: 11px;
line-height: 1.2;
max-height: 2.4em;
}
.creator-cell {
max-width: 60px;
font-size: 11px;
line-height: 1.2;
max-height: 2.4em;
}
.other-tags-cell {
max-width: 150px;
font-size: 11px;
line-height: 1.2;
max-height: 2.4em;
}
}
/* 高DPI屏幕适配 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.tagManage {
font-size: 15px;
.filter {
.filterItems {
.btn, .btnn {
.btnText {
font-size: 15px;
.ant-pagination-item a {
padding: 0 6px;
font-size: 12px;
}
}
}
}
}
.course-dialog-content {
.course-table {
:deep(.ant-table) {
font-size: 14px;
}
.course-id-cell {
font-size: 10px;
max-width: 120px;
line-height: 1.2;
max-height: 2.4em;
}
.course-name-cell {
max-width: 150px;
font-size: 11px;
line-height: 1.2;
max-height: 2.4em;
}
.creator-cell {
max-width: 60px;
font-size: 11px;
line-height: 1.2;
max-height: 2.4em;
}
.other-tags-cell {
max-width: 150px;
font-size: 11px;
line-height: 1.2;
max-height: 2.4em;
}
}
.course-id-cell,
.course-name-cell,
.creator-cell,
.other-tags-cell {
font-size: 14px;
/* 高DPI屏幕适配 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.tagManage {
font-size: 15px;
.filter {
.filterItems {
.btn, .btnn {
.btnText {
font-size: 15px;
}
}
}
}
}
.course-dialog-content {
.course-table {
:deep(.ant-table) {
font-size: 14px;
}
}
}
.course-id-cell,
.course-name-cell,
.creator-cell,
.other-tags-cell {
font-size: 14px;
}
}
}
</style>
@@ -1092,7 +1109,7 @@ export default {
}
.ant-modal-body {
padding: 20px 24px;
padding: 24px;
max-height: 70vh;
overflow-y: auto;
}
@@ -1122,6 +1139,35 @@ export default {
}
}
// 确认框样式优化
.ant-popconfirm {
.ant-popconfirm-message {
.ant-popconfirm-message-title {
font-size: 14px;
color: #333;
}
}
.ant-popconfirm-buttons {
button {
border-radius: 6px;
font-size: 13px;
height: 32px;
padding: 0 16px;
&.ant-btn-primary {
background: #ff4d4f;
border-color: #ff4d4f;
&:hover {
background: #ff7875;
border-color: #ff7875;
}
}
}
}
}
@media (max-width: 768px) {
.ant-modal {
.ant-modal-content {
@@ -1158,6 +1204,22 @@ export default {
padding: 6px 10px;
}
}
.ant-popconfirm {
.ant-popconfirm-message {
.ant-popconfirm-message-title {
font-size: 13px;
}
}
.ant-popconfirm-buttons {
button {
height: 28px;
padding: 0 12px;
font-size: 12px;
}
}
}
}
@media (max-width: 480px) {
@@ -1198,4 +1260,25 @@ export default {
}
}
}
// 空状态样式优化
.course-dialog {
.ant-table-placeholder {
.ant-empty {
.ant-empty-image {
height: 80px;
svg {
width: 80px;
height: 80px;
}
}
.ant-empty-description {
font-size: 14px;
color: #999;
}
}
}
}
</style>