From 53be990a24df0e36a865d3904239eb8a33fefa47 Mon Sep 17 00:00:00 2001
From: zhouxueli <2841188632@qq.com>
Date: Fri, 17 May 2024 14:24:37 +0800
Subject: [PATCH] =?UTF-8?q?task#13769,=E7=AD=94=E9=A2=98=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=EF=BC=8C=E5=BC=B9=E7=AA=97=E6=8F=90=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../newcomerTraining/newTrainingList.vue      | 222 ++++++++++++------
 1 file changed, 155 insertions(+), 67 deletions(-)

diff --git a/src/views/newcomerTraining/newTrainingList.vue b/src/views/newcomerTraining/newTrainingList.vue
index 1502b21f..1494691c 100644
--- a/src/views/newcomerTraining/newTrainingList.vue
+++ b/src/views/newcomerTraining/newTrainingList.vue
@@ -28,8 +28,8 @@
     <div class="empty" v-show="showEmpty">
       <img src="@/assets/empty.png" />
     </div>
-    <div  class="poupWrap" v-if="showPoup">
-      <div class="container">
+    <div  class="poupCommon" v-if="showPoup">
+      <div class="container showPoupContainer">
         <div class="con">
           <div class="title">培训提醒</div>
           <div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
@@ -41,8 +41,8 @@
 
       </div>
     </div>
-    <div  class="poupWrap" v-if="isFinished">
-      <div class="container">
+    <div  class="poupCommon" v-if="isFinished">
+      <div class="container finishContainer">
         <div class="con">
           <div class="title">提示</div>
           <div class="content">恭喜您，您已经全部完成培训！现在您可以正常使用我们的app，请前往体验。</div>
@@ -78,6 +78,8 @@ export default {
       isLoading:false,
       showPoup:true,//进入弹框
       isFinished:false,
+      // showPoup:false,//进入弹框
+      // isFinished:true,
     }
   },
   mounted() {
@@ -170,77 +172,163 @@ export default {
   position: relative;
   overflow-y: hidden;
 }
-.poupWrap{
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0,0,0,.7);
-  position: absolute;
-  top: 0;
-  left: 0;
-  .container{
-    width: 320px;
-    height: 310px;
-    background-image: url("@/assets/trainBg.png");
-    background-size: 320px 310px;
-    background-repeat: no-repeat;
+.poupCommon{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.7);
     position: absolute;
     top: 0;
-    bottom: 0;
     left: 0;
-    right: 0;
-    margin: auto;
-    .con{
-      position: absolute;
-      top: 100px;
-      left: 20px;
+    .showPoupContainer{
+      height: 310px;
+      background-size: 320px 310px;
+      .content{
+        margin-bottom: 20px;
+      }
+      .btnWrap{
+        margin-top: 6px;
+      }
     }
+    .finishContainer{
+      height: 260px;
+      background-size: 320px 260px;
+      .con{
+        top: 80px !important;
+      }
+    }
+    .container{
+      width: 320px;
+      background-image: url("@/assets/trainBg.png");
+      background-repeat: no-repeat;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      .con{
+        position: absolute;
+        top: 100px;
+        left: 20px;
+      }
 
-  }
-  .title{
-    font-weight: bold;
-    font-size: 19px;
-    color: #3364B7;
-    line-height: 26px;
-    width: 70%;
-    margin-left: 35px;
-    text-align: center;
-  }
-  .content{
-    width: 70%;
-    height: 92px;
-    font-size: 14px;
-    color: #4C5361;
-    line-height: 23px;
-    text-align: justify;
-    margin-top: 8px;
-    margin-bottom: 20px;
-    margin-left: 35px;
-  }
-  .line{
-    width: 285px;
-    height: 1px;
-    border-bottom: 1px solid #F1F2F5;
-  }
-  .btnWrap{
-    width: 92%;
-    font-weight: bold;
-    font-size: 13px;
-    display: flex;
-    justify-content: space-around;
-    margin-top: 6px;
-    height: 40px;
-    line-height: 40px;
-    .closeBtn{
-      color: #999B9F;
+    }
+    .title{
+      font-weight: bold;
+      font-size: 19px;
+      color: #3364B7;
+      line-height: 26px;
+      width: 70%;
+      margin-left: 35px;
+      text-align: center;
+    }
+    .content{
+      width: 70%;
+      height: 92px;
+      font-size: 14px;
+      color: #4C5361;
+      line-height: 23px;
+      text-align: justify;
+      margin-top: 8px;
+      margin-left: 35px;
     }
     .line{
-      width: 1px;
-      height: 48px;
-      border-right: 1px solid #F1F2F5;
+      width: 285px;
+      height: 1px;
+      border-bottom: 1px solid #F1F2F5;
     }
-    .nextBtn{
-      color: #3364B7;
+    .btnWrap{
+      width: 92%;
+      font-weight: bold;
+      font-size: 13px;
+      display: flex;
+      justify-content: space-around;
+      height: 40px;
+      line-height: 40px;
+      .closeBtn{
+        color: #999B9F;
+      }
+      .line{
+        width: 1px;
+        height: 48px;
+        border-right: 1px solid #F1F2F5;
+      }
+      .nextBtn{
+        color: #3364B7;
+      }
     }
-  }
 }
+//.poupWrap{
+//  width: 100%;
+//  height: 100%;
+//  background-color: rgba(0,0,0,.7);
+//  position: absolute;
+//  top: 0;
+//  left: 0;
+//  .container{
+//    width: 320px;
+//    height: 310px;
+//    background-image: url("@/assets/trainBg.png");
+//    background-size: 320px 310px;
+//    background-repeat: no-repeat;
+//    position: absolute;
+//    top: 0;
+//    bottom: 0;
+//    left: 0;
+//    right: 0;
+//    margin: auto;
+//    .con{
+//      position: absolute;
+//      top: 100px;
+//      left: 20px;
+//    }
+//
+//  }
+//  .title{
+//    font-weight: bold;
+//    font-size: 19px;
+//    color: #3364B7;
+//    line-height: 26px;
+//    width: 70%;
+//    margin-left: 35px;
+//    text-align: center;
+//  }
+//  .content{
+//    width: 70%;
+//    height: 92px;
+//    font-size: 14px;
+//    color: #4C5361;
+//    line-height: 23px;
+//    text-align: justify;
+//    margin-top: 8px;
+//    margin-bottom: 20px;
+//    margin-left: 35px;
+//  }
+//  .line{
+//    width: 285px;
+//    height: 1px;
+//    border-bottom: 1px solid #F1F2F5;
+//  }
+//  .btnWrap{
+//    width: 92%;
+//    font-weight: bold;
+//    font-size: 13px;
+//    display: flex;
+//    justify-content: space-around;
+//    margin-top: 6px;
+//    height: 40px;
+//    line-height: 40px;
+//    .closeBtn{
+//      color: #999B9F;
+//    }
+//    .line{
+//      width: 1px;
+//      height: 48px;
+//      border-right: 1px solid #F1F2F5;
+//    }
+//    .nextBtn{
+//      color: #3364B7;
+//    }
+//  }
+//}
 </style>