diff --git a/src/assets/trainBg.png b/src/assets/trainBg.png
new file mode 100644
index 00000000..75a00123
Binary files /dev/null and b/src/assets/trainBg.png differ
diff --git a/src/views/newcomerTraining/newTrainingList.vue b/src/views/newcomerTraining/newTrainingList.vue
index 9f683895..23ef74f7 100644
--- a/src/views/newcomerTraining/newTrainingList.vue
+++ b/src/views/newcomerTraining/newTrainingList.vue
@@ -24,17 +24,22 @@
           </template>
         </div>
       </van-pull-refresh>
-      <van-popup v-model="showPoup" class="poupWrap">
-        <div class="wrap">
-          <div class="title">培训提醒</div>
-          <div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
-          <div class="btn" @click="showPoup = false">确定</div>
-        </div>
-      </van-popup>
     </div>
     <div class="empty" v-show="showEmpty">
       <img src="@/assets/empty.png" />
     </div>
+    <div  class="poupWrap" v-if="showPoup">
+      <div class="container">
+        <div class="title">培训提醒</div>
+        <div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
+        <div class="line"></div>
+        <div class="btnWrap">
+          <div class="closeBtn" @click="showPoup = false">关闭</div>
+          <div class="line"></div>
+          <div class="nextBtn" @click="showPoup = false">前往</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -137,30 +142,70 @@ export default {
   margin-right: 8px;
   text-align: right
 }
+.wrap{
+  position: relative;
+}
 .poupWrap{
-  box-sizing: border-box;
-  width: 75%;
-  padding:15px 20px;
-  border-radius: 8px;
-  height: 160px;
-  .wrap{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #FFFFFF;
+  position: absolute;
+  width: 320px;
+  height: 310px;
+  background-image: url("@/assets/trainBg.png");
+  background-size: 320px 310px;
+  background-repeat: no-repeat;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  .container{
+    position: absolute;
+    top: 100px;
+    left: 20px;
     .title{
       font-weight: bold;
-    }
-    .btn{
-      width: 100%;
-      height: 30px;
-      line-height: 30px;
+      font-size: 19px;
+      color: #3364B7;
+      line-height: 26px;
+      width: 70%;
+      margin-left: 35px;
       text-align: center;
-      background-color: #2A5094;
-      border-radius: 15px;
-      color: #FFFFFF;
-
+    }
+    .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;
+      }
     }
   }
 }