自适应调试

src/views/tag/TagManage.vue

@@ -109,23 +109,14 @@
     <!-- 标签关联课程弹窗 -->
     <a-modal
         v-model:visible="courseDialogVisible"
-        :title="null"
+        title="关联课程"
         :footer="null"
         :closable="true"
-        wrapClassName="courseDialog"
+        wrapClassName="course-dialog"
         width="90%"
         :style="{ maxWidth: '1100px' }"
     >
-      <div class="modalHeader">
+      <div class="course-dialog-content">
-        <div class="headerLeft">
-          <span class="headerLeftText">关联课程</span>
-        </div>
-        <div class="close-btn" @click="closeCourseDialog">
-          <CloseOutlined />
-        </div>
-      </div>
-
-      <div class="modalMain">
         <a-table
             :columns="courseColumns"
             :data-source="courseTableData"
@@ -134,6 +125,7 @@
             :scroll="{ x: 'max-content' }"
             rowKey="id"
             @change="handleRelTableChange"
+            class="course-table"
         >
           <template #bodyCell="{ record, column }">
             <!-- 关联时间格式化 -->
@@ -142,13 +134,12 @@
             </template>
             <!-- 操作列 -->
             <template v-else-if="column.key === 'operation'">
-              <a-button type="link" @click="unbindCurrentTag(record)">解绑</a-button>
+              <a-button type="link" @click="unbindCurrentTag(record)" class="unbind-btn">解绑</a-button>
             </template>
           </template>
         </a-table>
 
-        <div class="tableBox">
+        <div class="course-pagination">
-          <div class="pa">
           <a-pagination
               v-if="courseTableTotal > 5"
               :showSizeChanger="false"
@@ -157,12 +148,10 @@
               :pageSize="coursePageSize"
               v-model:current="courseSearchParam.pageNo"
               :total="courseTableTotal"
-                class="pagination"
               @change="changeCoursePagination"
           />
         </div>
       </div>
-      </div>
     </a-modal>
   </div>
 </template>
@@ -170,15 +159,11 @@
 <script>
 import { reactive, toRefs, ref } from "vue";
 import { message } from "ant-design-vue";
-import { CloseOutlined } from '@ant-design/icons-vue';
 import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
 import moment from "moment";
 
 export default {
   name: "TagManage",
-  components: {
-    CloseOutlined
-  },
   setup() {
     const state = reactive({
       tableLoading: false,
@@ -227,7 +212,7 @@ export default {
         title: "已关联课程",
         dataIndex: "useCount",
         key: "useCount",
-        width: 120,
+        width: 150,
         align: "center",
         sorter: true
       },
@@ -281,7 +266,7 @@ export default {
       {
         title: "序号",
         key: "index",
-        width: 60,
+        width: 80,
         align: "center",
         customRender: ({ index }) => index + 1
       },
@@ -289,7 +274,7 @@ export default {
         title: "关联课程名称",
         dataIndex: "courseName",
         key: "courseName",
-        width: 150,
+        width: 200,
         align: "center",
         ellipsis: true
       },
@@ -297,14 +282,14 @@ export default {
         title: "关联课程ID",
         dataIndex: "courseId",
         key: "courseId",
-        width: 80,
+        width: 120,
         align: "center"
       },
       {
         title: "关联人",
         dataIndex: "sysCreateBy",
         key: "sysCreateBy",
-        width: 100,
+        width: 120,
         align: "center",
         ellipsis: true
       },
@@ -312,7 +297,7 @@ export default {
         title: "关联时间",
         dataIndex: "sysCreateTime",
         key: "sysCreateTime",
-        width: 120,
+        width: 150,
         align: "center",
         sorter: true
       },
@@ -320,15 +305,16 @@ export default {
         title: "本课程绑定的其他标签",
         dataIndex: "otherTags",
         key: "otherTags",
-        width: 180,
+        width: 200,
         align: "center",
         ellipsis: true
       },
       {
         title: "操作",
         key: "operation",
-        width: 80,
+        width: 100,
-        align: "center"
+        align: "center",
+        fixed: 'right'
       }
     ]);
 
@@ -718,45 +704,44 @@ export default {
   }
 }
 
-.courseDialog {
+// 关联课程弹窗样式
-  :deep(.ant-modal) {
+.course-dialog-content {
-    max-width: 95vw;
-
-    .ant-modal-body {
-      padding: 0;
-
-      .modalHeader {
   width: 100%;
-        height: 68px;
+  min-height: 400px;
   display: flex;
-        align-items: center;
+  flex-direction: column;
-        justify-content: space-between;
-        background: linear-gradient(0deg, rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100%);
-        padding: 0 32px;
 
-        .headerLeftText {
+  .course-table {
-          font-size: 16px;
+    flex: 1;
-          font-weight: 500;
+    min-height: 300px;
+
+    :deep(.ant-table) {
+      .ant-table-thead > tr > th {
+        background-color: #f0f7ff;
+        text-align: center !important;
+        white-space: nowrap;
+        font-weight: 600;
       }
 
-        .close-btn {
+      .ant-table-tbody > tr > td {
-          cursor: pointer;
+        text-align: center;
-          font-size: 16px;
+        white-space: nowrap;
-          color: #666;
+      }
+    }
+  }
+
+  .course-pagination {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+  }
+
+  .unbind-btn {
+    color: #ff4d4f;
 
     &:hover {
-            color: #333;
+      color: #ff7875;
-          }
-        }
-      }
-
-      .modalMain {
-        padding: 20px;
-
-        .tableBox {
-          margin: 20px 0 0 0;
-        }
-      }
     }
   }
 }
@@ -775,6 +760,14 @@ export default {
       }
     }
   }
+
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 13px;
+      }
+    }
+  }
 }
 
 @media (max-width: 1400px) {
@@ -802,6 +795,22 @@ export default {
       padding: 0 1%;
     }
   }
+
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 12px;
+
+        .ant-table-thead > tr > th {
+          padding: 8px;
+        }
+
+        .ant-table-tbody > tr > td {
+          padding: 8px;
+        }
+      }
+    }
+  }
 }
 
 @media (max-width: 1280px) {
@@ -822,6 +831,47 @@ export default {
       }
     }
   }
+
+  .course-dialog-content {
+    min-height: 350px;
+
+    .course-table {
+      min-height: 250px;
+    }
+  }
+}
+
+/* 弹窗在小屏幕下的适配 */
+@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;
+        }
+      }
+    }
+
+    .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;
+        }
+      }
+    }
+  }
 }
 
 /* 高DPI屏幕适配 */
@@ -839,5 +889,67 @@ export default {
       }
     }
   }
+
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+// 全局弹窗样式调整
+.course-dialog {
+  .ant-modal {
+    top: 50px !important;
+
+    .ant-modal-content {
+      border-radius: 12px;
+      overflow: hidden;
+
+      .ant-modal-header {
+        background: linear-gradient(0deg, rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100%);
+        border-bottom: 1px solid #e8f4ff;
+        padding: 16px 24px;
+
+        .ant-modal-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #1890ff;
+        }
+      }
+
+      .ant-modal-body {
+        padding: 20px 24px;
+        max-height: 70vh;
+        overflow-y: auto;
+      }
+
+      .ant-modal-close {
+        top: 12px;
+        right: 12px;
+
+        .ant-modal-close-x {
+          width: 44px;
+          height: 44px;
+          line-height: 44px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .ant-modal {
+      .ant-modal-content {
+        .ant-modal-body {
+          padding: 16px;
+          max-height: 60vh;
+        }
+      }
+    }
+  }
 }
 </style>