阅卷3.0开发优化

src/modules/marking/constants/constants.js

@@ -4,6 +4,7 @@ export const MARKING_API = "/api/ecs_marking"; //阅卷API
 export const DATA_PROCESS_API = "/api/ecs_data_process"; //数据中间层API
 export const OE_API = "/api/ecs_oe"; //网考API
 export const Q_API = "/api/ecs_ques"; //题库API
+export const UPAI_YUN = "http://exam-cloud-test.b0.upaiyun.com"; //又拍云前端显示
 export const LEVEL_TYPE = [
   { label: "专升本", value: "ZSB" },
   { label: "高起专", value: "GQZ" },

src/modules/marking/store/Print.js

@@ -0,0 +1,126 @@
+/* @Print.js
+ * DH (http://denghao.me)
+ * 2017-7-14
+ */
+export function Print(dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend(
+    {
+      noPrint: ".no-print"
+    },
+    options
+  );
+
+  if (typeof dom === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.dom = dom;
+  }
+
+  this.init();
+}
+Print.prototype = {
+  init: function() {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function(obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function() {
+    var str = "",
+      styles = document.querySelectorAll("style,link");
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str +=
+      "<style>" +
+      (this.options.noPrint ? this.options.noPrint : ".no-print") +
+      "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function() {
+    var inputs = document.querySelectorAll("input");
+    var textareas = document.querySelectorAll("textarea");
+    var selects = document.querySelectorAll("select");
+
+    for (var k in inputs) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute("checked", "checked");
+        } else {
+          inputs[k].removeAttribute("checked");
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute("value", inputs[k].value);
+      }
+    }
+
+    for (var k2 in textareas) {
+      if (textareas[k2].type == "textarea") {
+        textareas[k2].innerHTML = textareas[k2].value;
+      }
+    }
+
+    for (var k3 in selects) {
+      if (selects[k3].type == "select-one") {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == "OPTION") {
+            if (child[i].selected == true) {
+              child[i].setAttribute("selected", "selected");
+            } else {
+              child[i].removeAttribute("selected");
+            }
+          }
+        }
+      }
+    }
+
+    return this.dom.outerHTML;
+  },
+
+  writeIframe: function(content) {
+    var w,
+      doc,
+      iframe = document.createElement("iframe"),
+      f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    this.toPrint(w);
+    // setTimeout(function() {
+    //   document.body.removeChild(iframe)
+    // }, 100)
+  },
+
+  toPrint: function(frameWindow) {
+    try {
+      setTimeout(function() {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand("print", false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 1000);
+    } catch (err) {
+      console.log("err", err);
+    }
+  }
+};

src/modules/marking/views/CourseDetail.vue

@@ -1,27 +1,3 @@
-<style lang="css" scoped>
-
-li {
-    list-style-type: none;
-}
-
-.searchFrame {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.page{
-  margin-top: 10px;
-}
-.f_button{
-    display:block;
-    width:57px;
-    height:20px;
-    border:1px solid #CCC;
-    background:#FFF;
-    font-size: small;
-}
-</style>
-
 <template>
   <div>
     <section class="content">
@@ -242,3 +218,26 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+
+li {
+    list-style-type: none;
+}
+
+.searchFrame {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.page{
+  margin-top: 10px;
+}
+.f_button{
+    display:block;
+    width:57px;
+    height:20px;
+    border:1px solid #CCC;
+    background:#FFF;
+    font-size: small;
+}
+</style>

src/modules/marking/views/MarkGradeMain.vue

@@ -1,23 +1,3 @@
-<style lang="css" scoped>
-
-li {
-    list-style-type: none;
-}
-
-.searchFrame {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.page{
-  margin-top: 10px;
-}
-
-.el-select{
-  width: 165px;
-}
-</style>
-
 <template>
   <div>
     <section class="content">
@@ -359,3 +339,22 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+
+li {
+    list-style-type: none;
+}
+
+.searchFrame {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.page{
+  margin-top: 10px;
+}
+
+.el-select{
+  width: 165px;
+}
+</style>

src/modules/marking/views/MarkSettingFast.vue

@@ -1,23 +1,3 @@
-<style lang="css" scoped>
-
-li {
-    list-style-type: none;
-}
-
-.searchFrame {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.page{
-  margin-top: 10px;
-}
-
-.el-tag{
-  margin-right: 10px;
-}
-</style>
-
 <template>
   <div>
     <section class="content">
@@ -364,3 +344,22 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+
+li {
+    list-style-type: none;
+}
+
+.searchFrame {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.page{
+  margin-top: 10px;
+}
+
+.el-tag{
+  margin-right: 10px;
+}
+</style>

src/modules/marking/views/MarkSettingMain.vue

@@ -1,27 +1,3 @@
-<style lang="css" scoped>
-
-li {
-    list-style-type: none;
-}
-
-.searchFrame {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.page{
-  margin-top: 10px;
-}
-.f_button{
-    display:block;
-    width:57px;
-    height:20px;
-    border:1px solid #CCC;
-    background:#FFF;
-    font-size: small;
-}
-</style>
-
 <template>
   <div>
     <section class="content">
@@ -485,3 +461,26 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+
+li {
+    list-style-type: none;
+}
+
+.searchFrame {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.page{
+  margin-top: 10px;
+}
+.f_button{
+    display:block;
+    width:57px;
+    height:20px;
+    border:1px solid #CCC;
+    background:#FFF;
+    font-size: small;
+}
+</style>

src/modules/marking/views/MarkWorkOverview.vue

@@ -1,34 +1,3 @@
-<style lang="css" scoped>
-
-li {
-    list-style-type: none;
-}
-
-.searchFrame {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.page{
-  margin-top: 10px;
-}
-.f_button{
-    display:block;
-    width:57px;
-    height:20px;
-    border:1px solid #CCC;
-    background:#FFF;
-    font-size: small;
-}
-.echarts {
-    display: flex;
-}
-    .pie{
-        width: 450px;
-        height: 350px;
-    }
-</style>
-
 <template>
   <div>
     <section class="content">
@@ -470,3 +439,33 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+
+li {
+    list-style-type: none;
+}
+
+.searchFrame {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.page{
+  margin-top: 10px;
+}
+.f_button{
+    display:block;
+    width:57px;
+    height:20px;
+    border:1px solid #CCC;
+    background:#FFF;
+    font-size: small;
+}
+.echarts {
+    display: flex;
+}
+    .pie{
+        width: 450px;
+        height: 350px;
+    }
+</style>

src/modules/marking/views/Marker.vue

@@ -1,27 +1,3 @@
-<style lang="css" scoped>
-
-li {
-    list-style-type: none;
-}
-
-.searchFrame {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.page{
-  margin-top: 10px;
-}
-.f_button{
-    display:block;
-    width:57px;
-    height:20px;
-    border:1px solid #CCC;
-    background:#FFF;
-    font-size: small;
-}
-</style>
-
 <template>
   <div>
     <section class="content">
@@ -230,3 +206,26 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+
+li {
+    list-style-type: none;
+}
+
+.searchFrame {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.page{
+  margin-top: 10px;
+}
+.f_button{
+    display:block;
+    width:57px;
+    height:20px;
+    border:1px solid #CCC;
+    background:#FFF;
+    font-size: small;
+}
+</style>

src/modules/marking/views/MarkerDetail.vue

@@ -1,27 +1,3 @@
-<style lang="css" scoped>
-
-li {
-    list-style-type: none;
-}
-
-.searchFrame {
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.page{
-  margin-top: 10px;
-}
-.f_button{
-    display:block;
-    width:57px;
-    height:20px;
-    border:1px solid #CCC;
-    background:#FFF;
-    font-size: small;
-}
-</style>
-
 <template>
   <div>
     <section class="content">
@@ -225,3 +201,26 @@ export default {
   }
 };
 </script>
+<style lang="css" scoped>
+
+li {
+    list-style-type: none;
+}
+
+.searchFrame {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.page{
+  margin-top: 10px;
+}
+.f_button{
+    display:block;
+    width:57px;
+    height:20px;
+    border:1px solid #CCC;
+    background:#FFF;
+    font-size: small;
+}
+</style>

src/modules/marking/views/Marking.vue

@@ -1,101 +1,3 @@
-<style scoped>
-.el-select {
-  width: 160px;
-}
-.content {
-  min-height: 600px;
-  padding: 15px;
-  margin-right: auto;
-  margin-left: auto;
-  margin-top: 10px;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-top: 60px;
-}
-small {
-  font-size: 18px;
-  font-weight: bold;
-  margin-left: 10px;
-  margin-top: 20px;
-}
-.content-header {
-  margin-top: 10px;
-}
-section {
-  margin-top: 10px;
-  margin-bottom: 20px;
-}
-.box-body {
-  height: 100%;
-  width: 100%;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-  padding: 10px;
-}
-.backcolor {
-  background-color: #ecf0f5;
-}
-li {
-  list-style-type: none;
-}
-.marktitle {
-  margin-right: 10px;
-  margin-bottom: 10px;
-  font-size: 18px;
-  font-weight: 700;
-}
-.titlefont {
-  font-size: 15px;
-}
-.box-card {
-  width: 200px;
-  height: 120px;
-}
-.block {
-  display: inline-block;
-}
-.text {
-  text-align: center;
-}
-.markcount {
-  margin-right: 10px;
-}
-.reject {
-  color: red;
-}
-.marksign {
-  margin-left: 20px;
-}
-.label-danger {
-  background-color: #d9534f;
-  color: #fff;
-}
-.box.box-info {
-  border-top-color: #20a0ff;
-}
-.box {
-  position: relative;
-  border-radius: 3px;
-  border-top: 3px solid #d2d6de;
-  margin-bottom: 20px;
-  width: 100%;
-  height: 700px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-}
-.scoreboard {
-  width: 25%;
-  border-left: 3px solid #20a0ff;
-  min-height: 600px;
-}
-.pull-right {
-  float: right !important;
-}
-.pull-left {
-  float: left !important;
-}
-</style>
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中">
     <section class="content-header">
@@ -763,3 +665,101 @@ export default {
   }
 };
 </script>
+<style scoped>
+.el-select {
+  width: 160px;
+}
+.content {
+  min-height: 600px;
+  padding: 15px;
+  margin-right: auto;
+  margin-left: auto;
+  margin-top: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 60px;
+}
+small {
+  font-size: 18px;
+  font-weight: bold;
+  margin-left: 10px;
+  margin-top: 20px;
+}
+.content-header {
+  margin-top: 10px;
+}
+section {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+.box-body {
+  height: 100%;
+  width: 100%;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  padding: 10px;
+}
+.backcolor {
+  background-color: #ecf0f5;
+}
+li {
+  list-style-type: none;
+}
+.marktitle {
+  margin-right: 10px;
+  margin-bottom: 10px;
+  font-size: 18px;
+  font-weight: 700;
+}
+.titlefont {
+  font-size: 15px;
+}
+.box-card {
+  width: 200px;
+  height: 120px;
+}
+.block {
+  display: inline-block;
+}
+.text {
+  text-align: center;
+}
+.markcount {
+  margin-right: 10px;
+}
+.reject {
+  color: red;
+}
+.marksign {
+  margin-left: 20px;
+}
+.label-danger {
+  background-color: #d9534f;
+  color: #fff;
+}
+.box.box-info {
+  border-top-color: #20a0ff;
+}
+.box {
+  position: relative;
+  border-radius: 3px;
+  border-top: 3px solid #d2d6de;
+  margin-bottom: 20px;
+  width: 100%;
+  height: auto;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+.scoreboard {
+  width: 25%;
+  border-left: 3px solid #20a0ff;
+  min-height: 600px;
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+</style>

src/modules/marking/views/TpMain.vue

@@ -1,44 +1,3 @@
-<style scoped>
-.markmain {
-  width: 74%;
-}
-.scroll {
-  overflow: auto;
-  height: 600px;
-}
-.marktitle {
-  margin-right: 20px;
-  margin-bottom: 20px;
-}
-.signTitle {
-  margin-left: 35%;
-}
-.itemTitle {
-  margin-right: 10px;
-}
-.titlefont {
-  font-size: 15px;
-}
-li {
-  list-style-type: none;
-}
-.markbutton {
-  width: 40px;
-  height: 40px;
-}
-img {
-  width: 100%;
-  height: 100%;
-}
-.paper {
-  width: 90%;
-  min-height: 600px;
-}
-.fixed {
-  position: fixed;
-}
-</style>
-<script src="../assets/js/Print.js"></script>
 <template>
   <div class="markmain pull-left scroll" id="student_paper">
     <el-tabs :active-name="activeName">
@@ -103,40 +62,21 @@ img {
                 打印
               </el-button>
             </div>
-            <div class="paper" id="answer-content">{{ getAnswerHtml }}</div>
+            <div
+              class="paper"
+              id="answer-content"
+              v-html="getAnswerHtml()"
+            ></div>
           </div>
         </el-tab-pane>
       </template>
-
-      <!--
-        <el-tab-pane label="标答" name="second">
-          <div id="answer-source" v-if="this.markTask.answer_source.type=='text'">
-            <embed :src="this.markTask.answer_source.url"></embed>
-          </div>
-          <div v-if="this.markTask.answer_source.type=='picture'">
-            <div v-for="url in this.markTask.answer_source.url">
-              <img :src="url"></img>
-            </div>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="试卷" name="third">
-          <div id="paper-source" v-if="this.markTask.paper_source.type=='text'">
-            <embed :src="this.markTask.paper_source.url"></embed>
-          </div>
-          <div v-if="this.markTask.paper_source.type=='picture'">
-            <div v-for="url in this.markTask.paper_source.url">
-              <img :src="url"></img>
-            </div>
-          </div>
-        </el-tab-pane>
-      -->
     </el-tabs>
   </div>
 </template>
 <script>
 import { Drawing } from "../canvas/mark_sign";
-import { EVENTHUB, Q_API } from "../constants/constants";
+import { EVENTHUB, Q_API, UPAI_YUN } from "../constants/constants";
+import { Print } from "../store/Print";
 export default {
   data() {
     return {
@@ -157,9 +97,21 @@ export default {
     "examType"
   ],
   methods: {
+    getAnswerHtml() {
+      let content = "";
+      if (this.studentPaper.basePaperId) {
+        var paperId = this.studentPaper.basePaperId;
+        this.$http
+          .get(Q_API + "/extract/getAnswerHtml/" + paperId)
+          .then(response => {
+            console.log("html", response.data);
+            content = response.data;
+          });
+      }
+      return content;
+    },
     getPdfUrl() {
       var url = this.studentPaper.studentSubjectiveHtml;
-      console.log("paperUrl", url);
       var content = "";
       if (url) {
         if (url != "" && url.indexOf(".pdf") > -1) {
@@ -234,6 +186,7 @@ export default {
         let paperSigns = JSON.parse(signStorage);
         if (paperSigns.length > 0) {
           for (let [index, paperSign] of paperSigns.entries()) {
+            console.log("score index:", index);
             if (paperSign.itemId == this.signItem.id) {
               this.tmpSignScores.push(paperSign.score);
             }
@@ -350,19 +303,6 @@ export default {
     }
   },
   computed: {
-    async getAnswerHtml() {
-      var content = "";
-      if (this.studentPaper.basePaperId) {
-        var paperId = this.studentPaper.basePaperId;
-        await this.$http
-          .get(Q_API + "/extract/getAnswerHtml/" + paperId)
-          .then(response => {
-            console.log("html", response.data);
-            content = response.data;
-          });
-      }
-      return content;
-    },
     itemTitle() {
       if (!this.markSign) return "无";
       var title = "无";
@@ -406,7 +346,7 @@ export default {
         this.changeMarkSign();
       }
     },
-    studentPaper(val) {
+    studentPaper() {
       if (this.markSign) {
         this.intMarkDraw();
       }
@@ -417,7 +357,7 @@ export default {
     signScores(val) {
       this.tmpSignScores = val;
     },
-    markSign(val) {
+    markSign() {
       this.intMarkDraw();
     },
     paperSigns(val) {
@@ -430,11 +370,62 @@ export default {
   },
   created() {
     EVENTHUB.$on("positionDiv", function(id) {
-      $("#student_paper").scrollTop(0);
-      var height = $("#anchor-" + id).outerHeight(true);
-      var y = $("#anchor-" + id).offset().top - height / 2;
-      $("#student_paper").scrollTop(y - 5);
+      let o = document.getElementById("student_paper");
+      o.scrollTop = 0;
+      var height = 0;
+      let outObject = document.getElementById("anchor-" + id);
+      if (outObject) {
+        if (outObject.currentStyle) {
+          height = parseInt(outObject.currentStyle["marginTop"]);
+        } else {
+          height = parseInt(
+            document.defaultView.getComputedStyle(outObject, null)["marginTop"]
+          );
+        }
+        var y = document.getElementById("anchor-" + id).offsetTop - height / 2;
+        o.scrollTop = y - 5;
+      }
     });
   }
 };
 </script>
+<style scoped>
+.markmain {
+  width: 74%;
+}
+.scroll {
+  overflow: auto;
+  height: 600px;
+}
+.marktitle {
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+.signTitle {
+  margin-left: 35%;
+}
+.itemTitle {
+  margin-right: 10px;
+}
+.titlefont {
+  font-size: 15px;
+}
+li {
+  list-style-type: none;
+}
+.markbutton {
+  width: 40px;
+  height: 40px;
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+.paper {
+  width: 90%;
+  min-height: 600px;
+}
+.fixed {
+  position: fixed;
+}
+</style>

src/modules/marking/views/TpScoreBoard.vue

@@ -1,119 +1,3 @@
-<style scoped>
-.scoreboard {
-  width: 25%;
-  border-left: 3px solid #20a0ff;
-  min-height: 600px;
-}
-.scroll {
-  overflow: auto;
-  height: 300px;
-}
-.itemScroll {
-  overflow: auto;
-  height: 150px;
-}
-.scoreScroll {
-  overflow: auto;
-  height: 100px;
-}
-.scoretitle {
-  margin-right: 20px;
-  margin-bottom: 20px;
-}
-li {
-  list-style-type: none;
-}
-.scorebutton {
-  width: 40px;
-  height: 40px;
-}
-.titlebutton {
-  width: 50px;
-  height: 56px;
-}
-.actionbutton {
-  width: 80px;
-  height: 30px;
-}
-.score {
-  color: red;
-  display: block;
-}
-.totalScore {
-  color: red;
-  text-align: center;
-}
-.clear {
-  clear: both;
-}
-.backcolor {
-  background-color: #e4eaec;
-}
-.board-margin {
-  margin-left: 20px;
-}
-.sub-btn {
-  margin-right: 15px;
-}
-.active-btn {
-  background-color: #4cb0f9;
-  border-color: #4cb0f9;
-  color: #fff;
-}
-.box-card {
-  margin-bottom: 30px;
-  text-align: center;
-}
-.score-input {
-  background-color: #ecf0f5;
-  border: 1px solid #000;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-  box-sizing: border-box;
-  color: #1f2d3d;
-  font-size: 20px;
-  height: 30px;
-  width: 60px;
-  padding: 2px 10px;
-  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  outline: none;
-}
-.el-switch__label {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 2;
-}
-.button-border.button-small {
-  line-height: 26px;
-}
-.button-border.button-primary {
-  color: #1b9af7;
-}
-.button-small {
-  font-size: 12px;
-}
-.button-border {
-  background: 0;
-  border-width: 2px;
-  border-style: solid;
-}
-.button-box {
-  padding: 0 !important;
-  border-radius: 10px;
-}
-.button-primary {
-  border-color: #1b9af7;
-}
-.button {
-  font-weight: 300;
-  text-decoration: none;
-  text-align: center;
-  margin: 0;
-  display: inline-block;
-}
-</style>
 <template>
   <div class="scoreboard pull-right">
     <div class="board-margin">
@@ -317,7 +201,7 @@ li {
 import { mapActions } from "vuex";
 import { USER_SIGNOUT } from "../../portal/store/user";
 import { mapState } from "vuex";
-import { CORE_API, MARKING_API } from "../constants/constants";
+import { CORE_API, MARKING_API, EVENTHUB } from "../constants/constants";
 export default {
   data() {
     return {
@@ -433,7 +317,7 @@ export default {
       this.positionDiv(order);
     },
     positionDiv(order) {
-      this.$emit("positionDiv", order);
+      EVENTHUB.$emit("positionDiv", order);
     },
     showItemTitle() {
       var title =
@@ -858,3 +742,138 @@ export default {
   }
 };
 </script>
+<style scoped>
+.scoreboard {
+  width: 25%;
+  border-left: 3px solid #20a0ff;
+  min-height: 600px;
+}
+.scroll {
+  overflow: auto;
+  height: 300px;
+}
+.itemScroll {
+  overflow: auto;
+  height: 150px;
+}
+.scoreScroll {
+  overflow: auto;
+  height: 100px;
+}
+.scoretitle {
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+li {
+  list-style-type: none;
+}
+.scorebutton {
+  width: 40px;
+  height: 40px;
+}
+.titlebutton {
+  width: 50px;
+  height: 56px;
+}
+.actionbutton {
+  width: 80px;
+  height: 30px;
+}
+.score {
+  color: red;
+  display: block;
+}
+.totalScore {
+  color: red;
+  text-align: center;
+}
+.clear {
+  clear: both;
+}
+.backcolor {
+  background-color: #e4eaec;
+}
+.board-margin {
+  margin-left: 20px;
+}
+.sub-btn {
+  margin-right: 15px;
+}
+.active-btn {
+  background-color: #4cb0f9;
+  border-color: #4cb0f9;
+  color: #fff;
+}
+.box-card {
+  margin-bottom: 30px;
+  text-align: center;
+}
+.score-input {
+  background-color: #ecf0f5;
+  border: 1px solid #000;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+  color: #1f2d3d;
+  font-size: 20px;
+  height: 30px;
+  width: 60px;
+  padding: 2px 10px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+}
+.el-switch__label {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+.button-border.button-small {
+  line-height: 26px;
+}
+.button-border.button-primary {
+  color: #1b9af7;
+}
+.button-small {
+  font-size: 12px;
+}
+.button-border {
+  background: 0;
+  border-width: 2px;
+  border-style: solid;
+}
+.button-box {
+  padding: 0 !important;
+  border-radius: 10px;
+}
+.button-primary {
+  border-color: #1b9af7;
+}
+.button {
+  font-weight: 300;
+  text-decoration: none;
+  text-align: center;
+  margin: 0;
+  display: inline-block;
+}
+.pull-left {
+  float: left;
+}
+.pull-right {
+  float: right;
+}
+.scorebutton {
+  background-color: #1b9af7;
+  border-color: #1b9af7;
+  color: #fff;
+}
+.titlebutton {
+  cursor: pointer;
+}
+.titlebutton:hover {
+  background-color: #1b9af7;
+  border-color: #1b9af7;
+  color: #fff;
+}
+</style>