|
|
@@ -5,12 +5,12 @@
|
|
|
<p>
|
|
|
阶段性课时完成后，我们将围绕
|
|
|
<span>练习表现、节奏准确度、音符准确度、演奏连贯度。</span>
|
|
|
- 等四个学习维度，对学员的学习进度和掌握程度进行精准评估，有助于家长及时了解孩子的学习成果和老师有针对性的指导，不断提升学员的学习能力和音乐成就。
|
|
|
+ 等四个学习维度，对学员的学习进度和掌握程度进行精准评估，有助于家长及时了解孩子的学习成果和老师有针对性的指导，不断提升学员的学习能力和音乐成就。
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="titleWrap">
|
|
|
<img :src="imgList.title1" alt />
|
|
|
- <p>报告概览呈现的是学员目前综合的练习进度，提升小朋友练习的成就感，鼓励小朋友再接再厉。</p>
|
|
|
+ <p>报告概览呈现的是学员本阶段的练习频率及累计时长，演奏技能的提升离不开日积月累的练习哦！</p>
|
|
|
</div>
|
|
|
<div class="reportWrap">
|
|
|
<div class="border">
|
|
|
@@ -36,64 +36,66 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="assess">
|
|
|
- <p>小朋友本次练习表现优秀，要继续加油哦！小朋友本次练习表现优秀，要继续加油哦！</p>
|
|
|
+ <p>
|
|
|
+ 本次
|
|
|
+ <span>练习表现优异，进步很大，希望持之以恒</span> 要继续加油哦！
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="titleWrap">
|
|
|
<img :src="imgList.title2" alt />
|
|
|
- <p>评分详情呈现的是老师就学员本组课程的练习表现，节奏准确度，音符准确度，节奏连贯度四个方面的具体评分。</p>
|
|
|
+ <p>评价详情呈现的是老师就学员本组课程的练习表现、节奏准确度、音符准确度、节奏连贯度四个维度的具体评价。</p>
|
|
|
</div>
|
|
|
<div class="reportWrap1">
|
|
|
-
|
|
|
- <div class="imgBox1">
|
|
|
- <div style="width:100%; position: relative; margin-top:.1rem">
|
|
|
- <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 class="imgBox1">
|
|
|
+ <div style="width:100%; position: relative; margin-top:.1rem">
|
|
|
+ <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 class="titleWrap">
|
|
|
<img :src="imgList.title3" alt />
|
|
|
- <p>老师评语是老师就小朋友的练习情况给予的评价，鼓励小朋友再接再厉哦！</p>
|
|
|
+ <p>老师评语是老师就学员的练习情况给予的总结，鼓励学员再接再厉哦！</p>
|
|
|
</div>
|
|
|
<div class="reportWrap2">
|
|
|
<div class="boxWrap">
|
|
|
@@ -107,7 +109,24 @@
|
|
|
<p class="subject">长笛</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="textWrap">{{str}}</div>
|
|
|
+ <div class="textWrap">
|
|
|
+ <p>
|
|
|
+ <i class="num1"></i>
|
|
|
+ <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <i class="num2"></i>
|
|
|
+ <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <i class="num3"></i>
|
|
|
+ <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <i class="num4"></i>
|
|
|
+ <span>保持日常练习，与老师良好的互动是进步的开始！稳定的节奏就像是音乐的脉搏，搭配良好的音乐准确度，也许将来会成为职业音乐节也不一定哦！</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="button">继续学习</div>
|
|
|
@@ -129,24 +148,27 @@ export default {
|
|
|
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")
|
|
|
+ btn: require("@/assets/images/start/button.png"),
|
|
|
+ 1: require("@/assets/images/start/1.png"),
|
|
|
+ 2: require("@/assets/images/start/2.png"),
|
|
|
+ 3: require("@/assets/images/start/3.png"),
|
|
|
+ 4: require("@/assets/images/start/4.png")
|
|
|
},
|
|
|
- classGroupId:null,
|
|
|
- str:'我是最帅的</br>哈哈哈'
|
|
|
+ classGroupId: null,
|
|
|
+ str: "我是最帅的</br>哈哈哈"
|
|
|
};
|
|
|
},
|
|
|
- created(){
|
|
|
- this.classGroupId = this.$route.query.classGroupId;
|
|
|
- this.token = localStorage.getItem('Authorization')
|
|
|
- this.token = 'bearer+585ca4d9-683b-49ab-8025-463e4b8a998f'
|
|
|
+ created() {
|
|
|
+ this.classGroupId = this.$route.query.classGroupId;
|
|
|
+ this.token = localStorage.getItem("Authorization");
|
|
|
+ this.token = "bearer+585ca4d9-683b-49ab-8025-463e4b8a998f";
|
|
|
if (!this.token || !this.classGroupId) {
|
|
|
- this.onAppBack()
|
|
|
- return
|
|
|
+ this.onAppBack();
|
|
|
+ return;
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
- methods:{
|
|
|
- onAppBack() {
|
|
|
+ methods: {
|
|
|
+ onAppBack() {
|
|
|
if (browser().android) {
|
|
|
DAYA.postMessage(JSON.stringify({ api: "back" }));
|
|
|
} else if (browser().iPhone) {
|
|
|
@@ -159,10 +181,10 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
-@font-face{
|
|
|
- font-family: myFirstFont;
|
|
|
- src: url('../../assets/images/start/din-bold.otf'),
|
|
|
- url('../../assets/images/start/din-bold.otf'); /* IE9+ */
|
|
|
+@font-face {
|
|
|
+ font-family: myFirstFont;
|
|
|
+ src: url("../../assets/images/start/din-bold.otf"),
|
|
|
+ url("../../assets/images/start/din-bold.otf"); /* IE9+ */
|
|
|
}
|
|
|
|
|
|
div {
|
|
|
@@ -215,78 +237,80 @@ div {
|
|
|
width: 100%;
|
|
|
padding: 0 0.22rem;
|
|
|
margin-bottom: 0.28rem;
|
|
|
- .imgBox {
|
|
|
- width: 3.3rem;
|
|
|
- height: 3.5rem;
|
|
|
- background: url("../../assets/images/start/box1.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- // margin-top: 0.22rem;
|
|
|
+ .imgBox {
|
|
|
+ width: 3.3rem;
|
|
|
+ height: 3.5rem;
|
|
|
+ background: url("../../assets/images/start/box1.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ // margin-top: 0.22rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0.5rem 0.35rem;
|
|
|
+ .studentWrap {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 0.5rem 0.35rem;
|
|
|
- .studentWrap {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- .left {
|
|
|
+ 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;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .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.15rem;
|
|
|
- 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;
|
|
|
- }
|
|
|
-
|
|
|
+ }
|
|
|
+ .studentTimeWrap {
|
|
|
+ padding: 0 0.08rem;
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 0.15rem;
|
|
|
+ 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.08rem;
|
|
|
- width: 2.5rem;
|
|
|
- background: rgba(246, 246, 246, 1);
|
|
|
- border-radius: 5px;
|
|
|
- color: #666;
|
|
|
+ }
|
|
|
+ .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.08rem;
|
|
|
+ width: 2.5rem;
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #666;
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -297,62 +321,60 @@ div {
|
|
|
padding: 0 0.22rem;
|
|
|
margin-bottom: 0.28rem;
|
|
|
|
|
|
- .imgBox1 {
|
|
|
-
|
|
|
- position: relative;
|
|
|
- width: 3.3rem;
|
|
|
- height: 4.625rem;
|
|
|
- background: url("../../assets/images/start/box2.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .imgBox1 {
|
|
|
+ position: relative;
|
|
|
+ width: 3.3rem;
|
|
|
+ height: 4.625rem;
|
|
|
+ background: url("../../assets/images/start/box2.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0.5rem 0.22rem;
|
|
|
+ .title {
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 0.5rem 0.22rem;
|
|
|
- .title {
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- font-size: 0.21rem;
|
|
|
- height: 0.3rem;
|
|
|
- line-height: 0.3rem;
|
|
|
- margin: 0.12rem 0;
|
|
|
- padding: 0 .16rem;
|
|
|
- color: #000;
|
|
|
- .squrt {
|
|
|
- width: 0.05rem;
|
|
|
- height: 0.22rem;
|
|
|
- margin-right: 0.1rem;
|
|
|
- }
|
|
|
- }
|
|
|
- .cell.activce {
|
|
|
- border: 1px solid #28babd;
|
|
|
- color: #28babd;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 0.21rem;
|
|
|
+ height: 0.3rem;
|
|
|
+ line-height: 0.3rem;
|
|
|
+ margin: 0.12rem 0;
|
|
|
+ padding: 0 0.16rem;
|
|
|
+ color: #000;
|
|
|
+ .squrt {
|
|
|
+ width: 0.05rem;
|
|
|
+ height: 0.22rem;
|
|
|
+ margin-right: 0.1rem;
|
|
|
}
|
|
|
- .cell {
|
|
|
- width: 2.6rem;
|
|
|
- height: .36rem;
|
|
|
- line-height: .36rem;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- 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.22rem;
|
|
|
- height: 0.22rem;
|
|
|
- margin: 0 0.105rem;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .cell.activce {
|
|
|
+ border: 1px solid #28babd;
|
|
|
+ color: #28babd;
|
|
|
+ }
|
|
|
+ .cell {
|
|
|
+ width: 2.6rem;
|
|
|
+ height: 0.36rem;
|
|
|
+ line-height: 0.36rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ 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.22rem;
|
|
|
+ height: 0.22rem;
|
|
|
+ margin: 0 0.105rem;
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.reportWrap2 {
|
|
|
@@ -395,27 +417,67 @@ div {
|
|
|
|
|
|
.textWrap {
|
|
|
width: 2.5rem;
|
|
|
- min-height: 2.8rem;
|
|
|
+ max-height: 3.2rem;
|
|
|
+ overflow: scroll;
|
|
|
padding: 0.16rem 0.13rem 0.22rem;
|
|
|
background-color: #f6f6f6;
|
|
|
border-radius: 5px;
|
|
|
margin-top: 0.24rem;
|
|
|
+ p {
|
|
|
+ display:flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: .1rem;
|
|
|
+ i {
|
|
|
+ display: block;
|
|
|
+ width: .19rem;
|
|
|
+ height: .16rem;
|
|
|
+ margin-right: .06rem;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 2.25rem;
|
|
|
+ font-size: .12rem;
|
|
|
+ line-height: .18rem;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .num1{
|
|
|
+ background: url("../../assets/images/start/1.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .num2{
|
|
|
+ background: url("../../assets/images/start/2.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num3{
|
|
|
+ background: url("../../assets/images/start/3.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num4{
|
|
|
+ background: url("../../assets/images/start/4.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.button {
|
|
|
width: 3.2rem;
|
|
|
- height: .5rem;
|
|
|
- line-height: .5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ line-height: 0.5rem;
|
|
|
text-align: center;
|
|
|
- margin-top: .27rem;
|
|
|
- font-size:.18rem;
|
|
|
+ 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: .25rem;
|
|
|
+ border-radius: 0.25rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
261568008@qq.com
