样式修复

src/components/TestPanel.vue

@@ -2,8 +2,8 @@
   <div class="panel">
     <el-container class="scrollbar" v-if="pannelVisible">
       <el-header>
-        <div class="flex between">
+        <div class="panel-header">
-          <div class="flex" style="width: 28%">
+          <div class="project">
             <p>实训项目</p>
             <el-select
               v-model="projectId"
@@ -21,18 +21,16 @@
               ></el-option>
             </el-select>
           </div>
-          <div class="countDownBox">
+          <div class="item">
-            <div style="margin-left: -40px;">
+            <div class="count">
-              <div>
+              实训{{text}}时间
-                实训{{text}}时间
+              <span>{{day}}</span>天
-                <span class="timeSpan">{{day}}</span>天
+              <span>{{hour}}</span>小时
-                <span class="timeSpan">{{hour}}</span>小时
+              <span>{{minutes}}</span>分
-                <span class="timeSpan">{{minutes}}</span>分
+              <span>{{seconds}}</span>秒
-                <span class="timeSpan">{{seconds}}</span>秒
-              </div>
             </div>
           </div>
-          <div class="countDownBox">
+          <div class="item">
             <div>
               总得分：
               <span class="total-score">{{grade}}</span>
@@ -51,10 +49,8 @@
               <i class="el-icon-s-order"></i>
               <p>实验目标</p>
             </div>
-            <div class="font_css">
+            <div class="goal">
-              <div class="experimentTarget">
+              <div class="break-all" v-html="experimentTarget"></div>
-                <div class="break-all" v-html="experimentTarget"></div>
-              </div>
             </div>
           </div>
           <div class="aside-footer">
@@ -505,42 +501,85 @@ export default {
     height: 150px;
   }
 }
-::v-deep .el-collapse-item__wrap {
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .project {
+    display: inline-flex;
+    align-items: center;
+    width: 28%;
+  }
+  .item {
+    font-size: 16px;
+    margin: 0 10px;
+    padding: 20px 0;
+  }
+  .count {
+    margin-left: -40px;
+    span {
+      padding: 5px 15px;
+      margin: 0 5px;
+      color: #333;
+      font-size: 14px;
+      text-align: center;
+      background: #fff;
+      border-radius: 18px;
+    }
+  }
+  .total-score {
+    padding: 10px;
+    font-size: 14px;
+    text-align: center;
+    border-radius: 6px;
+  }
+  .submit {
+    padding: 12px 30px;
+    margin: 5px 7px 5px 5px;
+    font-size: 16px;
+  }
+  .reload {
+    color: #d0d0d0;
+    font-size:14px;
+    background-color: #202020;
+  }
+}
+/deep/.el-collapse-item__wrap {
   border-bottom: none;
 }
-::v-deep .el-collapse-item__header {
+/deep/.el-collapse-item__header {
   border-bottom: none;
 }
-::v-deep .el-tabs__content {
+/deep/.el-tabs__content {
   margin: 0 20px;
 }
-::v-deep .el-icon-s-ticket:before {
+/deep/.el-icon-s-ticket:before {
   padding: 5px;
   font-size: 16px;
 }
-::v-deep .el-collapse-item__arrow {
+/deep/.el-collapse-item__arrow {
   margin: 0 5px 0 0;
 }
-::v-deep .el-icon-arrow-right:before {
+/deep/.el-icon-arrow-right:before {
   padding: 1px;
   margin-left: 10px;
   font-size: 12px;
   color: #fff;
   border-radius: 50%;
 }
-::v-deep .el-tabs__item {
+/deep/.el-tabs__item {
   font-size: 16px;
 }
-::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
+/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
   border: none;
 }
-::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
+/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
   border-left: none;
 }
-::v-deep .el-tabs--card > .el-tabs__header {
+/deep/.el-tabs--card > .el-tabs__header {
   border-bottom: none;
 }
-::v-deep .el-collapse {
+/deep/.el-collapse {
   border-bottom: none;
   border-top: none;
   height: 500px;
@@ -550,13 +589,13 @@ export default {
 /deep/.el-tabs__item.is-active {
   color: #fff;
 }
-::v-deep .el-tabs__header {
+/deep/.el-tabs__header {
   padding: 5px 20px;
 }
 .el-aside {
   color: #333;
 }
-.el-aside ::v-deep [class*=" el-icon-"],
+.el-aside /deep/[class*=" el-icon-"],
 [class^="el-icon-"] {
   line-height: 40px;
   font-size: 16px;
@@ -583,48 +622,28 @@ export default {
     color: #fff;
   }
 }
-::v-deep .el-card__body {
+/deep/.el-card__body {
   padding: 0;
 }
-
-::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
-  background: #fff9e6;
-}
-::v-deep .el-table td,
-.el-table th.is-leaf {
-  border-bottom: 0;
-}
-::v-deep .el-table th > .cell {
-  font-weight: 100;
-}
-::v-deep .el-table thead {
-  color: #fff;
-  font-size: 10px;
-}
 /deep/.el-table {
   font-size: 12px;
-}
+  thead {
-.el-header {
+    color: #fff;
-  padding: 0 12px;
+    font-size: 10px;
-  .submit {
-    padding: 12px 30px;
-    margin: 5px 7px 5px 5px;
-    font-size: 16px;
   }
-  .reload {
+  th > .cell {
-    color: #d0d0d0;
+    font-weight: 100;
-    font-size:14px;
+  }
-    background-color: #202020;
+  td,
+  th.is-leaf {
+    border-bottom: 0 !important;
   }
 }
-.between {
+.goal {
-  justify-content: space-between;
+  padding: 10px 0;
-}
-.font_css {
   margin: 0 10px;
   text-indent: 2em;
   font-size: 14px;
-  padding: 10px 0;
 }
 /deep/.select {
   .el-select__caret:before {
@@ -640,47 +659,19 @@ export default {
   .el-input {
     padding: 10px 0;
   }
-  input::-webkit-input-placeholder {
-    color: #333;
-  }
-  input::-moz-input-placeholder {
-    color: #333;
-  }
-  input::-ms-input-placeholder {
-    color: #333;
-  }
   .el-input--suffix .el-input__inner {
+    padding-right: 50px;
+    margin-left: 15px;
     color: #333;
     font-size: 14px;
     border-radius: 30px;
     border: none;
     background-color: #fff;
-    margin-left: 15px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 }
-.countDownBox {
-  font-size: 16px;
-  margin: 0 10px;
-  padding: 20px 0;
-}
-.timeSpan {
-  color: #333333;
-  padding: 5px 15px;
-  font-size: 14px;
-  background: #fff;
-  border-radius: 18px;
-  margin: 0 5px;
-  text-align: center;
-}
-.total-score {
-  padding: 10px;
-  font-size: 14px;
-  text-align: center;
-  border-radius: 6px;
-}
 /deep/.el-container {
   height: 80%;
   &.is-vertical {
@@ -693,10 +684,6 @@ export default {
     left: 0;
   }
 }
-.flex {
-  display: flex;
-  align-items: center;
-}
 .right {
   color: #00af00;
   font-size: 20px;

src/components/codemirror.vue

@@ -25,10 +25,10 @@
         <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 t-color" v-show="isError">
+      <div class="result-right t-color" v-show="isError">
         <img :src="require(`@/assets/images/system/${systemId}/yes.png`)" alt />运行成功
       </div>
-      <div class="code_error" v-show="isError === 0">
+      <div class="result-wrong" v-show="isError === 0">
         <img src="@/assets/images/error.png" alt />
         第{{errLine}}行出现错误
         <el-button class="tips-btn" @click="getTips" v-show="showTips">提示</el-button>
@@ -162,7 +162,7 @@ export default {
   methods: {
     // 页面加载完后重置编辑框大小
     ready() {
-      this.$refs.myCmGenerate.codemirror.setSize("auto", "calc(100vh - 149px)");
+      this.$refs.myCmGenerate.codemirror.setSize("auto", "calc(100vh - 167px)");
     },
     /**
      * python代码里如果有input函数的话，是做了单独的处理的，原理是先把所有input函数都替换成exit函数，再在exit函数里加上特定标识，再通过接口传给后端去执行
@@ -421,39 +421,32 @@ export default {
     }
   }
 }
-::v-deep .CodeMirror-wrap pre.CodeMirror-line,
+/deep/.CodeMirror-wrap pre.CodeMirror-line,
 .CodeMirror-wrap pre.CodeMirror-line-like {
   height: 30px;
   line-height: 30px;
 }
-.code_error img {
+.result-right {
-  width: 40px;
-  height: 40px;
-  margin-top: 5px;
-  margin-right: 10px;
-}
-.code_yes img {
-  width: 40px;
-  height: 40px;
-  margin-top: 5px;
-  margin-right: 10px;
-}
-.code_yes {
   background-color: rgba(43, 40, 22, 1);
 }
-.code_error {
+.result-wrong {
   background-color: rgba(43, 22, 22, 1);
-  color: red;
+  color: #f00;
 }
-.code_error,
+.result-wrong,
-.code_yes {
+.result-right {
-  display: flex;
-  bottom: 10px;
   position: absolute;
   left: 20px;
   right: 20px;
+  display: flex;
+  bottom: 10px;
   padding: 0 10px;
-  box-sizing: border-box;
+  img {
+    width: 40px;
+    height: 40px;
+    margin-top: 5px;
+    margin-right: 10px;
+  }
 }
 .code-right {
   width: 500px;
@@ -467,7 +460,7 @@ export default {
     margin: 10px;
     position: absolute;
     width: calc(100% - 14px);
-    height: calc(100vh - 230px);
+    height: calc(100vh - 247px);
     overflow: auto;
   }
 }

src/store/index.js

@@ -2,22 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 Vue.use(Vuex);
 const store = new Vuex.Store({
-  state: {
+  state: {},
-    projectId: '',
+  mutations: {}
-    codeid: '',
-    code: '',
-    judgmentPointsId: '',
-    workbench: []
-  },
-  mutations: {
-    projectData(state, payload){
-      state.projectId = payload.projectId
-      state.codeid = payload.codeid
-      state.code = payload.code
-      state.judgmentPointsId = payload.judgmentPointsId
-      state.workbench = payload.workbench
-    }
-
-  }
 });
 export default store;

src/styles/common.scss

@@ -20,4 +20,13 @@
   box-shadow: inset 0 0 5px #dddddd;
   border-radius: 0;
   background: #dddddd;
+}
+input::-webkit-input-placeholder {
+  color: #333;
+}
+input::-moz-input-placeholder {
+  color: #333;
+}
+input::-ms-input-placeholder {
+  color: #333;
 }

src/styles/theme/theme1.scss

@@ -28,8 +28,13 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 .el-icon-s-ticket:before {
     color: $--color-primary;
 }
-.el-table th {
+.el-table {
-    background-color: #202020 !important;
+    th {
+        background-color: #202020 !important;
+    }
+    .el-table__row--striped td {
+        background-color: #fff9e6 !important;
+    }
 }
 .total-score {
     color: #fff;

src/views/Home.vue

@@ -35,7 +35,7 @@
 
     <div class="menu">
       <testPanel
-        @tell="getQueryIndex"
+        @tell="setPoints"
         @recoveryCode="recoveryCode"
         ref="mainindex"
         :workbench.sync="workbench"
@@ -122,8 +122,8 @@ export default {
     back() {
       history.back()
     },
-    // 赋值项目id、权限、项目列表
+    // 赋值项目id、项目列表
-    getQueryIndex(projectId, workbench) {
+    setPoints(projectId, workbench) {
       this.projectId = projectId
       this.workbench = workbench
     },
@@ -207,31 +207,4 @@ export default {
     border-bottom: none;
   }
 }
-::v-deep input::-webkit-input-placeholder {
-  color: #333;
-}
-::v-deep input::-moz-input-placeholder {
-  color: #333;
-}
-::v-deep input::-ms-input-placeholder {
-  color: #333;
-}
-::v-deep .el-input__icon {
-  line-height: 60px;
-}
-::v-deep .el-select__caret:before {
-  content: "\e78f";
-  font-size: 16px;
-  padding: 3px;
-  border-radius: 50%;
-  color: #fff;
-}
-::v-deep .el-input--suffix .el-input__inner {
-  color: #333;
-  font-size: 14px;
-  border-radius: 30px;
-  border: none;
-  background-color: #f5f5f5;
-  margin-left: 10px;
-}
 </style>