修改

src/App.vue

@@ -12,7 +12,7 @@ export default {
 
 <style>
 @import url('~assets/css/font.css');
-@import url('//at.alicdn.com/t/font_2077629_lvmqshn6xor.css');
+@import url('//at.alicdn.com/t/font_2077629_pdphpdntjxl.css');
 
 html,
 body,

src/pages/course/classManage.vue

@@ -30,9 +30,34 @@
     <div class="page-content">
       <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
         separator="none" title="班级信息" :data="data" :columns="columns" row-key="name">
+        <template v-slot:body-cell-ClassName="props">
+          <q-td auto-width :props="props">
+            <q-avatar size="md" style="background:#d4dfff;color:#2961FE;font-weight:bold;" v-if="props.row.ClassName">
+              {{GetFirst(props.row.ClassName)}}</q-avatar>
+            <span style="color:#2961FE;margin-left:10px;">{{props.row.ClassName}}</span>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-TeacherName="props">
+          <q-td auto-width :props="props">
+            <span style="color:#3FC4FF;">{{props.row.TeacherName}}</span>
+          </q-td>
+        </template>
         <template v-slot:body-cell-ClassPersion="props">
           <q-td auto-width :props="props">
-            预招 {{props.row.ClassPersion}} 当前 {{props.row.OrderStudentCount}}
+            <i class="iconfont icon-ren-" style="color:#2961FE;"></i>预招 <span
+              style="color:#2961FE;">{{props.row.ClassPersion}} </span>
+            <i class="iconfont icon-ren-" style="color:#3FC4FF;margin-left:30px;"></i>当前 <span
+              style="color:#3FC4FF">{{props.row.OrderStudentCount}}</span>
+            <q-linear-progress rounded size="20px"
+              :value="getProgress(props.row.OrderStudentCount,props.row.ClassPersion)" color="warning"
+              class="q-mt-sm" />
+          </q-td>
+        </template>
+        <template v-slot:body-cell-CompleteProgress="props">
+          <q-td auto-width :props="props">
+            已进行{{props.row.CompleteProgress}}%
+            <q-linear-progress rounded size="20px" :value="getProgress2(props.row.CompleteProgress,100)" style="background-color:#EEEEEF;color:#3FC4FF"
+              class="q-mt-sm" />
           </q-td>
         </template>
         <template v-slot:bottom>
@@ -43,7 +68,8 @@
           <q-td :props="props">
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="订单中心"></q-btn>
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="收支明细"></q-btn>
-            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑" @click="EditCourse(props.row)" />
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
+              @click="EditCourse(props.row)" />
           </q-td>
         </template>
       </q-table>
@@ -210,6 +236,24 @@
       //关闭弹窗
       closeClassSaveForm() {
         this.isShowClassForm = false
+      },
+      GetFirst(val) {
+        if (val) {
+          return val.substr(0, 1);
+        }
+      },
+      //获取进度条
+      getProgress(s1, s2) {
+        if (s1 && s2) {
+          return (s1 / s2).toFixed(2);
+        }
+      },
+      //获取进度2
+      getProgress2(num,total) {
+        if (num == 0 || total == 0){
+            return 0;
+        }
+        return (Math.round(num / total * 100) / 100.00);
       }
     }
   }