教师开启直播时，提醒直播配额余额

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     'plugin:vue/essential',
     'plugin:vue/strongly-recommended',
     'plugin:vue/recommended',
+    'plugin:prettier/recommended',
     '@vue/eslint-config-prettier'
   ],
 
@@ -50,6 +51,18 @@ module.exports = {
         }
       }
     ],
+    'vue/html-self-closing': [
+      1,
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always'
+        },
+        svg: 'always',
+        math: 'always'
+      }
+    ],
     'accessor-pairs': 2,
     'arrow-spacing': [
       2,
@@ -266,7 +279,7 @@ module.exports = {
       }
     ],
     'array-bracket-spacing': [2, 'never'],
-    'arrow-parens': [1, 'as-needed'],
+    'arrow-parens': [1, 'always'],
     'computed-property-spacing': [1, 'never'],
     'consistent-return': 0,
     'default-case': 1,

.prettierrc.js

@@ -5,5 +5,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'none',
   endOfLine: 'auto',
-  arrowParens: 'avoid'
+  arrowParens: 'always'
 };

package.json

@@ -17,9 +17,9 @@
     "awe-dnd": "^0.3.4",
     "axios": "^0.27.2",
     "book-ui": "file:../book-ui-0.3.9.tgz",
-    "core-js": "^3.22.8",
-    "dayjs": "^1.11.2",
-    "element-ui": "^2.15.8",
+    "core-js": "^3.23.2",
+    "dayjs": "^1.11.3",
+    "element-ui": "^2.15.9",
     "gcls-book-question-ui": "file:../gcls-book-question-ui-0.1.0.tgz",
     "jquery": "^3.6.0",
     "js-base64": "^3.7.2",
@@ -36,15 +36,15 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.2",
+    "@babel/core": "^7.18.5",
     "@babel/eslint-parser": "^7.18.2",
     "@rushstack/eslint-patch": "^1.1.3",
-    "@vue/cli-plugin-babel": "~4.5.17",
-    "@vue/cli-plugin-eslint": "~4.5.17",
-    "@vue/cli-plugin-router": "~4.5.17",
-    "@vue/cli-plugin-unit-jest": "^4.5.17",
-    "@vue/cli-plugin-vuex": "~4.5.17",
-    "@vue/cli-service": "~4.5.17",
+    "@vue/cli-plugin-babel": "~4.5.18",
+    "@vue/cli-plugin-eslint": "~4.5.18",
+    "@vue/cli-plugin-router": "~4.5.18",
+    "@vue/cli-plugin-unit-jest": "^4.5.18",
+    "@vue/cli-plugin-vuex": "~4.5.18",
+    "@vue/cli-service": "~4.5.18",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^1.3.0",
     "babel-jest": "^27.5.1",
@@ -52,21 +52,21 @@
     "compression-webpack-plugin": "^6.1.1",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^9.1.0",
+    "eslint-plugin-vue": "^9.1.1",
     "html-webpack-plugin": "^5.5.0",
     "postcss": "^8.4.14",
     "postcss-html": "^1.4.1",
-    "prettier": "2.6.2",
-    "sass": "^1.52.1",
+    "prettier": "2.7.1",
+    "sass": "^1.52.3",
     "sass-loader": "^10.2.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
-    "stylelint": "14.8.5",
+    "stylelint": "14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recess-order": "^3.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard-scss": "^4.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
-    "stylelint-webpack-plugin": "^3.1.0",
+    "stylelint-webpack-plugin": "^3.3.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo": "^2.8.0",
     "vue-loader": "^15.9.8",

src/layouts/components/LayoutHeader.vue

@@ -192,7 +192,7 @@ export default {
   justify-content: space-between;
   height: $header-h;
   padding: 0 24px;
-  font-family: 'sourceR';
+  font-family: var(--font-family-common);
   background: #fff;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 15%);
 
@@ -320,6 +320,8 @@ export default {
 
 <style lang="scss">
 .LoginNav {
+  --font-family-common: 'sourceR';
+
   .el-dropdown-menu__item {
     display: flex;
     align-items: center;
@@ -327,7 +329,7 @@ export default {
     line-height: 40px;
 
     > span {
-      font-family: 'sourceR';
+      font-family: var(--font-family-common);
       font-size: 16px;
     }
   }
@@ -346,7 +348,7 @@ export default {
     cursor: pointer;
 
     > span {
-      font-family: 'sourceR';
+      font-family: var(--font-family-common);
       font-size: 16px;
     }
   }
@@ -364,7 +366,7 @@ export default {
     }
 
     > span {
-      font-family: 'sourceR';
+      font-family: var(--font-family-common);
       line-height: 40px;
     }
   }

src/styles/fonts.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'sourceR';
+  src: url('./fonts/D-DIN-Italic.ttf');
+}

src/views/course_details/index.vue

@@ -84,8 +84,8 @@
               <div v-if="!readonly">
                 <span class="price">
                   ¥
-                  <span class="price_1" v-text="changePrice('1', CourseData.price)" />
-                  <span class="price_2" v-text="changePrice('2', CourseData.price)" />
+                  <span class="price_1" v-text="changePrice('1', CourseData.price)"></span>
+                  <span class="price_2" v-text="changePrice('2', CourseData.price)"></span>
                 </span>
                 <button class="get" @click="getPurchase">
                   {{ is_buy ? $t('Key390') : $t('Key391') }}
@@ -120,8 +120,8 @@
                 <div class="operation">
                   <span class="price">
                     ¥
-                    <span class="price_1" v-text="changePrice('1', item.book_price)" />
-                    <span class="price_2" v-text="changePrice('2', item.book_price)" />
+                    <span class="price_1" v-text="changePrice('1', item.book_price)"></span>
+                    <span class="price_2" v-text="changePrice('2', item.book_price)"></span>
                   </span>
                   <button
                     v-if="!readonly"
@@ -149,7 +149,7 @@
                   {{ item.teacher_name }}
                 </p>
                 <p>{{ item.teacher_org_name }}</p>
-                <p />
+                <p></p>
               </div>
             </div>
           </div>
@@ -186,7 +186,7 @@
                     <template v-for="li in courseContentList">
                       <div v-if="item[li.id].length > 0" :key="li.id" class="tasks">
                         <div class="title">
-                          <span class="red-circle" /><span>{{ $t(li.name) }}</span>
+                          <span class="red-circle"></span><span>{{ $t(li.name) }}</span>
                         </div>
                         <div class="content">
                           <el-collapse-item v-for="(it, it_i) in item[li.id]" :key="it_i" :name="it.id">
@@ -281,7 +281,7 @@
       width="720px"
       :before-close="closePayment"
     >
-      <Payment ref="Confirmorder" :order-id="orderId" @judgePayResult="judgePayResult"></Payment>
+      <Payment ref="Confirmorder" :order-id="orderId" @judgePayResult="judgePayResult" />
     </el-dialog>
 
     <preview-course

src/views/live/student/live.js

@@ -51,7 +51,7 @@ function unSubscribeStream(unSubStream) {
  * 初始化监听事件
  */
 export function initListener(vue) {
-  rtc.on('login_success', data => {
+  rtc.on('login_success', (data) => {
     console.log('登录成功', data);
     vue.roomData = data;
     // 初始化画板
@@ -63,7 +63,7 @@ export function initListener(vue) {
     });
   });
 
-  rtc.on('login_failed', data => {
+  rtc.on('login_failed', (data) => {
     console.log('登录失败', data);
     Message({
       message: `${i18n.t('Key443')}：${JSON.stringify(data)}`,
@@ -93,8 +93,8 @@ export function initListener(vue) {
         const device = store.state.app.liveDevice;
         vue.device = data;
 
-        const isVideo = device.video.length > 0 && data.video.some(item => item.deviceId === device.video);
-        const isAudio = device.audio.length > 0 && data.audio.some(item => item.deviceId === device.audio);
+        const isVideo = device.video.length > 0 && data.video.some((item) => item.deviceId === device.video);
+        const isAudio = device.audio.length > 0 && data.audio.some((item) => item.deviceId === device.audio);
 
         if (!isVideo && !isAudio) {
           vue.setDevice();
@@ -110,7 +110,7 @@ export function initListener(vue) {
     });
   });
 
-  rtc.on('conference_join_failed', err => {
+  rtc.on('conference_join_failed', (err) => {
     // 加入房间失败  err为错误原因
     console.log('加入房间失败', err);
     Message({
@@ -120,7 +120,7 @@ export function initListener(vue) {
   });
 
   // 新增订阅流事件
-  rtc.on('allow_sub', tryStream => {
+  rtc.on('allow_sub', (tryStream) => {
     if (tryStream.isMixed()) {
       console.log('是混合流,不订阅');
     } else {
@@ -156,13 +156,13 @@ export function initListener(vue) {
   });
 
   // 房间全量信息事件（人员进出时广播）
-  rtc.on('room_context', roomData => {
+  rtc.on('room_context', (roomData) => {
     vue.roomContext = JSON.parse(roomData);
     vue.getLiveRoomData_DRTD();
     console.log('房间全量信息事件（人员进出时广播）', JSON.parse(roomData));
   });
 
-  rtc.on('publish_stream', str => {
+  rtc.on('publish_stream', (str) => {
     console.log('直播已开启', str);
     Message({
       type: 'success',
@@ -171,7 +171,7 @@ export function initListener(vue) {
     vue.liveStat = true;
   });
 
-  rtc.on('end_stream', str => {
+  rtc.on('end_stream', (str) => {
     console.log('直播已关闭', str);
     Message({
       type: 'success',
@@ -181,17 +181,17 @@ export function initListener(vue) {
   });
 
   // 单个用户配置监听
-  rtc.on('switch_user_settings', settingData => {
+  rtc.on('switch_user_settings', (settingData) => {
     console.log('单个用户配置监听', JSON.parse(settingData));
   });
 
   // 人员列表事件（人员麦序变化时广播）
-  rtc.on('speak_context', speakData => {
+  rtc.on('speak_context', (speakData) => {
     vue.speakData = JSON.parse(speakData);
     console.log('人员列表事件（人员麦序变化时广播）', JSON.parse(speakData));
   });
 
-  rtc.on('switch_settings', data => {
+  rtc.on('switch_settings', (data) => {
     console.log('房间设置事件', JSON.parse(data)); // 房间设置事件
     const { changed, settings } = JSON.parse(data);
     if (changed.includes('allow_chat')) {
@@ -199,19 +199,19 @@ export function initListener(vue) {
     }
   });
 
-  rtc.on('publishStreamErr', data => {
+  rtc.on('publishStreamErr', (data) => {
     console.log(`推流意外终止:${data.streamName}`);
     // 直播开启状态下，尝试重推这条流
     publishStream('picture');
   });
 
   // 网络整体状态事件
-  rtc.on('netStatus', data => {
+  rtc.on('netStatus', (data) => {
     vue.netStatus = data.netStatus;
   });
 
   // 单条流状态通知事件
-  rtc.on('streamStatus', data => {
+  rtc.on('streamStatus', (data) => {
     console.log(data);
   });
 
@@ -220,12 +220,12 @@ export function initListener(vue) {
   });
 
   // 视频无法自动播放
-  rtc.on('playError', data => {
+  rtc.on('playError', (data) => {
     console.log('视频无法自动播放', data);
   });
 
   // 监听通知移除流事件
-  rtc.on('stream_removed', stream => {
+  rtc.on('stream_removed', (stream) => {
     console.log('监听通知移除流事件', stream);
     const streamType = stream.streamType();
     if (streamType === 10 || streamType === 1) {
@@ -235,7 +235,7 @@ export function initListener(vue) {
   });
 
   // 停止订阅流
-  rtc.on('unSub', stream => {
+  rtc.on('unSub', (stream) => {
     console.log('停止订阅流', stream);
     unSubscribeStream(stream);
   });
@@ -245,7 +245,7 @@ export function initListener(vue) {
    */
 
   // 监听自己被邀请事件
-  rtc.on('inviteUp', uid => {
+  rtc.on('inviteUp', (uid) => {
     console.log('监听自己被邀请事件', uid);
     vue.dealStudentConnection(uid, 1, vue.roomInfo.video_mode);
     vue.callLoading = true;
@@ -260,7 +260,7 @@ export function initListener(vue) {
     vue.invite = false;
   });
 
-  rtc.on('videoModeChange', data => {
+  rtc.on('videoModeChange', (data) => {
     console.log('连麦音视频模式更新成功监听回调', data.settings.video_mode);
     vue.roomInfo.video_mode = data.settings.video_mode;
   });
@@ -305,7 +305,7 @@ export function initListener(vue) {
   /**
    * 监听聊天事件
    */
-  rtc.on('chat_message', data => {
+  rtc.on('chat_message', (data) => {
     const dat = JSON.parse(data);
     // 敏感词过滤：如果发送的聊天消息被系统判定包含敏感词，则只有发送者能收到本条消息，房间内其他人都不会收到这条聊天消息。
     // 如果返回消息中有 isFilterChat 字段（消息不包含敏感词返回数据中无isFilterChat字段），且isFilterChat的值为1，则说明该消息包含敏感字，除发送者外其他人不会收到这条消息。
@@ -323,7 +323,7 @@ export function initListener(vue) {
   });
 
   // 接收自定义消息
-  rtc.on('publish_message', data => {
+  rtc.on('publish_message', (data) => {
     // 连接中途下麦
     if (data.type === 'handsDown-load' && data.uid === vue.room_user_id) {
       vue.callLoading = false;
@@ -337,13 +337,13 @@ export function initListener(vue) {
   });
 
   // 文档翻页事件
-  rtc.on('page_change', data => {
+  rtc.on('page_change', (data) => {
     const pageData = JSON.parse(data);
     console.log(pageData);
   });
 
   // 文档变更事件
-  rtc.on('flipMessage', data => {
+  rtc.on('flipMessage', (data) => {
     const action = data.action;
     if (action === 'changeDoc') {
       console.log('changeDoc', data);

src/views/live/teacher/index.vue

@@ -49,7 +49,7 @@
           </div>
         </div>
         <div v-show="connect" class="student-parent">
-          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student" />
+          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student"></div>
           <template v-if="remoteStreamType !== 1">
             <template v-if="roomInfo.video_mode === 1">
               <el-button type="danger" @click="handsDown">
@@ -80,14 +80,14 @@
               :class="['draw-color', item === curColor ? 'current' : '']"
               :style="{ 'background-color': item }"
               @click="drawChange('color', item)"
-            />
+            ></span>
             <span
               v-for="item in drawThicknessList"
               :key="item"
               class="draw-thickness"
               @click="drawChange('thickNess', item)"
             >
-              <span :style="{ width: item * 2 + 'px', height: item * 2 + 'px' }" />
+              <span :style="{ width: item * 2 + 'px', height: item * 2 + 'px' }"></span>
             </span>
             <span class="eraser" @click="drawChange('type', 9)">
               <svg-icon icon-class="back" />
@@ -124,7 +124,7 @@
       <!-- 右侧 -->
       <div class="live-container-right">
         <div class="live-teacher-lens">
-          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false" />
+          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false"></div>
           <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
             <div class="live-wrapper-right">
               <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
@@ -429,7 +429,7 @@ export default {
   mounted() {
     document.addEventListener(
       'click',
-      e => {
+      (e) => {
         let target = e.target;
         let isHasClass = false;
         do {
@@ -518,10 +518,10 @@ export default {
 
     getLiveStat() {
       common.getLiveStat({
-        success: data => {
+        success: (data) => {
           this.liveStat = data.started;
         },
-        fail: str => {
+        fail: (str) => {
           this.liveStat = false;
           console.log('直播关闭状态或查询直播失败', str);
         }
@@ -562,7 +562,7 @@ export default {
           } else {
             common.roomUpdate({
               video_mode: mode,
-              roomUpdateSuccess: data => {
+              roomUpdateSuccess: (data) => {
                 console.log(data, '连麦音视频模式更新请求成功！');
                 this.inviteStudent(uid, student, mode);
               },
@@ -581,7 +581,7 @@ export default {
     inviteStudent(uid, connectStudent, mode) {
       common.invite({
         uid,
-        success: str => {
+        success: (str) => {
           console.log('邀请上麦成功', str);
           this.dealStudentConnection(uid, 1, mode);
           common.sendPublishMessage({
@@ -589,7 +589,7 @@ export default {
             connectStudent
           });
         },
-        fail: data => {
+        fail: (data) => {
           console.log('邀请上麦失败：', data);
           this.callLoading = false;
           this.$message.error(`${this.$i18n.t('Key430')}：${data.errorMsg}`);
@@ -639,7 +639,7 @@ export default {
           this.$message.success(this.$i18n.t('Key431'));
           this.connectStudent = {};
         },
-        fail: data => {
+        fail: (data) => {
           this.callLoading = false;
           this.connect = false;
           console.log('下麦失败', data);
@@ -661,7 +661,7 @@ export default {
             this.$message.success(this.$i18n.t('Key433'));
             this.hasVideo = false;
           },
-          fail: str => {
+          fail: (str) => {
             this.$message.warning(str);
           }
         });
@@ -672,7 +672,7 @@ export default {
             this.$message.success(this.$i18n.t('Key434'));
             this.hasVideo = true;
           },
-          fail: str => {
+          fail: (str) => {
             this.$message.warning(str);
           }
         });
@@ -692,7 +692,7 @@ export default {
             this.$message.success(this.$i18n.t('Key435'));
             this.hasAudio = false;
           },
-          fail: str => {
+          fail: (str) => {
             this.$message.warning(str);
           }
         });
@@ -703,7 +703,7 @@ export default {
             this.$message.success(this.$i18n.t('Key436'));
             this.hasAudio = true;
           },
-          fail: str => {
+          fail: (str) => {
             this.$message.warning(str);
           }
         });
@@ -719,7 +719,7 @@ export default {
     chatBans() {
       common.roomUpdate({
         allow_chat: !this.roomData.allow_chat,
-        roomUpdateSuccess: data => {
+        roomUpdateSuccess: (data) => {
           this.roomData.allow_chat = !this.roomData.allow_chat;
           console.log(data, '房间模板配置更新请求成功！');
         },
@@ -759,7 +759,7 @@ export default {
           success: () => {
             common.createLocalStream(this);
           },
-          fail: str => {
+          fail: (str) => {
             console.log(str);
           }
         });
@@ -861,14 +861,15 @@ export default {
           this.$message.warning('上传文档失败');
         }
       });
+      console.log(uploadObject);
     },
 
     getAllDocument() {
       common.getInstructionAllDocument(
-        data => {
+        (data) => {
           this.docListInfo = data;
         },
-        err => {
+        (err) => {
           console.log(err);
         }
       );

src/views/main/TaskList.vue

@@ -17,14 +17,14 @@
           <span>{{ $t('Key291') }}</span>
           <span class="notice-title-link" @click="goPersonal">
             {{ $t('Key110') }}
-            <i class="el-icon-arrow-right" />
+            <i class="el-icon-arrow-right"></i>
           </span>
         </div>
         <!-- 通知列表 -->
         <div class="notice-container">
           <ul>
             <li v-for="{ id, is_read, content, send_time, source_entity_id, message_type } in message_list" :key="id">
-              <span class="is-read" v-text="is_read === 'false' ? 'new' : ''" />
+              <span class="is-read" v-text="is_read === 'false' ? 'new' : ''"></span>
               <span
                 class="notice-content"
                 :style="{
@@ -236,12 +236,28 @@ export default {
         if (type === 10) {
           CreateEnterLiveRoomSession({
             task_id
-          }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
-            this.$router.push({
-              path: `/live/${userType === 'TEACHER' ? 'teacher' : 'student'}`,
-              query: { live_room_sys_user_id, room_id, session_id, task_id, room_user_id }
-            });
-          });
+          }).then(
+            ({
+              live_room_sys_user_id,
+              room_id,
+              session_id,
+              room_user_id,
+              is_remind_quota_lave_online,
+              quota_lave_online
+            }) => {
+              if (is_remind_quota_lave_online === 'true') {
+                this.$message({
+                  type: 'warning',
+                  message: `直播配额还剩余${quota_lave_online}小时`,
+                  duration: 5000
+                });
+              }
+              this.$router.push({
+                path: `/live/${userType === 'TEACHER' ? 'teacher' : 'student'}`,
+                query: { live_room_sys_user_id, room_id, session_id, task_id, room_user_id }
+              });
+            }
+          );
         } else {
           this.$router.push(`/task_detail/${userType === 'STUDENT' ? 'student' : 'teacher'}/${task_id}`);
         }

src/views/task_details/student/index.vue

@@ -324,7 +324,7 @@ export default {
     },
 
     download(FileID) {
-      FileDownload(FileID).then(data => {
+      FileDownload(FileID).then((data) => {
         console.log(data);
       });
     },
@@ -347,7 +347,7 @@ export default {
       }
 
       const homework_file_id_list = [];
-      this.file_list.forEach(item => {
+      this.file_list.forEach((item) => {
         homework_file_id_list.push(item.file_id);
       });
       FillMyTaskExecuteInfo_Student({

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

@@ -87,7 +87,7 @@ export default {
   },
   methods: {
     addCSItem() {
-      this.$refs.itemForm.validate(valid => {
+      this.$refs.itemForm.validate((valid) => {
         if (!valid) return false;
 
         const data = {

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

@@ -34,7 +34,7 @@
                   <li
                     v-for="({ student_id, student_name, student_image_url }, i) in student_list"
                     :key="student_id"
-                    :class="{ selected: custom_student_list.some(item => item.student_id === student_id) }"
+                    :class="{ selected: custom_student_list.some((item) => item.student_id === student_id) }"
                     @click="selectStudent(i)"
                   >
                     <el-avatar icon="el-icon-user" :src="student_image_url" class="student_image" />
@@ -96,7 +96,7 @@
           <div v-if="form.teaching_type === 10" class="task-template">
             <el-form :model="liveForm" label-width="100px" label-position="left">
               <el-form-item :label="$t('Key312')">
-                <el-button @click="dialogVisible = true"> <i class="el-icon-plus" /> {{ $t('Key373') }} </el-button>
+                <el-button @click="dialogVisible = true"> <i class="el-icon-plus"></i> {{ $t('Key373') }} </el-button>
                 <div>
                   <el-tag
                     v-for="(item, i) in liveForm.coursewareInfo"
@@ -150,7 +150,7 @@
           <div v-else-if="form.teaching_type === 11" class="task-template">
             <el-form :model="courseForm" label-width="100px" label-position="left">
               <el-form-item :label="$t('Key312')">
-                <el-button @click="dialogVisible = true"> <i class="el-icon-plus" /> {{ $t('Key373') }} </el-button>
+                <el-button @click="dialogVisible = true"> <i class="el-icon-plus"></i> {{ $t('Key373') }} </el-button>
                 <div>
                   <el-tag
                     v-for="(item, i) in courseForm.coursewareInfo"
@@ -356,7 +356,7 @@ export default {
     },
 
     addTaskToCSItem() {
-      this.$refs.newTaskForm.validate(valid => {
+      this.$refs.newTaskForm.validate((valid) => {
         if (!valid) {
           return false;
         }

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

@@ -55,10 +55,10 @@
             />
             <div>
               <el-button class="prev-step" @click="prevCourseInfo">
-                <i class="el-icon-back" />{{ $t('Key264') }}
+                <i class="el-icon-back"></i>{{ $t('Key264') }}
               </el-button>
               <el-button type="primary" class="next-step" @click="nextStep">
-                {{ $t('Key262') }}<i class="el-icon-right" />
+                {{ $t('Key262') }}<i class="el-icon-right"></i>
               </el-button>
             </div>
           </div>

src/views/template_details/index.vue

@@ -35,7 +35,7 @@
                   <template v-for="li in courseContentList">
                     <div v-if="item[li.id].length > 0" :key="li.id" class="tasks">
                       <div class="title">
-                        <span class="red-circle" /><span>{{ $t(li.name) }}</span>
+                        <span class="red-circle"></span><span>{{ $t(li.name) }}</span>
                       </div>
                       <div class="content">
                         <el-collapse-item v-for="(it, it_i) in item[li.id]" :key="it_i" :name="it.id">
@@ -129,7 +129,7 @@ export default {
   },
   created() {
     GetCourseInfoBox({ id: this.id })
-      .then(res => {
+      .then((res) => {
         this.CourseData = res;
         this.isData = 'id' in res;
         this.loading = false;