02/19 22:228

11

src/views/teacher/reportDetail.vue

@@ -45,13 +45,60 @@
       <img :src="imgList.title2" alt />
       <p>评分详情呈现的是老师就小朋友本组课程的练习表现，节奏准确度，音符准确度，节奏连贯度四个方面的具体评分。</p>
     </div>
-    <div class="reportWrap">
+    <div class="reportWrap1">
       <div class="border">
         <div class="imgBox1">
-       
+            
+          <div style="width:100%;  position: relative;">
+              <img :src="imgList.logo" class="logo" alt />
+            <p class="title">
+                  
+              <img :src="imgList.squrt" class="squrt" alt />
+              节奏准确度
+            </p>
+          </div>
+          <div class="cell" >
+              
+            <img :src="imgList.excellent" class="icons" alt />
+            节奏优异！堪称人肉节拍器！
+          </div>
+           <div style="width:100%">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              节奏准确度
+            </p>
+          </div>
+          <div class="cell" >
+            <img :src="imgList.excellent" class="icons" alt />
+            节奏优异！堪称人肉节拍器！
+          </div>
+           <div style="width:100%">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              节奏准确度
+            </p>
+          </div>
+          <div class="cell" >
+            <img :src="imgList.excellent" class="icons" alt />
+            节奏优异！堪称人肉节拍器！
+          </div>
+           <div style="width:100%">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              节奏准确度
+            </p>
+          </div>
+          <div class="cell" >
+            <img :src="imgList.excellent" class="icons" alt />
+            节奏优异！堪称人肉节拍器！
+          </div>
         </div>
       </div>
     </div>
+        <div class="titleWrap">
+      <img :src="imgList.title3" alt />
+      <p>老师评语是老师就小朋友的练习情况给予的评价，鼓励小朋友再接再厉哦！</p>
+    </div>
   </div>
 </template>
 <script>
@@ -61,11 +108,13 @@ export default {
       imgList: {
         title1: require("@/assets/images/start/title1.png"),
         title2: require("@/assets/images/start/title2.png"),
+        title3: require("@/assets/images/start/title3.png"),
         default_head_img: require("@/assets/images/default_head_img.png"),
         logo: require("@/assets/images/start/logo.png"),
         excellent: require("@/assets/images/start/excellent.png"),
         good: require("@/assets/images/start/good.png"),
         normal: require("@/assets/images/start/normal.png"),
+        squrt: require("@/assets/images/start/squrt.png"),
         btn: require("@/assets/images/start/button.png")
       }
     };
@@ -194,8 +243,8 @@ div {
           flex-direction: column;
           align-items: center;
           p {
-              box-sizing: border-box;
-              padding: .17rem .13rem 0.08rem;
+            box-sizing: border-box;
+            padding: 0.17rem 0.13rem 0.08rem;
             width: 2.5rem;
             background: rgba(246, 246, 246, 1);
             border-radius: 5px;
@@ -203,17 +252,74 @@ div {
           }
         }
       }
-      .imgBox1{
-         width: 2.9rem;
-        height: 3.5rem;
+
+    }
+  }
+  .reportWrap1 {
+    width: 100%;
+    padding: 0 0.22rem;
+    margin-bottom: 0.28rem;
+    .border {
+      width: 100%;
+      background-color: #61c2c4;
+      height: 5rem;
+      border-radius: 5px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      
+      .imgBox1 {
+          position: relative;
+        width: 2.9rem;
+        height: 4.625rem;
         background: url("../../assets/images/start/box2.png") no-repeat;
         background-size: 100% 100%;
         margin-top: 0.22rem;
         display: flex;
         flex-direction: column;
+        align-items: center;
         padding: 0.5rem 0.13rem;
+        .title {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          font-size: 0.21rem;
+          height: 0.22rem;
+          line-height: 0.22rem;
+          margin-bottom: 0.17rem;
+          color: #000;
+          .squrt {
+            width: 0.05rem;
+            height: 0.22rem;
+            margin-right: 0.1rem;
+          }
+        }
+        .cell.activce {
+          border: 1px solid #28babd;
+          color: #28babd;
+        }
+        .cell {
+          width: 2.6rem;
+          height: 0.36rem;
+          line-height: 0.42rem;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          border-radius: 21px;
+          box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
+          background-color: #fff;
+          font-size: 0.12rem;
+          margin-bottom: 0.245rem;
+          border: 1px solid transparent;
+          .icons {
+            width: 0.26rem;
+            height: 0.26rem;
+            margin: 0 0.105rem;
+          }
+        }
       }
     }
   }
+  
 }
 </style>

src/views/teacher/studyReport.vue

@@ -34,7 +34,7 @@
       </div>
       <div class="cell" :class="two==3?'activce':''" @click="two=3">
         <img :src="imgList.normal" class="icons" alt />
-        中等稳定！搭配练习节拍器会更好哦！
+        中等稳定！搭配练习节拍器会更好哦！更好哦！
       </div>
     </div>
     <div class="card">
@@ -224,6 +224,9 @@ export default {
     width: 3.05rem;
     height: 0.42rem;
     line-height: 0.42rem;
+    white-space: nowrap;
+    overflow: hidden;
+     text-overflow: ellipsis;
     display: flex;
     flex-direction: row;
     align-items: center;