02/19 14:14

111

src/views/teacher/reportDetail.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        报告详情
+    </div>
+</template>

src/views/teacher/studyReport.vue

@@ -1,43 +1,179 @@
 <template>
-    <div class='m-container'>
-        <img :src="imgList.topBanner" width="100%" class="topBanner" alt="">
-        <div class="card"></div>
-        <!-- <img :src="imgList.topCard" class='card' alt=""> -->
+  <div class="m-container">
+    <img :src="imgList.topBanner" width="100%" class="topBanner" alt />
+    <div class="card">
+      <p class="title">
+        <img :src="imgList.squrt" class="squrt" alt />
+        练习表现
+      </p>
+      <div class="cell" :class="one==1?'activce':''" @click="one=1">
+        <img :src="imgList.excellent" class="icons" alt />
+        表现优异！你就是最闪亮的星！
+      </div>
+      <div class="cell" :class="one==2?'activce':''" @click="one=2">
+        <img :src="imgList.good" class="icons" alt />
+        表现良好！你非常有潜力！
+      </div>
+      <div class="cell" :class="one==3?'activce':''" @click="one=3">
+        <img :src="imgList.normal" class="icons" alt />
+        偶尔开小差，还要加油哦！
+      </div>
     </div>
+    <div class="card1">
+      <p class="title">
+        <img :src="imgList.squrt" class="squrt" alt />
+        节奏准确度
+      </p>
+      <div class="cell" :class="two==1?'activce':''" @click="two=1">
+        <img :src="imgList.excellent" class="icons" alt />
+        节奏优异！堪称人肉节拍器！
+      </div>
+      <div class="cell" :class="two==2?'activce':''" @click="two=2">
+        <img :src="imgList.good" class="icons" alt />
+        基本准确！注意时值饱满哦！
+      </div>
+      <div class="cell" :class="two==3?'activce':''" @click="two=3">
+        <img :src="imgList.normal" class="icons" alt />
+        中等稳定！搭配练习节拍器会更好哦！
+      </div>
+    </div>
+    <div class="card">
+      <p class="title">
+        <img :src="imgList.squrt" class="squrt" alt />
+        音符准确度
+      </p>
+      <div class="cell" :class="three==1?'activce':''" @click="three=1">
+        <img :src="imgList.excellent" class="icons" alt />
+        百发百中！棒极了！
+      </div>
+      <div class="cell" :class="three==2?'activce':''" @click="three=2">
+        <img :src="imgList.good" class="icons" alt />
+        准确度良好！距离完美只有一步之遥！
+      </div>
+      <div class="cell" :class="three==3?'activce':''" @click="three=3">
+        <img :src="imgList.normal" class="icons" alt />
+        中等准确！稍加练习你一定会更好！
+      </div>
+    </div>
+    <div class="card1">
+      <p class="title">
+        <img :src="imgList.squrt" class="squrt" alt />
+        演奏连贯度
+      </p>
+      <div class="cell" :class="four==1?'activce':''" @click="four=1">
+        <img :src="imgList.excellent" class="icons" alt />
+       非常棒！你演奏一气呵成！
+      </div>
+      <div class="cell" :class="four==2?'activce':''" @click="four=2">
+        <img :src="imgList.good" class="icons" alt />
+        良好！多注意乐句末多音符时值哦！
+      </div>
+      <div class="cell" :class="four==3?'activce':''" @click="four=3">
+        <img :src="imgList.normal" class="icons" alt />
+        继续努力！告诉自己，你一定能行的！
+      </div>
+    </div>
+    <div class='submit'>
+        <img :src="imgList.btn" width="100%" alt="">
+    </div>
+  </div>
 </template>
 <script>
 export default {
-    data(){
-        return {
-            imgList:{
-                topBanner:require('@/assets/images/start/topBanner.png'),
-                topCard:require('@/assets/images/start/topCard.png')
-            }
-        }
-    }
-}
+  data() {
+    return {
+      imgList: {
+        topBanner: require("@/assets/images/start/topBanner.png"),
+        squrt: require("@/assets/images/start/squrt.png"),
+        excellent: require("@/assets/images/start/excellent.png"),
+        good: require("@/assets/images/start/good.png"),
+        normal: require("@/assets/images/start/normal.png"),
+        btn: require("@/assets/images/start/button.png"),
+      },
+      one:'',
+      two:'',
+      three:'',
+      four:'',
+    };
+  }
+};
 </script>
 <style lang="less">
-    .m-container {
-        background: url('../../assets/images/start/bg.png') no-repeat;
-        background-size: 100% 100%;
-        width: 100%;
-        min-height: 16.97rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        .topBanner {
-            
-            padding-left: .41rem;
-            padding-right: .16rem;
-            position: relative;
-            top: .1rem
-        }
-        .card {
-             background: url('../../assets/images/start/topCard.png') no-repeat;
-        background-size: 100% 100%;
-            width: 3.38rem;
-            height: 3.28rem;
-        }
+.m-container {
+  background: url("../../assets/images/start/bg.png") no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  min-height: 16.97rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .topBanner {
+    padding-left: 0.41rem;
+    padding-right: 0.16rem;
+    position: relative;
+    top: 0.1rem;
+  }
+  .card {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: url("../../assets/images/start/topCard.png") no-repeat;
+    background-size: 100% 100%;
+    width: 3.38rem;
+    height: 3.28rem;
+    padding: 0.41rem 0.16rem 0.524rem;
+    margin-bottom: 0.2rem;
+  }
+  .card1 {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: url("../../assets/images/start/card.png") no-repeat;
+    background-size: 100% 100%;
+    width: 3.38rem;
+    height: 3.28rem;
+    padding: 0.41rem 0.16rem 0.524rem;
+    margin-bottom: 0.2rem;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    font-size: 0.22rem;
+    height: 0.22rem;
+    line-height: 0.22rem;
+    margin-bottom: 0.365rem;
+    .squrt {
+      width: 0.05rem;
+      height: 0.22rem;
+      margin-right: 0.1rem;
     }
+  }
+  .cell.activce {
+    border: 1px solid #28babd;
+    color: #28babd;
+  }
+  .cell {
+    width: 3.05rem;
+    height: 0.42rem;
+    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.15rem;
+    margin-bottom: 0.245rem;
+     border: 1px solid transparent;
+    .icons {
+      width: 0.26rem;
+      height: 0.26rem;
+      margin: 0 0.105rem;
+    }
+  }
+  .submit { 
+      width: 3.2rem;
+  }
+}
 </style>