style：修改路径管理中各管理 考勤 作业详情 导入学员 修改学员管理中调整弹窗 修改项目中排行榜

src/components/drawers/TestManage.vue

@@ -54,7 +54,11 @@
           </div>
         </div>
         <div class="btnss" style="margin-top: 20px">
-          <div class="btn btn1" @click="showopen" style="margin-right: 20px; cursor: pointer">
+          <div
+            class="btn btn1"
+            @click="showopen"
+            style="margin-right: 20px; cursor: pointer"
+          >
             <div class="img2"></div>
             <div class="wz">催促考试</div>
           </div>
@@ -70,10 +74,22 @@
             :data-source="tabledata"
             :loading="tableDataTotal === -1 ? true : false"
             expandRowByClick="true"
-            :scroll="{ x: 900, y: 500 }"
+            :scroll="{ x: 900 }"
             @expand="expandTable"
             :pagination="false"
           />
+          <div class="pa">
+            <a-pagination
+              showSizeChanger="true"
+              showQuickJumper="true"
+              hideOnSinglePage="true"
+              :pageSize="pageSize"
+              :current="currentPage"
+              :total="tableDataTotal"
+              class="pagination"
+              @change="onChange"
+            />
+          </div>
         </div>
       </div>
       <div class="btnn">
@@ -81,16 +97,15 @@
         <button class="btn2">确定</button>
       </div>
       <div class="noticebox" v-show="open">
-        <div><img src="../../assets/images/taskpage/check.png"/></div>
+        <div><img src="../../assets/images/taskpage/check.png" /></div>
         <div class="notext">催促学员成功</div>
       </div>
     </div>
   </a-drawer>
-  
 </template>
 
 <script>
-import { toRefs, reactive, onMounted, onUnmounted} from "vue";
+import { toRefs, reactive, onMounted, onUnmounted } from "vue";
 export default {
   name: "TestManage",
   props: {
@@ -108,6 +123,9 @@ export default {
     const state = reactive({
       name: null,
       open: false,
+      pageSize: 10,
+      currentPage: 1,
+      tableDataTotal: 100,
       projectNameList: [
         {
           id: 1,
@@ -297,16 +315,19 @@ export default {
     const closeDrawer = () => {
       ctx.emit("update:TMvisible", false);
     };
-    const showopen=()=>{
-        state.open = true;
+    const showopen = () => {
+      state.open = true;
+    };
+    const onChange = (pageNumber) => {
+      console.log("Page: ", pageNumber);
     };
     let timer;
-    onMounted(()=> {
-      timer = setInterval(()=>{
+    onMounted(() => {
+      timer = setInterval(() => {
         state.open = false;
-      },3000);
+      }, 3000);
     });
-    onUnmounted(()=>{
+    onUnmounted(() => {
       clearInterval(timer);
     });
     return {
@@ -316,6 +337,7 @@ export default {
       showopen,
       onMounted,
       onUnmounted,
+      onChange,
     };
   },
 };
@@ -339,9 +361,9 @@ export default {
 //作业管理弹窗
 .TestManage {
   .drawerMain {
-    min-width: 600px;
+    min-width: 520px;
     margin: 0px 32px 0px 32px;
-    overflow-x: scroll;
+    // overflow-x: scroll;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -382,7 +404,8 @@ export default {
       width: 100%;
       height: 100%;
       // background-color: #bfa;
-      // overflow-y: auto;
+      overflow-y: auto;
+      padding-right: 10px;
       .endtime {
         font-size: 16px;
         font-weight: 500;
@@ -397,12 +420,14 @@ export default {
 
         .sealeft {
           display: flex;
+          flex-wrap: wrap;
           .namecon {
             display: flex;
             flex-wrap: nowrap;
             margin-bottom: 10px;
             .name {
               margin-top: 8px;
+              white-space: nowrap;
             }
           }
         }
@@ -497,6 +522,23 @@ export default {
           > td {
           background: #f6f9fd;
         }
+        .pa {
+          // left: 0;
+          margin-top: 15px;
+          width: 100%;
+          // height: 20px;
+          // background-color: red;
+          display: flex;
+          justify-content: center;
+          // position: absolute;
+          // bottom: 20px;
+          .ant-pagination-prev,
+          .ant-pagination-next,
+          .ant-pagination-item,
+          .ant-pagination-options {
+            margin-bottom: 10px;
+          }
+        }
       }
     }
 
@@ -509,6 +551,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      background-color: #fff;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
       .btn1 {
         width: 100px;