成为合伙人进度样式

htmldev/loan/src/router/index.js

@@ -124,6 +124,11 @@ const routes = [
     name: 'Detail',
     component: () => import(/* webpackChunkName: "partner_detail" */ '../views/partner/detail')
   },
+  {
+    path: '/partner/compact', // 签约
+    name: 'Compact',
+    component: () => import(/* webpackChunkName: "partner_compact" */ '../views/partner/compact')
+  },
   {
     path: '/partner/privacy', // 隐私协议
     name: 'Privacy',

htmldev/loan/src/views/partner/compact/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="wrapper">
+    <div class="footer">
+      <router-link class="btn-apply" :to="{path: '/partner/detail'}" replace>我同意条款内容并签约</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'compact',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('成为合伙人')
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    width: 100%;
+    min-height: 100vh;
+    padding-bottom: 91px;
+  }
+
+  .footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 23px 0;
+  }
+
+  .btn-apply {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 327px;
+    height: 45px;
+    margin-left: 22px;
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #fff;
+    background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
+</style>

htmldev/loan/src/views/partner/detail/index.vue

@@ -1,13 +1,318 @@
 <template>
-  <div>detail</div>
+  <!--申请已提交-->
+  <!--签署协议：初始化、待签约、已提交待核对、已提交审核通过-->
+  <!--欢迎您成功加入房客邦：初始化、去推广-->
+  <div class="wrapper">
+    <div class="header">
+      <h2>申请进度</h2>
+      <a href="tel:400-234-2344">
+        <img src="./image/btn_dianhua@2x.png" alt="">
+        <span>专属客服</span>
+      </a>
+    </div>
+    <ul class="content">
+      <li class="flow flow-0 has-border active">
+        <div class="left-wrap"></div>
+        <div class="right-wrap">
+          <p class="title">
+            <span>已提交申请成为合伙人</span>
+          </p>
+          <p class="description">
+            <span>15067892342</span>
+            <span class="line">|</span>
+            <span>小静</span>
+          </p>
+          <p class="time">2020-12-23 19:23</p>
+          <p class="tip">1个工作日内会有专席客服与您取得联系</p>
+        </div>
+      </li>
+      <template v-if="true">
+        <li class="flow flow-1 has-border active">
+          <div class="left-wrap"></div>
+          <div class="right-wrap">
+            <p class="title">
+              <span>签署协议</span>
+              <span style="font-weight: 600; color: #D73634;" v-if="false">（等待资料核对）</span>
+            </p>
+            <router-link class="jump-compact" :to="{path: '/partner/compact'}" v-if="false">在线签约</router-link>
+            <template v-if="true">
+              <p class="description">
+                <span v-if="false">您已完成在线签约</span>
+                <span style="color: #4BD863;" v-else>您已签约成功</span>
+              </p>
+              <p class="time">2020-12-23 19:23</p>
+            </template>
+          </div>
+        </li>
+        <li class="flow flow-4 init">
+          <div class="left-wrap"></div>
+          <div class="right-wrap">
+            <p class="title">
+              <span v-if="true">加入成功</span>
+              <span v-if="false">欢迎您成功加入房客邦</span>
+            </p>
+            <router-link class="jump-goods" :to="{path: '/partner/goods'}" v-if="false">去推广</router-link>
+          </div>
+        </li>
+      </template>
+      <li class="fail" v-if="false">因xxxxxxx原因，未成功放款</li>
+      <li class="order-info border-top-1px">
+        <p>创建时间：2020-12-23 19:23</p>
+        <p>申请单号：202012337688b</p>
+        <p>合伙人编号：FKB00023</p>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'detail'
+    name: 'detail',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('申请进度')
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 15px 0 91px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 343px;
+
+    h2 {
+      padding-left: 8px;
+      line-height: 33px;
+      font-size: 24px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      padding: 11px 12px;
+      background: #FFFFFF;
+      border-radius: 100px 0 0 100px;
+
+      img {
+        width: 29px;
+        height: 29px;
+      }
+
+      span {
+        margin-left: 3px;
+        line-height: 22px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #C7AC8B;
+      }
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 343px;
+    padding-top: 28px;
+    margin-top: 16px;
+    border-radius: 4px;
+    background: #FFFFFF;
+  }
+
+  .flow {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    width: 295px;
+    min-height: 68px;
+    margin-top: 24px;
+
+    &:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+
+  .init {
+    &.has-border:before {
+      position: absolute;
+      left: 7px;
+      top: 3px;
+      content: '';
+      width: 1px;
+      height: calc(100% - 3px);
+      border-left: 1px dashed #D8D8D8;
+    }
+
+    .left-wrap {
+      border: 4px solid #FAF9FA;
+      background: #D8D8D8;
+    }
+
+    .title {
+      color: #999;
+    }
+  }
+
+  .active {
+    &.has-border:before {
+      position: absolute;
+      left: 7px;
+      top: 3px;
+      content: '';
+      width: 1px;
+      height: calc(100% - 3px);
+      border-left: 1px dashed #CBB091;
+    }
+
+    .left-wrap {
+      border: 4px solid #EEEDEE;
+      background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+    }
+
+    .title {
+      color: #333;
+    }
+  }
+
+  .flow-0 {
+    .time {
+      margin-top: 18px;
+    }
+  }
+
+  .flow-1 {
+    .title {
+      span:nth-of-type(2) {
+        padding-top: 3px;
+        line-height: 20px;
+        font-size: 14px;
+      }
+    }
+
+    .time {
+      margin-top: 6px;
+    }
+  }
+
+  .flow-4 {
+    margin-bottom: 14px;
+  }
 
+  .left-wrap {
+    position: relative;
+    left: 0;
+    top: 3px;
+    z-index: 1;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+  }
+
+  .right-wrap {
+    margin-left: 24px;
+  }
+
+  .title {
+    display: flex;
+
+    span {
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: inherit;
+    }
+  }
+
+  .description {
+    display: flex;
+    margin-top: 6px;
+
+    span {
+      line-height: 20px;
+      font-size: 15px;
+      color: #333;
+
+      &.line {
+        margin: 0 6px;
+      }
+    }
+  }
+
+  .jump-compact,
+  .jump-goods {
+    display: block;
+    width: 106px;
+    height: 44px;
+    margin: 20px 0 23px;
+    border-radius: 4px;
+    line-height: 44px;
+    font-size: 14px;
+    text-align: center;
+    color: #fff;
+    background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
+
+  .time {
+    line-height: 17px;
+    font-size: 12px;
+    color: #666;
+  }
+
+  .tip {
+    margin-top: 15px;
+    line-height: 20px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #D73634;
+  }
+
+  .success,
+  .fail {
+    line-height: 25px;
+    font-size: 18px;
+    font-weight: 600;
+    word-break: break-all;
+    color: #D73634;
+  }
+
+  .success {
+    margin-top: 2px;
+  }
+
+  .fail {
+    width: 311px;
+    padding-left: 8px;
+    margin: 12px 0 23px;
+  }
+
+  .order-info {
+    width: 329px;
+    padding: 20px 0 24px;
+    @include border-top-1px(#E8E8E8);
+
+    p {
+      padding-left: 17px;
+      line-height: 20px;
+      font-size: 14px;
+      color: #666;
+
+      &:nth-of-type(2) {
+        margin-top: 2px;
+      }
+    }
+  }
 </style>