3-8

src/components/report-ed1/report.html

@@ -3,19 +3,18 @@
         <el-button type="primary" plain @click="download">导出PDF</el-button>
     </div>
     <div id="print-part">
-        <div class="page page0">
+        <!-- <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> -->
+        <!-- <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>
@@ -26,9 +25,10 @@
                         <label>年级</label>
                         <span></span>
                     </div>
+                    <img src="@/images/report-math/flower.png">
                 </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">
@@ -91,9 +91,26 @@
                         <img src="@/images/report-math/pic2.png">
                         <span>近三单元词汇</span>
                     </p>
-                    <img src="@/images/report-math/pic10.png">
+                    <div>
+                        <div>
+                            <p>概念类<span :style="{'color':colMap(73.5)}">73.5%</span></p>
+                            <p>工具类<span :style="{'color':colMap(42.5)}">42.5%</span></p>
+                            <p>模型类<span :style="{'color':colMap(25.0)}">25.0%</span></p>
+                        </div>
+                        <img src="@/images/report-math/pic10.png">
+                        <div>
+                            <p>计算与操作执行能力</p>
+                            <p>语言理解能力</p>
+                            <p>空间理解能力</p>
+                            <p>空间想象能力</p>
+                            <p>逻辑推理能力</p>
+                            <p>概况与归纳能力</p>
+                            <p>转化、类比与迁移能力</p>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <img src="@/images/report-math/ornament1.png">
         </div>
         <div class="page page4">
             <div class="decorate">
@@ -101,57 +118,191 @@
             </div>
             <div class="note-back">
                 <p class="title-label">第二部分 学科思维步骤分解诊断</p>
-                <p class="title-button">四个步骤的评价</p>
+                <p class="title-button small">四个步骤的评价</p>
+                <div>
+                    <div v-for="(item, index) in judgeList">
+                        <img src="@/images/report-math/arrow1.png" v-if="index != 0">
+                        <div>
+                            <label>{{index + 1}}</label>
+                            <p>{{item.name}}</p>
+                            <span class="star-judge">
+                                <i v-for="count in 3" :class="{'yellow': count <= item.judge}"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div></div>
+                <div>
+                    <div class="title-step">
+                        <p>步骤一&nbsp;&nbsp;获取信息<span>（你有什么）</span></p>
+                    </div>
+                    <div class="word-star">
+                        <span>评价：</span>
+                        <span class="star-judge">
+                            <i v-for="count in 3" :class="{'yellow': count <= judgeList[0].judge}"></i>
+                        </span>
+                    </div>
+                    <div v-for="(item, index) in stepOneList" class="que-img">
+                        <div>
+                            <p><span>{{index + 1}}.{{item.name}}</span></p>
+                            <p><a v-for="option in optionList">{{option}}</a></p>
+                            <p>对应问题：{{item.problem}}</p>
+                        </div>
+                        <div>
+                            <p v-if="item.html">{{item.html}}</p>
+                            <img v-if="item.imgSrc" :src="item.imgSrc">
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-        <div class="page page5">
+        <!-- <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> -->
         <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 class="title-step">
+                    <p>步骤二&nbsp;&nbsp;分析与拆解<span>（你要什么）</span></p>
+                </div>
+                <div class="word-star">
+                    <span>评价：</span>
+                    <span class="star-judge">
+                        <i v-for="count in 3" :class="{'yellow': count <= judgeList[1].judge}"></i>
+                    </span>
+                </div>
+                <div v-for="(item, index) in stepTwoList" class="que-img">
+                    <div>
+                        <p><span>[{{index + 1}}.1]{{item.name1}}</span></p>
+                        <p><a v-for="option in optionList">{{option}}</a></p>
+                        <p>对应问题：{{item.problem}}</p>
+                        <p><span>[{{index + 1}}.2]{{item.name2}}</span></p>
+                        <p><a v-for="option in optionList">{{option}}</a></p>
+                        <p>对应问题：{{item.problem}}</p>
+                    </div>
+                    <div>
+                        <p v-if="item.html">{{item.html}}</p>
+                        <img v-if="item.imgSrc" :src="item.imgSrc">
+                    </div>
+                </div>
             </div>
+            <img src="@/images/report-math/ornament1.png">
         </div>
-        <div class="page page7">
+        <!-- <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> -->
+        <!-- <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> -->
         <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 class="title-step">
+                    <p>步骤三&nbsp;&nbsp;推理判断<span>（你缺什么）</span></p>
+                </div>
+                <div class="word-star">
+                    <span>评价：</span>
+                    <span class="star-judge">
+                        <i v-for="count in 3" :class="{'yellow': count <= judgeList[2].judge}"></i>
+                    </span>
+                </div>
+                <div v-for="(item, index) in stepThreeList" class="que-img">
+                    <div>
+                        <p><span>[{{index + 1}}.1]{{item.name1}}</span></p>
+                        <p><a v-for="option in optionList">{{option}}</a></p>
+                        <p>对应问题：{{item.problem}}</p>
+                        <p><span>[{{index + 1}}.2]{{item.name2}}</span></p>
+                        <p><a v-for="option in optionList">{{option}}</a></p>
+                        <p>对应问题：{{item.problem}}</p>
+                    </div>
+                    <div>
+                        <p v-if="item.html">{{item.html}}</p>
+                        <img v-if="item.imgSrc" :src="item.imgSrc">
+                    </div>
+                </div>
             </div>
+            <img src="@/images/report-math/ornament3.png">
         </div>
-        <div class="page page10">
+        <!-- <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> -->
         <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 class="title-step">
+                    <p>步骤四&nbsp;&nbsp;完成推理并检验<span>（把话说顺）</span></p>
+                </div>
+                <div class="word-star">
+                    <span>评价：</span>
+                    <span class="star-judge">
+                        <i v-for="count in 3" :class="{'yellow': count <= judgeList[3].judge}"></i>
+                    </span>
+                </div>
+                <template v-for="(item, index) in stepFourList">
+                    <div class="que-img">
+                        <div>
+                            <p>
+                                <img src="@/images/report-math/icon1.png" v-if="index == 0">
+                                <img src="@/images/report-math/icon3.png" v-if="index == 1">
+                                <span>{{item.name1}}</span><i>1</i>
+                            </p>
+                            <p><a v-for="option in optionList">{{option}}</a></p>
+                            <p>对应问题：{{item.problem}}</p>
+                            <p>
+                                <img src="@/images/report-math/icon2.png" v-if="index == 0">
+                                <img src="@/images/report-math/icon4.png" v-if="index == 1">
+                                <span>{{item.name2}}</span><i>2</i>
+                            </p>
+                            <p><a v-for="option in optionList">{{option}}</a></p>
+                            <p>对应问题：{{item.problem}}</p>
+                        </div>
+                        <div>
+                            <p v-if="item.html">{{item.html}}</p>
+                            <img v-if="item.imgSrc" :src="item.imgSrc">
+                        </div>
+                    </div>
+                    <div v-if="index == 0" class="dec-slot">
+                        <div>
+                            <img src="@/images/report-math/arrow2.png"><br><img src="@/images/report-math/arrow2.png">
+                        </div>
+                        <div>
+                            <p>
+                                <img src="@/images/report-math/note.png">
+                                <span>整理顺序</span>
+                            </p>
+                            <div>
+                                <i></i><em v-for="count in 15"></em><i></i>
+                            </div>
+                        </div>
+                        <div>
+                            <img src="@/images/report-math/arrow2.png"><br><img src="@/images/report-math/arrow2.png">
+                        </div>
+                    </div>
+                </template>
             </div>
+            <img src="@/images/report-math/ornament2.png">
         </div>
         <div class="page page12">
             <div class="decorate">
@@ -193,6 +344,7 @@
                     </div>
                 </div>
             </div>
+            <img src="@/images/report-math/ornament4.png">
         </div>
         <!-- <div class="page page13">
             <div class="decorate">
@@ -201,20 +353,55 @@
             <div class="note-back">
             </div>
         </div> -->
-        <!-- <div class="page page14">
+        <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">
+                <p>附录1</p>
+                <div class="title-step">
+                    <p>初中数学词汇表</p>
+                </div>
+                <table border="1">
+                    <thead>
+                        <tr>
+                            <th>所属年级</th>
+                            <th>所属章</th>
+                            <th>所属小节</th>
+                            <th>词汇</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item,index) in wordTree" :key="index">
+                            <td rowspan="2" v-if="index == 0">{{item.grade}}</td>
+                            <td rowspan="2" v-if="index == 0">{{item.charpter}}</td>
+                            <td rowspan="2" v-if="index == 0">{{item.section}}</td>
+                            <td>{{item.word}}</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
+            <img src="@/images/report-math/ornament5.png">
         </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">
+                <p>续上</p>
+                <table border="1">
+                    <tbody>
+                        <tr v-for="(item,index) in wordTree" :key="index">
+                            <td rowspan="2" v-if="index == 0">{{item.grade}}</td>
+                            <td rowspan="2" v-if="index == 0">{{item.charpter}}</td>
+                            <td rowspan="2" v-if="index == 0">{{item.section}}</td>
+                            <td>{{item.word}}</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
-        </div> -->
+            <img src="@/images/report-math/ornament6.png">
+        </div>
     </div>
     <canvas id="singleCanvas" width="1240" height="1754">
     </canvas>

src/components/report-ed1/report.js

@@ -269,6 +269,148 @@ export default {
             colorType: 1,
             direcType: 0 
           }
+        ],
+        judgeList: [
+          {
+            name: '获取信息',
+            judge: 2
+          },
+          {
+            name: '分析拆解',
+            judge: 0
+          },
+          {
+            name: '推理评断',
+            judge: 3
+          },
+          {
+            name: '计算检验',
+            judge: 3
+          }
+        ],
+        optionList: ['A', 'B', 'C', 'D', 'E'],
+        stepOneList: [
+          {
+            name: '文字类信息',
+            answer: 'A,C',
+            replay: 'A',
+            problem: '获取信息缺失',
+            html: '第一天用去全部的， 第二天用去余下的， 第一天用去比第二天用去······'
+          },
+          {
+            name: '图形与表格类信息',
+            answer: 'B',
+            replay: 'B',
+            problem: '无',
+            html: '',
+            imgSrc: require('../../images/report-math/que-img1.png')
+          },
+          {
+            name: '代数与符号类信息',
+            answer: 'A',
+            replay: 'A',
+            problem: '无',
+            html: '若ab<0, 且 |1-b| = b-1······'
+          },
+          {
+            name: '几何图形与符号类信息',
+            answer: 'C',
+            replay: 'A',
+            problem: '获取信息错误',
+            html: '已知AB || CD， 且AE 垂直于AE于E， 过点A的圆······'
+          }
+        ],
+        stepTwoList: [
+          {
+            name1: '分析目标',
+            answer1: 'A,C',
+            replay1: 'A',
+            problem1: '',
+            name2: '分析目标',
+            answer2: 'A,C',
+            replay2: 'A',
+            problem2: '',
+            html: '',
+            imgSrc: require('../../images/report-math/que-img2.png')
+          },
+          {
+            name1: '分析条件之间的关联',
+            answer1: 'A,C',
+            replay1: 'A',
+            problem1: '',
+            name2: '分析条件之间的关联',
+            answer2: 'A,C',
+            replay2: 'A',
+            problem2: '',
+            html: '',
+            imgSrc: require('../../images/report-math/que-img3.png')
+          }
+        ],
+        stepThreeList: [
+          {
+            name1: '代数推理',
+            answer1: 'A,C',
+            replay1: 'A',
+            problem1: '',
+            name2: '代数推理',
+            answer2: 'A,C',
+            replay2: 'A',
+            problem2: '',
+            html: '',
+            imgSrc: require('../../images/report-math/que-img4.png')
+          },
+          {
+            name1: '几何推理',
+            answer1: 'A,C',
+            replay1: 'A',
+            problem1: '',
+            name2: '几何推理',
+            answer2: 'A,C',
+            replay2: 'A',
+            problem2: '',
+            html: '',
+            imgSrc: require('../../images/report-math/que-img5.png')
+          }
+        ],
+        stepFourList: [
+          {
+            name1: '代数过程',
+            answer1: 'A,C',
+            replay1: 'A',
+            problem1: '',
+            name2: '代数过程',
+            answer2: 'A,C',
+            replay2: 'A',
+            problem2: '',
+            html: '',
+            imgSrc: require('../../images/report-math/que-img6.png')
+          },
+          {
+            name1: '几何推理',
+            answer1: 'A,C',
+            replay1: 'A',
+            problem1: '',
+            name2: '几何推理',
+            answer2: 'A,C',
+            replay2: 'A',
+            problem2: '',
+            html: '',
+            imgSrc: require('../../images/report-math/que-img7.png')
+          }
+        ],
+        wordTree: [
+          {
+            grade: '七上',
+            charpter: '有理数',
+            section: '1.1正数与负数',
+            word: '相反意义的量',
+          },
+          {
+            grade: '七上',
+            charpter: '有理数',
+            section: '1.1正数与负数',
+            word: '正数',
+          }
         ]
       }
   },
@@ -278,6 +420,17 @@ export default {
   mounted(){
   },
   methods: {
+    colMap(number){
+      if(number >= 60) {
+        return '#79C0A1';
+      }
+      if(number < 60 && number >= 30) {
+        return '#F8CD80';
+      }
+      if(number < 30) {
+        return '#D37D93';
+      }
+    },
     download(){
       this.PDF = new JsPDF('p', 'pt', 'a4');
       html2Canvas(document.getElementById('print-part'), {

src/components/report-ed1/report.scss

@@ -17,6 +17,7 @@ $mainColor: #393C86;
     background-size: cover;
     text-align: center;
     padding: 50px 70px;
+    position: relative;
     &.size2{
       padding: 80px 70px;
     }
@@ -67,13 +68,107 @@ $mainColor: #393C86;
   color: white;
   font-size: 55px;
   letter-spacing: 7px;
+  &.small{
+    font-size: 40px;
+    margin-top: -20px;
+  }
 }
-
 .small-title{
   span{
     font-size: 45px;
     position: relative;
     top: 15px;
+    color: $mainColor;
+  }
+}
+.star-judge{
+  i{
+    display: inline-block;
+    width: 45px;
+    height: 43px;
+    margin: 25px 5px;
+    background: url('../../images/report-math/star.png') no-repeat white;
+    &.yellow{
+      background: url('../../images/report-math/star.png') no-repeat #EBCC86;
+    }
+  }
+}
+.title-step{
+  text-align: left;
+  color: #353D89;
+  p{
+    display: inline-block;
+    font-size: 50px;
+    background:  linear-gradient(white 75%, #E57180 25%);
+    span{
+      font-family: '夸利';
+      font-size: 45px;
+    }
+  }
+}
+.word-star{
+  text-align: left;
+  span:first-child{
+    font-family: '夸利';
+    font-size: 45px;
+    position: relative;
+    top: -32px;
+  }
+}
+.que-img{
+  height: 210px;
+  display: flex;
+  border: solid 5px $mainColor;
+  border-radius: 20px;
+  background: #CAEBFB;
+  margin-bottom: 12px;
+  padding: 10px 15px;
+  &>div:nth-child(1){
+    width: 40%;
+    p{
+      font-family: '夸利';
+      &:nth-child(1),&:nth-child(4){
+        font-size: 35px;
+        text-align: left;
+        color: #34427C;
+        span{
+          background:  linear-gradient(transparent 70%, #F4CC89 30%);
+        }
+      }
+      &:nth-child(2),&:nth-child(5){
+        margin: 15px 0;
+        a{
+          border: solid 2px #413F64;
+          border-radius: 12px;
+          padding: 2px 5px;
+          font-family: '方正兰亭';
+          font-size: 37px;
+          color: white;
+          -webkit-text-stroke: 2px #413F64;
+          margin: 0 10px;
+        }
+      }
+      &:nth-child(3),&:nth-child(6){
+        text-align: left;
+        font-size: 27px;
+        color: #333F73;
+        padding-left: 30px;
+      }
+    }
+  }
+  &>div:nth-child(2){
+    width: 60%;
+    height: 100%;
+    background: white;
+    border-radius: 10px;
+    padding: 30px 50px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 27px;
+    text-align: left;
+    line-height: 40px;
+    img{
+      width: 130px;
+    }
   }
 }
 
@@ -113,6 +208,7 @@ $mainColor: #393C86;
     border: solid 7px $mainColor;
     margin: 40px auto;
     position: relative;
+    padding-top: 180px;
     &::before{
       content: '';
       position: absolute;
@@ -139,17 +235,16 @@ $mainColor: #393C86;
       border-right: 99px solid transparent;
       z-index: 2;
     }
-    img:nth-child(1){
+    &>img:first-child{
+      width: 500px;
+      margin-bottom: 250px;
+    }
+    &>img:last-child{
       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;
@@ -292,14 +387,183 @@ $mainColor: #393C86;
     width: calc(100% - 100px);
     border-top: dashed  5px #EFEFEE;
     padding-top: 20px;
-    &>img{
+    &>div{
+      color: $mainColor;
+      display: flex;
       margin: 30px auto;
+      &>div:first-child{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding-right: 35px;
+        p{
+          font-size: 55px;
+          span{
+            display: block;
+            font-size: 28px;
+            font-family: '力黑常规体';
+            letter-spacing: 2px;
+            -webkit-text-stroke: 2px $mainColor;
+            border: solid 4px $mainColor;
+            border-radius: 30px;
+            padding: 5px 0;
+            margin: 7px;
+          }
+        }
+      }
+      img{
+        width: 540px;
+      }
+      &>div:last-child{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding-left: 7px;
+        font-size: 20px;
+        text-align: left;
+      }
     }
   }
+  &>img{
+    position: absolute;
+    right: 15px;
+    bottom: 20px;
+  }
 }
 
+.page4{
+  .note-back{
+    .title-label{
+      margin-top: 0;
+    }
+    &>div:nth-child(3){
+      display: flex;
+      justify-content: center;
+      margin: 10px 0;
+      div{
+        div{
+          display: inline-block;
+          vertical-align: middle;
+          padding: 0 10px;
+          label{
+            font-family: "Microsoft Yahei";
+            font-size: 120px;
+            color: #E57281;
+          }
+          p{
+            font-size: 42px;
+            font-family: "夸利";
+            color: #3F3E8C;
+          }
+        }
+        img{
+          vertical-align: top;
+          width: 64px;
+          margin-top: 60px;
+        }
+      }
+    }
+    &>div:nth-child(4){
+      width: calc(100% - 100px);
+      margin: -5px auto;
+      border-top: dashed  5px #EFEFEE;
+    }
+    &>div:nth-child(5){
+      padding: 15px;
+    }
+  }
+}
 
+.page6,.page9,.page11{
+  .que-img{
+    height: 670px;
+    margin-bottom: 35px;
+    padding: 30px 20px;
+    &>div:nth-child(1){
+      width: 42%;
+      p{
+        &:nth-child(4){
+          margin-top: 150px;
+        }
+      }
+    }
+    &>div:nth-child(2){
+      width: 58%;
+      text-align: center;
+      img{
+        width: auto;
+      }
+    }
+  }
+  &>img{
+    position: absolute;
+    bottom: 40px;
+  }
+}
+.page6>img{
+  right: 50px;
+}
+.page9>img{
+  left: 50px;
+}
 
+.page11{
+  .que-img{
+    height: 590px;
+    margin-bottom: 0;
+    p>{
+      img{
+        margin-right: 3px;
+      }
+      i{
+        display: inline-block;
+        margin-left: 5px;
+        width: 25px;
+        height: 25px;
+        line-height: 14px;
+        font-size: 25px;
+        border: solid 3px $mainColor;
+        border-radius: 100%;
+        text-align: center;
+        color: white;
+        -webkit-text-stroke: 2px $mainColor;
+      }
+    }
+  }
+  .dec-slot{
+    display: flex;
+    justify-content: space-around;
+    font-size: 50px;
+    color: $mainColor;
+    margin: 15px 80px;
+    p{
+      margin: 15px 0 -25px;
+      span{
+        position: relative;
+        top: 8px;
+      }
+    }
+    i,em{
+      display: inline-block;
+      vertical-align: middle;
+      background: #B0A7C1;
+    }
+    i{
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+    }
+    em{
+      width: 18px;
+      height: 3px;
+      margin: 0 5px;
+    }
+  }
+  &>img{
+    right: 50px;
+    bottom: 20px;
+  }
+}
 
 .page12{
   .note-back{
@@ -370,4 +634,55 @@ $mainColor: #393C86;
       }
     }
   }
+  &>img{
+    position: absolute;
+    right: 40px;
+    bottom: 30px;
+  }
+}
+
+.page14,.page15{
+  .note-back{
+    &>p:first-child{
+      text-align: left;
+      font-size: 25px;
+      font-family: '方正兰亭';
+      color: #A099AF;
+    }
+    .title-step{
+      text-align: center;
+      p{
+        font-size: 40px;
+      }
+    }
+  }
+  table{
+    width: 100%;
+    font-family: Arial,Verdana,Sans-serif;
+    color: #3D3B75;
+    border-collapse: collapse;
+    border-radius: 10px;
+    outline: solid 5px #3D3B75;
+    margin-top: 20px;
+    th{
+      font-size: 30px;
+      text-align: center;
+      padding: 5px 0;
+    }
+    td{
+      font-size: 25px;
+      padding: 3px 0;
+    }
+  }
+  &>img{
+    position: absolute;
+  }
+}
+.page14>img{
+  left: 30px;
+  bottom: 20px;
+}
+.page15>img{
+  right: 60px;
+  bottom: 60px;
 }