diff --git a/app/views/trainings/trainingsInfo.html.erb b/app/views/trainings/trainingsInfo.html.erb
new file mode 100644
index 00000000..7fd2840c
--- /dev/null
+++ b/app/views/trainings/trainingsInfo.html.erb
@@ -0,0 +1,40 @@
+<div class="InfoTop">
+    <div>
+      <p class="font-22 color-white" style="text-align: center;"><span class="inline"><i class="iconfont icon-wancheng font-30 color-white mr10 fl"></i>报名成功</span></p>
+    </div>
+  </div>
+  <div class="Infos">
+    <p class="Infos_title">基本信息</p>
+    <li class="clearfix">
+      <span>姓名</span>
+      <span>胡莎莎</span>
+    </li>
+    <li class="clearfix">
+      <span>性别</span>
+      <span>女</span>
+    </li>
+    <li class="clearfix">
+      <span>单位</span>
+      <span>国防科技大学</span>
+    </li>
+    <li class="clearfix">
+      <span>职称</span>
+      <span>助教</span>
+    </li>
+    <li class="clearfix">
+      <span>手机号</span>
+      <span>181****2757</span>
+    </li>
+  </div>
+  <div class="Infos clearfix">
+    <p class="Infos_title">您关注的课程类型</p>
+    <a href="javascript:void(0)" class="Infos_tag">程序设计</a>
+    <a href="javascript:void(0)" class="Infos_tag">操作系统</a>
+    <a href="javascript:void(0)" class="Infos_tag">软件工程</a>
+    <a href="javascript:void(0)" class="Infos_tag">程序设计</a>
+  </div>
+  <a href="javascript:void(0)" class="info_updateBtn">修改资料</a>
+  <div class="Infos_btn">
+    <a href="javascript:void(0)">转账支付</a>
+    <a href="javascript:void(0)">微信支付</a>
+  </div>
\ No newline at end of file
diff --git a/public/stylesheets/educoder/trainings.css b/public/stylesheets/educoder/trainings.css
index 44df1617..278cb2c9 100644
--- a/public/stylesheets/educoder/trainings.css
+++ b/public/stylesheets/educoder/trainings.css
@@ -265,3 +265,38 @@ input[type='text'].right_input{
     content: " ";position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);background-color: #D9D9D9;
 }
+
+
+/* 支付信息 */
+.InfoTop{width: 100%;height: 6.5rem;background: linear-gradient(to right, #4CC6FF , #6588F8);justify-content: center;
+    align-items: center;display: -webkit-flex;}
+  .info_updateBtn{
+    display: block;
+    width: 60%;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    border: 1px solid #4CC6FF;
+    border-radius: 24px;
+    font-size: 2.2rem;
+    color: #4CC6FF!important;
+    margin-top: 1rem;margin:2rem auto;
+  }
+  .Infos{
+    padding:15px;box-sizing: border-box;background: #fff;
+  }
+  .Infos {margin-bottom: 1rem;}
+  .Infos .Infos_title{font-size: 1.5rem;color: #000;margin-bottom: 1rem;}
+  .Infos li{margin-bottom: 8px;}
+  .Infos li span:first-child{color: #666666;font-size: 1.4rem;float: left;}
+  .Infos li span:last-child{color: #333;font-size: 1.4rem;float: right;}
+  .Infos .Infos_tag{float: left;height:2.8rem;padding: 0px 0.5rem;box-sizing: border-box;line-height: 2.8rem;
+    background: #E6F3FF;color: #4CACFF;cursor: default;margin-right: 1.5rem;
+  }
+  .Infos_btn {background: #fff;height: 5rem;line-height: 5rem;position: absolute;bottom: 0px;left:0px;width: 100%;}
+  .Infos_btn a{
+    float: left;width: 50%;text-align: center;color: #4CACFF!important;font-size: 1.8rem;
+  }
+  .Infos_btn a:last-child{
+    background: #4CACFF!important;color: #fff!important;  
+  }