1

src/components/school/student/student-hetong.vue

 <template>
   <div>
-    <template v-for="(item,index) in contractList">
-      <div :key="index">
-        订单编号:{{item.OrderId}}
-        <br />
-        班级名称:{{item.ClassName}}
-        <br />
-        班级编号:{{item.ClassNo}}
-        <br />
-        总课时:{{item.TotalHours}}
-        <br />
-        完成课时:{{item.CompleteHours}}
-        <br />
-        学员名称:{{item.GuestName}}
-        <br />
-        课程名称:{{item.CourseName}}
-        <br />
-        合同编号:{{item.ContractNo}} {{item.ContractId}}
-        <br />
-
+    <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
+      <div class="TimeLineDiv">
+        <q-timeline color="primary">
+          <q-timeline-entry v-for="(item,index) in contractList" :key="index">
+            <template v-slot:title>
+              <div class="visit_Cont">
+                <div>订单编号:{{item.OrderId}}</div>        
+                <div>班级名称:{{item.ClassName}}</div>
+                <div>班级编号:{{item.ClassNo}}</div>
+                <div>总课时:{{item.TotalHours}}</div>
+                <div>完成课时:{{item.CompleteHours}}</div>
+                <div>学员名称:{{item.GuestName}}</div>
+                <div>课程名称:{{item.CourseName}}</div>
+                <div>合同编号:{{item.ContractNo}} {{item.ContractId}}</div>
+              </div>
+            </template>
+          </q-timeline-entry>
+        </q-timeline>
       </div>
-    </template>
+    </div>
+    <div style="margin:20px 0;">
+      <q-pagination class="full-width justify-end" v-model="customMsg.pageIndex" color="primary" :max="pageCount" input
+        @input="changePage" />
+    </div>
   </div>
 </template>
 <script>

src/components/school/student/student-order.vue

 <template>
   <div>
-    <template v-for="(item,index) in orderList">
-      <div :key="index">
-        订单编号:{{item.OrderId}}
-        <br />
-        班级名称:{{item.ClassName}}
-        <br />
-        班级编号:{{item.ClassNo}}
-        <br />
-        总课时:{{item.TotalHours}}
-        <br />
-        完成课时:{{item.CompleteHours}}
-        <br />
-        学员名称:{{item.GuestName}}
-        <br />
-        课程名称:{{item.CourseName}}
-        <br />
+    <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
+      <div class="TimeLineDiv">
+        <q-timeline color="primary">
+          <q-timeline-entry v-for="(item,index) in orderList" :key="index">
+            <template v-slot:title>
+              <div class="visit_Cont">
+                <div>订单编号:{{item.OrderId}}</div>        
+                <div>班级名称:{{item.ClassName}}</div>
+                <div>班级编号:{{item.ClassNo}}</div>
+                <div>总课时:{{item.TotalHours}}</div>
+                <div>完成课时:{{item.CompleteHours}}</div>
+                <div>学员名称:{{item.GuestName}}</div>
+                <div>课程名称:{{item.CourseName}}</div>
+              </div>
+            </template>
+          </q-timeline-entry>
+        </q-timeline>
       </div>
-    </template>
+    </div>
+    <div style="margin:20px 0;">
+      <q-pagination class="full-width justify-end" v-model="customMsg.pageIndex" color="primary" :max="pageCount" input
+        @input="changePage" />
+    </div>
   </div>
 </template>
 <script>