重构（未完成）

src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div>
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>-->
     <router-view />
   </div>
 </template>

src/assets/style/theme/theme1.scss

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

src/components/TestPanel.vue

@@ -39,12 +39,8 @@
             </div>
           </div>
           <div>
-            <el-button
+            <el-button class="reload" @click="reload" v-show="projectPermissions == 0">重新开始</el-button>
-              style="backgroundColor: #202020;color: #d0d0d0;font-size:14px;"
+            <el-button class="submit" @click="confirmSubmit" :disabled="isSubmit">提交</el-button>
-              v-show="projectPermissions == 0"
-              @click="reload"
-            >重新开始</el-button>
-            <el-button style="margin-right:7px" @click="confirmSubmit" :disabled="isSubmit">提交</el-button>
           </div>
         </div>
       </el-header>
@@ -122,14 +118,13 @@
         </el-main>
       </el-container>
     </el-container>
-    <!-- </div> -->
 
     <div
       :style="pannelVisible ? {position: 'fixed', left: '85%',top:'50%'} : {position: 'fixed',top:'50%'}"
     >
       <div @click="togglePannel">
-        <img src="../assets/img/left.png" alt class="left-btn" v-if="pannelVisible" />
+        <img :src="require(`@/assets/images/system/${systemId}/left.png`)" alt class="left-btn" v-if="pannelVisible" />
-        <img src="../assets/img/right.png" alt class="right-btn" v-if="!pannelVisible" />
+        <img :src="require(`@/assets/images/system/${systemId}/right.png`)" alt class="right-btn" v-if="!pannelVisible" />
       </div>
     </div>
   </div>
@@ -623,8 +618,25 @@ export default {
   color: #202020;
 }
 .el-header {
-  color: #333;
   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;
+    font-size:14px;
+    background-color: #202020;
+  }
 }
 .between {
   justify-content: space-between;
@@ -698,20 +710,6 @@ export default {
   border-radius: 6px;
   text-align: center;
 }
-//重新开始、提交
-.el-header ::v-deep .el-button {
-  background-color: #fdca17;
-  color: #202020;
-  border: none;
-  margin: 5px 0px 5px 5px;
-  font-size: 16px;
-}
-.el-header ::v-deep .el-button:hover,
-.el-button:focus,
-.el-button:active {
-  background-color: #fdca17;
-  color: #202020;
-}
 
 //公共类
 ::v-deep .el-container {

src/components/codemirror.vue

@@ -25,11 +25,11 @@
         <el-button class="download-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="this.isError">
+      <div class="code_yes" v-show="isError">
-        <img src="../assets/img/yes.png" alt />运行成功
+        <img :src="require(`@/assets/images/system/${systemId}/yes.png`)" alt />运行成功
       </div>
-      <div class="code_error" v-show="this.isError === 0">
+      <div class="code_error" v-show="isError === 0">
-        <img src="../assets/img/error.png" alt />
+        <img src="@/assets/images/error.png" alt />
         第{{errLine}}行出现错误
         <el-button class="tips-btn" @click="getTips" v-show="showTips">提示</el-button>
         <el-dialog title="答案提示" center :visible.sync="tipsVisible">

src/config/index.js

@@ -1,17 +1,58 @@
+import util from '@/util'
+
 const isHh = location.host.includes('10.196.131.73') //是否是河海版本
 const isBeta = process.env.NODE_ENV === 'development' || location.host.includes('39.108.250.202') //是否是职站测试
 
-let host = ''
+let host = location.origin + '/'
+// 测试环境是9000，所以要特殊判断
 if(isBeta) {
     host = 'http://39.108.250.202:9000/'
     // host = 'http://192.168.31.151:9000'
-} else {
-    host = location.origin + '/'
 }
-
+/**
+ * python8个系统的id和名称
+ * id即systemId，从cookie里取
+ */
+const systemId = util.getCookie('systemId')
+const pythonList = [
+    {
+        id: 1,
+        name: 'Python程序设计教学系统'
+    },
+    {
+        id: 4,
+        name: '经济金融建模实验教学系统'
+    },
+    {
+        id: 5,
+        name: 'Python数据可视化实验教学系统'
+    },
+    {
+        id: 6,
+        name: '金融随机过程实验教学系统'
+    },
+    {
+        id: 7,
+        name: '量化投资策略建模实验教学系统'
+    },
+    {
+        id: 8,
+        name: '大数据分析实验教学系统'
+    },
+    {
+        id: 9,
+        name: 'Python数据清洗教学实验系统'
+    },
+    {
+        id: 10,
+        name: 'Python数据采集（爬虫）教学实验系统'
+    }
+]
+const systemItem = pythonList.find(e => e.id == systemId)
+const title = systemItem ? systemItem.name : 'Python程序设计教学系统' // 如果有匹配的python系统，则取匹配到的python，否则，默认显示python程序设计，其他地方同理
 export default {
     /**
-     * @description 域名切换
+     * @description 域名
      */
     host,
     /**
@@ -25,44 +66,11 @@ export default {
     /**
      * @description 配置显示在浏览器标签的title
      */
-    title: 'Python程序设计教学系统',
+    title,
     /**
      * python子系统
      **/
-    pythonList: [
+    pythonList,
-        {
-            id: 1,
-            name: 'Python程序设计教学系统'
-        },
-        {
-            id: 4,
-            name: 'pyFinance'
-        },
-        {
-            id: 5,
-            name: 'pyProjects'
-        },
-        {
-            id: 6,
-            name: 'pyRandom'
-        },
-        {
-            id: 7,
-            name: 'pyQuantification'
-        },
-        {
-            id: 8,
-            name: 'pyAnalysis'
-        },
-        {
-            id: 9,
-            name: 'pyDataclean'
-        },
-        {
-            id: 10,
-            name: 'pyAcquisition'
-        }
-    ],
     /**
      * @description 长时间未操作，自动退出登录时间
      */

src/main.js

@@ -7,7 +7,6 @@ import util from '@/util'
 import './assets/style/index.scss';
 const systemId = util.getCookie('systemId')
 if (systemId == 1) {
-  console.log(systemId)
   require('./assets/style/theme/theme1.scss')
 } else {
   require('./assets/style/theme/theme10.scss')

src/views/Home.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
     <div class="header" :class="{hh: $config.isHh}">
-      <img v-if="$config.isHh" src="../assets/img/logo-hh.png" alt="" class="logo">
+      <img v-if="$config.isHh" src="@/assets/images/logo-hh.png" alt="" class="logo">
       <p v-else>{{$config.title}}</p>
-      <div class="bt">
+      <el-button class="back" type="primary" @click="back">退出实验</el-button>
-        <el-button type="primary" @click="back">退出实验</el-button>
-      </div>
     </div>
 
-    <div class="flex center">
+    <div class="language">
       <p v-if="$config.isHh" style="font-size: 18px">{{$config.title}}</p>
       <p>编程语言</p>
       <el-input placeholder="请输入内容" v-model="language" :disabled="true"></el-input>
@@ -134,18 +132,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  height: 58px;
+  line-height: 58px;
+  background-color: #f8f8f8;
+  &.hh{
+    padding: 10px 0;
+    line-height: normal;
+  }
+  p {
+    margin-left: 18px;
+    font-size: 20px;
+    color: rgba(51, 51, 51, 1);
+  }
+  .logo{
+    width: 200px;
+    margin-left: 10px;
+  }
+  .back {
+    padding: 23px 50px;
+    color: #202020;
+    background-color: #fdca17;
+    border: none;
+    border-radius: 0;
+  }
+}
+/deep/.language {
+  display: flex;
+  height: 60px;
+  line-height: 60px;
+  p {
+    font-size: 16px;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  .el-input {
+    width: 10%;
+  }
+  .el-input.is-disabled .el-input__inner {
+    border-radius: 30px;
+  }
+}
 .menu {
   position: relative;
   z-index: 1000;
 }
-.code-right {
-  width: 230px;
-  background: #1b1b1b;
-  display: inline-block;
-}
-::v-deep .el-form-item {
-  margin-bottom: 0px;
-}
 ::v-deep .el-dialog--center {
   width: 400px;
 }
@@ -155,91 +188,30 @@ export default {
   border-radius: 50%;
   color: #ffffff;
 }
-.select1 ::v-deep .el-input__icon {
+/deep/.tab {
-  line-height: 40px;
-}
-.select1 {
-  margin: 0;
-}
-.tab ::v-deep .el-tabs__header {
-  margin-bottom: 0;
-}
-.tab ::v-deep .el-tabs__item.is-active {
-  color: #333;
-  background-color: #fdca17;
-}
-.tab ::v-deep .el-icon-circle-plus-outline:before {
-  font-size: 16px;
-}
-
-.tab {
   height: 50px;
   line-height: 50px;
-}
+  .el-tabs__header {
-// tabs边框样式
+    margin-bottom: 0;
-::v-deep .el-tabs--card > .el-tabs__header {
+  }
-  border-bottom: none;
+  .el-tabs__item.is-active {
-}
+    color: #333;
-::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
+    background-color: #fdca17;
-  border: none;
+  }
-}
+  .el-icon-circle-plus-outline:before {
-::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
-  border-left: none;
-  border-bottom: none;
-}
-.center p {
-  font-size: 16px;
-  margin-left: 15px;
-  margin-right: 15px;
-}
-.center {
-  height: 60px;
-  line-height: 60px;
-}
-.center ::v-deep .el-input {
-  width: 10%;
-}
-.center ::v-deep .el-input.is-disabled .el-input__inner {
-  border-radius: 30px;
-}
-//头部
-.bt ::v-deep .el-button + .el-button {
-  margin-left: 0;
-}
-.bt ::v-deep .el-button--primary,
-.el-button--primary:focus,
-.el-button--primary:hover,
-.el-button--primary:active {
-  color: #202020;
-  border: none;
-  background-color: #fdca17;
-}
-.bt ::v-deep .el-button {
-  border-radius: 0;
-  border: none;
-}
-.header {
-  display: flex;
-  justify-content: space-between;
-  height: 40px;
-  line-height: 40px;
-  background-color: #f8f8f8;
-  p {
-    margin-left: 18px;
     font-size: 16px;
-    font-weight: 700;
-    color: rgba(51, 51, 51, 1);
   }
-  &.hh{
+  .el-tabs--card > .el-tabs__header {
-    padding: 10px 0;
+    border-bottom: none;
-    line-height: normal;
   }
-  .logo{
+  .el-tabs--card > .el-tabs__header .el-tabs__nav {
-    width: 200px;
+    border: none;
-    margin-left: 10px;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item {
+    border-left: none;
+    border-bottom: none;
   }
 }
-//改变placeholder的样式
 ::v-deep input::-webkit-input-placeholder {
   color: #333;
 }