自适应调试其他细节调整

src/views/tag/TagManage.vue

@@ -169,14 +169,7 @@
 
             <!-- 操作列 -->
             <template v-else-if="column.key === 'operation'">
-              <a-popconfirm
+              <a-button type="link" @click="() => handleUnbindConfirm(record)" class="unbind-btn">解绑</a-button>
-                  title="确认解绑该课程？"
-                  ok-text="确认"
-                  cancel-text="取消"
-                  @confirm="unbindCurrentTag(record)"
-              >
-                <a-button type="link" class="unbind-btn">解绑</a-button>
-              </a-popconfirm>
             </template>
           </template>
         </a-table>
@@ -200,15 +193,14 @@
 
 <script>
 import { reactive, toRefs, ref } from "vue";
-import { message, Tooltip, Popconfirm } from "ant-design-vue";
+import { message, Tooltip, Modal } 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({
@@ -543,6 +535,21 @@ export default {
       getCourseListByTag();
     };
 
+    // 解绑确认弹框
+    const handleUnbindConfirm = (record) => {
+      Modal.confirm({
+        title: '操作确认',
+        content: '确认解绑该课程？',
+        okText: '确定',
+        cancelText: '取消',
+        centered: true,
+        wrapClassName: 'unbind-confirm-modal',
+        onOk: async () => {
+          await unbindCurrentTag(record);
+        }
+      });
+    };
+
     // 解绑标签
     const unbindCurrentTag = async (record) => {
       try {
@@ -611,6 +618,7 @@ export default {
       showCourseByTagg,
       closeCourseDialog,
       changeCoursePagination,
+      handleUnbindConfirm,
       unbindCurrentTag,
       formatDate,
       exportTag
@@ -980,108 +988,103 @@ export default {
   .course-dialog-content {
     min-height: 280px;
 
-    .course-dialog-content {
+    .course-table {
-      min-height: 280px;
+      min-height: 180px;
-
-      .course-table {
-        min-height: 180px;
-      }
     }
   }
+}
 
+/* 弹窗在小屏幕下的适配 */
+@media (max-width: 768px) {
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 12px;
 
-  /* 弹窗在小屏幕下的适配 */
+        .ant-table-thead > tr > th,
-  @media (max-width: 768px) {
+        .ant-table-tbody > tr > td {
-    .course-dialog-content {
+          padding: 10px 4px;
-      .course-table {
+          font-size: 11px;
-        :deep(.ant-table) {
+        }
+      }
+    }
+
+    .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;
           font-size: 12px;
-
-          .ant-table-thead > tr > th,
-          .ant-table-tbody > tr > td {
-            padding: 10px 4px;
-            font-size: 11px;
-          }
         }
       }
-
-      .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;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-
-    .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;
     }
   }
 
-  /* 高DPI屏幕适配 */
+  .course-id-cell {
-  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+    font-size: 10px;
-    .tagManage {
+    max-width: 120px;
-      font-size: 15px;
+    line-height: 1.2;
+    max-height: 2.4em;
+  }
 
-      .filter {
+  .course-name-cell {
-        .filterItems {
+    max-width: 150px;
-          .btn, .btnn {
+    font-size: 11px;
-            .btnText {
+    line-height: 1.2;
-              font-size: 15px;
+    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;
           }
         }
       }
     }
+  }
 
-    .course-dialog-content {
+  .course-dialog-content {
-      .course-table {
+    .course-table {
-        :deep(.ant-table) {
+      :deep(.ant-table) {
-          font-size: 14px;
+        font-size: 14px;
-        }
       }
     }
+  }
 
-    .course-id-cell,
+  .course-id-cell,
-    .course-name-cell,
+  .course-name-cell,
-    .creator-cell,
+  .creator-cell,
-    .other-tags-cell {
+  .other-tags-cell {
-      font-size: 14px;
+    font-size: 14px;
-    }
   }
 }
 </style>
@@ -1139,35 +1142,6 @@ 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 {
@@ -1204,22 +1178,6 @@ 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) {
@@ -1237,6 +1195,88 @@ export default {
   }
 }
 
+// 解绑确认弹框样式 - 参考CourseRecommended.vue样式
+.unbind-confirm-modal {
+  .ant-modal {
+    .ant-modal-content {
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+      .ant-modal-header {
+        background: #fafafa;
+        border-bottom: 1px solid #e8e8e8;
+        padding: 16px 24px;
+        border-radius: 8px 8px 0 0;
+
+        .ant-modal-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #333;
+        }
+      }
+
+      .ant-modal-body {
+        padding: 24px;
+        font-size: 14px;
+        color: #666;
+        line-height: 1.5;
+
+        .ant-modal-confirm-body {
+          display: flex;
+          align-items: flex-start;
+
+          .ant-modal-confirm-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+          }
+
+          .ant-modal-confirm-content {
+            margin-left: 0;
+            margin-top: 0;
+            color: #666;
+          }
+        }
+      }
+
+      .ant-modal-footer {
+        padding: 10px 24px 24px;
+        border-top: 1px solid #e8e8e8;
+        text-align: right;
+
+        .ant-btn {
+          height: 32px;
+          padding: 0 16px;
+          border-radius: 6px;
+          font-size: 14px;
+          margin-left: 8px;
+
+          &.ant-btn-default {
+            border: 1px solid #d9d9d9;
+            color: #333;
+
+            &:hover {
+              border-color: #4ea6ff;
+              color: #4ea6ff;
+            }
+          }
+
+          &.ant-btn-primary {
+            background: #4ea6ff;
+            border-color: #4ea6ff;
+
+            &:hover {
+              background: #388be1;
+              border-color: #388be1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 // 表格滚动条样式优化
 .course-dialog {
   .ant-table-body {
@@ -1281,4 +1321,127 @@ export default {
     }
   }
 }
+
+// 确认框样式优化
+.ant-modal-confirm {
+  .ant-modal-body {
+    padding: 24px !important;
+
+    .ant-modal-confirm-body-wrapper {
+      .ant-modal-confirm-body {
+        .anticon {
+          margin-top: 4px;
+          color: #faad14;
+          font-size: 22px;
+        }
+
+        .ant-modal-confirm-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #333;
+        }
+
+        .ant-modal-confirm-content {
+          margin-left: 38px;
+          color: #666;
+          font-size: 14px;
+          line-height: 1.5;
+        }
+      }
+
+      .ant-modal-confirm-btns {
+        margin-top: 24px;
+        text-align: right;
+
+        .ant-btn {
+          height: 32px;
+          padding: 0 16px;
+          border-radius: 6px;
+          font-size: 14px;
+          margin-left: 8px;
+
+          &.ant-btn-default {
+            border: 1px solid #d9d9d9;
+            color: #333;
+
+            &:hover {
+              border-color: #4ea6ff;
+              color: #4ea6ff;
+            }
+          }
+
+          &.ant-btn-primary {
+            background: #4ea6ff;
+            border-color: #4ea6ff;
+
+            &:hover {
+              background: #388be1;
+              border-color: #388be1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .unbind-confirm-modal {
+    .ant-modal {
+      .ant-modal-content {
+        margin: 20px;
+        width: auto !important;
+
+        .ant-modal-body {
+          padding: 16px !important;
+
+          .ant-modal-confirm-body-wrapper {
+            .ant-modal-confirm-body {
+              .ant-modal-confirm-content {
+                margin-left: 32px;
+                font-size: 13px;
+              }
+            }
+
+            .ant-modal-confirm-btns {
+              margin-top: 20px;
+
+              .ant-btn {
+                height: 28px;
+                padding: 0 12px;
+                font-size: 13px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-modal-confirm {
+    .ant-modal-body {
+      padding: 16px !important;
+
+      .ant-modal-confirm-body-wrapper {
+        .ant-modal-confirm-body {
+          .ant-modal-confirm-content {
+            margin-left: 32px;
+            font-size: 13px;
+          }
+        }
+
+        .ant-modal-confirm-btns {
+          margin-top: 20px;
+
+          .ant-btn {
+            height: 28px;
+            padding: 0 12px;
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>