02/20 12:33

11

src/views/teacher/reportDetail.vue

@@ -48,57 +48,68 @@
     <div class="reportWrap1">
       <div class="border">
         <div class="imgBox1">
-            
           <div style="width:100%;  position: relative;">
-              <img :src="imgList.logo" class="logo" alt />
+            <img :src="imgList.logo" class="logo" alt />
             <p class="title">
-                  
               <img :src="imgList.squrt" class="squrt" alt />
               节奏准确度
             </p>
           </div>
-          <div class="cell" >
-              
+          <div class="cell">
             <img :src="imgList.excellent" class="icons" alt />
             节奏优异！堪称人肉节拍器！
           </div>
-           <div style="width:100%">
+          <div style="width:100%">
             <p class="title">
               <img :src="imgList.squrt" class="squrt" alt />
               节奏准确度
             </p>
           </div>
-          <div class="cell" >
+          <div class="cell">
             <img :src="imgList.excellent" class="icons" alt />
             节奏优异！堪称人肉节拍器！
           </div>
-           <div style="width:100%">
+          <div style="width:100%">
             <p class="title">
               <img :src="imgList.squrt" class="squrt" alt />
               节奏准确度
             </p>
           </div>
-          <div class="cell" >
+          <div class="cell">
             <img :src="imgList.excellent" class="icons" alt />
             节奏优异！堪称人肉节拍器！
           </div>
-           <div style="width:100%">
+          <div style="width:100%">
             <p class="title">
               <img :src="imgList.squrt" class="squrt" alt />
               节奏准确度
             </p>
           </div>
-          <div class="cell" >
+          <div class="cell">
             <img :src="imgList.excellent" class="icons" alt />
             节奏优异！堪称人肉节拍器！
           </div>
         </div>
       </div>
     </div>
-        <div class="titleWrap">
+    <div class="titleWrap">
       <img :src="imgList.title3" alt />
       <p>老师评语是老师就小朋友的练习情况给予的评价，鼓励小朋友再接再厉哦！</p>
     </div>
+    <div class="reportWrap2">
+      <div class="boxWrap">
+          <div class="teacherWrap">
+            <img :src="imgList.logo" class="logo" alt />
+            <div class="left">
+              <img :src="imgList.default_head_img" alt />
+            </div>
+            <div class="right">
+              <p class="name">李小明</p>
+              <p class="subject">长笛</p>
+            </div>
+          </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -252,7 +263,6 @@ div {
           }
         }
       }
-
     }
   }
   .reportWrap1 {
@@ -267,9 +277,9 @@ div {
       display: flex;
       flex-direction: column;
       align-items: center;
-      
+
       .imgBox1 {
-          position: relative;
+        position: relative;
         width: 2.9rem;
         height: 4.625rem;
         background: url("../../assets/images/start/box2.png") no-repeat;
@@ -300,8 +310,11 @@ div {
         }
         .cell {
           width: 2.6rem;
-          height: 0.36rem;
+          height: 0.42rem;
           line-height: 0.42rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           display: flex;
           flex-direction: row;
           align-items: center;
@@ -312,14 +325,48 @@ div {
           margin-bottom: 0.245rem;
           border: 1px solid transparent;
           .icons {
-            width: 0.26rem;
-            height: 0.26rem;
+            width: 0.22rem;
+            height: 0.22rem;
             margin: 0 0.105rem;
           }
         }
       }
     }
   }
-  
+  .reportWrap2 {
+    padding: 0 0.22rem;
+    background: url("../../assets/images/start/box3.png") no-repeat;
+    background-size: 100% 100%;
+    width: 3.33rem;
+    min-height:5.31rem ;
+     .teacherWrap {
+       margin-top: .6rem;
+       padding: 0 .13rem;
+          position: relative;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          .left {
+            width: 0.72rem;
+            height: 0.72rem;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-right: 0.13rem;
+            img {
+              width: 0.72rem;
+              height: 0.72rem;
+            }
+          }
+          .right {
+            .name {
+              font-size: 0.19rem;
+            }
+            .subject {
+              font-size: 0.15rem;
+            }
+          }
+        }
+  }
 }
 </style>