Merge branch 'master' into iterationApp

dist/css/IStarted.6d22f131.css

@@ -0,0 +1 @@
+.mheader[data-v-61d0e2e4]{height:.44rem;overflow:hidden}.m-nav-header[data-v-61d0e2e4]{position:absolute;left:0;top:0;width:100%;height:.44rem;line-height:.44rem;background-color:#14928a;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff}.m-nav-header.fixed[data-v-61d0e2e4]{position:fixed;z-index:99}.m-nav-header .m-nav-bar__title[data-v-61d0e2e4]{max-width:60%;margin:0 auto;color:#fff;font-weight:500;font-size:.16rem}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4],.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{position:absolute;bottom:0}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4]{left:.12rem}.m-nav-header .m-nav-bar__left .arrow-left[data-v-61d0e2e4]{font-size:.21rem;vertical-align:middle}.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{right:.12rem}.squrt{width:.14rem;height:.12rem;margin-left:.1rem}.van-search{padding:.13rem .16rem}/deep/ .van-search__action{color:#777}.icon[data-v-67669af7]{width:2rem;height:2rem;margin:.5rem auto .05rem}.icon_nodata[data-v-67669af7]{background:url(../img/icon_nodata.81c87d57.png) no-repeat 50%;background-size:contain}.msg[data-v-67669af7]{color:#aaa;font-size:.16rem;text-align:center;line-height:.22rem}.istarted[data-v-3e5b9aac]{min-height:100vh}.app-item[data-v-3e5b9aac]{margin:0 .16rem .1rem;background:#fff;border-radius:.1rem;font-size:.14rem;display:block}.app-item[data-v-3e5b9aac]:first-child{margin-top:.1rem}.app-item .hd[data-v-3e5b9aac]{padding:.1rem .15rem .1rem .19rem;border-bottom:1px solid #f5f5f5;color:#777;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.app-item .bd[data-v-3e5b9aac]{padding:.12rem .15rem .2rem .19rem;line-height:.2rem}

src/api/teacher.js

@@ -255,6 +255,14 @@ const addStudyReport = (data) => {
 
   })
 }
+const addStudyReport1 = (data) => {
+  return axios({
+    url: '/api-teacher/studyReport/addStudyReport',
+    method: 'post',
+    data
+
+  })
+}
 
 // 查询报告 /api-teacher/studyReport/info
 const studyReport = (data) => {
@@ -265,7 +273,34 @@ const studyReport = (data) => {
 
   })
 }
+// 查看报告新版
+const getReviewsInfo = (data) => {
+  return axios({
+    url: '/api-teacher/studyReport/getReviewsInfo',
+    method: 'get',
+    params: data
+
+  })
+}
 
+// 查询班级声部
+const findTeacherClassGroupInfo = (data)=>{
+  return axios({
+    url: '/api-teacher/classGroup/findTeacherClassGroupInfo',
+    method: 'get',
+    params: data
+
+  })
+}
+// 获取必须提交的陪练列表
+const getNeedPost = (data)=>{
+  return axios({
+    url: '/api-teacher/studyReport/getNeedPost',
+    method: 'get',
+    params: data
+
+  })
+}
 // 提交陪练报告
 export {
   queryMyCreatedList,
@@ -296,5 +331,9 @@ export {
   getFortuneBag,
   getactiveList,
   addStudyReport,
-  studyReport
+  studyReport,
+  findTeacherClassGroupInfo,
+  getReviewsInfo,
+  getNeedPost,
+  addStudyReport1
 }

src/common/axios.js

@@ -43,6 +43,7 @@ _axios.interceptors.request.use(
         config.headers['Authorization'] = auth
       }
     }
+    // config.headers['Authorization'] ='bearer d4cf2bc4-8a57-4523-8b20-e6dddc9d3ea2'
     return config;
   },
   function(error) {

src/router/teacherRouter.js

@@ -184,6 +184,26 @@ let teacherRouter = [
     }
   },
   {
+    path: "/studyReportNew",
+    name: "studyReportNew",
+    component: () =>
+      import(/* webpackChunkName: "privacy" */ "@/views/teacher/studyReportNew"),
+    meta: {
+      descrition: "学习报告",
+      weight: 8 // 页面权重
+    }
+  },
+  {
+    path: "/reportDetailNew",
+    name: "reportDetailNew",
+    component: () =>
+      import(/* webpackChunkName: "privacy" */ "@/views/teacher/reportDetailNew"),
+    meta: {
+      descrition: "学习报告",
+      weight: 8 // 页面权重
+    }
+  },
+  {
     path: "/reportDetail",
     name: "reportDetail",
     component: () =>
@@ -192,7 +212,17 @@ let teacherRouter = [
       descrition: "学习报告",
       weight: 8 // 页面权重
     }
-  }
+  },
+  {
+    path: "/tobeReport",
+    name: "tobeReport",
+    component: () =>
+      import(/* webpackChunkName: "privacy" */ "@/views/teacher/tobeReport"),
+    meta: {
+      descrition: "待完成月报",
+      weight: 8 // 页面权重
+    }
+  },
 ];
 
 export default teacherRouter;

src/utils/questionJson.js

@@ -0,0 +1,93 @@
+const subjectJson = {
+    "1": {
+      title: "练习表现",
+      1: "表现优异，互动积极！课程效率超高！",
+      2: "表现良好！能够与老师进行互动，继续保持！",
+      3: "偶尔开小差，要专注才会有提升哦！",
+      icon: ""
+    },
+    "2": {
+      title: "气息运用",
+      1: "气息运用良好，吸气充分，送出均匀且平稳。",
+      2: "气息运用基本正确，吸气要尽可能更多更快，气息送出需要更加平稳。",
+      3: "气息的运用还需增强，要注意演奏时不要通过鼻子，而是用嘴来吸气，存气位置为丹田处，切忌存于肺部，气息送出要均匀，在演奏时气速要适当提高，对演奏起到支撑。",
+      icon: ""
+    },
+    "3": {
+      title: "发音环节",
+      1: "发音环节整体较好，吐音清晰，起音柔和、自然。",
+      2: "发音环节基本正确，吹奏时固定笛头吹孔角度，继续加强4个吹气方向，从而提升音准控制力，注意气速不易过快，吐音要清晰自然。",
+      3: "发音环节需要加强，尤其是注意下巴拉平，笛头吹奏时口风要保持细小，上唇切忌不要盖的太多，吹孔放于下唇线以下并垂直朝上，不要歪斜，吐音时舌头做上下的自然动作，切勿吐音太重。",
+      icon: ""
+    },
+    "4": {
+      title: "教材演奏",
+      1: "教材演奏优秀，吐音与运指能够较好的配合，演奏连贯，音质、音量及音色能够保持一致，演奏法区分清晰。",
+      2: "教材演奏较好，个别地方连贯度还要增强，读谱、吐音与运指的良好配合会提升连贯度。音质、音量及音色要注意保持一致，嘴型的固定及气息的控制提升会明显改善一致性的问题。",
+      3: "教材演奏需要加强，提升吐音与运指的配合度，改善断奏及时值不足的问题。通过嘴型的调整会使音质有明显的变化，练习中出现的演奏法记号不要忽视。",
+      icon: ""
+    },
+    "5": {
+        title: "节奏",
+        1: "节奏较为稳定，能够做到时值饱满。",
+        2: "节奏部分还要继续加强，多使用节拍器来进行练习，既不要抢拍也不要拖拍，换气前的音符注意时值保持饱满，通过教材中节奏模打练习来提升整个节奏的稳定性。",
+        icon: ""
+      },
+      "6": {
+        title: "跳音",
+        1: "演奏较好，富有弹性，音型正确",
+        2: "不够短促，反之也不要由于演奏过短而出现的僵硬问题",
+        icon: ""
+      },
+      "7": {
+        title: "保持音",
+        1: "演奏充分，较为饱满，音型正确",
+        2: "首先不要出现“大肚子”音，从而提升保持音稳定程度，音尾不要渐弱",
+        icon: ""
+      },
+      "8": {
+        title: "重音",
+        1: "音头清晰，气息与舌头配合良好，音型正确。",
+        2: "音头不够明显，适当增加舌头动作与气息速度。",
+        3:"出现音头过重的情况，要检查舌头动作，避免前后运动。",
+        icon: ""
+      },
+      
+  }
+
+
+  const subjectJsonOld =  {
+    '1': {
+      title: "练习表现",
+      1: "表现优异！你就是最闪亮的星！",
+      2: "表现良好！你非常有潜力！",
+      3: "偶尔开小差，还要加油哦！",
+      icon: ""
+    },
+    '2': {
+      title: "节奏准确度",
+      1: "节奏优异！堪称人肉节拍器！",
+      2: "基本准确！注意时值饱满哦！",
+      3: "中等稳定！搭配练习节拍器会更好哦！",
+      icon: ""
+    },
+    '3': {
+      title: "音符准确度",
+      1: "百发百中！棒极了！",
+      2: "准确度良好！距离完美只有一步之遥！",
+      3: "中等准确！稍加练习你一定会更好！",
+      icon: ""
+    },
+    '4': {
+      title: "演奏连贯度",
+      1: "非常棒！你演奏一气呵成！",
+      2: "良好！多注意乐句末的音符时值哦！",
+      3: "继续努力！告诉自己，你一定能行的！",
+      icon: ""
+    }
+  }
+
+export {
+    subjectJsonOld,
+    subjectJson
+  }

src/views/teacher/Business.vue

@@ -29,7 +29,8 @@
         <section class="module m-shadow">
             <h2 class="title">教学</h2>
             <div class="module-item">
-                <span class="module-link"><i class="icon icon_7"></i>作业列表</span>
+                <!-- <span class="module-link"><i class="icon icon_7"></i>作业列表</span> -->
+                <router-link class="module-link" :to="{ path: '/tobeReport' }" ><i class="icon icon_8"></i>待完成月报</router-link>
             </div>
         </section>
 
@@ -121,6 +122,10 @@ section, .tip-message {
         background: url("../../assets/images/business/7.png") no-repeat center;
         background-size: contain;
     }
+     .icon_8 {
+        background: url("../../assets/images/business/7.png") no-repeat center;
+        background-size: contain;
+    }
 
 }
 </style>

src/views/teacher/queryList/queryActiveList.vue

@@ -55,7 +55,7 @@ export default {
   }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .m-container {
   background-color: #fff;
 }

src/views/teacher/queryList/queryFortuneBag.vue

@@ -47,7 +47,7 @@ export default {
   }
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .m-container {
   background-color: #fff;
 }

src/views/teacher/reportDetail.vue

@@ -199,9 +199,13 @@ export default {
     };
   },
   created() {
-    this.classGroupId = this.$route.query.classGroupId;
-    this.token = localStorage.getItem("Authorization");
-    if (!this.token || !this.classGroupId) {
+   this.classGroupId = this.$route.query.classGroupId;
+    let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
+    if (!this.classGroupId) {
       this.onAppBack();
       return;
     }
@@ -261,7 +265,7 @@ export default {
   }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 @font-face {
   font-family: myFirstFont;
   src: url("../../assets/images/start/din-bold.otf"),

src/views/teacher/reportDetailNew.vue

@@ -0,0 +1,755 @@
+<template>
+  <div class="container">
+    <div class="topWrap">
+      <p class="tTilte" style="font-size:.17rem; margin-bottom:.08rem;">什么是学习报告：</p>
+      <p>
+        阶段性课时完成后，我们将围绕
+        <span>练习表现、气息运用、发音环节、教材演奏、节奏</span>
+        等几个学习维度，对学员的学习进度和掌握程度进行精准评估，有助于家长及时了解孩子的学习成果和老师有针对性的指导，不断提升学员的学习能力和音乐成就。
+      </p>
+    </div>
+    <div class="titleWrap top">
+      <img :src="imgList.title4" class="topTitleImg" alt />
+      <p class="topTitleP">学习内容呈现的是老师本次课程教授的乐理，曲子及教材详情。</p>
+    </div>
+    <div class="studyWrap">
+      <div class="border">
+        <img :src="imgList.boxtitle1" width="100%" alt style="" />
+        <div class="borderContainer">
+          <img :src="imgList.logo" class="logo1" alt style="z-index:11;" />
+          <div class="theoryBox">
+            <div class="left">
+              <img :src="imgList.theoryIcon" class="theoryIcon" alt />
+            </div>
+            <div class="right">
+              <p class="subTitle">乐理</p>
+              <p class="desc" v-for="(item,index) in musicTheory" :key="index">{{item.str}}</p>
+            </div>
+          </div>
+          <div class="theoryBox">
+            <div class="left">
+              <img :src="imgList.muiscIcon" class="muiscIcon" alt />
+            </div>
+            <div class="right">
+              <p class="subTitle">曲子</p>
+              <p class="desc">{{ song }}</p>
+            </div>
+          </div>
+          <div class="theoryBox">
+            <div class="left">
+              <img :src="imgList.bookIcon" class="bookIcon" alt />
+            </div>
+            <div class="right">
+              <p class="subTitle">教材</p>
+              <p class="desc" v-for="(item,index) in teachingMaterial" :key="index">{{item.str}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="titleWrap">
+      <img :src="imgList.title1" alt />
+      <p>报告概览呈现的是学员本阶段的练习频率及累计时长，演奏技能的提升离不开日积月累的练习哦！</p>
+    </div>
+    <div class="reportWrap">
+      <div class="border">
+        <div class="imgBox">
+          <div class="studentWrap">
+            <img :src="imgList.logo" class="logo" alt />
+            <div class="left">
+              <img :src="studentInfo.avatar" alt />
+            </div>
+            <div class="right">
+              <p class="name">{{ studentInfo.name }}</p>
+              <p class="subject">{{ studentInfo.subjectName }}</p>
+            </div>
+          </div>
+          <div class="studentTimeWrap">
+            <div style="margin-right:.22rem">
+              <p class="timeP">{{ studentInfo.times }}</p>
+              <p class="descP">练习次数（次）</p>
+            </div>
+            <div>
+              <p class="timeP">{{ studentInfo.totalMinutes }}</p>
+              <p class="descP">练习时长（分钟）</p>
+            </div>
+          </div>
+          <div class="assess">
+            <p>
+              本次
+              <span>练习表现优异，进步很大，希望持之以恒，</span> 要继续加油哦！
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="titleWrap">
+      <img :src="imgList.title2" alt />
+      <p>评价详情呈现的是老师就学员本组课程的练习表现、气息运用、发音环节、教材演奏、节奏几个维度的具体评价。</p>
+    </div>
+    <div class="reportWrap1">
+      <div class="border">
+        <img :src="imgList.boxtitle2" width="100%" alt />
+        <div class="imgBox1">
+          <div style="width:100%;  position: relative; margin-top:.1rem">
+            <img :src="imgList.logo" class="logo1" alt />
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              {{ subjectJson['1'].title}}
+            </p>
+          </div>
+          <div class="cell">
+            <img :src="subjectJson['1'].icon" class="icons" alt />
+            <p>  {{ subjectJson['1'][item.one] }}</p>
+          </div>
+          <div style="width:100%">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              {{ subjectJson['2'].title}}
+            </p>
+          </div>
+          <div class="cell">
+            <img :src="subjectJson['2'].icon" class="icons" alt />
+            <p>  {{ subjectJson['2'][item.two] }}</p>
+          
+          </div>
+          <div style="width:100%">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              {{ subjectJson['3'].title}}
+            </p>
+          </div>
+          <div class="cell">
+            <img :src="subjectJson['3'].icon" class="icons" alt />
+             <p> {{ subjectJson['3'][item.three] }}</p>
+           
+          </div>
+          <div style="width:100%">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              {{ subjectJson['4'].title}}
+            </p>
+          </div>
+          <div class="cell">
+            <img :src="subjectJson['4'].icon" class="icons" alt />
+            <p>{{ subjectJson['4'][item.four] }}</p>
+            
+          </div>
+
+          <div style="width:100%">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              
+              {{ subjectJson['5'].title}}
+            </p>
+          </div>
+          <div class="cell">
+            <img :src="subjectJson['5'].icon" class="icons" alt />
+            <p>{{ subjectJson['5'][item.five] }}</p>
+            
+          </div>
+
+          <div style="width:100%" v-if="item.six">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              {{ subjectJson['6'].title}}
+            </p>
+          </div>
+          <div class="cell" v-if="item.six">
+            <img :src="subjectJson['6'].icon" class="icons" alt />
+            <p>{{ subjectJson['6'][item.six] }}</p>
+            
+          </div>
+
+          <div style="width:100%" v-if="item.seven">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              {{ subjectJson['7'].title}}
+            </p>
+          </div>
+          <div class="cell" v-if="item.seven">
+            <img :src="subjectJson['7'].icon" class="icons" alt />
+            <p>    {{ subjectJson['7'][item.seven] }}</p>
+        
+          </div>
+
+          <div style="width:100%" v-if="item.eight">
+            <p class="title">
+              <img :src="imgList.squrt" class="squrt" alt />
+              {{ subjectJson['8'].title}}
+            </p>
+          </div>
+          <div class="cell" v-if="item.eight">
+            <img :src="subjectJson['8'].icon" class="icons" alt />
+            <p>{{ subjectJson['8'][item.eight] }}</p>
+            
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="titleWrap">
+      <img :src="imgList.title3" alt />
+      <p>老师评语是老师就学员的练习情况给予的总结，鼓励学员再接再厉哦！</p>
+    </div>
+    <div class="reportWrap2">
+      <div class="border">
+        <img :src="imgList.boxtitle1" width="100%" alt />
+        <div class="boxWrap">
+          <div class="teacherWrap">
+            <img :src="imgList.logo" class="logo2" alt />
+            <div class="left">
+              <img :src="teacherInfo.avatar" alt />
+            </div>
+            <div class="right">
+              <p class="name">{{teacherInfo.teacherName }}</p>
+              <p class="subject">{{teacherInfo.subjectName }}</p>
+            </div>
+          </div>
+          <div class="textWrap">{{comment}}</div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="button">继续学习</div> -->
+  </div>
+</template>
+<script>
+import { browser } from "@/common/common";
+import { studyReport, getReviewsInfo } from "@/api/teacher";
+import { subjectJson } from "@/utils/questionJson";
+export default {
+  data() {
+    return {
+      imgList: {
+        title1: require("@/assets/images/start/title1.png"),
+        title2: require("@/assets/images/start/title2.png"),
+        title3: require("@/assets/images/start/title3.png"),
+        title4: require("@/assets/images/start/title4.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"),
+        boxtitle2: require("@/assets/images/start/boxtitle2.png"),
+        boxtitle1: require("@/assets/images/start/boxtitle1.png"),
+        theoryIcon: require("@/assets/images/start/theory-icon.png"),
+        muiscIcon: require("@/assets/images/start/muisc-icon.png"),
+        bookIcon: require("@/assets/images/start/book-icon.png")
+      },
+      classGroupId: null,
+      token: null,
+      comment: "",
+      studentInfo: {
+        name: "",
+        subjectName: "",
+        times: "",
+        totalMinutes: "",
+        avatar: ""
+      },
+      teacherInfo: {},
+      item: [],
+      subjectJson: subjectJson,
+      musicTheory: [],
+      song: "",
+      teachingMaterial: []
+    };
+  },
+  created() {
+    this.id = this.$route.query.id;
+    let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
+    if (!this.id) {
+      this.onAppBack();
+      return;
+    }
+    getReviewsInfo({ id: this.id }).then(res => {
+      if (res.data.code == 200) {
+        this.studentInfo = {
+          name: (res.data.data.student && res.data.data.student.username) || "",
+          avatar:
+            (res.data.data.student && res.data.data.student.avatar) ||
+            this.imgList.default_head_img,
+          subjectName: res.data.data.subjectName,
+          times: res.data.data.times,
+          totalMinutes: res.data.data.totalMinutes
+        };
+        this.teacherInfo = {
+          teacherName:
+            (res.data.data.teacher && res.data.data.teacher.name) || "",
+          subjectName: res.data.data.subjectName,
+          avatar:
+            (res.data.data.teacher && res.data.data.teacher.headUrl) ||
+            this.imgList.default_head_img
+        };
+
+        this.teachingMaterial = JSON.parse(res.data.data.teachingMaterial);
+        this.musicTheory = JSON.parse(res.data.data.musicTheory);
+        this.song = res.data.data.song;
+        // 处理数据  1.item
+        this.item = JSON.parse(res.data.data.item);
+        this.comment = res.data.data.comment;
+        for (let key in this.item) {
+          this.setIcon(this.subjectJson, this.item[key], key);
+        }
+
+        // for (let i = 1; i <= this.item.length; i++) {
+        //   this.setIcon(this.subjectJson, this.item[i - 1], i);
+        // }
+      }
+    });
+  },
+  methods: {
+    onAppBack() {
+      if (browser().android) {
+        DAYA.postMessage(JSON.stringify({ api: "back" }));
+      } else if (browser().iPhone) {
+        window.webkit.messageHandlers.DAYA.postMessage(
+          JSON.stringify({ api: "back" })
+        );
+      }
+    },
+    setIcon(object, str, index) {
+      let some = {
+        one: 1,
+        two: 2,
+        three: 3,
+        four: 4,
+        five: 5,
+        six: 6,
+        seven: 7,
+        eight: 8
+      };
+
+      switch (str) {
+        case 1: {
+          object[some[index]].icon = this.imgList.excellent;
+          break;
+        }
+        case 2: {
+          //  console.log( object[some[index]].icon)
+          object[some[index]].icon = this.imgList.good;
+          break;
+        }
+        case 3: {
+          // console.log( object[some[index]].icon)
+          object[some[index]].icon = this.imgList.normal;
+          break;
+        }
+      }
+      if (index == "seven" || index == "six") {
+        object[some[index]].icon == this.imgList.good
+          ? (object[some[index]].icon = this.imgList.normal)
+          : object[some[index]].icon;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+@font-face {
+  font-family: myFirstFont;
+  src: url("../../assets/images/start/din-bold.otf"),
+    url("../../assets/images/start/din-bold.otf"); /* IE9+ */
+}
+img {
+  vertical-align: middle;
+}
+div {
+  box-sizing: border-box;
+}
+.container {
+  font-size: 0.14rem;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding-top: 0.2rem;
+  padding-bottom: 0.36rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .logo {
+    width: 1.03rem;
+    height: 0.77rem;
+    position: absolute;
+    right: -0.15rem;
+    top: -0.2rem;
+  }
+  .logo1 {
+    width: 1.03rem;
+    height: 0.77rem;
+    position: absolute;
+    right: 0rem;
+    top: 0;
+  }
+  .logo2 {
+    width: 1.03rem;
+    height: 0.77rem;
+    position: absolute;
+    right: -0.2rem;
+    top: -0.1rem;
+  }
+  .topWrap {
+    background-color: #f6f6f6;
+    width: 3.51rem;
+    border-radius: 10px;
+    padding: 0.16rem;
+    margin-bottom: 0.1rem;
+    color: #333;
+    p {
+      font-size: 0.14rem;
+      line-height: 0.23rem;
+      span {
+        color: #28babd;
+      }
+    }
+  }
+  .titleWrap.top {
+    margin-bottom: 0.01rem;
+  }
+  .titleWrap {
+    margin-bottom: 0.14rem;
+    img {
+      width: 1.37rem;
+      height: 0.74;
+    }
+    p {
+      color: #666;
+      line-height: 0.2rem;
+      padding: 0 0.22rem;
+    }
+  }
+  .studyWrap {
+    min-height: 200px;
+    padding: 0 0.2rem;
+    width: 100%;
+    .border {
+      width: 100%;
+      background-color: #2dc5c5;
+      min-height: 200px;
+      border-radius: 5px;
+      padding: 0.18rem 0.18rem 0.25rem;
+      margin-bottom: 0.1rem;
+      .logo1 {
+        position: absolute;
+        top: -0.2rem;
+        z-index: 20;
+      }
+      img {
+        vertical-align: middle;
+        position: relative;
+
+        top: 0.01rem;
+      }
+      .theoryIcon {
+        width: 0.17rem;
+        height: 0.17rem;
+        position: relative;
+        top: -0.02rem;
+ 
+      }
+      .muiscIcon {
+        width: 0.17rem;
+        height: 0.19rem;
+        position: relative;
+        top: -0.02rem;
+      }
+      .bookIcon {
+        width: 0.16rem;
+        height: 0.19rem;
+        position: relative;
+        top: -0.02rem;
+      }
+      .borderContainer {
+        // top:-.15rem;
+        position: relative;
+        border-radius: 0 0 10px 10px;
+        z-index: 1;
+        min-height: 200px;
+        background-color: #fff;
+        display: flex;
+        flex-direction: column;
+        padding-left: 0.18rem;
+        .theoryBox {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          margin-bottom: 0.22rem;
+          .right {
+            margin-left: 0.09rem;
+            .subTitle {
+              font-size: 0.13rem;
+              color: #000;
+            }
+            .desc {
+              font-size: 0.13rem;
+              color: #808080;
+              line-height: 0.2rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  .reportWrap {
+    width: 100%;
+    padding: 0 0.22rem;
+    margin-bottom: 0.14rem;
+    .imgBox {
+      width: 3.3rem;
+      height: 4rem;
+      background: url("../../assets/images/start/box1.png") no-repeat;
+      background-size: 100% 100%;
+      // margin-top: 0.22rem;
+      display: flex;
+      flex-direction: column;
+      padding: 0.74rem 0.35rem 0;
+      .studentWrap {
+        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;
+          }
+        }
+      }
+      .studentTimeWrap {
+        padding: 0 0.08rem;
+        margin-top: 0.2rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        margin-bottom: 0.3rem;
+        div {
+          .timeP {
+            font-family: myFirstFont, Microsoft YaHei;
+            font-size: 0.4rem;
+            font-weight: bold;
+            color: rgba(51, 51, 51, 1);
+            line-height: 0.45rem;
+          }
+          .descP {
+            font-size: 0.13rem;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: rgba(128, 128, 128, 1);
+            line-height: 0.2rem;
+          }
+        }
+      }
+      .assess {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #f6f6f6;
+        p {
+          box-sizing: border-box;
+          padding: 0.17rem 0.13rem 0.17rem;
+          width: 2.5rem;
+          background: rgba(246, 246, 246, 1);
+          border-radius: 5px;
+          color: #666;
+          span {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+  .reportWrap1 {
+    width: 100%;
+    padding: 0 0.22rem;
+    // margin-bottom: 0.28rem;
+    .border {
+      width: 100%;
+      background-color: #2dc5c5;
+      min-height: 200px;
+      border-radius: 5px;
+      padding: 0.18rem;
+      margin-bottom: 0.1rem;
+      img {
+        vertical-align: middle;
+      }
+      .imgBox1 {
+        background-color: #fff;
+        border-radius: 0 0 10px 10px;
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 0.15rem;
+        .title {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          font-size: 0.18rem;
+          height: 0.3rem;
+          line-height: 0.3rem;
+          margin: 0.15rem 0;
+          padding: 0 0.16rem;
+          color: #006b6b;
+          font-weight: bold;
+          .squrt {
+            width: 0.05rem;
+            height: 0.22rem;
+            margin-right: 0.1rem;
+          }
+        }
+        .cell.activce {
+          border: 1px solid #28babd;
+          color: #28babd;
+        }
+        .cell {
+          width: 2.6rem;
+          padding: 0.08rem 0.17rem 0.08rem 0;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          border-radius: 10px;
+          box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
+          background-color: #fff;
+          font-size: 0.12rem;
+
+          border: 1px solid transparent;
+          p {width: 1.98rem;}
+          .icons {
+            width: 0.22rem;
+            height: 0.22rem;
+            margin: 0 0.105rem;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  .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;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .border {
+      width: 100%;
+      background-color: #2dc5c5;
+      min-height: 200px;
+      border-radius: 5px;
+      padding: 0.18rem;
+      margin-bottom: 0.1rem;
+      .boxWrap {
+        background-color: #fff;
+        padding: 0 0.14rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 0.27rem;
+        border-radius: 0 0 10px 10px;
+        .teacherWrap {
+          width: 100%;
+          top: -0.1rem;
+          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;
+            }
+          }
+        }
+        .textWrap {
+          width: 100%;
+          padding: 0.16rem 0.08rem 0.22rem;
+          background-color: #f6f6f6;
+          border-radius: 5px;
+          margin-top: 0.1rem;
+          min-height: 1.08rem;
+          border-radius: 5px;
+          p {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            margin-bottom: 0.1rem;
+            i {
+              display: block;
+              width: 0.19rem;
+              height: 0.16rem;
+              margin-right: 0.06rem;
+              position: relative;
+              top: 2px;
+            }
+            span {
+              width: 2.25rem;
+              font-size: 0.12rem;
+              line-height: 0.18rem;
+              color: #666;
+            }
+          }
+        }
+      }
+    }
+  }
+  .topTitleImg {
+    width: 1.21rem !important;
+    vertical-align: middle;
+  }
+  .topTitleP {
+    position: relative;
+    top: -0.1rem;
+  }
+  .button {
+    width: 3.2rem;
+    height: 0.5rem;
+    line-height: 0.5rem;
+    text-align: center;
+    margin-top: 0.27rem;
+    font-size: 0.18rem;
+    color: #fff;
+    background: linear-gradient(
+      90deg,
+      rgba(97, 194, 196, 1) 0%,
+      rgba(62, 174, 176, 1) 100%
+    );
+    border-radius: 0.25rem;
+  }
+}
+</style>

src/views/teacher/studyReport.vue

@@ -196,7 +196,7 @@ export default {
   }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .m-container {
   background: url("../../assets/images/start/bg.png") no-repeat;
   background-size: 100% 100%;

src/views/teacher/studyReportNew.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="m-containers">
+    <img :src="imgList.topBanner" width="100%" class="topBanner" alt />
+    <div class="paddingWrap">
+      <div class="topCard">
+        <img :src="imgList.note1" class="topNote" width="100%" alt />
+        <p class="title">
+          <img :src="imgList.squrt" class="squrts" alt />
+          授课内容
+        </p>
+        <div class="chioseList">
+          <div class="theoryCell">
+            <div class="left">
+              <img :src="imgList.theoryIcon" class="theoryIcon" alt />
+              乐理
+            </div>
+            <div class="right">
+              <div class="theoryItem" v-for="(item,index) in hasTheory" :key="index">
+                <van-field
+                  readonly
+                  clickable
+                  :label="subjectName"
+                  placeholder="请选择乐理"
+                  :value="item.str"
+                  @click="item.show = true"
+                />
+                <van-popup
+                  v-model="item.show"
+                  position="bottom"
+                  :overlay="true"
+                  get-container="#app"
+                >
+                  <van-picker
+                    show-toolbar
+                    :columns="theoryList"
+                    @cancel="item.show = false"
+                    @confirm="(val)=>{ onConfirm(val,item)}"
+                  />
+                </van-popup>
+                <div class="iconWrap" v-if="index== 0" @click="addTheory(hasTheory)">
+                  <img :src="imgList.addIcon" class="smallIcon" alt />
+                </div>
+                <div class="iconWrap" v-else>
+                  <img
+                    :src="imgList.deteleIcon"
+                    class="smallIcon"
+                    alt
+                    @click="removeTheory(hasTheory,index)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="musicCell">
+            <div class="left">
+              <img :src="imgList.muiscIcon" class="muiscIcon" alt />
+              曲子
+            </div>
+            <div class="right">
+              <van-field v-model="testMusic" rows="1" autosize type="textarea" placeholder="请输入曲子" />
+            </div>
+          </div>
+          <div class="theoryCell teachingCell">
+            <div class="left">
+              <img :src="imgList.bookIcon" class="bookIcon" alt />
+              教材
+            </div>
+            <div class="right">
+              <div class="theoryItem" v-for="(item,index) in teaching" :key="index">
+                <van-field
+                  readonly
+                  clickable
+                  :label="subjectName"
+                  placeholder="请选择教材"
+                  :value="item.str"
+                  @click="item.show = true"
+                />
+                <van-popup v-model="item.show" position="bottom" get-container="#app">
+                  <van-picker
+                    show-toolbar
+                    :columns="teachingList"
+                    @cancel="item.show = false"
+                    @confirm="(val)=>{ onTeacherConfirm(val,item)}"
+                  />
+                </van-popup>
+                <div class="iconWrap" v-if="index== 0" @click="addTheory(teaching)">
+                  <img :src="imgList.addIcon" class="smallIcon" alt />
+                </div>
+                <div class="iconWrap" v-else>
+                  <img
+                    :src="imgList.deteleIcon"
+                    class="smallIcon"
+                    alt
+                    @click="removeTheory(teaching,index)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="nextCard">
+        <img :src="imgList.note2" class="topNote" width="100%" alt />
+        <p class="title">
+          <img :src="imgList.squrt" class="squrts" alt />
+          必选项
+        </p>
+        <div class="chioseList">
+          <p class="subTitle">1.{{subjectJson[1].title}}</p>
+          <div class="cell" :class="one==1?'activce':''" @click="one=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p>{{subjectJson[1][1] }}</p>
+            
+          </div>
+          <div class="cell" :class="one==2?'activce':''" @click="one=2">
+            <img :src="imgList.good" class="icons" alt />
+            <p>{{subjectJson[1][2] }} </p>
+            
+          </div>
+          <div class="cell" :class="one==3?'activce':''" @click="one=3">
+            <img :src="imgList.normal" class="icons" alt />
+             <p>{{subjectJson[1][3] }}</p>
+            
+          </div>
+        </div>
+        <img :src="imgList.line" alt width="100%" />
+        <div class="chioseList">
+          <p class="subTitles">2.{{subjectJson[2].title}}</p>
+          <div class="cell" :class="two==1?'activce':''" @click="two=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p>{{subjectJson[2][1] }}</p>
+            
+          </div>
+          <div class="cell" :class="two==2?'activce':''" @click="two=2">
+            <img :src="imgList.good" class="icons" alt />
+            <p>{{subjectJson[2][2] }}</p>
+            
+          </div>
+          <div class="cell" :class="two==3?'activce':''" @click="two=3">
+            <img :src="imgList.normal" class="icons" alt />
+            <p>{{subjectJson[2][3] }}</p>
+            
+          </div>
+        </div>
+        <img :src="imgList.line" alt width="100%" />
+        <div class="chioseList">
+          <p class="subTitles">3.{{subjectJson[3].title}}</p>
+          <div class="cell" :class="three==1?'activce':''" @click="three=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p>{{subjectJson[3][1] }}</p>
+            
+          </div>
+          <div class="cell" :class="three==2?'activce':''" @click="three=2">
+            <img :src="imgList.good" class="icons" alt />
+            <p> {{subjectJson[3][2] }}</p>
+           
+          </div>
+          <div class="cell" :class="three==3?'activce':''" @click="three=3">
+            <img :src="imgList.normal" class="icons" alt />
+            <p>{{subjectJson[3][3] }}</p>
+            
+          </div>
+        </div>
+        <img :src="imgList.line" alt width="100%" />
+        <div class="chioseList">
+          <p class="subTitles">4.{{subjectJson[4].title}}</p>
+          <div class="cell" :class="four==1?'activce':''" @click="four=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p> {{subjectJson[4][1] }}</p>
+           
+          </div>
+          <div class="cell" :class="four==2?'activce':''" @click="four=2">
+            <img :src="imgList.good" class="icons" alt />
+            <p> {{subjectJson[4][2] }}</p>
+           
+          </div>
+          <div class="cell" :class="four==3?'activce':''" @click="four=3">
+            <img :src="imgList.normal" class="icons" alt />
+            <p>{{subjectJson[4][3] }}</p>
+            
+          </div>
+        </div>
+        <img :src="imgList.line" alt width="100%" />
+        <div class="chioseList">
+          <p class="subTitles">5.{{subjectJson[5].title}}</p>
+          <div class="cell" :class="five==1?'activce':''" @click="five=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p>{{subjectJson[5][1] }}</p>
+            
+          </div>
+          <div class="cell" :class="five==2?'activce':''" @click="five=2">
+            <img :src="imgList.normal" class="icons" alt />
+            <p>{{subjectJson[5][2] }}</p>
+            
+          </div>
+        </div>
+      </div>
+      <div class="nextCard">
+        <img :src="imgList.note2" class="topNote" width="100%" alt />
+        <p class="title">
+          <img :src="imgList.squrt" class="squrts" alt />
+          可选项
+        </p>
+        <div class="chioseList">
+          <p class="subTitle">1.{{subjectJson[6].title}}</p>
+          <div class="cell" :class="six==1?'activce':''" @click="six=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p>{{subjectJson[6][1] }}</p>
+            
+          </div>
+          <div class="cell" :class="six==2?'activce':''" @click="six=2">
+            <img :src="imgList.normal" class="icons" alt />
+            <p> {{subjectJson[6][2] }}</p>
+           
+          </div>
+        </div>
+        <img :src="imgList.line" alt width="100%" />
+        <div class="chioseList">
+          <p class="subTitles">2.{{subjectJson[7].title}}</p>
+          <div class="cell" :class="seven==1?'activce':''" @click="seven=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p>{{subjectJson[7][1] }}</p>
+            
+          </div>
+          <div class="cell" :class="seven==2?'activce':''" @click="seven=2">
+            <img :src="imgList.normal" class="icons" alt />
+            <p>{{subjectJson[7][2] }}</p>
+            
+          </div>
+        </div>
+
+        <img :src="imgList.line" alt width="100%" />
+        <div class="chioseList">
+          <p class="subTitles">3.{{subjectJson[8].title}}</p>
+          <div class="cell" :class="eight==1?'activce':''" @click="eight=1">
+            <img :src="imgList.excellent" class="icons" alt />
+            <p>{{subjectJson[8][1] }}</p>
+            
+          </div>
+          <div class="cell" :class="eight==2?'activce':''" @click="eight=2">
+            <img :src="imgList.good" class="icons" alt />
+            <p>{{subjectJson[8][2] }}</p>
+            
+          </div>
+          <div class="cell" :class="eight==3?'activce':''" @click="eight=3">
+            <img :src="imgList.normal" class="icons" alt />
+            <p>{{subjectJson[8][3] }}</p>
+            
+          </div>
+        </div>
+      </div>
+      <div class="nextCard">
+        <p class="title commitTitle">
+          <img :src="imgList.squrt" class="squrts" alt />
+          老师评语
+        </p>
+        <div class="commitWrap">
+          <van-field v-model="comment" rows="3" autosize type="textarea" placeholder="学员表现的怎么样？填写评语能让学员更清楚自己的优点和美中不足的地方哦～" />
+        </div>
+      </div>
+    </div>
+    <div class="submit" @click="submietInfo">
+      <img :src="imgList.btn" width="100%" alt />
+    </div>
+    <div class="bottomBox"></div>
+  </div>
+</template>
+<script>
+import { subjectJson } from "@/utils/questionJson";
+import { browser } from "@/common/common";
+import { findTeacherClassGroupInfo, addStudyReport1 } from "@/api/teacher";
+export default {
+  data() {
+    return {
+      imgList: {
+        topBanner: require("@/assets/images/start/topBanner.png"),
+        note1: require("@/assets/images/start/note1.png"),
+        note2: require("@/assets/images/start/note2.png"),
+        squrt: require("@/assets/images/start/squrt.png"),
+        theoryIcon: require("@/assets/images/start/theory-icon.png"),
+        muiscIcon: require("@/assets/images/start/muisc-icon.png"),
+        bookIcon: require("@/assets/images/start/book-icon.png"),
+        addIcon: require("@/assets/images/start/add-icon.png"),
+        deteleIcon: require("@/assets/images/start/detele-icon.png"),
+        excellent: require("@/assets/images/start/excellent.png"),
+        good: require("@/assets/images/start/good.png"),
+        normal: require("@/assets/images/start/normal.png"),
+        line: require("@/assets/images/start/line.png"),
+        btn: require("@/assets/images/start/button.png")
+      },
+      theoryList: ["一级", "二级", "三级", "四级"],
+      teachingList: [
+        {
+          values: ["一级", "二级", "三级", "四级"],
+          defaultIndex: 2
+        },
+        {
+          values: [],
+          defaultIndex: 1
+        }
+      ],
+      hasTheory: [{ str: "", show: false }],
+      teaching: [{ str: "", show: false }],
+      testMusic: "",
+      showPicker: false,
+      lessArr: [],
+      subjectJson: subjectJson,
+      one: "",
+      two: "",
+      three: "",
+      four: "",
+      five: "",
+      six: "",
+      seven: "",
+      eight: "",
+      subjectName: null,
+      id: "",
+      comment:''
+    };
+  },
+  created() {
+    for (let i = 0; i < 17; i++) {
+      this.teachingList[1].values.push(` lesson${i + 1} `);
+    }
+    this.classGroupId = this.$route.query.classGroupId;
+    this.id = this.$route.query.id;
+    this.token = localStorage.getItem("Authorization");
+    // if (!this.token || !this.classGroupId) {
+    //   this.onAppBack();
+    //   return;
+    // }
+    findTeacherClassGroupInfo({ classGroupId: this.classGroupId }).then(res => {
+      if (res.data.code == 200) {
+        this.subjectName = res.data.data.subjectNames;
+      }
+    });
+  },
+  methods: {
+    onConfirm(val, item) {
+      item.str = val;
+      item.show = false;
+    },
+    onTeacherConfirm(val, item) {
+      item.str = val[0] + val[1];
+      item.show = false;
+    },
+    addTheory(arr) {
+      arr.push({ str: "", show: false });
+    },
+    removeTheory(arr, index) {
+      arr.splice(index, 1);
+    },
+    submietInfo() {
+      // console.log(this.one)
+      // console.log(this.json.one[this.one])
+      if (!this.one || !this.two || !this.three || !this.four || !this.five) {
+        this.$toast("请认真选择必选项");
+        return;
+      }
+      if (!this.hasTheory[0].str || !this.teaching[0].str) {
+        this.$toast("必须选择乐理和教材");
+        return;
+      }
+      if (!this.testMusic) {
+        this.$toast("请输入练习曲目");
+        return;
+      }
+      this.item = {
+        one: this.one,
+        two: this.two,
+        three: this.three,
+        four: this.four,
+        five: this.five,
+        six: this.six,
+        seven: this.seven,
+        eight: this.eight
+      };
+      let id = this.id || null;
+      let comment = this.comment || null;
+      addStudyReport1({
+        classGroupId: this.classGroupId,
+        item: this.item,
+        song: this.testMusic,
+        musicTheory: this.hasTheory,
+        teachingMaterial: this.teaching,
+        version: 2,
+        comment:this.comment,
+        id
+      }).then(res => {
+        if (res.data.code == 200) {
+          this.$toast("提交成功");
+          setTimeout(() => {
+            this.onAppBack();
+          }, 2000);
+        } else {
+          this.$toast(res.data.msg);
+          // setTimeout(() => {
+          //   // this.$router.push({
+          //   //   path: "/studyReport",
+          //   //   query: { classGroupId: this.classGroupId }
+          //   // });
+          // }, 2000);
+        }
+      });
+    },
+    onAppBack() {
+      if (browser().android) {
+        DAYA.postMessage(JSON.stringify({ api: "back" }));
+      } else if (browser().iPhone) {
+        window.webkit.messageHandlers.DAYA.postMessage(
+          JSON.stringify({ api: "back" })
+        );
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+div {
+  box-sizing: border-box;
+}
+.m-containers {
+  background: url("../../assets/images/start/bg.png") no-repeat;
+  //   background-size: 100% 100%;
+  position: relative;
+  width: 100%;
+  min-height: 16.97rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #5ed5d4;
+  padding-bottom: 0.2rem;
+  z-index: 0;
+  .topBanner {
+    z-index: 10;
+  }
+  .paddingWrap {
+    position: relative;
+    z-index: 2;
+    padding: 0 0.2rem 0.26rem;
+    .topCard,
+    .nextCard {
+      position: relative;
+      border-radius: 15px;
+      top: -0.08rem;
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding-bottom: 0.24rem;
+      .commitTitle {
+        position: relative!important;
+        margin-bottom:.17rem!important; 
+      }
+      .commitWrap {
+        padding: 0.1rem;
+      }
+      .topNote {
+        z-index: 1;
+      }
+      .title {
+        z-index: 5;
+        position: absolute;
+        top: 0.21rem;
+        left: 0.15rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        font-size: 0.18rem;
+        height: 0.22rem;
+        line-height: 0.22rem;
+        margin-bottom: 0.365rem;
+        color: #808080;
+        font-weight: bold;
+        .squrts {
+          width: 0.05rem;
+          height: 0.22rem;
+          margin-right: 0.1rem;
+          position: relative;
+          z-index: 5;
+        }
+      }
+      .chioseList {
+        position: relative;
+        top: -0.1rem;
+        z-index: 3;
+        padding: 0 0.17rem;
+        .theoryCell,
+        .musicCell {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          background: rgba(255, 255, 255, 1);
+          box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
+          border-radius: 10px;
+          min-height: 0.44rem;
+          padding: 0 0.07rem;
+          .left {
+            color: #666;
+            font-size: 0.15rem;
+            line-height: 0.44rem;
+            margin-right: 6px;
+            .theoryIcon {
+              width: 0.17rem;
+              height: 0.17rem;
+              position: relative;
+              top: 0.04rem;
+                     margin-right:.02rem;
+            }
+            .muiscIcon {
+              width: 0.17rem;
+              height: 0.19rem;
+              position: relative;
+              top: 0.04rem;
+                margin-right:.02rem;
+            }
+            .bookIcon {
+              width: 0.16rem;
+              height: 0.19rem;
+              position: relative;
+              top: 0.04rem;
+                margin-right:.02rem;
+            }
+          }
+          .right {
+            .theoryItem {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              width: 2.28rem;
+              .van-cell {
+                // width: 1.6rem;
+                // border-bottom:none;
+              }
+              .van-field__label {
+                width: 0.8rem;
+              }
+              .iconWrap {
+                position: absolute;
+                right: 0.2rem;
+                width: 0.42rem;
+                height: 0.42rem;
+
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                .smallIcon {
+                  margin-top: 0.15rem;
+                  width: 0.15rem;
+                  height: 0.15rem;
+                }
+              }
+            }
+          }
+        }
+        .musicCell,
+        .teachingCell {
+          margin-top: 0.25rem;
+        }
+        .subTitle,
+        .subTitles {
+          position: relative;
+          top: -0.2rem;
+          font-size: 0.18rem;
+          color: #00696a;
+           font-weight: bold;
+        }
+        .subTitles {
+          top: 0 !important;
+          padding: 0.27rem 0 0.24rem;
+          font-weight: bold;
+        }
+      }
+    }
+    .nextCard {
+      margin-top: 0.23rem;
+    }
+  }
+  .cell.activce {
+    border: 1px solid #28babd;
+    color: #28babd;
+  }
+  .cell {
+    width: 3.05rem;
+    padding: 0.1rem 0.15rem 0.1rem 0;
+    line-height: 0.2rem;
+    display: flex;
+    flex-direction: row;
+    border-radius: 10px;
+    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
+    background-color: #fff;
+    font-size: 0.14rem;
+    margin-bottom: 0.245rem;
+    border: 1px solid transparent;
+    p {width: 2.41rem;}
+    .icons {
+      width: 0.26rem;
+      height: 0.26rem;
+      margin: 0 0.105rem;
+      display: block;
+    }
+  }
+  .submit {
+    width: 3.2rem;
+    position: relative;
+    z-index: 2;
+  }
+  .bottomBox {
+    background: url("../../assets/images/start/bottom.png") no-repeat;
+    //   background-size: 100% 100%;
+    position: absolute;
+    width: 100%;
+    height: 3.45rem;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+}
+.van-overflow-hidden {
+  z-index: 0;
+  position: relative;
+}
+.van-field__control::-webkit-input-placeholder { /* WebKit browsers */
+font-size: .14rem;
+line-height: .20rem!important;
+color: #999;
+}
+
+.van-field__control::-moz-placeholder { /* Mozilla Firefox 19+ */
+font-size: .14rem;
+line-height: .20rem!important;
+color: #999
+}
+
+.van-field__control::-ms-input-placeholder { /* Internet Explorer 10+ */
+font-size: .14rem;
+line-height: .20rem!important;
+color: #999
+}   
+</style>

src/views/teacher/tobeReport.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="m-container">
+    <div class="cellWrap">
+      <div class="mcell" v-for="(item,index) in reportList" :key="index" >
+        <div class="left">
+          <span class="timer">{{ item.month}}</span>
+          <span class="title">{{ item.groupName}}</span>
+        </div>
+        <div class="cellBtn" @click="submitReport(item)">提交报告</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {getNeedPost} from '@/api/teacher'
+export default {
+  data() {
+    return {
+        reportList:[]
+    };
+  },
+  created(){
+       let params = this.$route.query;
+    if (params.Authorization) {
+      localStorage.setItem("Authorization", decodeURI(params.Authorization));
+      localStorage.setItem("userInfo", decodeURI(params.Authorization));
+    }
+  },
+  mounted(){
+      getNeedPost().then(res=>{
+          if(res.data.code == 200){
+              if(res.data.data.length > 0){
+                  this.reportList = res.data.data
+              }else {
+                   this.$toast('当前没有待填写报告')
+              }
+          }
+      })
+  },
+  methods:{
+      submitReport(item){
+          this.$router.push({path:'/studyReportNew',query:{id:item.id,classGroupId:item.classGroupId}})
+      }
+  }
+};
+</script>
+<style lang="less" scoped>
+.m-container {
+  min-height: 100vh;
+  background-color: #f3f4f8;
+  .cellWrap {
+    background-color: #fff;
+    .mcell {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      height: 0.54rem;
+      line-height: 0.54rem;
+      background-color: #fff;
+      margin-left: 0.16rem;
+      border-bottom: 1px solid #f0f0f0;
+      align-items: center;
+      .timer {
+        font-size: 0.17rem;
+        color: #808080;
+        margin-right: 0.3rem;
+      }
+      .title {
+        font-size: 0.17rem;
+        color: #1a1a1a;
+      }
+      .cellBtn {
+        text-align: center;
+        width: .8rem;
+        height: 0.24rem;
+        line-height: .24rem;
+        color: #fff;
+        background: rgba(20, 146, 138, 1);
+        border-radius: 17px;
+        font-size: .14rem;
+        margin-right: .16rem;
+      }
+    }
+  }
+}
+</style>