add page

@@ -42,7 +42,7 @@ export default {
   .title {
   .title {
     display: inline-block;
     display: inline-block;
     color: black;
     color: black;
-    font-size: 15PX;
+    font-size: 17PX;
     line-height: 45PX;
     line-height: 45PX;
   }
   }
 
 

 <template>
 <template>
   <div class="desc-wrapper">
   <div class="desc-wrapper">
-    <div class="title">
+    <div class="title-wrapper">
       <TitleComp txt="活动说明"></TitleComp>
       <TitleComp txt="活动说明"></TitleComp>
     </div>
     </div>
     <p class="desc">
     <p class="desc">
@@ -33,15 +33,16 @@ export default {
   margin-bottom: 40px;
   margin-bottom: 40px;
 }
 }
 
 
-.title {
+.title-wrapper {
   text-align: left;
   text-align: left;
-  margin-bottom: 20px;
+  margin-bottom: 60px;
 }
 }
 
 
 .desc {
 .desc {
   text-align: left;
   text-align: left;
-  font-size: 20px;
-  line-height: 1.5;
+  font-size: 24px;
+  color: #94b0c4;
+  line-height: 50px;
 }
 }
 
 
 </style>
 </style>

 <template>
 <template>
   <div class="wrapper">
   <div class="wrapper">
-    <div class="item title">
+    <div class="title-wrapper">
       <TitleComp txt="我的收款银行"></TitleComp>
       <TitleComp txt="我的收款银行"></TitleComp>
     </div>
     </div>
     <template v-if="status === 1">
     <template v-if="status === 1">
-      <div class="item">您还未绑定银行卡，将无法收款！</div>
       <div class="item">
       <div class="item">
-        <div class="btn">添加银行卡</div>
+        <span>您还未绑定银行卡，将无法收款</span>
+        <span class="link">添加银行卡</span>
       </div>
       </div>
     </template>
     </template>
     <template v-else>
     <template v-else>
@@ -29,7 +29,7 @@ export default {
   props: {
   props: {
     status: {
     status: {
       type: Number,
       type: Number,
-      default: 2
+      default: 1
     }
     }
   }
   }
 };
 };
@@ -38,12 +38,14 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .item {
 .item {
   text-align: left;
   text-align: left;
-  font-size: 20px;
+  font-size: 24px;
   margin-bottom: 20px;
   margin-bottom: 20px;
+  color: white;
 }
 }
 
 
-.title {
+.title-wrapper {
   text-align: left;
   text-align: left;
+  margin-bottom: 60px;
 }
 }
 
 
 .btn {
 .btn {
@@ -55,5 +57,6 @@ export default {
 }
 }
 
 
 .link {
 .link {
+  color: #64ad88;
 }
 }
 </style>
 </style>

+<template>
+  <div class="bg">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Banner'
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  height: 620px;
+}
+</style>

 <template>
 <template>
   <div class="wrapper">
   <div class="wrapper">
-    <div class="title">
+    <div class="title-wrapper">
       <TitleComp txt="我邀请的好友"></TitleComp>
       <TitleComp txt="我邀请的好友"></TitleComp>
     </div>
     </div>
 
 
@@ -67,26 +67,34 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .wrapper {
 .wrapper {
   text-align: center;
   text-align: center;
+  color: white;
 }
 }
 
 
-.title {
+.title-wrapper {
   text-align: left;
   text-align: left;
-  margin-bottom: 20px;
+  margin-bottom: 60px;
 }
 }
 
 
 .table {
 .table {
   margin-top: 20px;
   margin-top: 20px;
   width: 100%;
   width: 100%;
+  font-size: 24px;
+
+  th {
+    font-weight: bold;
+    color: white;
+  }
 
 
   tbody {
   tbody {
     tr {
     tr {
-      height: 50px;
-      border-bottom: 1px solid black;
+      height: 110px;
+      box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.09);
 
 
       span {
       span {
+        color: #94b0c4;
         display: inline-block;
         display: inline-block;
-        height: 50px;
-        line-height: 50px;
+        height: 110px;
+        line-height: 110px;
       }
       }
     }
     }
   }
   }

 <template>
 <template>
-  <div class="wrapper">
-    <div class="item title">我的邀请码</div>
-    <div class="item code">{{code}}</div>
-    <div class="item">
-      <div class="btn">
-        复制
-      </div>
-    </div>
+   <div class="wrapper">
+     <template v-if="code">
+      <div class="item title mg4">我的邀请码</div>
+      <div class="item code mg3">{{code}}</div>
 
 
-    <div class="item count-wrapper">
-      <div class="count">
-        <div>22</div>
-        <div>已经邀请好友</div>
-      </div>
 
 
-      <div class="count">
-        <div>325</div>
-        <div>好友完成订单数</div>
+      <div class="item count-wrapper">
+        <div >
+          <div class="count">22</div>
+          <div class="tip">已经邀请好友</div>
+        </div>
+
+        <div >
+          <div class="count">325</div>
+          <div class="tip">好友完成订单数</div>
+        </div>
       </div>
       </div>
-    </div>
+     </template>
+
+     <template v-else>
+       <div class="item mg5">
+         <div class="tip2">您还未入驻</div>
+         <div class="tip2">请先入驻获得邀请码</div>
+       </div>
+       <div class="item mg2">
+         <div class="btn">
+           立即入驻
+         </div>
+       </div>
+     </template>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -32,7 +42,7 @@ export default {
     code: {
     code: {
       type: String,
       type: String,
       default() {
       default() {
-        return 'huangtao';
+        return '';
       }
       }
     }
     }
   },
   },
@@ -67,11 +77,12 @@ export default {
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .wrapper {
 .wrapper {
-  width: 100%;
-  height: 400px;
-  border-radius: 150px;
+  width: 650px;
+  height: 504px;
   text-align: center;
   text-align: center;
   overflow: hidden;
   overflow: hidden;
+  background: url("~statics/image/invite/invite_bg@3x.png");
+  background-size: cover;
 }
 }
 
 
 .item {
 .item {
@@ -80,27 +91,65 @@ export default {
 
 
 .title {
 .title {
   color: black;
   color: black;
-  font-size: 20px;
+  font-size: 28px;
+  font-weight: bold;
 }
 }
 
 
 .code {
 .code {
   color: black;
   color: black;
-  font-weight: bold;
-  font-size: 30px;
+  font-weight: bolder;
+  font-size: 80px;
+  letter-spacing: 4px;
+}
+
+.mg2 {
+  margin-top: 20px;
+}
+
+.mg3 {
+  margin-top: 12px;
+}
+
+.mg4 {
+  margin-top: 84px;
+}
+
+.mg5 {
+  margin-top: 116px;
+  margin-bottom: 54px;
 }
 }
 
 
 .btn {
 .btn {
   display: inline-block;
   display: inline-block;
-  width: 200px;
-  height: 50px;
+  width: 464px;
+  height: 100px;
   color: white;
   color: white;
-  background-color: black;
-  font-size: 20px;
-  line-height: 50px;
+  background-color: #08304b;
+  font-size: 28px;
+  line-height: 100px;
 }
 }
 
 
 .count-wrapper {
 .count-wrapper {
   display: flex;
   display: flex;
   justify-content: space-around;
   justify-content: space-around;
 }
 }
+
+.count {
+  font-size: 28px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.tip {
+  font-size: 22px;
+  color: #999;
+  height: 32px;
+  line-height: 32px;
+}
+
+.tip2 {
+  font-size: 40px;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
 </style>
 </style>

 <template>
 <template>
   <div class="wrapper">
   <div class="wrapper">
-    <div style="display: flex; justify-content: space-between; align-items: baseline;">
+    <div class="title-wrapper" style="display: flex; justify-content: space-between; align-items: baseline;">
       <TitleComp txt="我的收款记录"></TitleComp>
       <TitleComp txt="我的收款记录"></TitleComp>
-      <span style="display: inline-block;">每月29日结算下一周期的佣金</span>
+      <span class="font" style="display: inline-block; color: white;">每月29日结算下一周期的佣金</span>
     </div>
     </div>
 
 
     <table class="table">
     <table class="table">
@@ -68,10 +68,15 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
   .wrapper {
   .wrapper {
     text-align: center;
     text-align: center;
+    color: white;
   }
   }
 
 
-  .title {
-    margin-bottom: 20px;
+  .title-wrapper {
+    margin-bottom: 60px;
+
+    .font {
+      font-size: 24px;
+    }
   }
   }
 
 
   .tip {
   .tip {
@@ -82,16 +87,23 @@ export default {
   .table {
   .table {
     margin-top: 20px;
     margin-top: 20px;
     width: 100%;
     width: 100%;
+    font-size: 24px;
+
+    th {
+      font-weight: bold;
+      color: white;
+    }
 
 
     tbody {
     tbody {
       tr {
       tr {
-        height: 50px;
-        border-bottom: 1px solid black;
+        height: 110px;
+        box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.09);
 
 
         span {
         span {
+          color: #94b0c4;
           display: inline-block;
           display: inline-block;
-          height: 50px;
-          line-height: 50px;
+          height: 110px;
+          line-height: 110px;
         }
         }
       }
       }
     }
     }

@@ -14,15 +14,16 @@ export default {
   display: inline-block;
   display: inline-block;
   height: 80px;
   height: 80px;
   line-height: 80px;
   line-height: 80px;
-  font-size: 30px;
+  font-size: 40px;
   font-weight: bold;
   font-weight: bold;
+  color: white;
 
 
   &:before {
   &:before {
     content: "\00a0";
     content: "\00a0";
     position: absolute;
     position: absolute;
     display: inline-block;
     display: inline-block;
-    width: 20PX;
-    border-bottom: 4px solid black;
+    width: 32px;
+    border-bottom: 6px solid #64ad88;
   }
   }
 }
 }
 </style>
 </style>

 <template>
 <template>
   <div class="body-wrapper">
   <div class="body-wrapper">
+    <BannerPage></BannerPage>
     <InviteCode class="mg"></InviteCode>
     <InviteCode class="mg"></InviteCode>
     <FriendList class="mg"></FriendList>
     <FriendList class="mg"></FriendList>
     <BankStatus class="mg"></BankStatus>
     <BankStatus class="mg"></BankStatus>
     <RecordList class="mg"></RecordList>
     <RecordList class="mg"></RecordList>
-    <DescPage></DescPage>
+    <DescPage class="mg"></DescPage>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -14,6 +15,7 @@ import FriendList from './components/friend-list';
 import BankStatus from './components/bankcard-status';
 import BankStatus from './components/bankcard-status';
 import RecordList from './components/record-list';
 import RecordList from './components/record-list';
 import DescPage from '../components/desc';
 import DescPage from '../components/desc';
+import BannerPage from './components/banner';
 
 
 export default {
 export default {
   name: 'detailPage',
   name: 'detailPage',
@@ -22,7 +24,8 @@ export default {
     FriendList,
     FriendList,
     BankStatus,
     BankStatus,
     RecordList,
     RecordList,
-    DescPage
+    DescPage,
+    BannerPage
   }
   }
 };
 };
 </script>
 </script>
@@ -30,10 +33,18 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .body-wrapper {
 .body-wrapper {
   padding: 0 20PX;
   padding: 0 20PX;
-  margin-top: 40px;
+  background-color: #08304b;
 }
 }
 
 
 .mg {
 .mg {
-  margin-bottom: 40px;
+  margin: 0 auto;
+  margin-bottom: 110px;
+  text-align: center;
+
+  &:last-child {
+    margin-bottom: 0;
+    padding-bottom: 120px;
+  }
 }
 }
+
 </style>
 </style>

 <template>
 <template>
   <div class="body-wrapper">
   <div class="body-wrapper">
-    <div class="item">
-      <div class="tip">您还未入驻，请先入驻获得邀请码</div>
-    </div>
-    <div class="item">
-      <div class="btn" @click="onClick">立即入驻</div>
-    </div>
-
-    <div class="item">
-      <DescPage></DescPage>
-    </div>
+    <BannerPage class="mg"></BannerPage>
+    <InviteCode class="mg"></InviteCode>
+    <DescPage class="mg"></DescPage>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
+import BannerPage from '../detail/components/banner';
 import DescPage from '../components/desc';
 import DescPage from '../components/desc';
+import InviteCode from '../detail/components/invite-code';
 
 
 export default {
 export default {
   name: 'welcomePage',
   name: 'welcomePage',
   components: {
   components: {
-    DescPage
+    BannerPage,
+    DescPage,
+    InviteCode
   },
   },
   methods: {
   methods: {
     onClick() {
     onClick() {
@@ -33,11 +30,7 @@ export default {
 
 
 .body-wrapper {
 .body-wrapper {
   padding: 0 20PX;
   padding: 0 20PX;
-}
-
-.item {
-  text-align: center;
-  margin-bottom: 40px;
+  background-color: #08304b;
 }
 }
 
 
 .tip {
 .tip {
@@ -55,4 +48,15 @@ export default {
   line-height: 60px;
   line-height: 60px;
 }
 }
 
 
+.mg {
+  margin: 0 auto;
+  margin-bottom: 110px;
+  text-align: center;
+
+  &:last-child {
+    margin-bottom: 0;
+    padding-bottom: 120px;
+  }
+}
+
 </style>
 </style>