Refactor ManageListRemote.vue: 使用管理列表的新类更新布局，重构过滤器操作，并增强分页和滚动条的样式。

src/views/course/ManageListRemote.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="manage-list-remote">
     <div class="filter-wrapper">
       <el-form :inline="true" label-width="0" class="filter-form filter-form--primary">
         <div class="filter-fields">
@@ -145,13 +145,18 @@
           </el-button>
         </div>
       </el-form>
-      <el-row :gutter="20" type="flex" justify="end" style="margin-top:10px">
+      <!-- <el-row :gutter="20" type="flex" justify="end" style="margin-top:16px">
         <el-col :span="6" class="filter-extra-actions">
           <el-button icon="el-icon-top" type="primary" @click="handleTopSort">置顶排序</el-button>
           <el-button icon="el-icon-upload2" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
           <el-button class="Create-coures" type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button>
         </el-col>
-      </el-row>
+      </el-row> -->
+      <div class="filter-extra-actions">
+        <el-button icon="el-icon-top" type="primary" @click="handleTopSort">置顶排序</el-button>
+        <el-button icon="el-icon-upload2" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
+        <el-button class="Create-coures" type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button>
+      </div>
     </div>
     <div class="table-wrapper">
       <el-table :data="pageData" border stripe>
@@ -271,13 +276,13 @@
       </el-table>
     </div>
 
-
+    <div class="pagination">
-    <div v-if="pageData.length > 0" style="text-align: center; margin-top:57px">
       <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page="page.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize"
         layout="total, sizes, prev, pager, next, jumper" :total="page.count"></el-pagination>
     </div>
-    <div style="height: 100px;"></div>
+    
+    <!-- <div style="height: 100px;"></div> -->
     <!--邀请审核-->
     <el-dialog custom-class="g-dialog" title="邀请教师审核课程" :visible.sync="inviteTeacher.dlgShow">
       <div style="display: flex;justify-content:flex-start;padding-bottom: 10px;">
@@ -1324,6 +1329,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.manage-list-remote {
+  background-color: #fff;
+  overflow: hidden;
+}
 .sou {
   padding: 0 0 0 0px !important;
 }
@@ -1355,12 +1364,9 @@ export default {
 
 .filter-form .el-form-item {
   margin-right: 10px;
-  margin-bottom: 0px;
+  margin-bottom: 0;
-}
-.teacher-select-wrapper,
-.creator-filter .creator-select {
-  width: 234px;
 }
+
 .teacher-filter {
   ::v-deep .choice {
     width: 100%;
@@ -1382,11 +1388,6 @@ export default {
   align-items: center;
 }
 
-.filter-form--primary .filter-fields .el-form-item,
-.filter-form--advanced .filter-fields .el-form-item {
-  flex: 0 0 234px;
-  width: 234px;
-}
 
 .filter-form--primary .filter-actions {
   margin-left: 20px;
@@ -1412,17 +1413,27 @@ export default {
 
 .filter-extra-actions {
   text-align: right;
-  padding-right: 20px !important;
+  padding-right: 10px;
+}
+::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar{
+  display: block;
 }
-
 .advanced-filter {
   margin-top: 10px;
 }
 
 .learning-time-range .el-date-editor {
-  width: 100%;
+  width: 300px;
+}
+::v-deep .el-pagination {
+  // margin-top: 16px;
+  // padding: 0;
+  // width: 50%;
+}
+.pagination {
+  text-align: center;
+  padding: 40px 0 80px 0;
 }
-
 .course-types {
   display: flex;
   justify-content: center;
@@ -1476,4 +1487,29 @@ export default {
 .el-dialog__body {
   overflow: hidden;
 }
+
+::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: rgb(78, 166, 255);
+}
+
+:global(#app) {
+  overflow: hidden;
+}
+:global(::-webkit-scrollbar) {
+  width: 8px;
+  height: 10px;
+}
+:global(::-webkit-scrollbar-thumb) {
+  border-radius: 3px;
+  background-color: rgb(78, 166, 255);
+}
+::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 10px;
+}
+::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: rgb(78, 166, 255);
+}
 </style>