3-4

src/components/Report.vue

@@ -1,137 +0,0 @@
-<style lang="scss" scoped>
-.top{
-  text-align: right;
-  padding: 15px;
-}
-#print-part{
-  width: 1240px;
-  margin: 0 auto;
-  .page{
-    width: 100%;
-    height: 1754px;
-    background: url("../images/report-math/back.jpg")no-repeat center;
-    background-size: cover;
-    h1{
-      text-align: center;
-    }
-  }
-}
-#singleCanvas{
-  display: none;
-}
-</style>
-<template>
-<div class="report">
-  <div class="top">
-    <el-button type="primary" plain @click="download">导出PDF</el-button>
-  </div>
-  <div id="print-part">
-    <div class="page">
-      <img src="@/images/report-math/start-main.png">
-      <p>初中数学学科</p>
-      <p>诊断报告</p>
-      <p>[Mathematics - Diagnostic Report]</p>
-    </div>
-    <div class="page">
-      <h1>B</h1>
-    </div>
-    <div class="page">
-      <h1>C</h1>
-    </div>
-    <div class="page">
-      <h1>D</h1>
-    </div>
-    <div class="page">
-      <h1>E</h1>
-    </div>
-    <div class="page">
-      <h1>F</h1>
-    </div>
-    <div class="page">
-      <h1>G</h1>
-    </div>
-    <div class="page">
-      <h1>H</h1>
-    </div>
-    <div class="page">
-      <h1>I</h1>
-    </div>
-    <div class="page">
-      <h1>J</h1>
-    </div>
-    <div class="page">
-      <h1>K</h1>
-    </div>
-    <div class="page">
-      <h1>L</h1>
-    </div>
-    <div class="page">
-      <h1>M</h1>
-    </div>
-    <div class="page">
-      <h1>N</h1>
-    </div>
-    <div class="page">
-      <h1>O</h1>
-    </div>
-    <div class="page">
-      <h1>P</h1>
-    </div>
-  </div>
-  <canvas id="singleCanvas" width="1240" height="1754">
-  </canvas>
-</div>
-</template>
-
-<script>
-import html2Canvas from 'html2canvas'
-import JsPDF from 'jspdf'
-
-export default {
-  name: 'Report',
-  components: {
-  },
-  data () {
-      return {
-        imgWidth: 595.28,
-        imgHeight: 841.89,
-        PDF: new JsPDF('p', 'pt', 'a4')
-      }
-  },
-  created() {
-    
-  },
-  mounted(){
-  },
-  methods: {
-    download(){
-      this.PDF = new JsPDF('p', 'pt', 'a4');
-      html2Canvas(document.getElementById('print-part'), {
-          allowTaint: true
-      })
-      .then(canvas => {
-          let ctx = canvas.getContext("2d");
-          let singleCanvas = document.getElementById('singleCanvas');
-          let singleCtx = singleCanvas.getContext("2d");   
-
-          let contentWidth = singleCanvas.width;
-          let contentHeight = singleCanvas.height;
-
-          let pageNum = canvas.height / contentHeight;
-
-          for(let i = 0;i < pageNum; i++){
-            let pageImg = ctx.getImageData(0,contentHeight * i,contentWidth,contentHeight * (i + 1));
-            singleCtx.putImageData(pageImg,0,0);
-            let pageData = singleCanvas.toDataURL('image/jpeg', 1.0);
-            this.PDF.addImage(pageData, 'JPEG', 0, 0, this.imgWidth, this.imgHeight);
-            if(i + 1 < pageNum){
-              this.PDF.addPage();
-            }
-          }
-
-          this.PDF.save('title' + '.pdf');
-      });
-    }
-  }
-}
-</script>

src/components/report-ed1/Report.vue

@@ -0,0 +1,3 @@
+<template src="./report.html"></template>
+<script src="./report.js"></script>
+<style src="./report.scss" lang="scss" scoped></style>

src/components/report-ed1/report.html

@@ -0,0 +1,221 @@
+<div class="report">
+    <div class="top">
+        <el-button type="primary" plain @click="download">导出PDF</el-button>
+    </div>
+    <div id="print-part">
+        <div class="page page0">
+            <img src="@/images/report-math/start-main.png">
+            <h1>初中数学学科</h1>
+            <h2>诊断报告</h2>
+            <h3>[Mathematics · Diagnostic Report]</h3>
+        </div>
+        <div class="page page1">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+                <div class="line">
+                    <img src="@/images/report-math/flower.png">
+                    <img src="@/images/report-math/pic1.png">
+                    <i></i>
+                    <div>
+                        <label>姓名</label>
+                        <span></span>
+                    </div>
+                    <div>
+                        <label>年级</label>
+                        <span></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="page size2 page2">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+                <p class="title-label">第一部分 词汇诊断</p>
+                <p class="title-button">1.核心词汇</p>
+                <div>
+                    <div class="charpter" v-for="(item,index) in charpterList" ::key="index">
+                        <div v-if="index==0 || index==3">
+                            <p>代数</p>
+                            <p>几何</p>
+                        </div>
+                        <div>
+                            <label>{{item.grade}}</label>
+                            <div>
+                                <span v-for="data in item.section">
+                                    <em :style="{'background': wordColorMap[data.colorType1],'opacity':data.colorType1}"></em>
+                                    <em :style="{'background': wordColorMap[data.colorType2],'opacity':data.colorType2}"></em>
+                                    <p>{{data.name}}</p>
+                                </span>
+                                <i></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div>
+                        <p class="small-title">
+                            <img src="@/images/report-math/pic2.png">
+                            <span>角平分线</span>
+                        </p>
+                        <img src="@/images/report-math/pic8.png">
+                    </div>
+                    <img src="@/images/report-math/pic9.png">
+                </div>
+            </div>
+        </div>
+        <div class="page size2 page3">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+                <p class="title-button">2.最近所学的三个单元词汇掌握情况</p>
+                <p class="small-title">
+                    <img src="@/images/report-math/pic2.png">
+                    <span>单元名称</span>
+                </p>
+                <div v-for="item in latestSec" class="latest-section">
+                    <div :style="{'width':(100 - item.number) + '%'}">
+                        <p>{{item.name}}</p>
+                        <p>《{{item.content}}》</p>
+                    </div>
+                    <div :style="{'width':item.number + '%','background':secColorMap[item.level]}">
+                        <p :style="{'color':secColorMap[item.level]}">{{item.number}}%</p>
+                    </div>
+                </div>
+                <div>
+                    <p class="small-title">
+                        <img src="@/images/report-math/pic2.png">
+                        <span>近三单元词汇</span>
+                    </p>
+                    <img src="@/images/report-math/pic10.png">
+                </div>
+            </div>
+        </div>
+        <div class="page page4">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+                <p class="title-label">第二部分 学科思维步骤分解诊断</p>
+                <p class="title-button">四个步骤的评价</p>
+            </div>
+        </div>
+        <div class="page page5">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page6">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page7">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page8">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page9">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page10">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page11">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page12">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+                <p class="title-label">第三部分 连续思维步骤</p>
+                <div>
+                    <div>
+                        <img src="@/images/report-math/dec1.png">
+                        <label>代数问题</label>
+                    </div>
+                    <div>
+                        <div v-for="item in calcQueList" :style="directionMap[item.direcType]" 
+                            :class="{'back1':item.colorType == 1,'back2':item.colorType == 2}">
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div>
+                        <img src="@/images/report-math/dec2.png">
+                        <label>几何问题</label>
+                    </div>
+                    <div>
+                        <div v-for="item in geoQueList" :style="directionMap[item.direcType]"
+                            :class="{'back1':item.colorType == 1,'back2':item.colorType == 2}">
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div>
+                        <img src="@/images/report-math/dec3.png">
+                        <label>应用问题</label>
+                    </div>
+                    <div>
+                        <div v-for="item in appQueList" :style="directionMap[item.direcType]"
+                            :class="{'back1':item.colorType == 1,'back2':item.colorType == 2}">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- <div class="page page13">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div> -->
+        <!-- <div class="page page14">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div>
+        <div class="page page15">
+            <div class="decorate">
+                <img v-for="count in 16" :key="count" src="@/images/report-math/circle.png">
+            </div>
+            <div class="note-back">
+            </div>
+        </div> -->
+    </div>
+    <canvas id="singleCanvas" width="1240" height="1754">
+    </canvas>
+</div>

src/components/report-ed1/report.js

@@ -0,0 +1,310 @@
+import html2Canvas from 'html2canvas';
+import JsPDF from 'jspdf';
+import { WORD_COLOR, SEC_COLOR, DIRECYION } from '@/services/constant';
+
+export default {
+  name: 'Report',
+  components: {
+  },
+  data () {
+      return {
+        imgWidth: 595.28,
+        imgHeight: 841.89,
+        PDF: new JsPDF('p', 'pt', 'a4'),
+        wordColorMap: WORD_COLOR,
+        secColorMap: SEC_COLOR,
+        directionMap: DIRECYION,
+        charpterList: [
+          {
+            grade: '初一上',
+            section: [
+              {
+                name: '第一章',
+                colorType1: 1,
+                colorType2: 0,
+              },
+              {
+                name: '第二章',
+                colorType1: 1,
+                colorType2: 0,
+              },
+              {
+                name: '第三章',
+                colorType1: 2,
+                colorType2: 0,
+              },
+              {
+                name: '第四章',
+                colorType1: 0,
+                colorType2: 1,
+              }
+            ]
+          },
+          {
+            grade: '初一下',
+            section: [
+              {
+                name: '第五章',
+                colorType1: 0,
+                colorType2: 1,
+              },
+              {
+                name: '第六章',
+                colorType1: 2,
+                colorType2: 2,
+              },
+              {
+                name: '第七章',
+                colorType1: 1,
+                colorType2: 0,
+              },
+              {
+                name: '第八章',
+                colorType1: 1,
+                colorType2: 1,
+              },
+              {
+                name: '第九章',
+                colorType1: 2,
+                colorType2: 0,
+              },
+              {
+                name: '第十章',
+                colorType1: 1,
+                colorType2: 0,
+              }
+            ]
+          },
+          {
+            grade: '初二上',
+            section: [
+              {
+                name: '第十一章',
+                colorType1: 0,
+                colorType2: 2,
+              },
+              {
+                name: '第十二章',
+                colorType1: 0,
+                colorType2: 2,
+              },
+              {
+                name: '第十三章',
+                colorType1: 0,
+                colorType2: 1,
+              },
+              {
+                name: '第十四章',
+                colorType1: 1,
+                colorType2: 0,
+              },
+              {
+                name: '第十五章',
+                colorType1: 0,
+                colorType2: 2,
+              }
+            ]
+          },
+          {
+            grade: '初二下',
+            section: [
+              {
+                name: '第十六章',
+                colorType1: 1,
+                colorType2: 0,
+              },
+              {
+                name: '第十七章',
+                colorType1: 1,
+                colorType2: 0,
+              },
+              {
+                name: '第十八章',
+                colorType1: 2,
+                colorType2: 0,
+              },
+              {
+                name: '第十九章',
+                colorType1: 0,
+                colorType2: 1,
+              }
+            ]
+          },
+          {
+            grade: '初三上',
+            section: [
+              {
+                name: '第二十章',
+                colorType1: 0,
+                colorType2: 3,
+              },
+              {
+                name: '第二十一章',
+                colorType1: 3,
+                colorType2: 3,
+              },
+              {
+                name: '第二十二章',
+                colorType1: 3,
+                colorType2: 0,
+              },
+              {
+                name: '第二十三章',
+                colorType1: 3,
+                colorType2: 3,
+              },
+              {
+                name: '第二十四章',
+                colorType1: 3,
+                colorType2: 0,
+              },
+              {
+                name: '第二十五章',
+                colorType1: 3,
+                colorType2: 0,
+              }
+            ]
+          },
+          {
+            grade: '初三下',
+            section: [
+              {
+                name: '第二十五章',
+                colorType1: 0,
+                colorType2: 3,
+              },
+              {
+                name: '第二十五章',
+                colorType1: 0,
+                colorType2: 3,
+              },
+              {
+                name: '第二十五章',
+                colorType1: 0,
+                colorType2: 3,
+              },
+              {
+                name: '第二十五章',
+                colorType1: 3,
+                colorType2: 0,
+              },
+              {
+                name: '第三十章',
+                colorType1: 0,
+                colorType2: 3,
+              },
+            ]
+          }
+        ],
+        latestSec: [
+          {
+            name: '十六单元',
+            content: '二次根式',
+            number: 78,
+            level: 1
+          },
+          {
+            name: '十七单元',
+            content: '勾股定理',
+            number: 66.7,
+            level: 2
+          },
+          {
+            name: '十八单元',
+            content: '平行四边形',
+            number: 50,
+            level: 3
+          }
+        ],
+        calcQueList: [
+          {
+            colorType: 1,
+            direcType: 1 
+          },
+          {
+            colorType: 1,
+            direcType: 2 
+          },
+          {
+            colorType: 2,
+            direcType: 3 
+          },
+          {
+            colorType: 0,
+            direcType: 3 
+          }
+        ],
+        geoQueList: [
+          {
+            colorType: 1,
+            direcType: 2 
+          },
+          {
+            colorType: 2,
+            direcType: 3 
+          },
+          {
+            colorType: 0,
+            direcType: 3 
+          },
+          {
+            colorType: 0,
+            direcType: 3 
+          }
+        ],
+        appQueList: [
+          {
+            colorType: 1,
+            direcType: 1 
+          },
+          {
+            colorType: 1,
+            direcType: 1 
+          },
+          {
+            colorType: 1,
+            direcType: 1 
+          },
+          {
+            colorType: 1,
+            direcType: 0 
+          }
+        ]
+      }
+  },
+  created() {
+    
+  },
+  mounted(){
+  },
+  methods: {
+    download(){
+      this.PDF = new JsPDF('p', 'pt', 'a4');
+      html2Canvas(document.getElementById('print-part'), {
+          allowTaint: true
+      })
+      .then(canvas => {
+          let ctx = canvas.getContext("2d");
+          let singleCanvas = document.getElementById('singleCanvas');
+          let singleCtx = singleCanvas.getContext("2d");   
+
+          let contentWidth = singleCanvas.width;
+          let contentHeight = singleCanvas.height;
+
+          let pageNum = canvas.height / contentHeight;
+
+          for(let i = 0;i < pageNum; i++){
+            let pageImg = ctx.getImageData(0,contentHeight * i,contentWidth,contentHeight * (i + 1));
+            singleCtx.putImageData(pageImg,0,0);
+            let pageData = singleCanvas.toDataURL('image/jpeg', 1.0);
+            this.PDF.addImage(pageData, 'JPEG', 0, 0, this.imgWidth, this.imgHeight);
+            if(i + 1 < pageNum){
+              this.PDF.addPage();
+            }
+          }
+
+          this.PDF.save('title' + '.pdf');
+      });
+    }
+  }
+}

src/components/report-ed1/report.scss

@@ -0,0 +1,373 @@
+$mainColor: #393C86;
+
+.top{
+  text-align: right;
+  padding: 15px;
+}
+#print-part{
+  width: 1240px;
+  margin: 0 auto;
+  .page{
+    font-family: "超级斜";
+    // -webkit-text-stroke: 2px $mainColor;
+    // text-shadow: $mainColor 6px 0 0, $mainColor 0 6px 0, $mainColor -6px 0 0, $mainColor 0 -6px 0;
+    width: 100%;
+    height: 1754px;
+    background: url("../../images/report-math/back.jpg")no-repeat center;
+    background-size: cover;
+    text-align: center;
+    padding: 50px 70px;
+    &.size2{
+      padding: 80px 70px;
+    }
+    .decorate{
+      width: 100%;
+      position: relative;
+      &:before,&:after{
+        content: '';
+        position: absolute;
+        top: 0;
+        width: 10px;
+        height: 100%;
+        background: white;
+      }
+      &::before{
+        left: 0;
+      }
+      &:after{
+        right: 0;
+      }
+      img{
+        width: 68px;
+      }
+    }
+    .note-back{
+      width: 100%;
+      height: calc(100% - 25px);
+      background: white;
+      padding: 30px 25px;
+    }
+  }
+}
+#singleCanvas{
+  display: none;
+}
+.title-label{
+  color: $mainColor;
+  font-size: 68px;
+  margin: 20px 0 60px;
+}
+.title-button{
+  height: 72px;
+  line-height: 60px;
+  border-radius: 35px;
+  padding: 0 30px;
+  display: inline-block;
+  background: $mainColor;
+  color: white;
+  font-size: 55px;
+  letter-spacing: 7px;
+}
+
+.small-title{
+  span{
+    font-size: 45px;
+    position: relative;
+    top: 15px;
+  }
+}
+
+.page0{
+  img{
+    width: 800px;
+    margin: 200px 0 150px;
+  }
+  h1,h2{
+    font-family: "夸利";
+    color: white;
+    font-weight: 500;
+  }
+  h1{
+    font-size: 120px;
+    letter-spacing: 10px;
+    font-weight: 600;
+  }
+  h2{
+    font-size: 100px;
+    letter-spacing: 15px;
+  }
+  h3{
+    font-family: Arial,Verdana,Sans-serif;
+    font-size: 40px;
+    font-weight: 400;
+    color: #FCFDF8;
+    letter-spacing: 2px;
+    margin-top: 20px;
+  }
+}
+
+.page1{
+  .line{
+    width: calc(100% - 70px);
+    height: calc(100% - 70px);
+    border: solid 7px $mainColor;
+    margin: 40px auto;
+    position: relative;
+    &::before{
+      content: '';
+      position: absolute;
+      bottom: -7px;
+      right: -7px;
+      width: 120px;
+      height: 120px;
+      background: white;
+    }
+    &:after,i{
+      content: '';
+      position: absolute;
+      bottom: -7px;
+      right: -7px;
+      width: 0;
+      height: 0;
+      border-top: 120px solid $mainColor;
+      border-right: 120px solid transparent;
+    }
+    i{
+      bottom: 8px;
+      right: 8px;
+      border-top: 99px solid white;
+      border-right: 99px solid transparent;
+      z-index: 2;
+    }
+    img:nth-child(1){
+      width: 120px;
+      position: absolute;
+      left: -50px;
+      bottom: -50px;
+    }
+    img:nth-child(2){
+      width: 500px;
+      margin-top: 180px;
+      margin-bottom: 250px;
+    }
+    div{
+      letter-spacing: 10px;
+      margin-bottom: 80px;
+      label{
+        font-family: "夸利";
+        color: $mainColor;
+        font-weight: normal;
+        font-size: 65px;
+      }
+      span{
+        display: inline-block;
+        width: 350px;
+        border-bottom: solid 6px $mainColor;
+        margin: -7px 15px;
+      }
+    }
+  }
+}
+
+.page2{
+  .note-back{
+    &>div{
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 40px;
+    }
+    &>div:last-child{
+      margin: 30px auto;
+      width: calc(100% - 100px);
+      border-top: dashed  5px #EFEFEE;
+      padding: 20px;
+      div>img{
+        margin: 10px -30px;
+      }
+      &>img{
+        margin-top: 25px;
+        margin-left:  170px;
+      }
+    }
+  }
+  .charpter{
+    display: flex;
+    margin: 25px 10px 20px;
+    &>div{
+      &>p{
+        font-size: 20px;
+        // -webkit-text-stroke: 1px $mainColor;
+        text-shadow: $mainColor 2px 0 0, $mainColor 0 2px 0, $mainColor -2px 0 0, $mainColor 0 -2px 0;
+        color: #D4BD9F;
+        margin: 0 22px;
+        &:nth-child(1){
+          margin-top: 95px;
+        }
+        &:nth-child(2){
+          margin-top: 30px;
+        }
+      }
+      label{
+        font-size: 35px;
+        font-weight: normal;
+        color: $mainColor;
+        margin-bottom: 15px;
+      }
+      &>div{
+        border: solid 4px $mainColor;
+        border-radius: 20px;
+        padding: 20px 35px 15px;
+        position: relative;
+        display: flex;
+        span{
+          display: inline-block;
+          margin: 0 4px;
+          em{
+            display: block;
+            width: 35px;
+            height: 57px;
+            border: solid 6px $mainColor;
+            &:first-child{
+              border-top-left-radius: 12px;
+              border-top-right-radius: 12px;
+            }
+            &:nth-child(2){
+              border-bottom-left-radius: 12px;
+              border-bottom-right-radius: 12px;
+            }
+          }
+          p{
+            width: 15px;
+            height: 85px;
+            margin: 5px auto;
+            font-size: 15px;
+            color: $mainColor;
+          }
+        }
+        i{
+          position: absolute;
+          display: block;
+          width: calc(100% - 20px);
+          height: 15px;
+          background: white;
+          border: solid 6px $mainColor;
+          border-radius: 7px;
+          left: 10px;
+          top: 68px;
+        }
+      }
+    }
+  }
+}
+
+.page3{
+  .title-button{
+    margin-top: 25px;
+  }
+  .latest-section{
+    width: calc(100% - 150px);
+    height: 80px;
+    border: solid 6px $mainColor;
+    border-radius: 40px;
+    margin: 25px auto;
+    display: flex;
+    &>div:first-child{
+      font-size: 26px;
+      color: $mainColor;
+      padding-left: 30px;
+      text-align: left;
+    }
+    &>div:last-child{
+      border-top-right-radius: 40px;
+      border-bottom-right-radius: 40px;
+      border-top-left-radius: 20px;
+      border-bottom-left-radius: 20px;
+      line-height: 56px;
+      font-size: 56px;
+      text-shadow: $mainColor 6px 0 0, $mainColor 0 6px 0, $mainColor -6px 0 0, $mainColor 0 -6px 0;
+    }
+  }
+  .note-back>div:last-child{
+    margin: 80px auto;
+    width: calc(100% - 100px);
+    border-top: dashed  5px #EFEFEE;
+    padding-top: 20px;
+    &>img{
+      margin: 30px auto;
+    }
+  }
+}
+
+
+
+
+.page12{
+  .note-back{
+    &>div{
+      height: 420px;
+      border: solid 7px $mainColor;
+      border-radius: 25px;
+      padding: 30px 25px;
+      margin: 55px 15px 0;
+      &>div:first-child{
+        width: 265px;
+        height: 60px;
+        img{
+          position: relative;
+          left: -5px;
+          top: -12px;
+        }
+        label{
+          color: white;
+          font-size: 45px;
+          letter-spacing: 6px;
+        }
+      }
+      &>div:nth-child(2){
+        width: 520px;
+        height: 165px;
+        border-bottom: solid 6px $mainColor;
+        margin: 60px auto;
+        display: flex;
+        justify-content: space-around;
+        padding: 0 60px;
+        div{
+          width: 52px;
+          height: 100%;
+          border: solid 6px $mainColor;
+          position: relative;
+          &.back1{
+            background: #70BB9D;
+          }
+          &.back2{
+            background: #E9727F;
+          }
+        }
+      }
+    }
+    &>div:nth-child(2){
+      &>div:first-child{
+        background:  linear-gradient(white 75%, #948BB3 25%);
+        label{
+          -webkit-text-stroke: 2px #585263;
+        }
+      }
+    }
+    &>div:nth-child(3){
+      &>div:first-child{
+        background:  linear-gradient(white 75%, #82A2D4 25%);
+        label{
+          -webkit-text-stroke: 2px #6786BD;
+        }
+      }
+    }
+    &>div:nth-child(4){
+      &>div:first-child{
+        background:  linear-gradient(white 75%, #F48774 25%);
+        label{
+          -webkit-text-stroke: 2px #D6665B;
+        }
+      }
+    }
+  }
+}

src/router/index.js

@@ -38,7 +38,7 @@ const SimpleReport = () => import(/* webpackChunkName: "group-controlApp"*/'@/co
 const ControlLogin = () => import(/* webpackChunkName: "group-controlApp"*/'@/login/ControlLogin');
 const VoiceTest = () => import(/* webpackChunkName: "group-controlApp"*/'@/components/VoiceTest');
 const UserTest = () => import(/* webpackChunkName: "group-controlApp"*/'@/components/UserTest');
-const Report = () => import(/* webpackChunkName: "group-controlApp"*/'@/components/Report');
+const Report = () => import(/* webpackChunkName: "group-controlApp"*/'@/components/report-ed1/Report.vue');
 
 import store from '@/store/index';
 import { getLoginUser } from '@/api/login'

src/sass/global.scss

@@ -32,7 +32,6 @@ a img, :link img, :visited img {
 caption, th {
     text-align: left;
 }
-[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}
 .cursor-pointer{
 	cursor: pointer;
 }
@@ -64,4 +63,20 @@ a {
 }
 img {
 	vertical-align: middle;
+}
+@font-face {
+    font-family: "力黑常规体";
+    src: url(../assets/font/font_type1.ttf);
+}
+@font-face {
+    font-family: "方正兰亭";
+    src: url(../assets/font/font_type2.ttf);
+}
+@font-face {
+    font-family: "超级斜";
+    src: url(../assets/font/font_type3.ttf);
+}
+@font-face {
+    font-family: "夸利";
+    src: url(../assets/font/font_type4.ttf);
 }

src/services/constant.js

@@ -66,3 +66,24 @@ export const SUBJECT_MAP = {
     '9X4':[{start:0,end:5},{start:6,end:13},{start:14,end:-1}],
     '9Y4':[{start:0,end:5},{start:6,end:13},{start:14,end:-1}],
 }
+
+export const WORD_COLOR = {1:'#E07285',2:'#42B4BD',3:'#D4D6D7'}
+
+export const SEC_COLOR = {1:'#71BC9E',2:'#F3D284',3:'#E17489'}
+
+export const DIRECYION = {
+    0:{
+        'transform': 'rotate(90deg)',
+        'top': '55px'
+    },
+    1:{
+        'transform': 'rotate(60deg)',
+        'top': '20px'
+    },
+    2:{
+        'transform': 'rotate(45deg)',
+        'top': '10px'
+    },
+    3:{
+    }
+}