星星系统

src/components/newLesson/nofinishdia.vue

 <template>
   <div class="nofinish-block" :style="{backgroundImage:`url('${noFinishBg}')`}">
-
+    <div class="title">
+      学习还未完成
+    </div>
+    <div class="desc">
+      书山有路勤为径 学海无涯苦作舟
+    </div>
     <div class="go-on">
       继续学习
     </div>
@@ -25,9 +30,32 @@
     width: 235*@toVw;
     height: 270*@toVw;
     position: relative;
+    background-size: 100% 100%;
+    text-align: center;
+    color: white;
+    .title{
+      font-size:28*@toVw;
+      font-family:PingFang-SC-Bold;
+      font-weight:bold;
+      padding-top: 40*@toVw;
+    }
+    .desc{
+      font-size:14*@toVw;
+      margin-top: 5*@toVw;
+      font-family:PingFang-SC-Medium;
+      font-weight:500;
+    }
     .go-on{
       position: absolute;
-    ;
+      background: #FCD900 ;
+      font-size: 16*@toVw;
+      color: white;
+      bottom: -25*@toVw;
+      left: 50%;
+      margin-left: -75*@toVw;
+      font-family:PingFang-SC-Bold;
+      padding:15*@toVw 45*@toVw;
+      border-radius: 200*@toVw;
     }
   }
 </style>

src/components/newLesson/video.vue

@@ -34,11 +34,14 @@
         </div>
       </div>
       <div class="finish-block" v-if="nowShow === 3">
-        <img :src="finishStuat">
+        <img :src="finishStuat" @click="finishStudy">
       </div>
     </div>
-    <mt-popup>
-      <no-finish-dia/>
+    <mt-popup
+      v-model="popupVisible" style="background: transparent">
+      <div @click="popupVisible=false">
+        <no-finish-dia/>
+      </div>
     </mt-popup>
     <guide-block/>
   </div>
@@ -61,6 +64,7 @@
     data(){
       return{
         finishStuat:finishStuat,
+        popupVisible:true,
         ageShow:false,
         showObj:{
           video:[],
@@ -82,6 +86,9 @@
       this.changeAge(this.contentData.age)
     },
     methods:{
+      finishStudy(){
+        this.popupVisible = true
+      },
       videoEnd(event){
         event.srcElement.play()
       },