修改 课堂任务页

src/icons/svg/user-solid.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 6.59375C8.59375 6.59375 9.96094 5.16406 9.96094 3.32031C9.96094 1.5 8.58594 0.132812 7 0.132812C5.40625 0.132812 4.03125 1.53125 4.03125 3.33594C4.03906 5.16406 5.39844 6.59375 7 6.59375ZM2.36719 13.4453H11.625C12.8047 13.4453 13.2188 13.1016 13.2188 12.4453C13.2188 10.5391 10.8281 7.91406 6.99219 7.91406C3.16406 7.91406 0.765625 10.5391 0.765625 12.4453C0.765625 13.1016 1.17969 13.4453 2.36719 13.4453Z" fill="#727272"/>
+</svg>

src/utils/validate.js

@@ -0,0 +1,7 @@
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}

src/views/teacher/cs_item_detail/ClassroomTask.vue

@@ -3,34 +3,86 @@
     <span>课堂任务</span>
     <div class="classroom-task">
       <el-timeline>
+        <!--课前任务-->
         <el-timeline-item timestamp="课前任务" color="#F02828" placement="top">
-          <el-card>
-            <h4>更新 Github 模板</h4>
-            <p>王小虎 提交于 2018/4/12 20:46</p>
-          </el-card>
-          <el-card>
-            <h4>更新 Github 模板</h4>
-            <p>王小虎 提交于 2018/4/12 20:46</p>
-          </el-card>
-          <el-card>
-            <h4>更新 Github 模板</h4>
-            <p>王小虎 提交于 2018/4/12 20:46</p>
-          </el-card>
-          <el-card>
-            <h4>更新 Github 模板</h4>
-            <p>王小虎 提交于 2018/4/12 20:46</p>
+          <el-card v-for="(list, i) in preTaskList" :key="i">
+            <el-collapse>
+              <el-collapse-item>
+                <template slot="title">
+                  <el-row class="classroom-task-title">
+                    <el-col :span="4">{{ list.name }}</el-col>
+                    <el-col :span="16" class="title-date">2021-3-23</el-col>
+                    <el-col :span="4"
+                      >已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}</el-col
+                    >
+                  </el-row>
+                </template>
+
+                <el-row>
+                  <el-col :span="24">{{ list.content }}</el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="2">课件：</el-col>
+                  <el-col :span="22">
+                    <el-tag
+                      class="courseware-tag"
+                      v-for="courseware in list.courseware_list"
+                      :key="courseware.id"
+                      type="info"
+                      >{{ courseware.name }}</el-tag
+                    >
+                  </el-col>
+                </el-row>
+
+                <el-row>
+                  <el-col :span="2">附件：</el-col>
+                  <el-col :span="22">
+                    <el-tag
+                      class="accessory-tag"
+                      v-for="(accessory, j) in list.accessory_list"
+                      :key="j"
+                      type="info"
+                    >
+                      <a :href="accessory.file_url" target="_blank">{{ accessory.file_name }}</a>
+                    </el-tag>
+                  </el-col>
+                </el-row>
+                <div>
+                  <span>完成情况：</span>
+                  <el-row>
+                    <el-col :span="20">
+                      <!-- <div class="circle-progress"><span></span></div> -->
+                      <el-progress
+                        type="circle"
+                        :percentage="10"
+                        :stroke-width="2"
+                        :width="36"
+                        color="#1EF581"
+                        :format="format"
+                      >
+                      </el-progress>
+                    </el-col>
+                    <el-col :span="4"
+                      >已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}</el-col
+                    >
+                  </el-row>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
           </el-card>
-          <el-card>
-            <h4>更新 Github 模板</h4>
-            <p>王小虎 提交于 2018/4/12 20:46</p>
+        </el-timeline-item>
+        <!--课中任务-->
+        <el-timeline-item timestamp="课中任务" color="#F02828" placement="top">
+          <el-card v-for="(list, i) in midTaskList" :key="i">
+            <h4>课堂任务</h4>
           </el-card>
-          <el-card>
-            <h4>更新 Github 模板</h4>
-            <p>王小虎 提交于 2018/4/12 20:46</p>
+        </el-timeline-item>
+        <!--课后任务-->
+        <el-timeline-item timestamp="课后任务" color="#F02828" placement="top">
+          <el-card v-for="(list, i) in afterTaskList" :key="i">
+            <h4>课堂任务</h4>
           </el-card>
         </el-timeline-item>
-        <el-timeline-item timestamp="课中任务" color="#F02828" placement="top"> </el-timeline-item>
-        <el-timeline-item timestamp="课后任务" color="#F02828" placement="top"> </el-timeline-item>
       </el-timeline>
     </div>
   </div>
@@ -45,19 +97,43 @@ export default {
       default: () => {
         return [];
       }
+    },
+    midTaskList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    afterTaskList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
     }
   },
-  created() {}
+  methods: {
+    format() {
+      // return '<svg-icon icon-class="user-solid"></svg-icon>';
+    }
+  }
 };
 </script>
 
 <style lang="scss" scope>
+$card-radius: 18px;
+
 .classroom-task-container {
   padding-top: 20px;
   .classroom-task {
     width: 70%;
     margin-top: 17px;
     padding-right: 5px;
+    .classroom-task-title {
+      width: 560px;
+      .title-date {
+        color: #8f8f8f;
+      }
+    }
   }
   .el-timeline {
     .el-timeline-item__timestamp.is-top {
@@ -72,6 +148,54 @@ export default {
     .el-timeline-item__tail {
       top: 12px;
     }
+
+    .el-card,
+    .el-collapse-item__wrap {
+      background-color: #f7f7f7;
+      .el-collapse-item__content {
+        padding: 15px 24px 9px;
+        color: #000;
+        // 课堂任务详情样式
+        .el-row:not(:first-child) .el-col {
+          word-break: break-all;
+          height: 36px;
+          line-height: 36px;
+          margin: 6px 0;
+        }
+        .courseware-tag {
+          background-color: #e0e0e0;
+          color: #000;
+          margin-right: 10px;
+          border-radius: 20px;
+        }
+        .accessory-tag {
+          @extend .courseware-tag;
+        }
+      }
+    }
+
+    .el-card.is-always-shadow,
+    .el-card.is-hover-shadow:focus,
+    .el-card.is-hover-shadow:hover {
+      box-shadow: 0 0;
+      border-radius: $card-radius + 2px;
+    }
+
+    .el-card__body {
+      padding: 0;
+      background-color: #f7f7f7;
+      .el-collapse-item__header {
+        height: 22px;
+        line-height: 22px;
+        background-color: #f0f0f0;
+      }
+
+      .el-collapse-item > div:first-child {
+        background-color: #f0f0f0;
+        padding: 10px 20px;
+        border-radius: $card-radius;
+      }
+    }
   }
 }
 </style>

src/views/teacher/cs_item_detail/index.vue

@@ -25,7 +25,11 @@
         </el-row>
       </div>
     </div>
-    <classroom-task :pre_task_list="pre_task_list" />
+    <classroom-task
+      :pre-task-list="CSItemInfoBox.pre_task_list"
+      :mid-task-list="CSItemInfoBox.mid_task_list"
+      :after-task-list="CSItemInfoBox.after_task_list"
+    />
   </div>
 </template>
 

src/views/teacher/main/CurriculaManager.vue

@@ -1,165 +1,160 @@
 <template>
-<div class="curricula-manager">
-  <div class="curricula-manager-header">
- <el-button>搜索</el-button>
-  </div>
-  <div class="curricula-manager-body">
-    <el-button class="bgcolor"  @click="taskstatus()">进行中</el-button>
-    <el-button class="bgcolor"  @click="taskstatus()">待开始</el-button>
-    <el-button class="bgcolor"  @click="taskstatus()">已结束</el-button>
-  </div>
-  <div class="curricula-manager-body1">
+  <div class="curricula-manager">
+    <div class="curricula-manager-header">
+      <el-button>搜索</el-button>
+    </div>
+    <div class="curricula-manager-body">
+      <el-button class="bgcolor" @click="taskstatus()">进行中</el-button>
+      <el-button class="bgcolor" @click="taskstatus()">待开始</el-button>
+      <el-button class="bgcolor" @click="taskstatus()">已结束</el-button>
+    </div>
+    <div class="curricula-manager-body1">
       <div class="paixu">
         <span>排序:</span>
 
-     <div class="sortBtn" style="display: flex;">创建时间
-         <i class="el-icon-sort"></i>
-     </div>
+        <div class="sortBtn" style="display: flex">
+          创建时间
+          <i class="el-icon-sort"></i>
+        </div>
 
-      <div class="sortBtn" style="display: flex;">编辑时间
-         <i class="el-icon-sort"></i>
-      </div>
+        <div class="sortBtn" style="display: flex">
+          编辑时间
+          <i class="el-icon-sort"></i>
+        </div>
 
-      <div class="sortBtn" style="display: flex;">开课时间
-         <i class="el-icon-sort"></i>
+        <div class="sortBtn" style="display: flex">
+          开课时间
+          <i class="el-icon-sort"></i>
+        </div>
       </div>
-   </div>
     </div>
-    <div class="curricula-manager-body2" style="margin-left: 850px;">
-    <el-button class="bgcolor">新建课程</el-button>
+    <div class="curricula-manager-body2" style="margin-left: 850px">
+      <el-button class="bgcolor">新建课程</el-button>
     </div>
 
-    <div class="div1" style="max-height: 700px; overflow: scroll;">
-    <div v-for="item in obj" :key="item.id" class="xunhuan">
-    <div class="curricula-manager-foot">
-    <span>{{item.subject}}</span>
-    <span>{{item.status}}</span>
-    </div>
-    <div class="curricula-manager-foot1" style="padding: 20px 0 0 0;">
-    <span>{{item.createtime}}</span>
-    <span style="margin-left: 10px;">{{item.onclasstime}}</span>
-    <span style="margin-left: 10px;">{{item.teacher}}</span>
-    </div>
-    </div>
+    <div class="div1" style="max-height: 700px; overflow: scroll">
+      <div v-for="item in obj" :key="item.id" class="xunhuan">
+        <div class="curricula-manager-foot">
+          <span>{{ item.subject }}</span>
+          <span>{{ item.status }}</span>
+        </div>
+        <div class="curricula-manager-foot1" style="padding: 20px 0 0 0">
+          <span>{{ item.createtime }}</span>
+          <span style="margin-left: 10px">{{ item.onclasstime }}</span>
+          <span style="margin-left: 10px">{{ item.teacher }}</span>
+        </div>
+      </div>
     </div>
- </div>
+  </div>
 </template>
 
 <script>
-
-const obj={order:false}
-console.log(obj)
 export default {
   name: 'CurriculaManager',
-  data(){
-    return{
-       ifShow:null,
-       obj: [
-                    {
-                     subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/28',
-                     onclasstime:'2021/4/25',
-                     teacher:'张一三',
-                     status:"进行中"
-                    },
-                    {
-                     subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/12',
-                     onclasstime:'2021/4/23',
-                     teacher:'张一三',
-                     status:"进行中"
-                    },
-                    {
-                     subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/22',
-                     onclasstime:'2021/4/17',
-                     teacher:'张一三',
-                     status:"进行中"
-                    },
-                    {
-                    subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/2',
-                     onclasstime:'2021/4/28',
-                     teacher:'张一三',
-                     status:"报名中"
-                    },
-                    {
-                     subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/6',
-                     onclasstime:'2021/4/1',
-                     teacher:'张一三',
-                     status:"报名中"
-                    },
-                     {
-                     subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/19',
-                     onclasstime:'2021/4/9',
-                     teacher:'张一三',
-                     status:"报名中"
-                    },
-                     {
-                     subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/16',
-                     onclasstime:'2021/4/25',
-                     teacher:'张一三',
-                     status:"报名中"
-                    },
-                     {
-                     subject:'中文 轻松学中文初段 暑假 0813',
-                     createtime:'2021/3/21',
-                     onclasstime:'2021/4/11',
-                     teacher:'张一三',
-                     status:"已结束"
-                    },
-                ],
-              sortType: null,                 // 数组对象中的哪一个属性进行排序
-               order: false,                   // 升序还是降序
-
-    }
-
+  data() {
+    return {
+      ifShow: null,
+      obj: [
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/28',
+          onclasstime: '2021/4/25',
+          teacher: '张一三',
+          status: '进行中'
+        },
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/12',
+          onclasstime: '2021/4/23',
+          teacher: '张一三',
+          status: '进行中'
+        },
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/22',
+          onclasstime: '2021/4/17',
+          teacher: '张一三',
+          status: '进行中'
+        },
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/2',
+          onclasstime: '2021/4/28',
+          teacher: '张一三',
+          status: '报名中'
+        },
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/6',
+          onclasstime: '2021/4/1',
+          teacher: '张一三',
+          status: '报名中'
+        },
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/19',
+          onclasstime: '2021/4/9',
+          teacher: '张一三',
+          status: '报名中'
+        },
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/16',
+          onclasstime: '2021/4/25',
+          teacher: '张一三',
+          status: '报名中'
+        },
+        {
+          subject: '中文 轻松学中文初段 暑假 0813',
+          createtime: '2021/3/21',
+          onclasstime: '2021/4/11',
+          teacher: '张一三',
+          status: '已结束'
+        }
+      ],
+      sortType: null, // 数组对象中的哪一个属性进行排序
+      order: false // 升序还是降序
+    };
   },
   // mounted() {
   //       jinxing().then(response => {
   //       console.log(456)
   //   });
   // },
-  methods:{
-      taskstatus() {
-              console.log(123)
-      },     
-      
- 
+  methods: {
+    taskstatus() {
+      console.log(123);
+    }
 
-      // sort(type) {                          // 排序
-      //           this.order = !this.order;		// 更改为 升序或降序
-      //           this.sortType = type;
-      //           this.obj.sort(this.compare(type));
-      //   },
-        // 调用下面 compare 方法 并传值
-        // compare(attr) {                  // 排序方法
-        //         let that = this;
-        //         return function(a,b){
-        //                 let val1 = a[attr];
-        //                 let val2 = b[attr];
+    // sort(type) {                          // 排序
+    //           this.order = !this.order;		// 更改为 升序或降序
+    //           this.sortType = type;
+    //           this.obj.sort(this.compare(type));
+    //   },
+    // 调用下面 compare 方法 并传值
+    // compare(attr) {                  // 排序方法
+    //         let that = this;
+    //         return function(a,b){
+    //                 let val1 = a[attr];
+    //                 let val2 = b[attr];
 
-        //                 if(that.order){
-        //                         if(that.sortType == 'createtime'){            // 如果是时间就转换成时间格式
-        //                                 return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));
-        //                         }else{
-        //                                 return val2 - val1;
-        //                         }
+    //                 if(that.order){
+    //                         if(that.sortType == 'createtime'){            // 如果是时间就转换成时间格式
+    //                                 return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));
+    //                         }else{
+    //                                 return val2 - val1;
+    //                         }
 
-        //                 }else{
-        //                         if(that.sortType == 'createtime'){
-        //                                 return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));
-        //                         }else{
-        //                                 return val1 - val2;
-        //                         }
-        //                 }
-                        
-        //         }
-        // }
+    //                 }else{
+    //                         if(that.sortType == 'createtime'){
+    //                                 return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));
+    //                         }else{
+    //                                 return val1 - val2;
+    //                         }
+    //                 }
 
+    //         }
+    // }
   }
 };
 </script>
@@ -221,4 +216,3 @@ export default {
   padding-left: 20px;
 }
 </style>
-

stylelint.config.js

@@ -19,7 +19,7 @@ module.exports = {
     // 可组合成一个属性的写法，不允许拆开书写
     'declaration-block-no-redundant-longhand-properties': true,
     // 选择器最大深度为4
-    'selector-max-compound-selectors': 4,
+    'selector-max-compound-selectors': 6,
     // 限制 id选择器的数目在一个选择器中
     'selector-max-id': 1,
     // 最多2个类型选择器