样式优化

src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-        <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div> -->
     <router-view />
   </div>
 </template>
@@ -12,11 +8,11 @@
 export default {
   created () {
     //在页面加载时读取localStorage里的状态信息
-        sessionStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(sessionStorage.getItem("userMsg"))));
+    sessionStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(sessionStorage.getItem("userMsg"))));
 
     //在页面刷新时将vuex里的信息保存到sessionStorage里
-        window.addEventListener("beforeunload",()=>{
+    window.addEventListener("beforeunload", () => {
-            sessionStorage.setItem("userMsg",JSON.stringify(this.$store.state))
+      sessionStorage.setItem("userMsg", JSON.stringify(this.$store.state))
     })
   }
 }
@@ -32,13 +28,16 @@ export default {
   /* background-color: #f8f7f7; */
   height: 100%;
 }
+
 body {
   margin: 0;
   background-color: #f8f7f7;
 }
+
 /deep/.el-tree-node__content {
-  height: 20px!important;
+  height: 20px !important;
 }
+
 #nav {
   padding: 30px;
 }

src/main.js

@@ -12,11 +12,11 @@ import {
   put
 } from './utils/http';
 import api from './utils/api';
-import './util/rem'
+import '@/styles/index.scss'
 
 Vue.use(ElementUI);
 
-Vue.prototype.core=core
+Vue.prototype.core = core
 Vue.prototype.api = api;
 Vue.prototype.$get = get;
 Vue.prototype.$post = post;

src/styles/index.scss

@@ -0,0 +1,41 @@
+.pagination {
+  margin: 20px 0;
+  text-align: right;
+
+  button,
+  .number {
+    color: rgba(0, 0, 0, 0.65) !important;
+    background-color: transparent !important;
+    border: 1px solid rgba(0, 0, 0, 0.15) !important;
+    border-radius: 4px !important;
+  }
+
+  button i {
+    color: #333;
+  }
+
+  .active {
+    color: #fff !important;
+    background-color: #9278ff !important;
+  }
+}
+
+.p-title {
+  padding-left: 5px;
+  margin: 0 0 24px;
+  line-height: 1;
+  font-size: 14px;
+  color: #585858;
+  border-left: 3px solid #9278ff;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 5px;
+  border-radius: 6px;
+  background: #d7d7d7;
+}

src/util/rem.js

@@ -1,16 +0,0 @@
-// rem等比适配配置文件
-// 基准大小
-const baseSize = 16
-// 设置 rem 函数
-function setRem () {
-  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
-  const scale = document.documentElement.clientWidth / 1920
-  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
-  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
-}
-// 初始化
-setRem()
-// 改变窗口大小时重新设置 rem
-window.onresize = function () {
-  setRem()
-}

src/views/Home.vue

@@ -1,35 +1,18 @@
 <template>
-  <div class="content">
+  <div class="wrap">
-    <div class="header flex">
+    <el-card shadow="hover">
-      <i class="el-icon-arrow-left" @click="back" style="cursor:pointer">
+      <el-page-header content="判分点设置" @back="back"></el-page-header>
-        <span>Back</span>
+      <div class="tools">
-      </i>
+        <el-input placeholder="请输入判分点名称" prefix-icon="el-icon-search" size="small" style="width: 300px;"
-
-      <p>{{ systemName }} 判分点设置</p>
-    </div>
-    <div class="footer">
-      <div class="footer_h">
-        <div class="black" style="float: left"></div>
-        <p style="float: left">判分点列表</p>
-      </div>
-      <div class="flex footer_h">
-        <div style="width: 300px;float: left">
-          <el-input placeholder="请输入判分点名称" style="height: 33px;width:100%" prefix-icon="el-icon-search"
           v-model="keyword" clearable></el-input>
-        </div>
+        <div>
-        <div style="float: right">
+          <el-button type="primary" size="small" round @click="toAdd">新增</el-button>
-          <el-button class="button" style="height: 33px;line-height: 0px" @click="HomepageJump()">新增</el-button>
+          <el-button type="primary" size="small" round @click="batchDel">批量删除</el-button>
-          <el-button class="button" style="height: 33px;line-height: 0px" @click="deletes()">批量删除</el-button>
+          <el-button v-if="systemId == 19" type="primary" size="small" round @click="batchCopy">批量复制</el-button>
-          <el-button v-if="systemId == 19" class="button" style="height: 33px;line-height: 0px"
-            @click="batchCopy">批量复制</el-button>
         </div>
       </div>
-      <div>
+      <el-table ref="table" class="list" :data="tableData" :cell-style="rowClass" :header-cell-style="headClass"
-        <el-row>
+        size="small" :stripe="true" header-align="center" @selection-change="handleSelectionChange">
-          <el-col :span="24">
-            <el-card shadow="hover">
-              <el-table :data="tableData" :cell-style="rowClass" :header-cell-style="headClass" :stripe="true"
-                header-align="center" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55">
         </el-table-column>
         <el-table-column type="index" label="序号" width="80" align="center">
@@ -43,7 +26,6 @@
             </div>
           </template>
         </el-table-column>
-
         <el-table-column prop="operate" label="操作" align="center">
           <template slot-scope="scope">
             <el-button v-if="systemId == 19" @click="copy(scope.row)" type="text" size="small">复制</el-button>
@@ -58,25 +40,20 @@
           </template>
         </el-table-column>
       </el-table>
-            </el-card>
-          </el-col>
-        </el-row>
 
-        <!-- 分页 -->
+      <div class="pagination">
-        <div class="block">
         <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum" :page-size="10"
           layout="total,prev, pager, next, jumper" :total="dataTotal"></el-pagination>
       </div>
-      </div>
+    </el-card>
-    </div>
 
     <el-dialog title="复制" :visible.sync="copyVisible" width="500px" center :close-on-click-modal="false">
       <el-form label-width="90px" v-loading="beforeCopying">
         <el-form-item v-if="curRow" prop="name" label="判分点名称">
           <el-input size="small" placeholder="请输入判分点名称" v-model="form.name"></el-input>
         </el-form-item>
-        <el-form-item prop="checkpointId" label="关联关卡">
+        <el-form-item prop="checkpointId" label="复制至关卡">
-          <el-select size="small" v-model="form.checkpointId" placeholder="请选择关联关卡">
+          <el-select size="small" v-model="form.checkpointId" placeholder="请选择要复制至的关卡">
             <el-option v-for="(item, i) in checkpoints" :key="i" :label="item.customsPassName"
               :value="item.checkpointId">
             </el-option>
@@ -100,7 +77,7 @@ export default {
       keyword: '',
       searchTimer: null,
       tableData: [],
-      dataTotal: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
+      dataTotal: 0,
       pageNum: 1,
       pageSize: 10,
       currentPage: 1,
@@ -124,7 +101,8 @@ export default {
     keyword: function (val) {
       clearTimeout(this.searchTimer)
       this.searchTimer = setTimeout(() => {
-        this.pageNum = 1;
+        this.$refs.table.clearSelection()
+        this.pageNum = 1
         this.initData()
       }, 500)
     },
@@ -142,6 +120,7 @@ export default {
   },
   methods: {
     handleCurrentChange (val) { // 切换页码
+      this.$refs.table.clearSelection()
       this.pageNum = val;
       this.initData();
     },
@@ -172,17 +151,14 @@ export default {
         } else {
           this.$message.error(res.message);
         }
-      }).catch(err => {
+      }).catch(err => { });
-        console.log(err);
-      });
     },
     //
     handleSelectionChange (val) {
-      console.log(val)
       this.multipleSelection = val;
     },
     //批量删除
-    deletes () {
+    batchDel () {
       let bcIdList = [];
       let nameList = [];
       let lcIdList = [];
@@ -226,16 +202,9 @@ export default {
           if (this.nameList.length === this.tableData.length && this.pageNum > 1) {
             this.handleCurrentChange(this.pageNum - 1)
           }
-        }).catch(() => {
+        }).catch(() => { });
-          this.$message.info("已取消删除");
-        });
       } else {
-        this.$alert('请选择需要删除的判分点', '提示', {
+        this.$message.error('请选择数据')
-          confirmButtonText: '好的',
-          callback: action => {
-
-          }
-        });
       }
     },
     getProgrammingClassData (params) { // 获取编程类判分点列表数据
@@ -246,31 +215,20 @@ export default {
       });
     },
     getCHProgrammingClassData () {
-      let systemId = this.$route.query.systemId
+      const { query } = this.$route
-      let userId = this.$route.query.userId
+      this.$post(`${this.api.QueryPointOfJudgement}?systemId=${query.systemId}&userId=${query.userId}&pageNum=${query.pageNum}&pageSize=${query.pageSize}&queryName=${query.queryName}&userIdList=${query.userIdList}`).then(res => {
-      let pageNum = this.$route.query.pageNum
-      let pageSize = this.$route.query.pageSize
-      let queryName = this.$route.query.queryName
-      let userIdList = this.$route.query.userIdList
-      this.$post(`${this.api.QueryPointOfJudgement}?systemId=${systemId}&userId=${userId}&pageNum=${pageNum}&pageSize=${pageSize}&queryName=${queryName}&userIdList=${userIdList}`).then(res => {
         this.tableData = res.message.records;
         this.dataTotal = res.message.total;
-      }).catch(err => {
+      }).catch(err => { });
-        console.log(err);
-      });
     },
-    HomepageJump () { //新增
+    //新增
-      if (this.isProcess) {
+    toAdd () {
-        // 交易类
+      this.$router.push(`${this.isProcess ? 'Transaction' : 'program'}?isAdd=true&systemId=${this.systemId}`)
-        this.$router.push(`Transaction?isAdd=true&systemId=${this.systemId}`);
-      } else {
-        // 编程类
-        this.$router.push(`program?isAdd=true&systemId=${this.systemId}`);
-      }
     },
     // 批量复制
     batchCopy () {
       if (this.multipleSelection.length) {
+        // 有选中的情况下直接打开复制弹框
         this.form = {
           name: '',
           checkpointId: '',
@@ -278,7 +236,21 @@ export default {
         this.curRow = null
         this.copyVisible = true
       } else {
-        this.$message.warning("请先选择数据 ！");
+        // 没选中就提示是否要复制全部数据
+        this.$confirm('当前未选中任何数据，是否需要复制当前列表的全部数据？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          const res = await this.$post(this.api.queryAllJudgmentPoint, {
+            name: this.keyword,
+            pageNum: 1,
+            pageSize: 1000,
+            systemId: this.systemId
+          })
+          this.multipleSelection = res.message.records
+          this.batchCopy()
+        }).catch(() => { })
       }
     },
     // 复制
@@ -430,182 +402,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .ql-toolbar {
+.wrap {
-  height: 0;
+  padding: 20px;
-  padding: 0;
-  border-bottom: 0;
-}
-
-//分页
-.footer /deep/ .el-pagination span:not([class*='suffix']),
-.el-pagination button {
-  font-size: 16px;
-  margin-right: 30px;
-}
-
-.footer /deep/ .el-pagination {
-  text-align: right;
-  margin: 20px 0 0 0;
-}
-
-/deep/ .el-button {
-  //line-height: 33px;
-  //height: 33px;
-}
-
-.footer {
-  background-color: #ffffff;
-  margin-top: 10px;
-  padding: 10px 20px 20px 20px;
-}
-
-.footer_h {
-  position: relative;
-  height: 50px;
-  line-height: 50px;
-}
-
-.footer_h .black {
-  width: 8px;
-  height: 18px;
-  background-color: #333;
-  margin-top: 15px;
 }
 
-.footer_h p {
+.tools {
-  padding-left: 10px;
+  display: flex;
-  // padding-right: 980px;
+  justify-content: space-between;
-  font-size: 14px;
+  margin: 20px 0;
-  font-weight: 600;
-  margin: 0;
-}
-
-// 文本框
-.footer /deep/ .el-textarea__inner {
-  height: 60px;
-  width: 540px;
-  resize: none;
-  border: 1px solid #9278ff;
-  font-size: 12px;
-  border-radius: 5px;
-}
-
-.footer /deep/ .el-textarea__inner:hover {
-  border: 1px solid #9278ff;
-}
-
-.footer /deep/ .el-table th.is-leaf,
-.el-table td {
-  border-bottom: none;
-}
-
-.footer /deep/ .el-table--group::after,
-.el-table--border::after,
-.el-table::before {
-  background: rgba(255, 255, 255, 1);
-}
-
-// 滚动条的宽度
-/deep/ ::-webkit-scrollbar {
-  width: 6px; // 横向滚动条
-  height: 6px; // 纵向滚动条 必写
-}
-
-// 滚动条的滑块
-/deep/ ::-webkit-scrollbar-thumb {
-  background-color: #9278ff;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 0 5px #dddddd;
-}
-
-/deep/ ::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px #dddddd;
-  border-radius: 0;
-  background: #dddddd;
 }
 
-.footer /deep/ .el-card__body {
+/deep/ .ql-toolbar {
+  height: 0;
   padding: 0;
+  border-bottom: 0;
 }
 
-.footer /deep/ .el-card {
+/deep/.list.el-table {
-  border: none;
+  border-radius: 8px;
-}
+  border: 1px solid rgba(0, 0, 0, 0.06);
-
+  border-bottom: 0;
-.footer /deep/ .el-table th {
-  font-size: 14px;
-  font-family: Microsoft YaHei;
-  color: rgba(255, 255, 255, 1);
-  background-color: #9278ff;
-}
-
-.footer /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
-  background-color: #f5f2ff;
-}
-
-.footer /deep/ .el-button--text {
-  padding-right: 20px;
-  color: #9278ff;
-}
-
-.footer /deep/ .el-button--text:focus,
-.el-button--text:hover {
-  color: #9278ff;
-}
-
-.button {
-  margin: 7px;
-  border: none;
-  background-color: #9278ff;
-  color: #ffffff;
-  border-radius: 20px;
-  float: right;
-}
-
-.button:focus {
-  outline: 0;
-}
-
-.header /deep/ [class*=' el-icon-'],
-[class^='el-icon-'] {
-  line-height: 3;
-  padding-left: 10px;
-}
 
-.header {
+  .cell {
-  display: flex;
-  background-color: #ffffff;
-  height: 50px;
     font-size: 12px;
-  line-height: 50px;
+    line-height: 35px;
-  font-weight: 600;
+  }
-}
 
-.header span {
+  th {
-  font-size: 16px;
+    background: #9278ff !important;
-  font-weight: 600;
-  padding-left: 5px;
-}
 
-.header p {
+    .cell {
+      color: #fff;
       font-size: 14px;
-  padding-left: 20px;
+      font-weight: normal;
-  margin: 0;
+    }
-}
+  }
-
-.flex {
-  //display: flex;
-  justify-content: flex-start;
-}
-
-.flex-end {
-  //display: flex;
-  justify-content: flex-end;
-}
-
-.content {
-  position: relative;
-  top: 10px;
 }
 </style>

src/views/Program.vue

@@ -1,180 +1,107 @@
 <template>
   <!-- 编程类 -->
-  <div class="content">
+  <div class="wrap">
+    <el-card shadow="hover">
       <div class="header">
         <div>
-        <i class="back el-icon-arrow-left"
+          <el-page-header content="判分点设置" @back="back"></el-page-header>
-           @click="Back()"
-           style="cursor:pointer">
-          <span>Back</span>
-        </i>
-        <span class="title">判分点设置</span>
         </div>
         <div>
-        <el-button v-if="!isView"
+          <el-button v-if="!isView" type="primary" size="mini" @click="submit">保存</el-button>
-                   type="primary"
-                   size="mini"
-                   @click="submit">保存</el-button>
         </div>
       </div>
+    </el-card>
 
     <!--基本信息-->
-    <div>
+    <el-card shadow="hover" style="margin: 20px 0;">
       <div class="form-con">
-        <div class="title">
+        <p class="p-title">基本信息</p>
-          <div class="black"></div>
-          <div>基本信息</div>
-        </div>
         <div class="item">
           <div class="label">判分点</div>
-          <el-input v-model.trim="formData.points.name"
+          <el-input v-model.trim="formData.points.name" :readonly="isView" @blur="handleBlur" placeholder="请输入内容"
-                    :readonly="isView"
+            clearable style="width: 400px"></el-input>
-                    @blur="handleBlur"
-                    placeholder="请输入内容"
-                    clearable
-                    style="width: 400px"></el-input>
         </div>
         <div class="item">
           <div class="label">实验要求</div>
-          <quill class="quill"
+          <quill class="quill" v-model="formData.points.experimentalRequirements"
-                 v-model="formData.points.experimentalRequirements"
+            :type.sync="formData.points.experimentalRequirementsType" :readonly="isView" :border="true" :minHeight="150"
-                 :type.sync="formData.points.experimentalRequirementsType"
-                 :readonly="isView"
-                 :border="true"
-                 :minHeight="150"
             :height="150" />
         </div>
       </div>
+    </el-card>
 
     <!--实验代码-->
+    <el-card shadow="hover">
       <div class="form-con">
-        <div class="title">
+        <p class="p-title">实验代码</p>
-          <div class="black"></div>
-          <div>实验代码</div>
-        </div>
         <p style="text-align: center;">参考答案</p>
         <div>
-          <quill v-model="formData.points.experimentCode"
+          <quill v-model="formData.points.experimentCode" :type.sync="formData.points.experimentCodeType"
-                 :type.sync="formData.points.experimentCodeType"
+            :readonly="isView" :border="true" :minHeight="300" :height="300" :index="1" />
-                 :readonly="isView"
-                 :border="true"
-                 :minHeight="300"
-                 :height="300"
-                 :index="1" />
         </div>
       </div>
+    </el-card>
 
     <!--判分规则-->
-      <div class="rule-con">
+    <el-card shadow="hover" style="margin-top: 20px;">
-        <div class="title-con">
+      <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;">
-          <div class="title">
+        <p class="p-title" style="margin-bottom: 0;">判分规则</p>
-            <div class="black"></div>
-            <div>判分规则</div>
-          </div>
         <div>
-            <el-button v-if="!isView"
+          <el-button v-if="!isView" type="primary" size="mini" @click="batchDel">批量删除</el-button>
-                       type="primary"
+          <el-button v-if="!isView" type="primary" size="mini" @click="saveAll">一键保存</el-button>
-                       size="mini"
+          <el-button v-if="!isView" type="primary" size="mini" @click="addRule">新增</el-button>
-                       @click="batchDel">批量删除</el-button>
-            <el-button v-if="!isView"
-                       type="primary"
-                       size="mini"
-                       @click="saveAll">一键保存</el-button>
-            <el-button v-if="!isView"
-                       type="primary"
-                       size="mini"
-                       @click="addRule">新增</el-button>
         </div>
       </div>
 
-        <el-card shadow="hover">
+      <el-table class="lc-table" :data="tableData" :stripe="true" :cell-style="rowClass" header-align="center"
-          <el-table class="lc-table"
+        :header-cell-style="headClass" @selection-change="handleSelectionChange">
-                    :data="tableData"
+        <el-table-column type="selection" width="55">
-                    :stripe="true"
-                    :cell-style="rowClass"
-                    header-align="center"
-                    :header-cell-style="headClass"
-                    @selection-change="handleSelectionChange">
-            <el-table-column type="selection"
-                             width="55">
         </el-table-column>
-            <el-table-column prop="id"
+        <el-table-column prop="id" type="index" label="序号" width="80">
-                             type="index"
-                             label="序号"
-                             width="80">
           <template slot-scope="scope">
             {{ scope.row.isSubject && scope.row.index + 1 }}
           </template>
         </el-table-column>
-            <el-table-column label="编译器中正确答案"
+        <el-table-column label="编译器中正确答案" align="center">
-                             align="center">
+          <template slot-scope="scope" v-if="scope.row.isSubject">
-              <template slot-scope="scope"
-                        v-if="scope.row.isSubject">
             <p class="p">字段一致性规则：用户编辑器中至少出现如下语句</p>
-                <el-input type="textarea"
+            <el-input type="textarea" :rows="3" v-model="scope.row.required"
-                          :rows="3"
-                          v-model="scope.row.required"
               :disabled="isView || scope.row.isDisabled"></el-input>
           </template>
         </el-table-column>
-            <el-table-column label=" "
+        <el-table-column label=" " width="150">
-                             width="150">
           <template slot-scope="scope">
-                <el-button circle
+            <el-button circle type="primary" v-if="scope.row.isSubject" :disabled="isView || scope.row.isDisabled"
-                           type="primary"
+              @click="changeResult(scope.row)" style="position: absolute; right: 55px">
-                           v-if="scope.row.isSubject"
-                           :disabled="isView || scope.row.isDisabled"
-                           @click="changeResult(scope.row)"
-                           style="position: absolute; right: 55px">
               {{ scope.row.resultOperation === 0 ? '且' : '或' }}
             </el-button>
-                <el-button v-else
+            <el-button v-else type="primary" circle @click="changeRule(scope.row, scope.$index)">
-                           type="primary"
-                           circle
-                           @click="changeRule(scope.row, scope.$index)">
               {{ scope.row.ruleOperation === 0 ? "且" : "或" }}
             </el-button>
           </template>
         </el-table-column>
-            <el-table-column label="终端中正确答案"
+        <el-table-column label="终端中正确答案" align="center">
-                             align="center">
+          <template slot-scope="scope" v-if="scope.row.isSubject">
-              <template slot-scope="scope"
-                        v-if="scope.row.isSubject">
             <p class="p">运行结果一致性规则：用户运行结果需要与下方代码运行结果一致</p>
-                <el-input type="textarea"
+            <el-input type="textarea" :rows="3" v-model="scope.row.result"
-                          :rows="3"
-                          v-model="scope.row.result"
               :disabled="isView || scope.row.isDisabled"></el-input>
           </template>
         </el-table-column>
-            <el-table-column label="操作"
+        <el-table-column label="操作" width="300" v-if="!isView">
-                             width="300"
+          <template slot-scope="scope" v-if="scope.row.isSubject">
-                             v-if="!isView">
+            <el-button v-show="scope.row.isDisabled" size="mini" type="text"
-              <template slot-scope="scope"
-                        v-if="scope.row.isSubject">
-                <el-button v-show="scope.row.isDisabled"
-                           size="mini"
-                           type="text"
               @click="handleEdit(scope.row)">编辑</el-button>
-                <el-button v-show="!scope.row.isDisabled"
+            <el-button v-show="!scope.row.isDisabled" size="mini" type="text"
-                           size="mini"
-                           type="text"
               @click="handleSave(scope.row)">保存</el-button>
-                <el-button v-show="!scope.row.isDisabled"
+            <el-button v-show="!scope.row.isDisabled" size="mini" type="text"
-                           size="mini"
-                           type="text"
               @click="handleCancel(scope.row, scope.$index)">取消</el-button>
-                <el-button v-show="scope.row.isDisabled"
+            <el-button v-show="scope.row.isDisabled" size="mini" type="text"
-                           size="mini"
-                           type="text"
               @click="handleDelete(scope.$index)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
   </div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -224,7 +151,7 @@ export default {
     }
   },
   methods: {
-    Back () { // 返回
+    back () { // 返回
       this.$router.back();
     },
     getInfoData (bcId) { // 获取判分点详细信息
@@ -368,7 +295,7 @@ export default {
           this.$post(this.api.addBcJudgmentPoint, this.formData).then(res => {
             if (res.status === 200) {
               this.$message.success("新增判分点成功");
-              this.Back();
+              this.back();
             } else {
               this.$message.warning(res.message);
             }
@@ -379,7 +306,7 @@ export default {
           this.$post(this.api.updateBcJudgmentPoint, this.formData).then(res => {
             if (res.status === 200) {
               this.$message.success("更新判分点成功");
-              this.Back();
+              this.back();
             } else {
               this.$message.warning(res.message);
             }
@@ -537,35 +464,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content {
+.wrap {
-  position: relative;
+  padding: 20px;
-  top: 10px;
-  padding: 0 10px;
-  background-color: #ffffff;
 
   .header {
-    border-bottom: 1px dashed #ccc;
-    height: 45px;
-    line-height: 45px;
-    font-size: 12px;
-    font-weight: 600;
     display: flex;
     justify-content: space-between;
-
-    .back {
-      line-height: 3;
-      span {
-        font-size: 16px;
-        font-weight: 600;
-        padding-left: 5px;
-      }
-    }
-
-    .title {
-      font-weight: bold;
-      font-size: 14px;
-      margin-left: 20px;
-    }
   }
 
   // 表单容器
@@ -596,47 +500,12 @@ export default {
         padding-right: 20px;
         line-height: 35px;
       }
+
       .quill {
         width: calc(100% - 240px);
       }
     }
   }
-
-  // 规则容器
-  .rule-con {
-    padding-bottom: 60px;
-
-    .title-con {
-      height: 60px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .title {
-        display: flex;
-
-        .black {
-          width: 8px;
-          height: 18px;
-          background-color: #333;
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-}
-
-// 滚动条的宽度
-/deep/ ::-webkit-scrollbar {
-  width: 6px; // 横向滚动条
-  height: 6px; // 纵向滚动条 必写
-}
-
-// 滚动条的滑块
-/deep/ ::-webkit-scrollbar-thumb {
-  background-color: #9278ff;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 0 5px #dddddd;
 }
 
 /deep/.lc-table {
@@ -646,15 +515,12 @@ export default {
     }
   }
 }
-/deep/ ::-webkit-scrollbar-track {
+
-  /*滚动条里面轨道*/
+
-  -webkit-box-shadow: inset 0 0 5px #dddddd;
-  border-radius: 0;
-  background: #dddddd;
-}
 .tree-con {
   height: 230px;
   position: relative;
+
   .mask {
     width: 100%;
     height: 100%;
@@ -678,6 +544,7 @@ export default {
   height: 230px;
   background-color: #fff;
   overflow: auto;
+
   .line {
     display: flex;
     align-items: center;

src/views/Transaction.vue

@@ -1,24 +1,20 @@
 <template>
   <!-- 交易类 -->
-  <div class="content" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+  <div class="wrap" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+    <el-card shadow="hover">
       <div class="header">
         <div>
-        <i class="back el-icon-arrow-left" @click="Back()" style="cursor:pointer">
+          <el-page-header content="判分点设置" @back="back"></el-page-header>
-          <span>Back</span>
-        </i>
-        <span class="title">判分点设置</span>
         </div>
         <div>
           <el-button v-if="!isView" type="primary" size="mini" @click="submit">保存</el-button>
         </div>
       </div>
+    </el-card>
 
-    <div>
+    <el-card shadow="hover" style="margin: 20px 0;">
       <div class="form-con">
-        <div class="title">
+        <p class="p-title">基本信息</p>
-          <div class="black"></div>
-          <div>基本信息</div>
-        </div>
         <div class="item">
           <div class="label">判分点</div>
           <el-input v-model.trim="formData.lcJudgmentPoint.name" :readonly="isView" @blur="handleBlur"
@@ -30,14 +26,11 @@
             :border="true" :minHeight="150" :height="150" />
         </div>
       </div>
+    </el-card>
 
+    <el-card shadow="hover">
       <div class="rule-con">
-        <div class="title-con">
+        <p class="p-title">判分规则</p>
-          <div class="title">
-            <div class="black"></div>
-            <div>判分规则</div>
-          </div>
-        </div>
         <el-dialog :visible.sync="configVisible" width="25%" title="批量新增判分点" center :append-to-body="false">
           <div class="flex-between mgb20">
             <div style="width: 100%;height: 400px;overflow: auto;margin: auto;background: #F5F5F5">
@@ -57,7 +50,6 @@
           </span>
         </el-dialog>
 
-        <el-card shadow="hover" style="margin-bottom: 20px">
         <div class="business-wrap">
           <div class="business">
             <div class="label">{{ isSt ? '关卡' : '业务' }}</div>
@@ -71,9 +63,7 @@
             <el-button v-if="!isView" type="primary" size="mini" @click="addRules">新增</el-button>
           </div>
         </div>
-        </el-card>
 
-        <el-card shadow="hover">
         <el-table class="lc-table" :data="tableData" :stripe="true" row-key="i" header-align="center"
           @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55">
@@ -306,17 +296,15 @@
             </template>
           </el-table-column>
         </el-table>
-        </el-card>
-      </div>
       </div>
       <el-backtop></el-backtop>
+    </el-card>
   </div>
 </template>
 
 <script>
 import quill from "@/components/quill";
 import MyTree from "@/components/myTree/src/tree";
-import { deepCopy } from "@/utils/deepCopy";
 import { mapState } from 'vuex'
 import _ from 'lodash'
 export default {
@@ -325,6 +313,14 @@ export default {
     return {
       systemId: this.$route.query.systemId,
       isSt: this.$route.query.systemId == 19,
+      routes: [
+        {
+          name: '实验记录',
+        },
+        {
+          name: '实验情况'
+        },
+      ],
       count: 0,
       fromChange: -999,
       fromCountIndex: -999,
@@ -777,7 +773,7 @@ export default {
       });
       return result;
     },
-    Back () { // 返回
+    back () { // 返回
       this.$router.back();
     },
     handleBlur () { // 新增/编辑判分点名称判重
@@ -879,7 +875,7 @@ export default {
         this.$post(this.api.addJudgmentPoint, this.formData).then(res => {
           if (res.status === 200) {
             this.$message.success("新增判分点成功");
-            this.Back();
+            this.back();
           } else {
             this.$message.warning(res.message);
           }
@@ -888,7 +884,7 @@ export default {
         this.$post(this.api.updateJudgmentPoint, this.formData).then(res => {
           if (res.status === 200) {
             this.$message.success("更新判分点成功");
-            this.Back();
+            this.back();
           } else {
             this.$message.warning(res.message);
           }
@@ -983,7 +979,6 @@ export default {
     },
     handleEdit (row) { // 处理编辑规则
       this.judgePoints = true
-      // this.tableDataCopy = deepCopy(this.tableData); // 深拷贝
       row.isDisabled = false;
       row.isSave = false;
     },
@@ -1145,43 +1140,15 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 20px;
 }
 
-.content {
+.wrap {
-  position: relative;
+  padding: 20px;
-  top: 10px;
-  padding: 0 10px;
-  background-color: #ffffff;
 
   .header {
-    border-bottom: 1px dashed #ccc;
-    height: 45px;
-    line-height: 45px;
-    font-size: 12px;
-    font-weight: 600;
     display: flex;
     justify-content: space-between;
-
-    .back {
-      line-height: 3;
-
-      span {
-        font-size: 16px;
-        font-weight: 600;
-        padding-left: 5px;
-      }
-    }
-
-    .title {
-      font-weight: bold;
-      font-size: 14px;
-      margin-left: 20px;
-    }
-  }
-
-  .cell div {
-    margin: auto;
-    text-align: center;
   }
 
   .business {
@@ -1195,22 +1162,6 @@ export default {
 
   // 表单容器
   .form-con {
-    padding-bottom: 24px;
-    border-bottom: 1px dashed #ccc;
-
-    .title {
-      padding: 10px 0;
-      border-bottom: 1px dashed #ccc;
-      display: flex;
-
-      .black {
-        width: 8px;
-        height: 18px;
-        background-color: #333;
-        margin-right: 10px;
-      }
-    }
-
     .item {
       display: flex;
       margin-top: 24px;
@@ -1227,29 +1178,6 @@ export default {
       }
     }
   }
-
-  // 规则容器
-  .rule-con {
-    padding-bottom: 60px;
-
-    .title-con {
-      height: 60px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .title {
-        display: flex;
-
-        .black {
-          width: 8px;
-          height: 18px;
-          background-color: #333;
-          margin-right: 10px;
-        }
-      }
-    }
-  }
 }
 
 /deep/.add-tree {
@@ -1260,26 +1188,6 @@ export default {
   }
 }
 
-// 滚动条的宽度
-/deep/ ::-webkit-scrollbar {
-  width: 6px; // 横向滚动条
-  height: 6px; // 纵向滚动条 必写
-}
-
-// 滚动条的滑块
-/deep/ ::-webkit-scrollbar-thumb {
-  background-color: #9278ff;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 0 5px #dddddd;
-}
-
-/deep/ ::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px #dddddd;
-  border-radius: 0;
-  background: #dddddd;
-}
-
 .tree-con {
   height: 230px;
   position: relative;