星星系统

src/components/map/index.vue

 <template>
   <div>
     <div class="unit-block">
+      <!--竖屏 主题栏-->
       <swiper :options="swiperOption" class="banner" v-if="$route.query.course_type==0" ref="mySwiper">
         <swiper-slide v-for="(data,index) in unitList" :key="index">
           <div class="line"></div>
@@ -27,6 +28,7 @@
             </div>
           </swiper-slide>
       </swiper>
+      <!--横屏主题栏-->
       <div class="btn-conntent banner-left">
         <img :src="nextToURL" class="">
       </div>
@@ -58,6 +60,7 @@
         </swiper-slide>
       </swiper>
     </div>
+    <!--竖屏 课程-->
     <div class="lesson-block">
       <div v-if="noLesson" class="noLesson">
         <img :src="errorURL" />
@@ -77,7 +80,9 @@
               <span v-if="item.push_time === '0000-00-00'">课程还未开始哦</span>
             </div>
           </div>
-          <div>
+          <div class="star-block">
+            <img class="star-img" :src="star_act" v-for="s in item.star_num">
+            <img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
           </div>
           <div class="icon-block">
             <i
@@ -91,6 +96,7 @@
         </div>
       </div>
     </div>
+    <!--横屏 课程-->
     <div class="lesson-block-hp">
       <swiper :options="swiperOptionLesson" class="lesson-sw" ref="mySwiperLesson">
           <swiper-slide v-for="(item,x) in hpLessonList" :key="x" style="width: 50vh">
@@ -103,6 +109,10 @@
               <div class="lesson-name-hp">
                 {{item.sub_title}}
               </div>
+              <div class="star-block">
+                <img class="star-img" :src="star_act" v-for="s in item.star_num">
+                <img class="star-img" :src="star_def" v-for="s in 3-item.star_num">
+              </div>
               <i class="map money" v-if="item.push_time !== '0000-00-00' && ((hpLessonList[x+1] && hpLessonList[x+1].push_time === '0000-00-00' ||  ($route.query.course_type == 0 &&  findUnit(parent_category_id) && findUnit(parent_category_id).status === 2 || $route.query.course_type ==1 ) && x===hpLessonList.length-1 ))"></i>
             </div>
           </swiper-slide>
@@ -150,6 +160,8 @@
 
 <script>
   import {getCourseListApi,getLessonDetailApi,getLessonListApi} from "../../service/api";
+  import star_act from '../../assets/newLesson/star_act.png'
+  import star_def from '../../assets/newLesson/star_def.png'
   import guidePage from '../guide/map'
   import guideContent from '../guide/content'
   import diaBGI from '../../assets/newLesson/diaBG.png'
@@ -172,6 +184,8 @@
     data() {
       let that = this;
       return {
+        star_act:star_act,
+        star_def:star_def,
         shopType:this.$route.query.course_type,
         diaBGI:diaBGI,
         nextUnitUrl:nextUnitUrl,
@@ -361,7 +375,7 @@
             let index2 = null;
             this.unitList.forEach((i,x)=>{
               if(i.category_id ==this.parent_category_id){
-                if(x>3){
+                if(x>=3){
                   index=x-3
                 }else{
                   index = x
@@ -553,9 +567,19 @@
         border-bottom: 1 * @toVw solid #EEEEEE;
         .text-block{
           margin-left: 0;
+          width: 150*@toVw;
+        }
+        .star-block{
+          img{
+            width: 20*@toVw;
+            height: 20*@toVw;
+            margin-left: 3*@toVw;
+          }
         }
         .icon-block{
           margin: auto 0;
+          width: 30*@toVw;
+          text-align: center;
         }
 
         .clock-block{
@@ -780,7 +804,14 @@
         .money{
           position: absolute;
           right: 0;
-          top:  calc(88vh - 17.99550225vw);
+          top:  calc(88vh - 20.99550225vw);
+        }
+        .star-block{
+          img{
+            width: 20*@toVw;
+            height: 20*@toVw;
+            margin-left: 3*@toVw;
+          }
         }
         display: inline-block;
         width: 100%;
@@ -817,7 +848,7 @@
           color:rgba(0,0,0,1);
         }
         .lesson-img-hp{
-          margin: calc((100vh - 20.99550225vw) / 2 - 12vh) auto;
+          margin: calc((100vh - 23.99550225vw) / 2 - 12vh) auto;
           width: 20vh;
           height: 20vh;
           border-radius: 100*@toVw;

src/components/newLesson/index.vue

@@ -96,6 +96,7 @@
             this.page_id = 1;
             this.nowLesson = {
               type:'text',
+              title:1,
               content:this.lesson.content.look,
               age:this.nowLesson.age
             };
@@ -105,12 +106,14 @@
             if(this.lesson.content.play.type){
               this.nowLesson = {
                 type:'audio',
+                title:2,
                 content:this.lesson.content.play,
                 age:this.nowLesson.age
               };
             }else{
               this.nowLesson = {
                 type:'video',
+                title:2,
                 content:this.lesson.content.play,
                 age:this.nowLesson.age
               };
@@ -121,12 +124,14 @@
             if(this.lesson.content.fun.type){
               this.nowLesson = {
                 type:'audio',
+                title:3,
                 content:this.lesson.content.fun,
                 age:this.nowLesson.age
               };
             }else{
               this.nowLesson = {
                 type:'video',
+                title:3,
                 content:this.lesson.content.fun,
                 age:this.nowLesson.age
               };

src/components/newLesson/video.vue

@@ -33,6 +33,9 @@
           <div @click="changeAudio()">音频教学</div>
         </div>
       </div>
+      <div class="finish-block">
+        <img :src="finishStuat">
+      </div>
     </div>
     <guide-block/>
   </div>
@@ -44,6 +47,7 @@
   import luolalaila from '../../assets/newLesson/luolalaila.png'
   import guideBlock from '../guide/video'
   import tapToAudio from '../../assets/tapToAudio.png'
+  import finishStuat from '../../assets/newLesson/finishStudy.png'
   export default {
     name: "play",
     components:{
@@ -51,6 +55,7 @@
     },
     data(){
       return{
+        finishStuat:finishStuat,
         ageShow:false,
         showObj:{
           video:[],
@@ -212,6 +217,18 @@
           }
         }
       }
+      .finish-block{
+        position: absolute;
+        width: 100%;
+        left: 0;
+        padding: 0;
+        margin: 0;
+        text-align: center;
+        bottom: 10*@toVw;
+        img{
+          width: 202*@toVw;
+        }
+      }
     }
   }
   .change-block-HP{

src/router/index.js

@@ -171,7 +171,7 @@ router.beforeEach((to,from,next)=> {
       next({name:'index'});
     }
   }else{
-    if(to.name !== 'noWechat') {
+    if(to.name !== 'noWechat' && process.env.NODE_ENV === 'production') {
       next({name:'noWechat'});
     }
   }