弹框顶部背景色

src/views/tag/TagManage.vue

@@ -169,14 +169,6 @@
 
             <!-- 操作列 -->
             <template v-else-if="column.key === 'operation'">
-<!--              <a-popconfirm
-                  title="确认解绑该课程？"
-                  ok-text="确认"
-                  cancel-text="取消"
-                  @confirm="unbindCurrentTag(record)"
-              >
-                <a-button type="link" class="unbind-btn">解绑</a-button>
-              </a-popconfirm>-->
               <a-space :key="record.id">
                 <a-button @click="() => handleOper(record)"
                           type="link"
@@ -207,7 +199,7 @@
 
 <script>
 import { reactive, toRefs, ref } from "vue";
-import { message, Tooltip, Popconfirm } from "ant-design-vue";
+import { message, Tooltip } from "ant-design-vue";
 import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
 import moment from "moment";
 import dialog from "@/utils/dialog";
@@ -734,25 +726,10 @@ export default {
     :deep(.ant-table) {
       flex: 1;
 
-      //.ant-table-thead > tr > th {
-      //  background-color: #eff4fc;
-      //  text-align: center !important;
-      //  white-space: nowrap;
-      //}
-      // 关联课程弹框表格标题样式 - 蓝色背景
       .ant-table-thead > tr > th {
-        background-color: #4ea6ff !important;
+        background-color: #eff4fc;
-        color: #fff !important;
+        text-align: center !important;
-        font-weight: 600;
+        white-space: nowrap;
-        border-bottom: 1px solid #f0f0f0;
-
-        &:first-child {
-          border-radius: 8px 0 0 0;
-        }
-
-        &:last-child {
-          border-radius: 0 8px 0 0;
-        }
       }
     }
   }
@@ -793,11 +770,21 @@ export default {
 
     :deep(.ant-table) {
       .ant-table-thead > tr > th {
-        background-color: #f0f7ff;
+        background-color: #4ea6ff !important;
+        color: #fff !important;
         text-align: center !important;
         white-space: nowrap;
         font-weight: 600;
         padding: 16px 8px;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:first-child {
+          border-radius: 8px 0 0 0;
+        }
+
+        &:last-child {
+          border-radius: 0 8px 0 0;
+        }
       }
 
       .ant-table-tbody > tr > td {
@@ -1012,108 +999,104 @@ 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) {
+@media (max-width: 768px) {
-    .course-dialog-content {
+  .course-dialog-content {
-      .course-table {
+    .course-table {
-        :deep(.ant-table) {
+      :deep(.ant-table) {
+        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;
-
-          .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>
@@ -1313,4 +1296,5 @@ export default {
     }
   }
 }
-</style>
+</style>
+