update 收藏、修改样式问题

src/api/course.js

@@ -467,3 +467,78 @@ export function IsHasEditDestCoursePopedom(data) {
     data
   });
 }
+
+/**
+ * 添加我的收藏
+ * @param {Object} data
+ */
+export function AddMyCollection(data) {
+  let params = getRequestParams('order-collection_manager-AddMyCollection');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}
+
+/**
+ * 删除我的收藏
+ * @param {Object} data
+ */
+export function DeleteMyCollection(data) {
+  let params = getRequestParams('order-collection_manager-DeleteMyCollection');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}
+
+/**
+ * 取消我的物品收藏
+ * @param {Object} data
+ */
+export function CancelMyGoodsCollection(data) {
+  let params = getRequestParams('order-collection_manager-CancelMyGoodsCollection');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}
+
+/**
+ * 得到我的物品收藏信息
+ * @param {Object} data
+ */
+export function GetMyGoodsCollectionInfo(data) {
+  let params = getRequestParams('order-collection_manager-GetMyGoodsCollectionInfo');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}
+
+/**
+ * 检测我的物品收藏状态
+ * @param {Object} data
+ */
+export function CheckMyGoodsCollectionStatus(data) {
+  let params = getRequestParams('order-collection_manager-CheckMyGoodsCollectionStatus');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/components/StepBar.vue

@@ -3,10 +3,7 @@
     <div class="step-container">
       <div v-for="(item, i) in stepList" :key="i">
         <div :class="['step-container-wrapper', { active: i === stepNumber }]">
-          <span
-            :class="['step-number', { completed: i < stepNumber }]"
-            v-text="i < stepNumber ? '√' : i + 1"
-          ></span>
+          <span :class="['step-number', { completed: i < stepNumber }]" v-text="i < stepNumber ? '√' : i + 1"></span>
           <span class="step-name">{{ stepName(i) }}</span>
           <span v-if="i < 2" :class="['step-line', { completed: i < stepNumber }]" />
         </div>
@@ -65,42 +62,42 @@ export default {
   z-index: 9;
   width: 100%;
   height: $step-h;
-  border-top: 1px solid #d9d9d9;
   background-color: #fff;
+  border-top: 1px solid #d9d9d9;
 
   &-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $basicWidth;
     min-width: $basicWidth;
     height: 100%;
     margin: 0 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
     &-wrapper {
       color: #808080;
 
-      & .step-number {
-        border: 1px solid #808080;
+      .step-number {
         padding: 9px 14px;
+        border: 1px solid #808080;
         border-radius: 50%;
 
         &.completed {
-          border-color: $basicColor;
           color: $basicColor;
+          border-color: $basicColor;
         }
       }
 
-      & .step-name {
+      .step-name {
         margin-left: 16px;
       }
 
-      & .step-line {
+      .step-line {
         display: inline-block;
-        vertical-align: middle;
-        margin: 0 24px 0 48px;
         width: 240px;
         height: 1px;
+        margin: 0 24px 0 48px;
+        vertical-align: middle;
         background-color: #d9d9d9;
 
         &.completed {
@@ -111,18 +108,18 @@ export default {
       &.active {
         color: #000;
 
-        & .step-number {
-          border-color: $basicColor;
+        .step-number {
           color: #fff;
           background-color: $basicColor;
+          border-color: $basicColor;
         }
       }
     }
 
     &-name {
-      font-size: 14px;
-      margin-top: 18px;
       padding-left: 54px;
+      margin-top: 18px;
+      font-size: 14px;
       color: #808080;
 
       &.active {

src/icons/svg/collection-solid.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1631526495847" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M292.717 936.427c-16.663 0-33.205-6.69-46.462-16.664-23.232-19.947-36.49-53.152-33.205-83.073l36.489-195.945-139.51-132.82c-23.23-23.23-26.515-59.841-23.23-86.357 9.973-36.489 36.488-59.841 66.409-63.125l192.661-36.49 86.357-185.971c19.948-29.92 46.463-46.463 79.668-46.463 33.205 0 59.842 16.664 76.383 46.463l86.357 185.972 192.662 33.205c29.92 6.69 56.436 29.92 66.41 59.841 9.973 29.921 3.283 59.842-16.664 86.357L774.25 640.745l33.205 195.945c3.284 33.205-6.69 63.126-33.205 83.073-16.663 9.974-29.921 16.664-49.868 16.664-16.664 0-33.205-6.69-36.49-9.974l-175.997-93.047-179.404 89.641c-13.258 9.974-26.515 13.38-39.773 13.38z" p-id="4271" fill="#ff9900"></path><path d="M511.894 139.266c-13.258 0-23.232 6.69-29.921 19.947l-99.615 205.92-219.176 43.178c-19.948 3.284-23.232 16.663-26.516 26.515 0 9.974 0 29.92 9.974 39.895l159.335 152.766-43.179 215.893c-3.284 13.258 3.284 26.515 13.258 36.489 9.973 6.69 23.231 6.69 33.205 0l199.23-103.02 199.228 103.02c3.284 3.284 9.974 3.284 16.664 3.284s13.257 0 19.947-6.69c9.974-6.69 13.258-23.231 13.258-36.489L717.69 617.392l159.457-156.05c6.69-9.974 9.973-23.232 6.69-39.895-3.285-13.258-16.664-23.232-26.516-26.516L638.145 355.16l-99.614-205.92c-3.406-3.283-13.38-9.973-26.637-9.973z" p-id="4272" fill="#ff9900"></path></svg>

src/icons/svg/collection.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1631526251768" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6616" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M292.717 936.427c-16.663 0-33.205-6.69-46.462-16.664-23.232-19.947-36.49-53.152-33.205-83.073l36.489-195.945-139.51-132.82c-23.23-23.23-26.515-59.841-23.23-86.357 9.973-36.489 36.488-59.841 66.409-63.125l192.661-36.49 86.357-185.971c19.948-29.92 46.463-46.463 79.668-46.463 33.205 0 59.842 16.664 76.383 46.463l86.357 185.972 192.662 33.205c29.92 6.69 56.436 29.92 66.41 59.841 9.973 29.921 3.283 59.842-16.664 86.357L774.25 640.745l33.205 195.945c3.284 33.205-6.69 63.126-33.205 83.073-16.663 9.974-29.921 16.664-49.868 16.664-16.664 0-33.205-6.69-36.49-9.974l-175.997-93.047-179.404 89.641c-13.258 9.974-26.515 13.38-39.773 13.38z" p-id="6617" fill="#ffffff"></path><path d="M511.894 139.266c-13.258 0-23.232 6.69-29.921 19.947l-99.615 205.92-219.176 43.178c-19.948 3.284-23.232 16.663-26.516 26.515 0 9.974 0 29.92 9.974 39.895l159.335 152.766-43.179 215.893c-3.284 13.258 3.284 26.515 13.258 36.489 9.973 6.69 23.231 6.69 33.205 0l199.23-103.02 199.228 103.02c3.284 3.284 9.974 3.284 16.664 3.284s13.257 0 19.947-6.69c9.974-6.69 13.258-23.231 13.258-36.489L717.69 617.392l159.457-156.05c6.69-9.974 9.973-23.232 6.69-39.895-3.285-13.258-16.664-23.232-26.516-26.516L638.145 355.16l-99.614-205.92c-3.406-3.283-13.38-9.973-26.637-9.973z" p-id="6618" fill="#ffffff"></path></svg>

src/styles/common.scss

@@ -0,0 +1,14 @@
+// 不换行，显示省略号
+.nowrap-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.t-right {
+  text-align: right;
+}
+
+.tip {
+  color: #aaa;
+}

src/styles/index.scss

@@ -1,6 +1,7 @@
 @import './variables';
 @import './mixin';
 @import './element-ui';
+@import './common';
 
 body {
   -moz-osx-font-smoothing: grayscale;
@@ -62,14 +63,6 @@ div:focus {
   outline: none;
 }
 
-.t-right {
-  text-align: right;
-}
-
-.tip {
-  color: #aaa;
-}
-
 // 课件视频播放样式
 .video-js:hover .vjs-big-play-button {
   background: none;

src/views/course_details/index.vue

@@ -60,6 +60,9 @@
                 <button class="get" @click="getPurchase">
                   {{ is_buy ? '去学习' : '获取课程' }}
                 </button>
+                <span class="collection" @click="addOrDeleteMyCollection">
+                  <svg-icon :icon-class="collection ? 'collection-solid' : 'collection'" />
+                </span>
               </div>
             </div>
           </div>
@@ -210,7 +213,13 @@
 
 <script>
 import Audit from '@/components/payment/Audit';
-import { GetCourseInfoBox, CheckMyGoodsBuyStatus } from '@/api/course';
+import {
+  GetCourseInfoBox,
+  CheckMyGoodsBuyStatus,
+  AddMyCollection,
+  CancelMyGoodsCollection,
+  CheckMyGoodsCollectionStatus
+} from '@/api/course';
 
 export default {
   components: {
@@ -221,12 +230,12 @@ export default {
 
     return {
       goods_id: query.goods_id,
-      goods_type: query.goods_type,
+      goods_type: Number(query.goods_type),
       readonly: 'readonly' in query ? query.readonly : false,
       collection: false,
       openList: [],
       timer: null, // 获取倒计时
-      backTime: new Date(),
+      backTime: 0,
       auditShow: false,
       loading: false,
       is_buy: false,
@@ -242,7 +251,7 @@ export default {
   created() {
     // 获取课程详情
     this.loading = true;
-    CheckMyGoodsBuyStatus({ goods_type: Number(this.goods_type), goods_id: this.goods_id }).then(({ is_buy }) => {
+    CheckMyGoodsBuyStatus({ goods_type: this.goods_type, goods_id: this.goods_id }).then(({ is_buy }) => {
       this.is_buy = is_buy === 'true';
     });
     GetCourseInfoBox({ id: this.goods_id })
@@ -250,6 +259,7 @@ export default {
         this.CourseData = res;
         this.isData = 'id' in res;
         this.getBackTime();
+        this.checkMyGoodsCollectionStatus();
         this.loading = false;
       })
       .catch(() => {
@@ -271,6 +281,15 @@ export default {
         window.location.href = `/GCLS-Book/#/GoodsDetail?goods_id=${book_id}&goods_type=101`;
       }
     },
+
+    checkMyGoodsCollectionStatus() {
+      CheckMyGoodsCollectionStatus({ goods_type: this.goods_type, goods_id: this.CourseData.id }).then(
+        ({ is_collection }) => {
+          this.collection = is_collection === 'true';
+        }
+      );
+    },
+
     // 处理价格
     changePrice(type, item) {
       if (!item) return;
@@ -280,13 +299,35 @@ export default {
           return str.split('.')[0];
         }
         return '.' + str.split('.')[1];
-      } else if (type === 1) {
+      } else if (type === '1') {
         return str;
       }
     },
     // 收藏
-    enshrineEvent() {
-      this.collection = !this.collection;
+    addOrDeleteMyCollection() {
+      if (!this.collection) {
+        let goods_person_name_desc = '';
+        this.CourseData.teacher_list.forEach(item => {
+          goods_person_name_desc += item.teacher_name;
+        });
+
+        AddMyCollection({
+          goods_id: this.goods_id,
+          goods_type: this.goods_type,
+          goods_name: this.CourseData.name,
+          goods_person_name_desc,
+          goods_picture_id: this.CourseData.picture_id,
+          goods_price: this.CourseData.price
+        }).then(() => {
+          this.$message.success('收藏课程成功');
+          this.collection = true;
+        });
+      } else {
+        CancelMyGoodsCollection({ goods_type: this.goods_type, goods_id_list: [this.CourseData.id] }).then(() => {
+          this.$message.success('取消收藏成功');
+          this.collection = false;
+        });
+      }
     },
     // 购买   需要先加入课程 审核 审核通过之后才能购买课程
     getPurchase() {
@@ -309,8 +350,13 @@ export default {
       // 目标时间戳 - 当前时间戳 = 倒计时
       this.timer = setInterval(() => {
         let backTime = targetTime - new Date().getTime();
-        backTime = this.formatduring(backTime);
-        this.backTime = backTime;
+        if (backTime > 0) {
+          backTime = this.formatduring(backTime);
+          this.backTime = backTime;
+        } else {
+          this.backTime = 0;
+          clearInterval(this.timer);
+        }
       }, 1000);
     },
     // 倒计时时间戳转换为 天 小时 分钟 秒
@@ -419,6 +465,7 @@ export default {
             // 倒计时
             .time {
               display: flex;
+              height: 75px;
 
               div {
                 width: 48px;
@@ -465,12 +512,10 @@ export default {
         }
 
         .collection {
-          margin-left: 30px;
-
-          img {
-            width: 24px;
-            cursor: pointer;
-          }
+          margin-left: 24px;
+          font-size: 24px;
+          vertical-align: middle;
+          cursor: pointer;
         }
       }
     }

src/views/live/student/group.vue

@@ -373,7 +373,7 @@ export default {
 
             if (is_has_group_message === 'true') {
               this.$alert(group_message_text, '群消息', {
-                confirmButtonText: '确定'
+                confirmButtonText: '确认'
               });
             }
           }

src/views/live/student/index.vue

@@ -3,10 +3,13 @@
     <!--顶部-->
     <div class="live-top">
       <div class="live-title">
-        <div class="live-title-name">
+        <div
+          class="live-title-name nowrap-ellipsis"
+          :title="`${roomInfo.course_name} - ${roomInfo.cs_item_name} - ${roomInfo.task_name}`"
+        >
           {{ roomInfo.course_name }} - {{ roomInfo.cs_item_name }} - {{ roomInfo.task_name }}
         </div>
-        <div>
+        <div class="live-button-group">
           <el-button @click="exitRoom">退出房间</el-button>
           <el-button @click="setDevice">设置设备</el-button>
         </div>
@@ -550,12 +553,17 @@ $draw-h: 520px;
       justify-content: space-between;
 
       &-name {
+        padding-right: 24px;
         font-size: 22px;
       }
 
-      .el-button {
-        padding: 7px 12px;
-        border-radius: 4px;
+      .live-button-group {
+        min-width: 210px;
+
+        .el-button {
+          padding: 7px 12px;
+          border-radius: 4px;
+        }
       }
     }
   }

src/views/live/teacher/index.vue

@@ -3,10 +3,13 @@
     <!--顶部-->
     <div class="live-top">
       <div class="live-title">
-        <div class="live-title-name">
+        <div
+          class="live-title-name nowrap-ellipsis"
+          :title="`${roomInfo.course_name} - ${roomInfo.cs_item_name} - ${roomInfo.task_name}`"
+        >
           {{ roomInfo.course_name }} - {{ roomInfo.cs_item_name }} - {{ roomInfo.task_name }}
         </div>
-        <div>
+        <div class="live-button-group">
           <el-button v-if="!liveStat" @click="startLive">开启直播</el-button>
           <el-button v-if="liveStat" icon="el-icon-switch-button" @click="closeLiveRoom"> 结束直播 </el-button>
           <el-button v-if="liveStat" @click="reconnection">重连</el-button>
@@ -819,12 +822,17 @@ $draw-h: 520px;
       justify-content: space-between;
 
       &-name {
+        padding-right: 24px;
         font-size: 22px;
       }
 
-      .el-button {
-        padding: 7px 12px;
-        border-radius: 4px;
+      .live-button-group {
+        min-width: 270px;
+
+        .el-button {
+          padding: 7px 12px;
+          border-radius: 4px;
+        }
       }
     }
   }

src/views/task_details/teacher/index.vue

@@ -46,7 +46,7 @@
           </div>
           <div class="title">文档列表</div>
           <div>
-            <el-tag v-for="item in accessory_list" :key="item.file_id" :title="item.file_name">
+            <el-tag v-for="item in accessory_list" :key="item.file_id" color="#fff" :title="item.file_name">
               <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
             </el-tag>
           </div>

src/views/teacher/create_course/step_table/CourseInfo.vue

@@ -20,7 +20,7 @@
             accept="image/*"
           >
             <el-image v-if="form.imageUrl" fit="contain" :src="form.imageUrl" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
         </el-form-item>
 
@@ -41,24 +41,13 @@
 
         <el-form-item label="所属机构" placeholder="点击选择">
           <el-select v-model="form.org_id" class="org-list">
-            <el-option
-              v-for="item in orgList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
+            <el-option v-for="item in orgList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
 
         <el-form-item v-if="!is_template" label="授课教师" class="teacher-tag">
           <el-button class="teacher" icon="el-icon-plus" circle @click="selectTeacher" />
-          <el-tag
-            v-for="(item, i) in user_list"
-            :key="item.id"
-            color="#fff"
-            closable
-            @close="tagClose(item.id, i)"
-          >
+          <el-tag v-for="(item, i) in user_list" :key="item.id" color="#fff" closable @close="tagClose(item.id, i)">
             {{ item.real_name }}
           </el-tag>
         </el-form-item>
@@ -133,7 +122,7 @@ export default {
     return {
       id: query.id,
       is_template: 'is_template' in query ? query.is_template === 'true' : false,
-      is_use_template: 'is_use_template' in query ? query.is_use_template : false,
+      is_use_template: 'is_use_template' in query ? query.is_use_template === 'true' : false,
       template_id: 'template_id' in query ? query.template_id : '',
       form: {
         imageUrl: '',
@@ -247,8 +236,7 @@ export default {
       return isImage;
     },
     upload(file) {
-      fileUpload('Open', file).then(response => {
-        const { file_info_list } = response;
+      fileUpload('Open', file).then(({ file_info_list }) => {
         if (file_info_list.length > 0) {
           const { file_url, file_id } = file_info_list[0];
           this.form.imageUrl = file_url;
@@ -292,7 +280,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@/styles/mixin.scss';
+@import '~@/styles/mixin';
 
 .course-info {
   @include container;
@@ -323,8 +311,8 @@ export default {
       }
 
       .teacher {
-        border-width: 0;
         background-color: $basicColor;
+        border-width: 0;
 
         .el-icon-plus {
           color: #fff;

src/views/teacher/create_course/step_table/CreateTask.vue

@@ -25,7 +25,7 @@
             :class="['task-item-list-title', { selected: item.id === curItemID }]"
             @click="curItemID = item.id"
           >
-            <span>{{ item.name }}</span>
+            <span class="nowrap-ellipsis task-item-name">{{ item.name }}</span>
             <!-- 课节下拉框 -->
             <el-dropdown placement="bottom" trigger="click" @command="handleCSItem">
               <i class="el-icon-more"></i>
@@ -115,11 +115,7 @@
                       <div>
                         <span class="label">课件</span>
                         <div>
-                          <el-tag
-                            v-for="li in item.courseware_list"
-                            :key="li.courseware_id"
-                            color="#fff"
-                          >
+                          <el-tag v-for="li in item.courseware_list" :key="li.courseware_id" color="#fff">
                             {{ li.courseware_name }}
                           </el-tag>
                         </div>
@@ -153,9 +149,7 @@
                   <el-collapse-item>
                     <template slot="title">
                       <div class="card-title">
-                        <div class="name">
-                          {{ itemInfoBox.pre_task_list.length + i + 1 }}. {{ item.name }}
-                        </div>
+                        <div class="name">{{ itemInfoBox.pre_task_list.length + i + 1 }}. {{ item.name }}</div>
                         <div class="info">
                           {{ item.time_space_view_txt }}
                           <el-dropdown placement="bottom" @command="handleTask">
@@ -187,11 +181,7 @@
                       <div>
                         <span class="label">课件</span>
                         <div>
-                          <el-tag
-                            v-for="li in item.courseware_list"
-                            :key="li.courseware_id"
-                            color="#fff"
-                          >
+                          <el-tag v-for="li in item.courseware_list" :key="li.courseware_id" color="#fff">
                             {{ li.courseware_name }}
                           </el-tag>
                         </div>
@@ -226,12 +216,8 @@
                     <template slot="title">
                       <div class="card-title">
                         <div class="name">
-                          {{
-                            itemInfoBox.pre_task_list.length +
-                            itemInfoBox.mid_task_list.length +
-                            i +
-                            1
-                          }}. {{ item.name }}
+                          {{ itemInfoBox.pre_task_list.length + itemInfoBox.mid_task_list.length + i + 1 }}.
+                          {{ item.name }}
                         </div>
                         <div class="info">
                           {{ item.time_space_view_txt }}
@@ -264,11 +250,7 @@
                       <div>
                         <span class="label">课件</span>
                         <div>
-                          <el-tag
-                            v-for="li in item.courseware_list"
-                            :key="li.courseware_id"
-                            color="#fff"
-                          >
+                          <el-tag v-for="li in item.courseware_list" :key="li.courseware_id" color="#fff">
                             {{ li.courseware_name }}
                           </el-tag>
                         </div>
@@ -294,13 +276,7 @@
         <div class="learning-materials">
           <div class="title">学习资料</div>
           <div>
-            <el-upload
-              action="no"
-              :http-request="upload"
-              multiple
-              :show-file-list="false"
-              accept="*"
-            >
+            <el-upload action="no" :http-request="upload" multiple :show-file-list="false" accept="*">
               <el-button><svg-icon icon-class="upload" /> 上传文件</el-button>
             </el-upload>
           </div>
@@ -352,8 +328,7 @@ export default {
     AddItem
   },
   data() {
-    let is_template =
-      'is_template' in this.$route.query ? this.$route.query.is_template === 'true' : false;
+    let is_template = 'is_template' in this.$route.query ? this.$route.query.is_template === 'true' : false;
 
     return {
       id: this.$route.params.id,
@@ -397,18 +372,16 @@ export default {
   },
   methods: {
     getCourseInfo() {
-      GetCourseInfo_ContainCSItem({ id: this.id }).then(
-        ({ name, picture_url, begin_date, end_date, cs_item_list }) => {
-          this.name = name;
-          this.picture_url = picture_url;
-          this.begin_date = begin_date;
-          this.end_date = end_date;
-          this.cs_item_list = cs_item_list;
-          if (cs_item_list.length > 0) {
-            this.curItemID = cs_item_list[cs_item_list.length - 1].id;
-          }
+      GetCourseInfo_ContainCSItem({ id: this.id }).then(({ name, picture_url, begin_date, end_date, cs_item_list }) => {
+        this.name = name;
+        this.picture_url = picture_url;
+        this.begin_date = begin_date;
+        this.end_date = end_date;
+        this.cs_item_list = cs_item_list;
+        if (cs_item_list.length > 0) {
+          this.curItemID = cs_item_list[cs_item_list.length - 1].id;
         }
-      );
+      });
     },
 
     preStep() {
@@ -456,15 +429,7 @@ export default {
 
     getCSItemInfoBox() {
       GetCSItemInfoBox({ id: this.curItemID }).then(
-        ({
-          name,
-          begin_time,
-          end_time,
-          pre_task_list,
-          mid_task_list,
-          after_task_list,
-          learning_material_list
-        }) => {
+        ({ name, begin_time, end_time, pre_task_list, mid_task_list, after_task_list, learning_material_list }) => {
           this.itemInfoBox.name = name;
           this.itemInfoBox.date = [begin_time, end_time];
           this.itemInfoBox.pre_task_list = pre_task_list;
@@ -533,7 +498,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@/styles/mixin.scss';
+@import '~@/styles/mixin';
 
 .task {
   @include container;
@@ -567,9 +532,9 @@ export default {
       }
 
       .date {
-        color: #6b6b6b;
-        font-size: 14px;
         margin-top: 16px;
+        font-size: 14px;
+        color: #6b6b6b;
 
         span {
           margin: 0 24px;
@@ -580,9 +545,9 @@ export default {
 
   // 中间的按钮
   &-button {
-    margin: 16px 0;
     display: flex;
     justify-content: flex-end;
+    margin: 16px 0;
 
     .el-button + .el-button {
       margin-left: 16px;
@@ -610,22 +575,26 @@ export default {
       &-title {
         display: flex;
         justify-content: space-between;
-        padding: 16px 24px;
         height: 56px;
+        padding: 16px 24px;
         line-height: 24px;
-        background-color: #eee;
         cursor: pointer;
+        background-color: #eee;
 
         &.selected {
           background-color: #fff;
         }
+
+        > .task-item-name {
+          width: 275px;
+        }
       }
 
       .create-item {
+        width: calc(100% - 48px);
+        padding: 11px 20px;
         margin: 24px;
         font-size: 16px;
-        padding: 11px 20px;
-        width: calc(100% - 48px);
       }
     }
 
@@ -635,27 +604,30 @@ export default {
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 
       // 学习资料
+      %learning-materials,
       .learning-materials {
         padding: 24px 32px;
 
         .title {
-          font-size: 18px;
-          font-weight: 700;
           margin-bottom: 24px;
+          font: {
+            size: 18px;
+            weight: 700;
+          }
         }
 
         .tag-list {
           margin-top: 6px;
 
           .el-tag {
-            margin-right: 8px;
             margin-top: 6px;
+            margin-right: 8px;
           }
         }
       }
 
       .item-info {
-        @extend .learning-materials;
+        @extend %learning-materials;
 
         border-bottom: 1px solid #d9d9d9;
 
@@ -678,7 +650,7 @@ export default {
 
       // 课节任务
       .item-task {
-        @extend .learning-materials;
+        @extend %learning-materials;
 
         border-bottom: 1px solid #d9d9d9;
 
@@ -688,13 +660,13 @@ export default {
 
         .number-tag {
           display: inline-block;
-          vertical-align: bottom;
-          line-height: 0;
           padding: 12px 9px;
           margin-right: 8px;
           font-size: 12px;
-          background-color: #000;
+          line-height: 0;
           color: #fff;
+          vertical-align: bottom;
+          background-color: #000;
           border-radius: 50%;
         }
 
@@ -705,8 +677,8 @@ export default {
 
           .item-task-list {
             .el-card {
-              border-radius: 8px;
               margin-bottom: 16px;
+              border-radius: 8px;
 
               .card-title {
                 display: flex;
@@ -733,8 +705,8 @@ export default {
 
               .el-collapse-item__content {
                 padding: 15px 24px 9px;
-                background-color: #fff;
                 color: #000;
+                background-color: #fff;
 
                 .task-info > div {
                   display: flex;
@@ -749,12 +721,12 @@ export default {
 
                   .el-tag {
                     max-width: 275px;
-                    border-color: #dbdbdb;
                     margin-right: 16px;
-                    color: #000;
                     overflow: hidden;
+                    color: #000;
                     text-overflow: ellipsis;
                     white-space: nowrap;
+                    border-color: #dbdbdb;
                   }
                 }
               }
@@ -786,9 +758,9 @@ export default {
               }
 
               .el-collapse-item > div:first-child {
+                padding: 10px 20px;
                 background-color: #f9f9f9;
                 border-bottom: 1px solid #e7e7e7;
-                padding: 10px 20px;
               }
             }
           }
@@ -803,9 +775,9 @@ export default {
           }
 
           &-list {
+            padding-left: 19px;
             margin: 16px 9px;
             border-left: 2px solid #4a99ea;
-            padding-left: 19px;
           }
         }
         // 课中任务
@@ -817,9 +789,9 @@ export default {
           }
 
           &-list {
+            padding-left: 19px;
             margin: 16px 9px;
             border-left: 2px solid $basicColor;
-            padding-left: 19px;
           }
         }
         // 课后任务
@@ -831,9 +803,9 @@ export default {
           }
 
           &-list {
+            padding-left: 19px;
             margin: 16px 9px;
             border-left: 2px solid #2ece5b;
-            padding-left: 19px;
           }
         }
       }
@@ -845,10 +817,10 @@ export default {
   padding: 1px;
 
   .dropdown-menu {
-    width: 128px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
+    width: 128px;
   }
 }
 </style>

src/views/teacher/create_course/step_table/SelectBook.vue

@@ -44,9 +44,7 @@
               @current-change="changePage"
             />
             <div>
-              <el-button class="prev-step" @click="prevCourseInfo">
-                <i class="el-icon-back" />课程信息
-              </el-button>
+              <el-button class="prev-step" @click="prevCourseInfo"> <i class="el-icon-back" />课程信息</el-button>
               <el-button type="primary" class="next-step" @click="nextStep">
                 下一步<i class="el-icon-right" />
               </el-button>
@@ -71,8 +69,7 @@ export default {
   data() {
     return {
       id: this.$route.params.id,
-      is_template:
-        'is_template' in this.$route.query ? this.$route.query.is_template === 'true' : false,
+      is_template: 'is_template' in this.$route.query ? this.$route.query.is_template === 'true' : false,
       search: '',
       page_capacity: 14,
       cur_page: 1,
@@ -123,9 +120,7 @@ export default {
       }
     },
     prevCourseInfo() {
-      this.$router.push(
-        `/create_course_step_table/course_info?id=${this.id}&is_template=${this.is_template}`
-      );
+      this.$router.push(`/create_course_step_table/course_info?id=${this.id}&is_template=${this.is_template}`);
     },
     nextStep() {
       this.$router.push({
@@ -137,7 +132,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@/styles/mixin.scss';
+@import '~@/styles/mixin';
 
 .select-book {
   @include container;
@@ -145,17 +140,17 @@ export default {
   margin-top: $step-h;
 
   &-container {
-    background-color: #fff;
     width: $basicWidth;
     min-width: $basicWidth;
     min-height: 674px;
     padding: 24px 32px;
+    background-color: #fff;
     border-radius: 8px;
 
     &-title {
+      padding-bottom: 24px;
       font-size: 20px;
       font-weight: 700;
-      padding-bottom: 24px;
     }
 
     &-table {
@@ -169,8 +164,8 @@ export default {
         }
 
         .buy {
-          color: $basicColor;
           margin-left: 16px;
+          color: $basicColor;
         }
 
         .tip {
@@ -179,15 +174,15 @@ export default {
       }
 
       .book {
-        min-height: calc(100vh - #{$header-h} - #{$step-h} - 224px);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        min-height: calc(100vh - #{$header-h} - #{$step-h} - 224px);
 
         &-list {
           display: flex;
-          justify-content: flex-start;
           flex-wrap: wrap;
+          justify-content: flex-start;
           margin-bottom: 50px;
 
           &-item {
@@ -197,11 +192,11 @@ export default {
             margin-right: 48px;
 
             &-img {
-              border: 1px solid #c4c4c4;
+              position: relative;
               width: 100%;
               height: 160px;
               cursor: pointer;
-              position: relative;
+              border: 1px solid #c4c4c4;
 
               .el-image {
                 width: 100%;
@@ -212,18 +207,18 @@ export default {
                 border: 2px solid $basicColor;
 
                 &::after {
-                  content: '√';
-                  line-height: 30px;
-                  text-align: center;
-                  color: #fff;
+                  position: absolute;
+                  right: 0;
+                  bottom: 0;
                   display: inline-block;
-                  background-color: $basicColor;
                   width: 24px;
                   height: 24px;
+                  line-height: 30px;
+                  color: #fff;
+                  text-align: center;
+                  content: '√';
+                  background-color: $basicColor;
                   border-top-left-radius: 5px;
-                  position: absolute;
-                  bottom: 0;
-                  right: 0;
                 }
               }
             }
@@ -245,8 +240,8 @@ export default {
 
         &-bottom {
           display: flex;
-          justify-content: space-between;
           align-items: flex-end;
+          justify-content: space-between;
 
           .prev-step .el-icon-back {
             margin-right: 12px;