update

.eslintrc.js

@@ -5,65 +5,44 @@ module.exports = {
   // 为什么是这样的parser配置？https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
   parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
-
-  env: {
-    node: true,
-    browser: true,
-    es6: true
+    parser: '@babel/eslint-parser',
+    sourceType: 'module',
+    ecmaVersion: 7,
+    ecmaFeatures: {
+      impliedStrict: true
+    }
   },
 
   globals: {
-    // 直播SDK
     Rtc: true
   },
 
-  extends: [
-    'plugin:vue/essential',
-    'plugin:vue/strongly-recommended',
-    'plugin:vue/recommended',
-    'eslint:recommended',
-    '@vue/prettier'
-  ],
+  env: {
+    node: true,
+    browser: true
+  },
+
+  extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:vue/strongly-recommended', 'plugin:vue/recommended'],
 
   plugins: [
     // 注意这里不能配置 html 选项，为什么？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
-    'vue'
+    'vue',
+    'prettier'
   ],
 
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'prettier/prettier': [
-      'error',
-      {
-        tabWidth: 2,
-        useTabs: false,
-        semi: true,
-        singleQuote: true,
-        trailingComma: 'none',
-        endOfLine: 'auto',
-        bracketSpacing: true,
-        arrowParens: 'avoid',
-        printWidth: 120
-      }
-    ],
+    'vue/singleline-html-element-content-newline': 0,
     'vue/max-attributes-per-line': [
       2,
       {
-        singleline: 10,
+        singleline: 8,
         multiline: {
-          max: 1,
-          allowFirstLine: false
+          max: 1
         }
       }
     ],
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/multiline-html-element-content-newline': 'off',
-    'vue/name-property-casing': ['error', 'PascalCase'],
-    'vue/no-v-html': 'off',
     'accessor-pairs': 2,
     'arrow-spacing': [
       2,
@@ -284,12 +263,6 @@ module.exports = {
     'computed-property-spacing': [1, 'never'],
     'consistent-return': 0,
     'default-case': 1,
-    'dot-notation': [
-      0,
-      {
-        allowKeywords: true
-      }
-    ],
     'func-names': 1,
     'func-style': [0, 'declaration'],
     'guard-for-in': 0,

.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'none',
+  endOfLine: 'auto',
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  printWidth: 120
+};

package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "ailp-book-question-ui": "file:../ailp-book-question-ui-0.1.1.tgz",
     "awe-dnd": "^0.3.4",
-    "axios": "^0.23.0",
+    "axios": "^0.24.0",
     "book-ui": "file:../book-ui-0.1.19.tgz",
-    "core-js": "^3.18.3",
+    "core-js": "^3.19.1",
     "element-ui": "^2.15.6",
     "gcls-book-question-ui": "file:../gcls-book-question-ui-0.1.0.tgz",
     "jquery": "^3.6.0",
@@ -28,43 +28,45 @@
     "vue": "^2.6.14",
     "vue-i18n": "^8.24.0",
     "vue-pdf": "^4.3.0",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.3",
     "vue-video-player": "^5.0.2",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@vue/cli-plugin-babel": "~4.5.14",
-    "@vue/cli-plugin-eslint": "~4.5.14",
-    "@vue/cli-plugin-router": "~4.5.14",
-    "@vue/cli-plugin-unit-jest": "^4.5.14",
-    "@vue/cli-plugin-vuex": "~4.5.14",
-    "@vue/cli-service": "~4.5.14",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.1.4",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/preset-env": "^7.16.0",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-unit-jest": "^4.5.15",
+    "@vue/cli-plugin-vuex": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "@vue/test-utils": "^1.2.2",
+    "babel-jest": "^27.3.1",
+    "babel-loader": "^8.2.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "compression-webpack-plugin": "^6.1.1",
-    "eslint": "^7.24.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.8.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^7.20.0",
     "html-webpack-plugin": "^5.3.1",
-    "prettier": "2.2.1",
-    "sass": "^1.32.8",
-    "sass-loader": "^10.1.1",
+    "prettier": "2.4.1",
+    "sass": "^1.43.4",
+    "sass-loader": "^10.2.0",
     "script-ext-html-webpack-plugin": "^2.1.5",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recess-order": "^2.5.0",
-    "stylelint-config-sass-guidelines": "^8.0.0",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint": "^14.0.1",
+    "postcss": "^8.3.11",
+    "postcss-html": "^1.2.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recess-order": "^2.6.0",
+    "stylelint-config-recommended-vue": "^1.0.0",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-config-standard-scss": "^2.0.1",
     "stylelint-declaration-block-no-ignored-properties": "^2.4.0",
-    "stylelint-scss": "^3.21.0",
-    "stylelint-webpack-plugin": "^2.1.1",
-    "svg-sprite-loader": "^6.0.10",
-    "svgo": "^2.7.0",
+    "stylelint-webpack-plugin": "^3.1.0",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo": "^2.8.0",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14"
   },

src/common/progress_bar/index.vue

@@ -24,7 +24,7 @@ export default {
   bottom: 0;
   left: 0;
   z-index: 3001;
-  background-color: hsla(0, 0%, 100%, 0.9);
+  background-color: hsla(0deg, 0%, 100%, 90%);
   transition: opacity 0.3s;
 
   &-bar {

src/common/show_file/index.vue

@@ -13,11 +13,11 @@
     </template>
 
     <div v-else-if="fileType === 'mp3'" class="audio-file">
-      <audio :src="fileUrl" controls></audio>
+      <audio :src="fileUrl" controls />
     </div>
 
     <div v-else-if="fileType === 'mp4'" class="video-file">
-      <video :src="fileUrl" controls></video>
+      <video :src="fileUrl" controls />
     </div>
 
     <div v-else-if="fileType === 'txt'" class="text-file">

src/components/StepBar.vue

@@ -3,7 +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 class="step-name">{{ stepName(i) }}</span>
           <span v-if="i < 2" :class="['step-line', { completed: i < stepNumber }]" />
         </div>

src/components/course/CompletionView.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog :visible="dialogVisible" :width="dialogWidth" @close="dialogClose">
     <div class="completion">
-      <img src="../../assets/course_details/courseware.png" />
+      <img src="../../assets/course_details/courseware.png">
       <div class="completion-info">
         <div>{{ material_name }}</div>
         <div>
@@ -29,7 +29,7 @@
       <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
     </template>
 
-    <div slot="footer"></div>
+    <div slot="footer" />
   </el-dialog>
 </template>
 

src/components/live/SelectMaterial.vue

@@ -13,7 +13,7 @@
         <div class="material-info">
           <div class="material-info-name">{{ item.material_name }}</div>
           <div class="material-info-push">
-            <div></div>
+            <div />
             <el-button type="primary" @click="sendMaterial(item.material_id, item.material_type)">
               <svg-icon icon-class="push" />
             </el-button>
@@ -21,7 +21,7 @@
         </div>
       </div>
 
-      <div slot="footer"></div>
+      <div slot="footer" />
     </el-dialog>
   </div>
 </template>
@@ -73,6 +73,7 @@ export default {
 
 <style lang="scss">
 @import '~@/styles/mixin';
+
 $list-h: 120px;
 
 .select-material {

src/components/payment/Audit.vue

@@ -33,7 +33,7 @@
     </div>
     <div class="submitBtn">
       <div class="text">
-        <img src="../../assets/course_details/auditimg.png" alt="" />
+        <img src="../../assets/course_details/auditimg.png" alt="">
         参加本课程学习需提交申请，审核通过后完成付款即可参加学习。
       </div>
       <button @click="buy">提交申请</button>
@@ -89,7 +89,7 @@ export default {
     display: flex;
     width: 656px;
     height: 152px;
-    background: rgba(70, 70, 70, 0.03);
+    background: rgba(70, 70, 70, 3%);
     border-radius: 8px;
 
     .el-image {
@@ -103,7 +103,7 @@ export default {
       margin-left: 24px;
 
       .p1 {
-        display: -webkit-box;
+        display: box;
         width: 360px;
         max-height: 48px;
         margin-top: 22px;
@@ -114,6 +114,7 @@ export default {
         text-overflow: ellipsis;
         word-break: break-all;
         -webkit-line-clamp: 2;
+
         // 多行文本的情况下，用省略号 “...” 隐藏超出范围的文本
         -webkit-box-orient: vertical;
       }
@@ -160,8 +161,8 @@ export default {
     height: 58px;
     margin-top: 24px;
     line-height: 56px;
-    border-top: 1px solid rgba(44, 44, 44, 0.15);
-    border-bottom: 1px solid rgba(44, 44, 44, 0.15);
+    border-top: 1px solid rgba(44, 44, 44, 15%);
+    border-bottom: 1px solid rgba(44, 44, 44, 15%);
 
     .sp1 {
       font-size: 16px;
@@ -193,7 +194,7 @@ export default {
 
     .useCode {
       font-size: 12px;
-      color: rgba(0, 0, 0, 0.5);
+      color: rgba(0, 0, 0, 50%);
     }
 
     > p {

src/layouts/components/LayoutHeader.vue

@@ -20,7 +20,7 @@
               <span class="el-dropdown-link" :style="{ color: activeIndex === '2' ? '#F90' : '#000' }">
                 {{ projectName }}
                 <!-- SYSTEM -->
-                <i class="el-icon-arrow-down el-icon--right"></i>
+                <i class="el-icon-arrow-down el-icon--right" />
               </span>
               <el-dropdown-menu slot="dropdown" style="min-width: 278px">
                 <el-dropdown-item
@@ -30,7 +30,7 @@
                   :command="i"
                   class="projectList"
                 >
-                  <img style="position: relative; width: 24px" :src="item.icon_url_memu_default" alt="" />
+                  <img style="position: relative; width: 24px" :src="item.icon_url_memu_default" alt="">
                   <span style="margin-left: 16px">
                     {{ item.name }}
                   </span>
@@ -44,7 +44,7 @@
     </div>
     <div class="userName">
       <el-dropdown style="margin-right: 16px" trigger="click" @command="changeLang">
-        <span class="el-dropdown-link"> {{ lang }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
+        <span class="el-dropdown-link"> {{ lang }}<i class="el-icon-arrow-down el-icon--right" /> </span>
         <el-dropdown-menu slot="dropdown" style="width: 200px">
           <el-dropdown-item v-for="item in language_list" :key="item.language_type" :command="item">
             {{ item.language_name }}
@@ -60,22 +60,22 @@
           <img
             class="headPhoto"
             :src="userMessage.image_url ? userMessage.image_url : '../../assets/login/Group3214.png'"
-          />
+          >
           <span class="real_name">{{ userMessage.user_real_name }}</span>
         </span>
         <el-dropdown-menu slot="dropdown" class="user-menu">
           <el-dropdown-item @click.native="goPersonal">
-            <img src="../../assets/login/project7.png" /><span>个人中心</span>
+            <img src="../../assets/login/project7.png"><span>个人中心</span>
           </el-dropdown-item>
           <el-dropdown-item @click.native="QuitLogin">
-            <img src="../../assets/login/Frame77.png" /><span>退出登录</span>
+            <img src="../../assets/login/Frame77.png"><span>退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <!-- 消息 铃铛图片 -->
       <div class="message" @click="goPersonal">
-        <img src="../../assets/login/Vector.png" />
-        <span v-show="isNotRead" class="redDot"></span>
+        <img src="../../assets/login/Vector.png">
+        <span v-show="isNotRead" class="redDot" />
       </div>
     </div>
   </div>
@@ -203,14 +203,14 @@ export default {
   padding: 0 24px;
   font-family: 'sourceR';
   background: #fff;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 15%);
 
   .logo {
     display: flex;
     align-items: center;
 
     .el-menu-demo {
-      background: rgba(0, 0, 0, 0);
+      background: rgba(0, 0, 0, 0%);
 
       li {
         font-size: 16px;
@@ -221,6 +221,7 @@ export default {
         }
       }
     }
+
     // 取消组件默认的样式
     .el-menu.el-menu--horizontal {
       border-bottom-width: 0;
@@ -363,7 +364,7 @@ export default {
 
   &:hover {
     color: #000 !important;
-    background: rgba(255, 153, 0, 0.1) !important;
+    background: rgba(255, 153, 0, 10%) !important;
   }
 
   &.menuActive {

src/layouts/index.vue

@@ -6,7 +6,7 @@
     </div>
     <section class="app-main">
       <transition name="fade-transfrom" mode="out-in">
-        <router-view :key="key"></router-view>
+        <router-view :key="key" />
       </transition>
     </section>
   </div>

src/styles/index.scss

@@ -28,8 +28,8 @@ body {
 }
 
 ul {
-  margin: 0;
   padding-inline-start: 0;
+  margin: 0;
 
   li {
     list-style: none;

src/styles/variables.scss

@@ -1,7 +1,6 @@
 $header-h: 64px;
 $step-h: 124px;
 $basicWidth: 1200px;
-
 $bacColor: #f5f5f5;
 $basicColor: #f90;
 $color: #2c2c2c;

src/views/course_details/index.vue

@@ -72,7 +72,7 @@
           <div class="moreList">
             <div v-for="(item, i) in CourseData.book_list" :key="i" class="moreOne">
               <div>
-                <img :src="item.book_picture_url" alt="" />
+                <img :src="item.book_picture_url" alt="">
               </div>
               <div class="text">
                 <p class="p1">{{ item.book_name }}</p>
@@ -97,12 +97,12 @@
           <div class="moreList teacherList">
             <div v-for="(item, i) in CourseData.teacher_list" :key="i" class="moreOne">
               <div>
-                <img :src="item.teacher_image_url" alt="" />
+                <img :src="item.teacher_image_url" alt="">
               </div>
               <div class="text">
                 <p class="p1">{{ item.teacher_name }}</p>
                 <p>{{ item.teacher_org_name }}</p>
-                <p></p>
+                <p />
               </div>
             </div>
           </div>
@@ -131,13 +131,13 @@
                           ? require('../../assets/course_details/open1.png')
                           : require('../../assets/course_details/open2.png')
                       "
-                    />
+                    >
                   </div>
                   <div class="courseContent">
                     <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><span>{{ li.name }}任务</span>
+                          <span class="red-circle" /><span>{{ 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">
@@ -163,7 +163,7 @@
                                     :key="courseware_i"
                                     class="btn"
                                   >
-                                    <img src="../../assets/course_details/file.png" alt="" />
+                                    <img src="../../assets/course_details/file.png" alt="">
                                     <span> {{ courseware.courseware_name }} </span>
                                   </div>
                                 </div>
@@ -176,7 +176,7 @@
                                     :key="accessory_i"
                                     class="btn"
                                   >
-                                    <img src="../../assets/course_details/fileType1.png" alt="" />
+                                    <img src="../../assets/course_details/fileType1.png" alt="">
                                     <span> {{ accessory.file_name }} </span>
                                   </div>
                                 </div>
@@ -435,7 +435,7 @@ export default {
         }
 
         .intro {
-          display: -webkit-box;
+          display: box;
           height: 36px;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
@@ -462,8 +462,9 @@ export default {
 
           .countdown {
             > p {
-              color: rgba(255, 255, 255, 0.7);
+              color: rgba(255, 255, 255, 70%);
             }
+
             // 倒计时
             .time {
               display: flex;
@@ -573,7 +574,7 @@ export default {
               margin-top: 10px;
               font-size: 16px;
               color: #2c2c2c;
-              opacity: 0.7;
+              opacity: 70%;
             }
 
             .p1 {
@@ -751,7 +752,7 @@ export default {
                 }
 
                 .gray {
-                  opacity: 0.5;
+                  opacity: 50%;
                 }
               }
 
@@ -770,7 +771,7 @@ export default {
                 border: 1px solid #e7e7e7;
                 border-bottom-right-radius: 8px;
                 border-bottom-left-radius: 8px;
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 10%);
 
                 > div {
                   display: flex;
@@ -847,7 +848,7 @@ export default {
         .select {
           color: #fff;
           background: $basicColor;
-          box-shadow: 0 2px 8px rgba(255, 153, 0, 0.15);
+          box-shadow: 0 2px 8px rgba(255, 153, 0, 15%);
         }
       }
     }
@@ -894,7 +895,7 @@ export default {
         padding: 0 10px;
         margin: 10px;
         cursor: pointer;
-        border: 1px solid rgba(44, 44, 44, 0.15);
+        border: 1px solid rgba(44, 44, 44, 15%);
         border-radius: 4px;
 
         img {

src/views/live/student/audit.vue

@@ -21,7 +21,7 @@
         <div class="group-discussion">
           <!-- 有流列表 -->
           <div v-for="(item, i) in streamList" :key="item.id()" class="group-wrapper">
-            <div :id="`group-${i}`" class="group-box"></div>
+            <div :id="`group-${i}`" class="group-box" />
             <div class="live-wrapper-stream">
               {{ searchStudentName(item.id()) }}
               <svg-icon :icon-class="item.hasAudio() ? 'mike-on-grey' : ''" />
@@ -51,8 +51,8 @@
         </div>
 
         <div class="button-group">
-          <div class="button-group-left"></div>
-          <div class="button-group-right"></div>
+          <div class="button-group-left" />
+          <div class="button-group-right" />
         </div>
         <div class="group-container-left-chat">
           <div class="chat-top">
@@ -86,7 +86,7 @@
             <div>
               {{ roomInfo.teacher_name }}
             </div>
-            <div></div>
+            <div />
           </div>
         </div>
         <div class="student-list">
@@ -368,6 +368,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/styles/mixin';
+
 $live-bc: #3d3938;
 
 .group {
@@ -471,7 +472,7 @@ $live-bc: #3d3938;
             line-height: 32px;
             color: #fff;
             text-align: center;
-            background-color: rgba(0, 0, 0, 0.7);
+            background-color: rgba(0, 0, 0, 70%);
             transition: all 300ms ease-in 0s;
 
             > .svg-icon {
@@ -642,7 +643,7 @@ $live-bc: #3d3938;
           padding: 0 16px;
           line-height: 40px;
           color: #fff;
-          background-color: rgba(0, 0, 0, 0.7);
+          background-color: rgba(0, 0, 0, 70%);
           transition: all 300ms ease-in 0s;
         }
       }

src/views/live/student/group.vue

@@ -21,7 +21,7 @@
         <div class="group-discussion" :style="{ height: is_example_group ? '404px' : '468px' }">
           <!-- 本地流 -->
           <div v-show="localStream" class="group-wrapper">
-            <div id="group-local" class="group-box"></div>
+            <div id="group-local" class="group-box" />
             <div class="local-stream">
               <div>
                 {{ studentSelf.student_name }}
@@ -38,7 +38,7 @@
           </div>
           <!-- 有流列表 -->
           <div v-for="(item, i) in streamList" :key="item.id()" class="group-wrapper">
-            <div :id="`group-${i}`" class="group-box"></div>
+            <div :id="`group-${i}`" class="group-box" />
             <div class="live-wrapper-stream">
               {{ searchStudentName(item.id()) }}
               <svg-icon :icon-class="item.hasAudio() ? 'mike-on-grey' : ''" />
@@ -68,8 +68,8 @@
         </div>
 
         <div class="button-group">
-          <div class="button-group-left"></div>
-          <div class="button-group-right"></div>
+          <div class="button-group-left" />
+          <div class="button-group-right" />
         </div>
         <div class="group-container-left-chat">
           <div class="chat-top">
@@ -103,7 +103,7 @@
             <div>
               {{ roomInfo.teacher_name }}
             </div>
-            <div></div>
+            <div />
           </div>
         </div>
         <div class="student-list">
@@ -470,6 +470,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/styles/mixin';
+
 $live-bc: #3d3938;
 
 .group {
@@ -573,7 +574,7 @@ $live-bc: #3d3938;
             line-height: 32px;
             color: #fff;
             text-align: center;
-            background-color: rgba(0, 0, 0, 0.7);
+            background-color: rgba(0, 0, 0, 70%);
             transition: all 300ms ease-in 0s;
 
             > .svg-icon {
@@ -744,7 +745,7 @@ $live-bc: #3d3938;
           padding: 0 16px;
           line-height: 40px;
           color: #fff;
-          background-color: rgba(0, 0, 0, 0.7);
+          background-color: rgba(0, 0, 0, 70%);
           transition: all 300ms ease-in 0s;
         }
       }

src/views/live/student/index.vue

@@ -32,7 +32,7 @@
           </div>
         </div>
         <div v-show="connect" class="student-parent">
-          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student" ref="student"></div>
+          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student" ref="student" />
 
           <template v-if="remoteStreamType !== 1">
             <template v-if="roomInfo.video_mode === 1">
@@ -56,9 +56,9 @@
             </template>
           </template>
         </div>
-        <div v-show="isDraw" id="draw-parent" ref="draw"></div>
+        <div v-show="isDraw" id="draw-parent" ref="draw" />
         <div class="button-group">
-          <div class="button-group-left"></div>
+          <div class="button-group-left" />
           <div class="button-group-right">
             <span v-show="isDraw || remoteStreamType === 1" class="icon-button" @click="fullScreen">
               <svg-icon icon-class="full-screen" />
@@ -69,7 +69,7 @@
       <!-- 右侧 -->
       <div class="live-container-right">
         <div class="live-teacher-lens">
-          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false"></div>
+          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false" />
           <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
             <div class="live-wrapper-right">
               <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
@@ -529,6 +529,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/styles/mixin';
+
 $live-bc: #3d3938;
 $draw-h: 520px;
 
@@ -720,7 +721,7 @@ $draw-h: 520px;
           padding: 0 16px;
           line-height: 40px;
           color: #fff;
-          background-color: rgba(0, 0, 0, 0.7);
+          background-color: rgba(0, 0, 0, 70%);
           transition: all 300ms ease-in 0s;
 
           > div:first-child {

src/views/live/teacher/CompleteList.vue

@@ -73,7 +73,7 @@
       <template v-else>
         <!-- pdf -->
         <template v-if="fileType === 'pdf'">
-          <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
+          <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" />
         </template>
 
         <template v-else-if="isImage(fileType)">
@@ -81,11 +81,11 @@
         </template>
 
         <div v-else-if="fileType === 'mp3'" class="audio-file">
-          <audio :src="file_url_https" controls></audio>
+          <audio :src="file_url_https" controls />
         </div>
 
         <div v-else-if="fileType === 'mp4'" class="video-file">
-          <video :src="file_url_https" controls></video>
+          <video :src="file_url_https" controls />
         </div>
 
         <div v-else-if="fileType === 'txt'" class="text-file">
@@ -98,13 +98,12 @@
             width="100%"
             height="490px"
             scrolling="no"
-          >
-          </iframe>
+          />
         </template>
       </template>
     </div>
 
-    <div slot="footer"></div>
+    <div slot="footer" />
   </el-dialog>
 </template>
 

src/views/live/teacher/group.vue

@@ -39,7 +39,7 @@
 
         <div v-show="isGroup" class="group-discussion" :style="{ height: isAudit ? '404px' : '468px' }">
           <div v-for="(item, i) in streamList" :key="item.id()" class="group-wrapper">
-            <div :id="`group-${i}`" class="group-box"></div>
+            <div :id="`group-${i}`" class="group-box" />
             <div class="live-wrapper-stream">
               {{ searchStudentName(item.id()) }}
               <svg-icon :icon-class="item.hasAudio() ? 'mike-on-grey' : ''" />
@@ -72,7 +72,7 @@
           <div class="button-group-left">
             <span class="stop-group" @click="stopGroup">结束群组讨论</span>
           </div>
-          <div class="button-group-right"></div>
+          <div class="button-group-right" />
         </div>
         <div class="live-container-left-chat">
           <div class="chat-top">
@@ -105,12 +105,12 @@
       <!-- 右侧 -->
       <div class="live-container-right">
         <div class="live-teacher-lens" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false">
-          <div id="live"></div>
+          <div id="live" />
           <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
             <div>
               {{ roomInfo.teacher_name }}
             </div>
-            <div></div>
+            <div />
           </div>
         </div>
         <div class="student-list">
@@ -131,7 +131,7 @@
                     <el-avatar icon="el-icon-user" size="small" :src="el.student_image_url" />
                     <span class="name">{{ el.student_name }}</span>
                   </div>
-                  <div class="student-list-right"></div>
+                  <div class="student-list-right" />
                 </li>
               </template>
             </template>
@@ -440,6 +440,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/styles/mixin';
+
 $live-bc: #3d3938;
 
 .live {
@@ -588,7 +589,7 @@ $live-bc: #3d3938;
             line-height: 32px;
             color: #fff;
             text-align: center;
-            background-color: rgba(0, 0, 0, 0.7);
+            background-color: rgba(0, 0, 0, 70%);
             transition: all 300ms ease-in 0s;
 
             > .svg-icon {
@@ -734,7 +735,7 @@ $live-bc: #3d3938;
           padding: 0 16px;
           line-height: 40px;
           color: #fff;
-          background-color: rgba(0, 0, 0, 0.7);
+          background-color: rgba(0, 0, 0, 70%);
           transition: all 300ms ease-in 0s;
         }
       }

src/views/live/teacher/index.vue

@@ -33,7 +33,7 @@
           </div>
         </div>
         <div v-show="connect" class="student-parent">
-          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student"></div>
+          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student" />
           <template v-if="remoteStreamType !== 1">
             <template v-if="roomInfo.video_mode === 1">
               <el-button type="danger" @click="handsDown"> <svg-icon icon-class="hang-up" /> 挂断 </el-button>
@@ -69,7 +69,7 @@
               class="draw-thickness"
               @click="drawChange('thickNess', item)"
             >
-              <span :style="{ width: item * 2 + 'px', height: item * 2 + 'px' }"></span>
+              <span :style="{ width: item * 2 + 'px', height: item * 2 + 'px' }" />
             </span>
             <span class="eraser" @click="drawChange('type', 9)">
               <svg-icon icon-class="back" />
@@ -97,13 +97,13 @@
               <svg-icon icon-class="push" />
             </span>
           </div>
-          <div class="button-group-right"></div>
+          <div class="button-group-right" />
         </div>
       </div>
       <!-- 右侧 -->
       <div class="live-container-right">
         <div class="live-teacher-lens">
-          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false"></div>
+          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false" />
           <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
             <div class="live-wrapper-right">
               <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
@@ -121,7 +121,7 @@
           <div class="chat-top">
             <span>聊天</span>
             <span class="chat-bans" @click="chatBans">
-              <input type="checkbox" :checked="isAllowChat" class="allow-chat" />
+              <input type="checkbox" :checked="isAllowChat" class="allow-chat">
               <span>禁言</span>
             </span>
           </div>
@@ -821,6 +821,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/styles/mixin';
+
 $live-bc: #3d3938;
 $draw-h: 520px;
 
@@ -1090,7 +1091,7 @@ $draw-h: 520px;
           padding: 0 16px;
           line-height: 40px;
           color: #fff;
-          background-color: rgba(0, 0, 0, 0.7);
+          background-color: rgba(0, 0, 0, 70%);
           transition: all 300ms ease-in 0s;
 
           > div:first-child {

src/views/main/TaskList.vue

@@ -39,7 +39,7 @@
         <div v-for="(item, i) in task_group_list" :key="i" class="tasks-group">
           <div class="tasks-group-top">
             <span class="tasks-group-top-time">{{ item.begin_time_view_text }}</span>
-            <span class="tasks-group-top-line"></span>
+            <span class="tasks-group-top-line" />
           </div>
           <div class="tasks-group-list">
             <div v-for="list in item.task_list" :key="list.id" class="tasks-group-list-info">
@@ -51,7 +51,7 @@
               </div>
               <div class="tasks-group-list-info-item-name">{{ list.course_name }} - {{ list.cs_item_name }}</div>
               <div class="tasks-group-list-info-time">{{ list.time_space_view_txt }}</div>
-              <div></div>
+              <div />
             </div>
           </div>
         </div>

src/views/main/curricula_list/student.vue

@@ -24,7 +24,7 @@
             :key="item.finish_status"
             :label="item.name"
             :value="item.finish_status"
-          ></el-option>
+          />
         </el-select>
         <el-select v-model="buy_status">
           <el-option label="-请选择-" :value="-1" />
@@ -33,7 +33,7 @@
             :key="item.status"
             :label="item.name"
             :value="item.status"
-          ></el-option>
+          />
         </el-select>
         <el-button type="primary" @click="queryMyCourseList">查询</el-button>
       </div>

src/views/main/curricula_list/teacher.vue

@@ -15,7 +15,7 @@
             :key="item.finish_status"
             :label="item.name"
             :value="item.finish_status"
-          ></el-option>
+          />
         </el-select>
         <el-button type="primary" @click="queryMyCourseList">查询</el-button>
       </div>
@@ -51,7 +51,7 @@
             <template slot-scope="{ row }">
               <el-dropdown trigger="click">
                 <span class="el-dropdown-link">
-                  <svg-icon icon-class="more"></svg-icon>
+                  <svg-icon icon-class="more" />
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item @click.native="edit(row.id)">

src/views/task_details/student/index.vue

@@ -348,6 +348,7 @@ export default {
 
 <style lang="scss">
 @import '~@/styles/mixin';
+
 $bor-color: #d9d9d9;
 
 .task-detail {

src/views/task_details/teacher/index.vue

@@ -289,6 +289,7 @@ export default {
 
 <style lang="scss">
 @import '~@/styles/mixin';
+
 $bor-color: #d9d9d9;
 
 .teacher-task-detail {
@@ -326,6 +327,7 @@ $bor-color: #d9d9d9;
         margin-bottom: 24px;
         font-weight: 700;
       }
+
       // 学员列表
       .student-list {
         overflow: auto;

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

@@ -28,7 +28,7 @@
             <span class="nowrap-ellipsis task-item-name" :title="item.name">{{ item.name }}</span>
             <!-- 课节下拉框 -->
             <el-dropdown placement="bottom" trigger="click" @command="handleCSItem">
-              <i class="el-icon-more"></i>
+              <i class="el-icon-more" />
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item class="dropdown-menu" :command="{ id: item.id, type: 'edit' }">
                   <span>编辑</span><svg-icon icon-class="edit" />
@@ -87,7 +87,7 @@
                           {{ item.time_space_view_txt }}
                           <!-- 任务下拉框 -->
                           <el-dropdown placement="bottom" @command="handleTask">
-                            <i class="el-icon-more"></i>
+                            <i class="el-icon-more" />
                             <el-dropdown-menu slot="dropdown">
                               <el-dropdown-item
                                 class="dropdown-menu"
@@ -153,7 +153,7 @@
                         <div class="info">
                           {{ item.time_space_view_txt }}
                           <el-dropdown placement="bottom" @command="handleTask">
-                            <i class="el-icon-more"></i>
+                            <i class="el-icon-more" />
                             <el-dropdown-menu slot="dropdown">
                               <el-dropdown-item
                                 class="dropdown-menu"
@@ -222,7 +222,7 @@
                         <div class="info">
                           {{ item.time_space_view_txt }}
                           <el-dropdown placement="bottom" @command="handleTask">
-                            <i class="el-icon-more"></i>
+                            <i class="el-icon-more" />
                             <el-dropdown-menu slot="dropdown">
                               <el-dropdown-item
                                 class="dropdown-menu"
@@ -601,7 +601,7 @@ export default {
     &-container {
       flex: 7;
       background-color: #fff;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 12%), 0 0 6px rgba(0, 0, 0, 4%);
 
       // 学习资料
       %learning-materials,
@@ -780,6 +780,7 @@ export default {
             border-left: 2px solid #4a99ea;
           }
         }
+
         // 课中任务
         &-mid {
           &-title {
@@ -794,6 +795,7 @@ export default {
             border-left: 2px solid $basicColor;
           }
         }
+
         // 课后任务
         &-after {
           &-title {

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

@@ -44,7 +44,7 @@
         </el-form-item>
 
         <el-form-item label="任务说明">
-          <el-input v-model="form.content" type="textarea" rows="5" resize="none"></el-input>
+          <el-input v-model="form.content" type="textarea" rows="5" resize="none" />
         </el-form-item>
 
         <el-form-item label="任务模板">
@@ -125,8 +125,9 @@
                   :key="item.code"
                   v-model="courseForm.task_mode"
                   :label="item.code"
-                  >{{ item.name }}</el-radio
                 >
+                  {{ item.name }}
+                </el-radio>
               </el-form-item>
 
               <el-form-item label="留言功能">

src/views/teacher/student_list/index.vue

@@ -17,7 +17,7 @@
             {{ item.name }}
           </span>
         </div>
-        <div></div>
+        <div />
       </div>
       <div class="student-table">
         <el-table :data="student_list">

stylelint.config.js

@@ -1,10 +1,11 @@
 module.exports = {
   defaultSeverity: 'warning',
   extends: [
-    'stylelint-config-standard',
-    'stylelint-scss',
+    'stylelint-config-standard-scss',
+    'stylelint-config-recommended-vue',
     'stylelint-config-sass-guidelines',
-    'stylelint-config-recess-order'
+    'stylelint-config-recess-order',
+    'stylelint-config-prettier'
   ],
   plugins: ['stylelint-declaration-block-no-ignored-properties'],
   rules: {