8个系统整合完成

src/assets/style/theme/theme1.scss

@@ -1,5 +0,0 @@
-/* 改变主题色变量 */
-$--color-primary: #fdca17;
-/* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-@import "~element-ui/packages/theme-chalk/src/index";

src/assets/style/theme/theme10.scss

@@ -1,5 +0,0 @@
-/* 改变主题色变量 */
-$--color-primary: #ff6457;
-/* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-@import "~element-ui/packages/theme-chalk/src/index";

src/components/TestPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="panel">
     <el-container class="scrollbar" v-if="pannelVisible">
       <el-header>
         <div class="flex between">
@@ -35,19 +35,19 @@
           <div class="countDownBox">
             <div>
               总得分：
-              <span class="gradeSpan">{{grade}}</span>
+              <span class="total-score">{{grade}}</span>
             </div>
           </div>
           <div>
             <el-button class="reload" @click="reload" v-show="projectPermissions == 0">重新开始</el-button>
-            <el-button class="submit" @click="confirmSubmit" :disabled="isSubmit">提交</el-button>
+            <el-button type="primary" class="submit btn" @click="confirmSubmit" :disabled="isSubmit">提交</el-button>
           </div>
         </div>
       </el-header>
       <el-container>
         <el-aside width="30%">
           <div class="aside-header">
-            <div class="header_h flex">
+            <div class="p-title color">
               <i class="el-icon-s-order"></i>
               <p>实验目标</p>
             </div>
@@ -58,7 +58,7 @@
             </div>
           </div>
           <div class="aside-footer">
-            <div class="header_h flex">
+            <div class="p-title color">
               <i class="el-icon-s-management"></i>
               <p>实验任务</p>
             </div>
@@ -105,9 +105,9 @@
                 <el-collapse-item v-for="(loop, index) in points" :key="index">
                   <template slot="title">
                     <i class="el-icon-s-ticket"></i>
-                    <div class="break-all" v-html="loop.experimentalRequirements"></div>
+                    <div class="break-all" v-html="loop.name"></div>
                   </template>
-                  <div class="break-all" v-html="loop.expserimentalRequirements"></div>
+                  <div class="break-all" v-html="loop.experimentalRequirements"></div>
                 </el-collapse-item>
               </el-collapse>
             </el-tab-pane>
@@ -119,12 +119,10 @@
       </el-container>
     </el-container>
 
-    <div
+    <div :class="['toggle-panel', {active: pannelVisible}]">
-      :style="pannelVisible ? {position: 'fixed', left: '85%',top:'50%'} : {position: 'fixed',top:'50%'}"
-    >
       <div @click="togglePannel">
-        <img :src="require(`@/assets/images/system/${systemId}/left.png`)" alt class="left-btn" v-if="pannelVisible" />
+        <img :src="require(`@/assets/images/system/${systemId}/left.png`)" alt class="c-p" v-if="pannelVisible" />
-        <img :src="require(`@/assets/images/system/${systemId}/right.png`)" alt class="right-btn" v-if="!pannelVisible" />
+        <img :src="require(`@/assets/images/system/${systemId}/right.png`)" alt class="c-p" v-if="!pannelVisible" />
       </div>
     </div>
   </div>
@@ -191,7 +189,8 @@ export default {
     // 获取项目列表
     getList(){
       let data = {
-        systemId: this.systemId,
+        // systemId: this.systemId,
+        systemId: 1,
         cId: this.courseId, // 课程id
         permissions: this.projectPermissions // 练习/考核
       }
@@ -488,21 +487,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.break-all{
-  word-break: break-all;
-}
-.left-btn {
-  height: 150px;
-  width: 35px;
-  cursor: pointer;
-  display: block !important;
-}
-.right-btn {
-  height: 150px;
-  width: 35px;
-  cursor: pointer;
-  display: block !important;
-}
 .el-main {
   width: 60%;
   background-color: #fff;
@@ -512,7 +496,16 @@ export default {
   margin: 0px 20px 10px 10px;
   white-space: pre-wrap;
 }
-
+.toggle-panel {
+  position: fixed;
+  top: 50%;
+  &.active {
+    left: 85%;
+  }
+  img {
+    height: 150px;
+  }
+}
 ::v-deep .el-collapse-item__wrap {
   border-bottom: none;
 }
@@ -523,20 +516,18 @@ export default {
   margin: 0 20px;
 }
 ::v-deep .el-icon-s-ticket:before {
-  font-size: 16px;
   padding: 5px;
-  color: #fdca17;
+  font-size: 16px;
 }
 ::v-deep .el-collapse-item__arrow {
   margin: 0 5px 0 0;
 }
 ::v-deep .el-icon-arrow-right:before {
-  font-size: 12px;
   padding: 1px;
   margin-left: 10px;
-  background-color: #fdca17;
+  font-size: 12px;
+  color: #fff;
   border-radius: 50%;
-  color: #ffffff;
 }
 ::v-deep .el-tabs__item {
   font-size: 16px;
@@ -557,9 +548,8 @@ export default {
   overflow: hidden;
   overflow-y: auto;
 }
-::v-deep .el-tabs__item.is-active {
+/deep/.el-tabs__item.is-active {
-  color: #333;
+  color: #fff;
-  background-color: #fdca17;
 }
 ::v-deep .el-tabs__header {
   padding: 5px 20px;
@@ -580,17 +570,20 @@ export default {
   margin: 0px 10px 10px 10px;
   background-color: #fff;
 }
-.header_h {
+.p-title {
-  height: 40px;
+  display: flex;
-  background-color: #fdca17;
   justify-content: center;
-}
+  height: 40px;
-.header_h p {
+  p {
+    padding-left: 10px;
     line-height: 40px;
     font-size: 16px;
-  padding-left: 10px;
+    color: #fff;
+  }
+  i {
+    color: #fff;
+  }
 }
-//表格
 ::v-deep .el-card__body {
   padding: 0;
 }
@@ -609,28 +602,14 @@ export default {
   color: #ffffff;
   font-size: 10px;
 }
-::v-deep .el-table th,
+/deep/.el-table {
-.el-table tr {
-  background-color: #202020;
-}
-::v-deep .el-table {
   font-size: 12px;
-  color: #202020;
 }
 .el-header {
   padding: 0 12px;
   .submit {
     margin: 5px 7px 5px 5px;
-    background-color: #fdca17;
-    color: #202020;
-    border: none;
     font-size: 16px;
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: #fdca17;
-      color: #202020;
-    }
   }
   .reload {
     color: #d0d0d0;
@@ -641,37 +620,36 @@ export default {
 .between {
   justify-content: space-between;
 }
-//字体样式
 .font_css {
   margin: 0 10px;
   text-indent: 2em;
   font-size: 14px;
   padding: 10px 0;
 }
-//改变placeholder的样式
+/deep/.select {
-.select ::v-deep input::-webkit-input-placeholder {
+  .el-select__caret:before {
-  color: #333;
+    content: "\e78f";
+    padding: 3px;
+    font-size: 16px;
+    color: #fff;
+    border-radius: 50%;
   }
-.select ::v-deep input::-moz-input-placeholder {
+  .el-input__icon {
-  color: #333;
+    line-height: 60px;
   }
-.select ::v-deep input::-ms-input-placeholder {
+  .el-input {
+    padding: 10px 0;
+  }
+  input::-webkit-input-placeholder {
     color: #333;
   }
-//下拉框的icon
+  input::-moz-input-placeholder {
-.select ::v-deep .el-input__icon {
+    color: #333;
-  line-height: 60px;
   }
-//下拉框
+  input::-ms-input-placeholder {
-.select ::v-deep .el-select__caret:before {
+    color: #333;
-  content: "\e78f";
-  font-size: 16px;
-  padding: 3px;
-  background-color: #fdca17;
-  border-radius: 50%;
-  color: #ffffff;
   }
-.select ::v-deep .el-input--suffix .el-input__inner {
+  .el-input--suffix .el-input__inner {
     color: #333;
     font-size: 14px;
     border-radius: 30px;
@@ -681,13 +659,8 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  // white-space: pre-line;
   }
-
-.select ::v-deep .el-input {
-  padding: 10px 0;
 }
-//实训时间、得分
 .countDownBox {
   font-size: 16px;
   margin: 0 10px;
@@ -702,20 +675,15 @@ export default {
   margin: 0 5px;
   text-align: center;
 }
-.gradeSpan {
+.total-score {
-  color: #ffffff;
   padding: 10px;
   font-size: 14px;
-  background: #000000;
-  border-radius: 6px;
   text-align: center;
+  border-radius: 6px;
 }
-
+/deep/.el-container {
-//公共类
-::v-deep .el-container {
   height: 80%;
-}
+  &.is-vertical {
-.el-container.is-vertical {
     background-color: #f5f5f5;
     width: 85%;
     height: 70%;
@@ -724,7 +692,7 @@ export default {
     bottom: 20px;
     left: 0;
   }
-
+}
 .flex {
   display: flex;
   align-items: center;

src/components/codemirror.vue

@@ -10,8 +10,8 @@
       ></codemirror>
       <div v-if="isSubmit" class="code-mask"></div>
       <el-button
-        class="run"
+        class="run btn"
-        type="warning"
+        type="primary"
         @click="runCode(false)"
         :disabled="runEnable"
       >运行</el-button>
@@ -22,10 +22,10 @@
         <div style="margin-bottom: 5px;text-align: center">
           <img class="pic" :src="picSrc" alt="">
         </div>
-        <el-button class="download-btn" type="primary" size="mini" @click="$refs.picLink.click()">下载图片</el-button>
+        <el-button class="download-btn btn" type="primary" size="mini" @click="$refs.picLink.click()">下载图片</el-button>
         <a ref="picLink" style="display: none;" download="运行结果.png" :href="picSrc">下载图片</a>
       </div>
-      <div class="code_yes" v-show="isError">
+      <div class="code_yes t-color" v-show="isError">
         <img :src="require(`@/assets/images/system/${systemId}/yes.png`)" alt />运行成功
       </div>
       <div class="code_error" v-show="isError === 0">
@@ -218,6 +218,8 @@ export default {
             this.isError = 1
             this.runResult += result
           }
+          this.$emit('update:codeId', res.codeId) // 更新coddeId
+          this.$emit('update:answer', this.runResult) // 更新运行结果
         }).catch(e => {
           if(e && e.message == 'interrupt'){
             this.runCode(true)
@@ -276,6 +278,8 @@ export default {
                 this.isError = 1
                 this.confirmInput(result)
               }
+              this.$emit('update:codeId', res.codeId) // 更新coddeId
+              this.$emit('update:answer', this.runResult) // 更新运行结果
             }).catch(err => {})
           } else {
             this.loadIns = Loading.service({
@@ -435,7 +439,6 @@ export default {
   margin-right: 10px;
 }
 .code_yes {
-  color: #fdca17;
   background-color: rgba(43, 40, 22, 1);
 }
 .code_error {
@@ -468,12 +471,6 @@ export default {
     overflow: auto;
   }
 }
-.button ::v-deep .el-button--warning:hover,
-.el-button--warning:focus,
-.el-button--warning:active {
-  background: #fdca17;
-  color: #333;
-}
 .pic-wrap{
   position: absolute;
   left: 0;
@@ -499,7 +496,7 @@ export default {
   right: 50px; 
   bottom:15px;
   width:100px;
-  color:#fff !important;
+  color:#fff;
 }
 .download-btn{
   color:#fff;

src/main.js

@@ -4,12 +4,24 @@ import router from "./router";
 import store from "./store";
 import ElementUI from 'element-ui'
 import util from '@/util'
-import './assets/style/index.scss';
+import '@/styles/index.scss';
 const systemId = util.getCookie('systemId')
 if (systemId == 1) {
-  require('./assets/style/theme/theme1.scss')
+  require('@/styles/theme/theme1.scss')
-} else {
+} else if (systemId == 4) {
-  require('./assets/style/theme/theme10.scss')
+  require('@/styles/theme/theme4.scss')
+} else if (systemId == 5) {
+  require('@/styles/theme/theme5.scss')
+} else if (systemId == 6) {
+  require('@/styles/theme/theme6.scss')
+} else if (systemId == 7) {
+  require('@/styles/theme/theme7.scss')
+} else if (systemId == 8) {
+  require('@/styles/theme/theme8.scss')
+} else if (systemId == 9) {
+  require('@/styles/theme/theme9.scss')
+} else if (systemId == 10) {
+  require('@/styles/theme/theme10.scss')
 }
 import api from './api';
 import {

src/styles/common.scss

@@ -1,16 +1,22 @@
 .flex {
   display: flex;
 }
-.scrollbar ::-webkit-scrollbar {
+.break-all{
+  word-break: break-all;
+}
+.c-p {
+  cursor: pointer;
+}
+::-webkit-scrollbar {
   width: 2px;
   height: 6px; 
 }
-.scrollbar ::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
   background-color: #fdca17;
   border-radius: 3px;
   box-shadow: inset 0 0 5px #dddddd;
 }
-.scrollbar ::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px #dddddd;
   border-radius: 0;
   background: #dddddd;

src/styles/theme/theme1.scss

@@ -0,0 +1,37 @@
+/* 改变主题色变量 */
+$--color-primary: #fdca17;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    p, i {
+        color: #333 !important;
+    }
+}
+.btn {
+    color:#333 !important;
+}
+.el-tabs__item.is-active {
+    color: #333 !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before,
+.el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: #202020;
+}
+.total-score {
+    color: #fff;
+    background-color: #000;
+}

src/styles/theme/theme10.scss

@@ -0,0 +1,34 @@
+/* 改变主题色变量 */
+$--color-primary: #ff6457;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.el-main {
+    background: #fff url(../../assets/images/system/10/bg1.png) 100% 0 no-repeat;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    background: url(../../assets/images/system/10/header.png) 0 0/100% 100% no-repeat;
+}
+.el-tabs__item.is-active {
+    color: #fff !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before, .el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: $--color-primary !important;
+}
+.total-score {
+    color: #878787;
+    background-color: #ffc385;
+}

src/styles/theme/theme4.scss

@@ -0,0 +1,34 @@
+/* 改变主题色变量 */
+$--color-primary: #20bbc7;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.el-main {
+    background: #fff url(../../assets/images/system/4/bg1.png) 100% 0 no-repeat;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    background: url(../../assets/images/system/4/header.png) 0 0/100% 100% no-repeat;
+}
+.el-tabs__item.is-active {
+    color: #fff !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before, .el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: $--color-primary !important;
+}
+.total-score {
+    color: #878787;
+    background-color: #e0e0e0;
+}

src/styles/theme/theme5.scss

@@ -0,0 +1,34 @@
+/* 改变主题色变量 */
+$--color-primary: #ff482e;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.el-main {
+    background: #fff url(../../assets/images/system/5/bg1.png) 100% 0 no-repeat;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    background: url(../../assets/images/system/5/header.png) 0 0/100% 100% no-repeat;
+}
+.el-tabs__item.is-active {
+    color: #fff !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before, .el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: #fc8978 !important;
+}
+.total-score {
+    color: #878787;
+    background-color: #e0e0e0;
+}

src/styles/theme/theme6.scss

@@ -0,0 +1,34 @@
+/* 改变主题色变量 */
+$--color-primary: #ff6400;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.el-main {
+    background: #fff url(../../assets/images/system/6/bg1.png) 100% 0 no-repeat;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    background: url(../../assets/images/system/6/header.png) 0 0/100% 100% no-repeat;
+}
+.el-tabs__item.is-active {
+    color: #fff !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before, .el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: #ffb585 !important;
+}
+.total-score {
+    color: #878787;
+    background-color: #e0e0e0;
+}

src/styles/theme/theme7.scss

@@ -0,0 +1,37 @@
+/* 改变主题色变量 */
+$--color-primary: #8549f7;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.el-main {
+    background: #fff url(../../assets/images/system/7/bg1.png) 100% 0 no-repeat;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    background: url(../../assets/images/system/7/header.png) 0 0/100% 100% no-repeat;
+}
+.el-tabs__item.is-active {
+    color: #fff !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before, .el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: #d695ff !important;
+}
+.total-score {
+    color: #878787;
+    background-color: #d0e7fb;
+}
+.toggle-panel img {
+    height: 180px !important;
+}

src/styles/theme/theme8.scss

@@ -0,0 +1,34 @@
+/* 改变主题色变量 */
+$--color-primary: #5786fc;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.el-main {
+    background: #fff url(../../assets/images/system/8/bg1.png) 100% 0 no-repeat;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    background: url(../../assets/images/system/8/header.png) 0 0/100% 100% no-repeat;
+}
+.el-tabs__item.is-active {
+    color: #fff !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before, .el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: #badfff !important;
+}
+.total-score {
+    color: #878787;
+    background-color: #e0e0e0;
+}

src/styles/theme/theme9.scss

@@ -0,0 +1,34 @@
+/* 改变主题色变量 */
+$--color-primary: #ff8a00;
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import "~element-ui/packages/theme-chalk/src/index";
+.color {
+    background-color: $--color-primary;
+}
+.el-main {
+    background: #fff url(../../assets/images/system/9/bg1.png) 100% 0 no-repeat;
+}
+.t-color {
+    color: $--color-primary;
+}
+.p-title {
+    background: url(../../assets/images/system/9/header.png) 0 0/100% 100% no-repeat;
+}
+.el-tabs__item.is-active {
+    color: #fff !important;
+    background-color: $--color-primary;
+}
+.select .el-select__caret:before, .el-icon-arrow-right:before {
+    background-color: $--color-primary;
+}
+.el-icon-s-ticket:before {
+    color: $--color-primary;
+}
+.el-table th {
+    background-color: #ffc385 !important;
+}
+.total-score {
+    color: #fff;
+    background-color: #ffc385;
+}

src/views/Home.vue

@@ -3,7 +3,7 @@
     <div class="header" :class="{hh: $config.isHh}">
       <img v-if="$config.isHh" src="@/assets/images/logo-hh.png" alt="" class="logo">
       <p v-else>{{$config.title}}</p>
-      <el-button class="back" type="primary" @click="back">退出实验</el-button>
+      <el-button class="back btn" type="primary" @click="back">退出实验</el-button>
     </div>
 
     <div class="language">
@@ -153,8 +153,6 @@ export default {
   }
   .back {
     padding: 23px 50px;
-    color: #202020;
-    background-color: #fdca17;
     border: none;
     border-radius: 0;
   }
@@ -184,7 +182,6 @@ export default {
 }
 ::v-deep .el-dialog__headerbtn .el-icon-close:before {
   padding: 3px;
-  background-color: #fdca17;
   border-radius: 50%;
   color: #ffffff;
 }
@@ -196,7 +193,6 @@ export default {
   }
   .el-tabs__item.is-active {
     color: #333;
-    background-color: #fdca17;
   }
   .el-icon-circle-plus-outline:before {
     font-size: 16px;
@@ -228,7 +224,6 @@ export default {
   content: "\e78f";
   font-size: 16px;
   padding: 3px;
-  background-color: #fdca17;
   border-radius: 50%;
   color: #ffffff;
 }