自适应调试其他细节调整

src/views/tag/TagManage.vue

@@ -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,17 +978,20 @@ export default {
   }
 
   .course-dialog-content {
-    min-height: 350px;
+    min-height: 280px;
+
+    .course-dialog-content {
+      min-height: 280px;
 
       .course-table {
-      min-height: 250px;
+        min-height: 180px;
+      }
     }
   }
-}
 
-/* 弹窗在小屏幕下的适配 */
 
-@media (max-width: 768px) {
+  /* 弹窗在小屏幕下的适配 */
+  @media (max-width: 768px) {
     .course-dialog-content {
       .course-table {
         :deep(.ant-table) {
@@ -983,7 +999,7 @@ export default {
 
           .ant-table-thead > tr > th,
           .ant-table-tbody > tr > td {
-          padding: 6px 4px;
+            padding: 10px 4px;
             font-size: 11px;
           }
         }
@@ -1034,10 +1050,10 @@ export default {
       line-height: 1.2;
       max-height: 2.4em;
     }
-}
+  }
 
-/* 高DPI屏幕适配 */
+  /* 高DPI屏幕适配 */
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
     .tagManage {
       font-size: 15px;
 
@@ -1066,6 +1082,7 @@ export default {
     .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>