update

.eslintrc.js

@@ -39,7 +39,7 @@ module.exports = {
         endOfLine: 'auto',
         bracketSpacing: true,
         arrowParens: 'avoid',
-        printWidth: 100
+        printWidth: 120
       }
     ],
     'vue/max-attributes-per-line': [

package-lock.json

@@ -50,9 +50,10 @@
         "sass-loader": "^10.1.1",
         "script-ext-html-webpack-plugin": "^2.1.5",
         "stylelint": "^13.12.0",
+        "stylelint-config-recess-order": "^2.5.0",
+        "stylelint-config-sass-guidelines": "^8.0.0",
         "stylelint-config-standard": "^21.0.0",
         "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
-        "stylelint-order": "^4.1.0",
         "stylelint-scss": "^3.19.0",
         "stylelint-webpack-plugin": "^2.1.1",
         "svg-sprite-loader": "^6.0.5",
@@ -4118,7 +4119,7 @@
     "node_modules/ailp-book-question-ui": {
       "version": "0.1.0",
       "resolved": "file:../ailp-book-question-ui-0.1.0.tgz",
-      "integrity": "sha512-GWFdOeVy4OIiiQxpgqR4ASy6TK8OMzkwpL7cZhDldt5AnFDwDxVVnAz736WP7Z/vQl8vnadRQwammFHk5mRwzw==",
+      "integrity": "sha512-IsEBARnDEV+51ErizOEp8110yW46L96q+BtjC3CFl8Mxp0DuQRzMU9WVwK9JqaKT0khpBsafdPxXBjfg6anPWg==",
       "dependencies": {
         "awe-dnd": "^0.3.4",
         "axios": "^0.21.1",
@@ -19145,6 +19146,18 @@
         "url": "https://opencollective.com/stylelint"
       }
     },
+    "node_modules/stylelint-config-recess-order": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.5.0.tgz",
+      "integrity": "sha512-FqhPRGQlHnTS/ZPegq5ORelHsk9X5S+l0uQu1N97e+SSLD+6XYDewdkXy6e2yx8fpZLvwpP3TnPoNTHGw52DzA==",
+      "dev": true,
+      "dependencies": {
+        "stylelint-order": "4.1.x"
+      },
+      "peerDependencies": {
+        "stylelint": ">=9"
+      }
+    },
     "node_modules/stylelint-config-recommended": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-4.0.0.tgz",
@@ -19154,6 +19167,22 @@
         "stylelint": "^13.12.0"
       }
     },
+    "node_modules/stylelint-config-sass-guidelines": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-8.0.0.tgz",
+      "integrity": "sha512-v21iDWtzpfhuKJlYKpoE1vjp+GT8Cr6ZBWwMx/jf+eCEblZgAIDVVjgAELoDLhVj17DcEFwlIKJBMfrdAmXg0Q==",
+      "dev": true,
+      "dependencies": {
+        "stylelint-order": "^4.0.0",
+        "stylelint-scss": "^3.18.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^13.7.0"
+      }
+    },
     "node_modules/stylelint-config-standard": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-21.0.0.tgz",
@@ -26451,7 +26480,7 @@
     },
     "ailp-book-question-ui": {
       "version": "file:..\\ailp-book-question-ui-0.1.0.tgz",
-      "integrity": "sha512-GWFdOeVy4OIiiQxpgqR4ASy6TK8OMzkwpL7cZhDldt5AnFDwDxVVnAz736WP7Z/vQl8vnadRQwammFHk5mRwzw==",
+      "integrity": "sha512-IsEBARnDEV+51ErizOEp8110yW46L96q+BtjC3CFl8Mxp0DuQRzMU9WVwK9JqaKT0khpBsafdPxXBjfg6anPWg==",
       "requires": {
         "awe-dnd": "^0.3.4",
         "axios": "^0.21.1",
@@ -38811,6 +38840,15 @@
         }
       }
     },
+    "stylelint-config-recess-order": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.5.0.tgz",
+      "integrity": "sha512-FqhPRGQlHnTS/ZPegq5ORelHsk9X5S+l0uQu1N97e+SSLD+6XYDewdkXy6e2yx8fpZLvwpP3TnPoNTHGw52DzA==",
+      "dev": true,
+      "requires": {
+        "stylelint-order": "4.1.x"
+      }
+    },
     "stylelint-config-recommended": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-4.0.0.tgz",
@@ -38818,6 +38856,16 @@
       "dev": true,
       "requires": {}
     },
+    "stylelint-config-sass-guidelines": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-8.0.0.tgz",
+      "integrity": "sha512-v21iDWtzpfhuKJlYKpoE1vjp+GT8Cr6ZBWwMx/jf+eCEblZgAIDVVjgAELoDLhVj17DcEFwlIKJBMfrdAmXg0Q==",
+      "dev": true,
+      "requires": {
+        "stylelint-order": "^4.0.0",
+        "stylelint-scss": "^3.18.0"
+      }
+    },
     "stylelint-config-standard": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-21.0.0.tgz",

package.json

@@ -53,9 +53,10 @@
     "sass-loader": "^10.1.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "stylelint": "^13.12.0",
+    "stylelint-config-recess-order": "^2.5.0",
+    "stylelint-config-sass-guidelines": "^8.0.0",
     "stylelint-config-standard": "^21.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
-    "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.19.0",
     "stylelint-webpack-plugin": "^2.1.1",
     "svg-sprite-loader": "^6.0.5",

src/api/app.js

@@ -121,14 +121,13 @@ export function GetLogo() {
 /**
  * 得到用户能进入的子系统列表（电脑端）
  */
-export function GetChildSysList_CanEnter_PC(data) {
+export function GetChildSysList_CanEnter_PC() {
   let params = getRequestParams('login_control-GetChildSysList_CanEnter_PC');
 
   return request({
     method: 'post',
     url: process.env.VUE_APP_FileServer,
-    params,
-    data
+    params
   });
 }
 

src/layouts/components/LayoutHeader.vue

@@ -17,10 +17,7 @@
         <el-menu-item index="2">
           <template v-if="projectList.length > 1">
             <el-dropdown trigger="click" @command="handleCommand">
-              <span
-                class="el-dropdown-link"
-                :style="{ color: activeIndex === '2' ? '#F90' : '#000' }"
-              >
+              <span class="el-dropdown-link" :style="{ color: activeIndex === '2' ? '#F90' : '#000' }">
                 {{ projectName }}
                 <!-- SYSTEM -->
                 <i class="el-icon-arrow-down el-icon--right"></i>
@@ -33,11 +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>
@@ -51,9 +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"></i> </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 }}
@@ -68,9 +59,7 @@
         <span class="el-dropdown-link">
           <img
             class="headPhoto"
-            :src="
-              userMessage.image_url ? userMessage.image_url : '../../assets/login/Group3214.png'
-            "
+            :src="userMessage.image_url ? userMessage.image_url : '../../assets/login/Group3214.png'"
           />
           <span class="real_name">{{ userMessage.user_real_name }}</span>
         </span>
@@ -204,17 +193,17 @@ export default {
 
 <style lang="scss" scoped>
 .LoginNav {
-  height: 74px;
   position: relative;
+  z-index: 999;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-sizing: border-box;
+  height: 74px;
   padding: 0 24px;
-  z-index: 999;
+  font-family: 'sourceR';
   background: #fff;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
-  font-family: 'sourceR';
 
   .logo {
     display: flex;
@@ -234,23 +223,23 @@ export default {
     }
     // 取消组件默认的样式
     .el-menu.el-menu--horizontal {
-      border-bottom: none;
+      border-bottom-width: 0;
     }
   }
 
   .userName {
     display: flex;
-    justify-content: flex-end;
     align-items: center;
+    justify-content: flex-end;
 
     .seek {
-      margin-right: 100px;
       position: relative;
+      margin-right: 100px;
 
       img {
-        left: 10px;
-        top: 11px;
         position: absolute;
+        top: 11px;
+        left: 10px;
       }
     }
 
@@ -266,11 +255,11 @@ export default {
     }
 
     .message {
-      height: 100%;
       position: relative;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      height: 100%;
       margin-left: 23px;
 
       img {
@@ -282,28 +271,28 @@ export default {
         position: absolute;
         top: 2px;
         right: -2px;
+        display: inline-block;
         width: 6px;
         height: 6px;
-        display: inline-block;
-        background: red;
+        background-color: #f00;
         border-radius: 50%;
       }
     }
 
     .selectLoginOrRegistration {
+      box-sizing: border-box;
       display: flex;
+      align-items: center;
+      justify-content: space-evenly;
       height: 32px;
+      padding: 0 16px;
       border: 1px solid #fff;
-      box-sizing: border-box;
       border-radius: 4px;
-      justify-content: space-evenly;
-      align-items: center;
-      padding: 0 16px;
 
       > span {
-        cursor: pointer;
         font-size: 16px;
         color: #fff;
+        cursor: pointer;
       }
     }
 
@@ -312,9 +301,9 @@ export default {
 
       .real_name {
         display: inline-block;
-        vertical-align: super;
-        font-size: 20px;
         padding-left: 10px;
+        font-size: 20px;
+        vertical-align: super;
       }
     }
   }
@@ -324,10 +313,10 @@ export default {
 <style lang="scss">
 .LoginNav {
   .el-dropdown-menu__item {
-    line-height: 40px;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    line-height: 40px;
 
     > span {
       font-family: 'sourceR';
@@ -345,8 +334,8 @@ export default {
   }
 
   .el-dropdown {
-    cursor: pointer;
     display: block;
+    cursor: pointer;
 
     > span {
       font-family: 'sourceR';
@@ -357,9 +346,9 @@ export default {
 
 .projectList {
   &.el-dropdown-menu__item {
-    line-height: 40px;
     display: flex;
     align-items: center;
+    line-height: 40px;
     color: #000;
 
     > img {
@@ -367,14 +356,14 @@ export default {
     }
 
     > span {
-      line-height: 40px;
       font-family: 'sourceR';
+      line-height: 40px;
     }
   }
 
   &:hover {
-    background: rgba(255, 153, 0, 0.1) !important;
     color: #000 !important;
+    background: rgba(255, 153, 0, 0.1) !important;
   }
 
   &.menuActive {
@@ -390,8 +379,8 @@ export default {
   .el-dropdown-menu__item {
     display: flex;
     align-items: center;
-    color: #000;
     font-size: 16px;
+    color: #000;
 
     img {
       width: 24px;

src/styles/element-ui.scss

@@ -1,12 +1,12 @@
 .avatar-uploader {
   display: inline-block;
 
-  & .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
+  .el-upload {
     position: relative;
     overflow: hidden;
+    cursor: pointer;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
 
     &:hover {
       border-color: #409eff;
@@ -14,25 +14,25 @@
   }
 
   &-icon {
-    font-size: 28px;
-    color: #8c939d;
     width: 90px;
     height: 90px;
+    font-size: 28px;
     line-height: 90px;
+    color: #8c939d;
     text-align: center;
   }
 
-  & .avatar {
+  .avatar {
+    display: block;
     width: 90px;
     height: 90px;
-    display: block;
   }
 }
 
 .el-button.el-button--primary {
+  color: #fff;
   background-color: $basicColor;
   border-color: $basicColor;
-  color: #fff;
 }
 
 .el-radio__input.is-checked {
@@ -41,7 +41,7 @@
     border-color: $basicColor;
   }
 
-  & + .el-radio__label {
+  + .el-radio__label {
     color: #444;
   }
 }

src/styles/index.scss

@@ -1,14 +1,15 @@
-@import './variables.scss';
-@import './mixin.scss';
-@import './element-ui.scss';
+@import './variables';
+@import './mixin';
+@import './element-ui';
 
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
   overflow: hidden;
+  text-rendering: optimizeLegibility;
   /* stylelint-disable-next-line */
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, '微软雅黑', Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Arial',
+    sans-serif;
 }
 
 label {
@@ -21,13 +22,13 @@ html {
 
 html,
 body {
-  font-size: 16px !important;
   height: 100%;
+  font-size: 16px !important;
 }
 
 ul {
-  padding-inline-start: 0;
   margin: 0;
+  padding-inline-start: 0;
 
   li {
     list-style: none;
@@ -47,9 +48,9 @@ ul {
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
   color: inherit;
   text-decoration: none;
+  cursor: pointer;
 }
 
 a:focus,
@@ -69,12 +70,23 @@ div:focus {
   color: #aaa;
 }
 
+// 课件视频播放样式
+.video-js:hover .vjs-big-play-button {
+  background: none;
+}
+
 .vjs-custom-skin > .video-js .vjs-big-play-button {
   width: 225px;
   height: 225px !important;
   margin-top: -112px !important;
   margin-left: -112px !important;
+  background-color: initial;
   border: 0;
+
+  &:focus,
+  &:active {
+    background: none;
+  }
 }
 
 .vjs-icon-play::before,

src/styles/mixin.scss

@@ -1,28 +1,28 @@
 @mixin container {
   width: $basicWidth;
   min-width: $basicWidth;
-  margin: 0 auto;
   padding: 32px 0 20px;
+  margin: 0 auto;
 }
 
 @mixin el-tag {
-  background-color: #e0e0e0;
+  padding: 0 20px;
   color: #000;
+  background-color: #e0e0e0;
   border-radius: 20px;
-  padding: 0 20px;
 }
 
 @mixin list {
   width: 100%;
   min-height: calc(100vh - 446px);
-  border-radius: 8px;
   margin-top: 24px;
   background-color: #fff;
+  border-radius: 8px;
 
   &-title {
     height: 78px;
-    line-height: 78px;
     padding: 0 30px;
+    line-height: 78px;
     border-bottom: 1px solid #d9d9d9;
   }
 
@@ -60,10 +60,10 @@
     }
 
     &__body {
-      padding: 15px 20px 0;
       max-height: 80vh;
-      color: $color;
+      padding: 15px 20px 0;
       overflow: auto;
+      color: $color;
     }
   }
 }

src/views/live/student/group.vue

@@ -10,9 +10,7 @@
       </div>
       <div class="live-course-name">{{ roomInfo.course_name }}</div>
       <div class="live-teacher">
-        <span class="live-teacher-name">
-          <svg-icon icon-class="person" />{{ roomInfo.teacher_name }}
-        </span>
+        <span class="live-teacher-name"> <svg-icon icon-class="person" />{{ roomInfo.teacher_name }} </span>
         <span><svg-icon icon-class="people" />{{ roomInfo.student_count }}</span>
       </div>
     </div>
@@ -29,14 +27,8 @@
                 {{ studentSelf.student_name }}
               </div>
               <div>
-                <svg-icon
-                  :icon-class="hasVideo ? 'camera-on' : 'camera-off'"
-                  @click="playOrPauseVideo"
-                />
-                <svg-icon
-                  :icon-class="hasAudio ? 'mike-on' : 'mike-off'"
-                  @click="playOrPauseAudio"
-                />
+                <svg-icon :icon-class="hasVideo ? 'camera-on' : 'camera-off'" @click="playOrPauseVideo" />
+                <svg-icon :icon-class="hasAudio ? 'mike-on' : 'mike-off'" @click="playOrPauseAudio" />
               </div>
             </div>
           </div>
@@ -78,12 +70,7 @@
             </ul>
           </div>
           <div class="chat-speak">
-            <el-input
-              v-model="msg"
-              placeholder="输入发言"
-              maxlength="400"
-              @keydown.enter.native="sendMsg"
-            >
+            <el-input v-model="msg" placeholder="输入发言" maxlength="400" @keydown.enter.native="sendMsg">
               <el-button slot="append" @click="sendMsg">发送</el-button>
             </el-input>
           </div>
@@ -91,18 +78,10 @@
       </div>
       <!-- 右侧 -->
       <div class="group-container-right">
-        <div
-          class="live-teacher-lens"
-          @mouseover="liveMenuShow = true"
-          @mouseout="liveMenuShow = false"
-        >
+        <div class="live-teacher-lens" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false">
           <div class="live-container">
             <div v-show="is_teacher_in_group" id="live" />
-            <el-image
-              v-show="!is_teacher_in_group"
-              :src="roomInfo.teacher_image_url"
-              fit="contain"
-            />
+            <el-image v-show="!is_teacher_in_group" :src="roomInfo.teacher_image_url" fit="contain" />
           </div>
           <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
             <div>
@@ -196,9 +175,7 @@ export default {
   watch: {
     loadedNumber(newVal) {
       if (newVal === 5) {
-        common.createScript(
-          'https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js'
-        ).onload = () => {
+        common.createScript('https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js').onload = () => {
           this.rtc = common.initSDK({
             userid: this.live_room_sys_user_id,
             roomid: this.room_id,
@@ -541,8 +518,7 @@ $live-bc: #3d3938;
             top: 120px;
             height: 32px;
             width: calc(100% - 16px);
-            background-color: #000;
-            opacity: 0.7;
+            background-color: rgba(0, 0, 0, 0.7);
             color: #fff;
             line-height: 32px;
             text-align: center;
@@ -685,8 +661,7 @@ $live-bc: #3d3938;
           position: absolute;
           height: 40px;
           width: 100%;
-          background-color: #000;
-          opacity: 0.7;
+          background-color: rgba(0, 0, 0, 0.7);
           color: #fff;
           line-height: 40px;
           padding: 0 16px;

src/views/live/student/index.vue

@@ -29,11 +29,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"></div>
 
           <template v-if="remoteStreamType !== 1">
             <template v-if="roomInfo.video_mode === 1">
@@ -95,12 +91,7 @@
             </ul>
           </div>
           <div class="chat-speak">
-            <el-input
-              v-model="msg"
-              placeholder="输入发言"
-              maxlength="400"
-              @keydown.enter.native="sendMsg"
-            >
+            <el-input v-model="msg" placeholder="输入发言" maxlength="400" @keydown.enter.native="sendMsg">
               <el-button slot="append" @click="sendMsg">发送</el-button>
             </el-input>
           </div>
@@ -260,9 +251,7 @@ export default {
   watch: {
     loadedNumber(newVal) {
       if (newVal === 5) {
-        common.createScript(
-          'https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js'
-        ).onload = () => {
+        common.createScript('https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js').onload = () => {
           const { live_room_sys_user_id, room_id, session_id } = this.$route.query;
           this.rtc = common.initSDK({
             userid: live_room_sys_user_id,
@@ -435,9 +424,7 @@ export default {
           video_mode: this.roomInfo.video_mode
         });
         this.handsDown();
-        return this.$message.warning(
-          `当前没有设置${this.roomInfo.video_mode === 1 ? '视频' : '音频'}设备`
-        );
+        return this.$message.warning(`当前没有设置${this.roomInfo.video_mode === 1 ? '视频' : '音频'}设备`);
       }
 
       common.inviteAccept({
@@ -713,8 +700,7 @@ $draw-h: 520px;
           position: absolute;
           height: 40px;
           width: 272px;
-          background-color: #000;
-          opacity: 0.7;
+          background-color: rgba(0, 0, 0, 0.7);
           color: #fff;
           line-height: 40px;
           padding: 0 16px;

src/views/live/teacher/group.vue

@@ -11,9 +11,7 @@
       </div>
       <div class="live-course-name">{{ roomInfo.course_name }}</div>
       <div class="live-teacher">
-        <span class="live-teacher-name">
-          <svg-icon icon-class="person" />{{ roomInfo.teacher_name }}
-        </span>
+        <span class="live-teacher-name"> <svg-icon icon-class="person" />{{ roomInfo.teacher_name }} </span>
         <span><svg-icon icon-class="people" />{{ roomInfo.student_count }}</span>
       </div>
     </div>
@@ -87,11 +85,7 @@
       </div>
       <!-- 右侧 -->
       <div class="live-container-right">
-        <div
-          class="live-teacher-lens"
-          @mouseover="liveMenuShow = true"
-          @mouseout="liveMenuShow = false"
-        >
+        <div class="live-teacher-lens" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false">
           <div id="live"></div>
           <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
             <div>
@@ -244,12 +238,10 @@ export default {
       }
     });
     this.getLiveRoomInfo();
-    GetGroupInfo_Teacher({ task_id: this.task_id }).then(
-      ({ live_room_sys_user_id, group_list }) => {
-        this.group_list = group_list;
-        this.live_room_sys_user_id = live_room_sys_user_id;
-      }
-    );
+    GetGroupInfo_Teacher({ task_id: this.task_id }).then(({ live_room_sys_user_id, group_list }) => {
+      this.group_list = group_list;
+      this.live_room_sys_user_id = live_room_sys_user_id;
+    });
   },
   beforeDestroy() {
     common.closeVideo('main');
@@ -260,15 +252,7 @@ export default {
   methods: {
     getLiveRoomInfo() {
       GetLiveRoomInfo({ task_id: this.task_id }).then(
-        ({
-          room_id,
-          video_mode,
-          task_name,
-          cs_item_name,
-          course_name,
-          teacher_name,
-          student_count
-        }) => {
+        ({ room_id, video_mode, task_name, cs_item_name, course_name, teacher_name, student_count }) => {
           this.roomInfo = {
             room_id,
             video_mode,
@@ -536,8 +520,7 @@ $live-bc: #3d3938;
             top: 120px;
             height: 32px;
             width: calc(100% - 16px);
-            background-color: #000;
-            opacity: 0.7;
+            background-color: rgba(0, 0, 0, 0.7);
             color: #fff;
             line-height: 32px;
             text-align: center;
@@ -655,8 +638,7 @@ $live-bc: #3d3938;
           position: absolute;
           height: 40px;
           width: 100%;
-          background-color: #000;
-          opacity: 0.7;
+          background-color: rgba(0, 0, 0, 0.7);
           color: #fff;
           line-height: 40px;
           padding: 0 16px;

src/views/live/teacher/index.vue

@@ -8,9 +8,7 @@
         </div>
         <div>
           <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" icon="el-icon-switch-button" @click="closeLiveRoom"> 结束直播 </el-button>
           <el-button v-if="liveStat" @click="reconnection">重连</el-button>
           <el-button @click="setDevice(true)">设置设备</el-button>
         </div>
@@ -23,9 +21,7 @@
         <div v-show="callLoading" class="loading">
           <div class="loading-wrapper">
             <el-avatar icon="el-icon-user" :src="connectStudent.student_image_url" />
-            <p class="loading-title">
-              正在呼叫【{{ connectStudent.student_name }}】，等待对方接通...
-            </p>
+            <p class="loading-title">正在呼叫【{{ connectStudent.student_name }}】，等待对方接通...</p>
             <div>
               <el-button type="danger" circle @click="handsDown">
                 <svg-icon icon-class="hang-up" />
@@ -37,9 +33,7 @@
           <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">
-                <svg-icon icon-class="hang-up" /> 挂断
-              </el-button>
+              <el-button type="danger" @click="handsDown"> <svg-icon icon-class="hang-up" /> 挂断 </el-button>
             </template>
             <template v-else>
               <div class="student-audio">
@@ -115,14 +109,8 @@
           <div class="live-operate">
             <div>{{ roomInfo.teacher_name }}</div>
             <div class="live-operate-icon">
-              <svg-icon
-                :icon-class="hasVideo ? 'camera-on-black' : 'camera-off-black'"
-                @click="playOrPauseVideo"
-              />
-              <svg-icon
-                :icon-class="hasAudio ? 'mike-on-black' : 'mike-off-black'"
-                @click="playOrPauseAudio"
-              />
+              <svg-icon :icon-class="hasVideo ? 'camera-on-black' : 'camera-off-black'" @click="playOrPauseVideo" />
+              <svg-icon :icon-class="hasAudio ? 'mike-on-black' : 'mike-off-black'" @click="playOrPauseAudio" />
             </div>
           </div>
         </div>
@@ -145,12 +133,7 @@
             </ul>
           </div>
           <div class="chat-speak">
-            <el-input
-              v-model="msg"
-              placeholder="输入发言"
-              maxlength="400"
-              @keydown.enter.native="sendMsg"
-            >
+            <el-input v-model="msg" placeholder="输入发言" maxlength="400" @keydown.enter.native="sendMsg">
               <el-button slot="append" @click="sendMsg">发送</el-button>
             </el-input>
           </div>
@@ -362,9 +345,7 @@ export default {
   watch: {
     loadedNumber(newVal) {
       if (newVal === 5) {
-        common.createScript(
-          'https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js'
-        ).onload = () => {
+        common.createScript('https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js').onload = () => {
           this.initSDK();
           this.$loading().close();
         };
@@ -1067,8 +1048,7 @@ $draw-h: 520px;
           position: absolute;
           height: 40px;
           width: 272px;
-          background-color: #000;
-          opacity: 0.7;
+          background-color: rgba(0, 0, 0, 0.7);
           color: #fff;
           line-height: 40px;
           padding: 0 16px;

src/views/task_details/ShowCourseware.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="show-courseware">
-    <header class="header">
-      <el-button type="primary" @click="requestFullScreen">全屏</el-button>
-    </header>
-
-    <template v-if="sys_type === 'GCLS'">
-      <bookquestion id="AILPcontent" :context="context" :book-client-width="1200" />
-    </template>
-    <template v-else>
-      <bookailp
-        v-if="context"
-        id="AILPcontent"
-        :context="context"
-        :ui-type="ui_type"
-        :preview-width="previewWidth"
-        :preview-height="previewHeight"
-      />
-    </template>
+    <div id="AILPcontent">
+      <div class="full">
+        <el-button type="primary" class="full-screen" @click="fullScreen">
+          <el-image :src="fullImage" />
+        </el-button>
+      </div>
+      <template v-if="sys_type === 'GCLS'">
+        <bookquestion :context="context" :book-client-width="1200" />
+      </template>
+      <template v-else>
+        <bookailp
+          v-if="context"
+          :context="context"
+          :ui-type="ui_type"
+          :preview-width="previewWidth"
+          :preview-height="previewHeight"
+        />
+      </template>
+    </div>
   </div>
 </template>
 
@@ -26,6 +28,7 @@ import { GetCoursewareContent_View } from '@/api/course';
 export default {
   data() {
     return {
+      fullImage: require('../../assets/common/fullScreen.png'),
       coursewareId: this.$route.params.coursewareId,
       context: null,
       ui_type: '',
@@ -52,6 +55,12 @@ export default {
             this.context = JSON.parse(contents.question);
             this.ui_type = contents.ui_type ? contents.ui_type : '';
           }
+          this.$nextTick(() => {
+            let offsetWidth = document.querySelector('div.Big-Book-preview').offsetWidth;
+            let transform = document.querySelector('div.Big-Book-preview').style.transform;
+            document.querySelector('button.full-screen').style.left =
+              offsetWidth * Number(transform.slice(6, -1)) - 130 + 'px';
+          });
         }
       } else {
         this.context = null;
@@ -59,6 +68,10 @@ export default {
     });
   },
   methods: {
+    fullScreen() {
+      this.isFullScreen() ? this.exitFullScreen() : this.requestFullScreen();
+    },
+
     requestFullScreen() {
       let element = document.getElementById('AILPcontent');
       let requestMethod =
@@ -76,6 +89,28 @@ export default {
           wscript.SendKeys('{F11}');
         }
       }
+    },
+
+    exitFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    },
+
+    isFullScreen() {
+      return Boolean(
+        document.fullScreen ||
+          document.mozFullScreen ||
+          document.webkitIsFullScreen ||
+          document.webkitFullScreen ||
+          document.msFullScreen
+      );
     }
   }
 };
@@ -84,10 +119,22 @@ export default {
 <style lang="scss" scoped>
 .show-courseware {
   height: 100%;
+  padding-top: 40px;
   overflow: auto;
 
-  .header {
-    margin: 12px 60px;
+  .full {
+    position: relative;
+
+    .full-screen {
+      position: absolute;
+      top: 30px;
+      left: 90%;
+      z-index: 2;
+
+      .el-image {
+        width: 70px;
+      }
+    }
   }
 }
 </style>

src/views/task_details/teacher/index.vue

@@ -300,22 +300,22 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@/styles/mixin.scss';
+@import '~@/styles/mixin';
 $bor-color: #d9d9d9;
 
 .teacher-task-detail {
   @include container;
   @include dialog;
 
-  margin-top: 56px;
   min-height: calc(100vh - 130px);
+  margin-top: 56px;
 
   .el-tag {
     @include el-tag;
 
-    border-radius: 4px;
     margin: 0 8px 6px 0;
     border-color: $bor-color;
+    border-radius: 4px;
 
     > span {
       cursor: pointer;
@@ -325,18 +325,18 @@ $bor-color: #d9d9d9;
   &-main {
     display: flex;
     min-height: calc(100vh - 390px);
+    margin-top: 16px;
     background-color: #fff;
     border-radius: 8px;
-    margin-top: 16px;
 
     .student-finish-situation {
-      padding: 24px 0;
       flex: 3;
+      padding: 24px 0;
 
       > div:first-child {
-        font-weight: 700;
         padding: 0 32px;
         margin-bottom: 24px;
+        font-weight: 700;
       }
       // 学员列表
       .student-list {
@@ -366,17 +366,17 @@ $bor-color: #d9d9d9;
       .student-info {
         display: flex;
         justify-content: space-between;
-        padding: 28px 32px;
-        border-bottom: 1px solid #dbdbdb;
         height: 89px;
+        padding: 28px 32px;
         line-height: 32px;
+        border-bottom: 1px solid #dbdbdb;
 
         &-name {
           display: inline-block;
-          vertical-align: text-bottom;
           height: 32px;
-          line-height: 32px;
           margin-left: 24px;
+          line-height: 32px;
+          vertical-align: text-bottom;
         }
 
         .finish-time {
@@ -395,10 +395,10 @@ $bor-color: #d9d9d9;
         }
 
         .title {
-          font-weight: bold;
           font-size: 18px;
+          font-weight: bold;
 
-          & + div {
+          + div {
             padding: 16px 0;
           }
         }
@@ -411,8 +411,8 @@ $bor-color: #d9d9d9;
               overflow: hidden;
 
               .svg-icon {
-                font-size: 18px;
                 margin-right: 12px;
+                font-size: 18px;
               }
 
               .check-mark {

stylelint.config.js

@@ -1,11 +1,15 @@
 module.exports = {
   defaultSeverity: 'warning',
-  extends: 'stylelint-config-standard',
-  plugins: ['stylelint-declaration-block-no-ignored-properties', 'stylelint-order'],
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-scss',
+    'stylelint-config-sass-guidelines',
+    'stylelint-config-recess-order'
+  ],
+  plugins: ['stylelint-declaration-block-no-ignored-properties'],
   rules: {
     'plugin/declaration-block-no-ignored-properties': true,
-    // 各分类属性顺序
-    'order/order': ['at-rules', 'custom-properties', 'dollar-variables', 'declarations', 'rules'],
+    'order/properties-alphabetical-order': null,
     // 指定2个空格
     indentation: 2,
     // 样式块中不允许重复的属性
@@ -25,7 +29,7 @@ module.exports = {
     // 不允许未知的动画
     'no-unknown-animations': true,
     // 在字体名称必须使用引号的地方使用引号，其他地方不能使用
-    'font-family-name-quotes': 'always-where-required',
+    'font-family-name-quotes': 'always-unless-keyword',
     // url 函数内部必须有引号
     'function-url-quotes': 'always',
     // 指定字符串引号为单引号
@@ -36,6 +40,11 @@ module.exports = {
     'no-empty-first-line': true,
     // 不允许使用 unicode 作为顺序标记
     'unicode-bom': 'never',
-    'at-rule-no-unknown': null
+    'at-rule-no-unknown': [true, { ignoreAtRules: ['import', 'include', 'mixin', 'include', 'extend'] }],
+    'max-nesting-depth': 8,
+    'selector-no-qualifying-type': [true, { ignore: ['attribute', 'class', 'id'] }],
+    // 为类选择器指定一个模式
+    'selector-class-pattern': null,
+    'declaration-colon-newline-after': null
   }
 };