申请页基本完成

src/assets/less/rewrite.less

@@ -0,0 +1,55 @@
+
+@import "./_variable.less";
+.el-checkbox{
+  color:@lighterBlack;
+}
+.el-form-item__label{
+  line-height: 50px;
+}
+.el-input *{
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  border-radius: 0!important;
+}
+.el-input:focus-within{
+  & .prepend-icon{
+    color:@primaryBlue
+  }
+  & *{
+
+    border-color: @primaryBlue;
+  }
+
+}
+.el-input__inner {
+  height: 50px;
+  line-height: 50px;
+  &:focus {
+    /*border: 0;*/
+    border-color: @primaryBlue;
+  }
+}
+
+
+.el-input-group__prepend{
+  & .el-select .el-input {
+    width:50px;
+  }
+  width: 52px!important;
+  padding: 0;
+  & .el-select{
+    margin: -10px 0;
+    & .el-input__inner{
+      padding: 0;
+    }
+  }
+  & .el-input__suffix {
+    right:0;
+    & .el-input__inner{
+      padding-right: 0;
+    }
+
+  }
+
+
+}
+

src/components/header.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="header-container" :class="{'offset':isOffset}">
+    <div class="header-container" :class="{'offset':isOffset||fixTop,'topped':fixTop}">
       <div class="inner-container">
         <img class="brand" :src="isOffset?require('../assets/logo-rev.png'):require('../assets/mainLogo.png')"/>
         <ul class="header-tab">
-          <li class="header-tab-item active">首页</li>
-          <li class="header-tab-item">申请代理</li>
+          <li class="header-tab-item" :class="{'active':$route.path==='/index'}" @click="$router.push('/index')">首页</li>
+          <li class="header-tab-item" :class="{'active':$route.path==='/proxy-apply'} " @click="$router.push('/proxy-apply')">申请代理</li>
         </ul>
       </div>
     </div>
@@ -13,12 +13,18 @@
 <script>
     export default {
       name: "headerComponent",
+      props:['fixTop'],
       data(){
         return{
+          isTopped:this.fixTop,
           isOffset:false,
         }
       },
       mounted(){
+        this.isOffset=this.isTopped||false;
+        if(this.isTopped){
+          return;
+        }
         window.addEventListener('scroll',this.scrollListener)
       },
       methods:{
@@ -41,7 +47,11 @@
     height: 80px;
     background-color: rgba(0, 0, 0, 0.2);
     z-index: 9;
+    &.topped{
+      position: relative!important;
+    }
   }
+
   .inner-container{
     position: relative;
     width: 1200px;

src/components/hexagonBlock.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="hexagon-container">
+      <i class="icon iconfont" v-html="icon"></i>
+      <p class="content" v-html="content"></p>
+    </div>
+
+</template>
+
+<script>
+    export default {
+      name: "hexagonBlock",
+      props:['icon','content']
+    }
+</script>
+
+<style scoped lang="less">
+  @import "../assets/less/_variable.less";
+  @hexagonColor:white;
+  @hexagonHeight:100px;
+  .hexagon-container {
+    width:45px;
+    height:100px;
+    background: white;
+    display: inline-block;
+    position: relative;
+    line-height: @hexagonHeight;
+    color:#FFFFFF;
+    font-size: 20px;
+    margin-bottom: 135px;
+    text-align: center;
+    & .content{
+      position: absolute;
+      height: 20px;
+      font-size: 20px;
+      line-height: 20px;
+      color:@lightBlack;
+      left: 50%;
+      white-space:nowrap;
+      transform: translateX(-50%);
+    }
+    &:hover{
+      &:before{
+        border-right-color: @primaryBlue;
+      }
+      background-color: @primaryBlue;
+      &:after{
+        border-left-color: @primaryBlue;
+      }
+      & .icon{
+        color: white;
+      }
+    }
+    & .icon{
+
+      font-size: 54px;
+      color:@primaryBlue;
+    }
+    &:before{
+      content:"";
+      width:0px;
+      border-bottom: @hexagonHeight/2 solid transparent;
+      border-top:@hexagonHeight/2 solid transparent;
+      border-right:40px solid white;
+      position:absolute;
+      left:-40px;
+      top:0px;
+    }
+    &:after{
+      content:"";
+      width:0px;
+      border-bottom:@hexagonHeight/2 solid transparent;
+      border-top:@hexagonHeight/2 solid transparent;
+      border-left-width:40px;
+      border-left-style: solid;
+      border-left-color:white;
+      position:absolute;
+      right:-40px;
+      top:0px;
+    }
+
+  }
+
+</style>

src/components/loginBox.vue

@@ -475,55 +475,3 @@
   }
 </style>
 <!--全局样式覆写-->
-<style lang="less">
-  @import "../assets/less/_variable.less";
-  .el-checkbox{
-    color:@lighterBlack;
-  }
-  .el-input *{
-    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-    border-radius: 0!important;
-  }
-  .el-input:focus-within{
-    & .prepend-icon{
-      color:@primaryBlue
-    }
-    & *{
-
-      border-color: @primaryBlue;
-    }
-
-  }
-  .el-input__inner {
-    height: 50px;
-    line-height: 50px;
-    &:focus {
-      /*border: 0;*/
-      border-color: @primaryBlue;
-    }
-  }
-    .el-select .el-input {
-      width:50px;
-    }
-
-    .el-input-group__prepend{
-      width: 52px!important;
-      padding: 0;
-      & .el-select{
-        margin: -10px 0;
-        & .el-input__inner{
-          padding: 0;
-        }
-      }
-      & .el-input__suffix {
-        right:0;
-        & .el-input__inner{
-          padding-right: 0;
-        }
-
-      }
-
-
-    }
-
-</style>

src/components/specialTitle.vue

@@ -2,7 +2,7 @@
     <div class="title-container">
       <div class="main-title-container">
         <hr>
-        <h1 class="title">{{title}}</h1>
+        <h1 class="title" :style="{'font-size':(fontSize||35)+'px','line-height':(fontSize||35)+'px'}">{{title}}</h1>
         <hr>
 
       </div>
@@ -14,7 +14,7 @@
 
     export default {
       name: "specialTitle",
-      props:['title','engTitle']
+      props:['title','engTitle','fontSize']
     }
 </script>
 
@@ -36,7 +36,7 @@
         font-size: 35px;
         line-height: 35px;
         font-weight: 700;
-        color: lightBlack;
+        color: @lightBlack;
       }
     }
     & .eng-title{

src/main.js

@@ -9,6 +9,7 @@ import axios from 'axios';
 import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/general.css';
 import './assets/less/_variable.less';
+import './assets/less/rewrite.less'
 // import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
 Vue.prototype.$http=axios;
 Vue.config.productionTip = false

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import App from '../App.vue';
 import Index   from '../views/index.vue'
+import ProxyApply from '../views/proxyApply.vue';
 
 Vue.use(Router)
 
@@ -15,6 +16,10 @@ export default new Router({
         {
           path:'index',
           component:Index
+        },
+        {
+          path:'proxy-apply',
+          component:ProxyApply
         }
       ],
       redirect: '/index'

src/views/proxyApply.vue

@@ -0,0 +1,333 @@
+<template>
+  <div>
+    <header-component fix-top="1"></header-component>
+    <div class="banner">
+    </div>
+    <div class="main-container">
+      <div class="step-bar-container">
+        <hr class="line left-radius" :class="{'active':step>0}"/>
+        <p class="step-circle" :class="{'active':step>0}"><span class="description">填写申请信息</span>1</p>
+        <hr class="line left-radius" :class="{'active':step>0}"/>
+        <hr class="line right-radius" :class="{'active':step>1}"/>
+        <p class="step-circle" :class="{'active':step>1}"><span class="description">审核中</span>2</p>
+        <hr class="line left-radius" :class="{'active':step>1}"/>
+        <hr class="line right-radius" :class="{'active':step>2}"/>
+        <p class="step-circle" :class="{'active':step>2}"><span class="description">申请通过</span>3</p>
+        <hr class="line right-radius" :class="{'active':step>2}"/>
+      </div>
+      <div class="apply-form-container">
+        <h1 class="title">经纪商申请</h1>
+        <div v-if="step<3" class="form-container">
+          <el-form ref="form" :model="form" label-width="120px">
+            <el-form-item label="公司/机构名称：">
+              <el-input v-model="form.companyName"></el-input>
+              <span class="red-dot">*</span>
+            </el-form-item>
+            <el-form-item label="姓名：">
+              <el-input v-model="form.name"></el-input>
+              <span class="red-dot">*</span>
+            </el-form-item>
+            <el-form-item label="手机号：">
+              <span class="red-dot">*</span>
+              <el-input  placeholder="请输入内容" v-model="form.phone" class="input-with-select">
+                <el-select v-model="form.phonePrefix" slot="prepend" placeholder="请选择">
+                  <el-option
+                    v-for='item,index in areaOptions'
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="其他联系方式：">
+              <el-input type="textarea" v-model="form.otherContact"></el-input>
+            </el-form-item>
+            <el-form-item label="所在地区：">
+              <el-row>
+                <el-col :span="10">
+                  <el-select v-model="form.country" placeholder="请选择">
+                    <el-option
+                      v-for='item,index in countryOptions'
+                      :key="index"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-col>
+                <el-col :span="10">
+                  <el-select class="prov-select" v-model="form.prov" placeholder="请选择">
+                    <el-option
+                      v-for='item,index in provOptions'
+                      :key="index"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item>
+              <button class="apply-button">立即申请</button>
+            </el-form-item>
+          </el-form>
+          <p class="bottom-notice">*您好，我们尊重每一个客户的隐私。一旦提交了以上内容则表明您同意
+            FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。</p>
+          <div class="apply-rule"><p class="rule-text">查看代理商申请标准</p></div>
+        </div>
+        <div v-if="step==3" class="success-container">
+          <i class="icon icon-success"></i>
+          <h2 class="success-title">恭喜您，已经成功申请成为经纪商！</h2>
+          <p class="success-content">您可用现在的账号和密码登录后台！如有疑问，可联系我们！</p>
+          <button class="login-admin-button">登陆后台</button>
+        </div>
+      </div>
+      <div  v-if="step<3" class="other-apply-container">
+        <special-title title="联系我们 快速申请" eng-title="Contact us for quick application" font-size="25"></special-title>
+        <div class="hex-container">
+
+          <hexagon-block class="hex" icon="&#xe714;" content="400-1566-899"></hexagon-block>
+          <hexagon-block class="hex" icon="&#xe600;" content="345106800<br/>545967811"></hexagon-block>
+          <hexagon-block class="hex" icon="&#xe628;" content="326982014@qq.com"></hexagon-block>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+    import HeaderComponent from "../components/header";
+    import SpecialTitle from "../components/specialTitle";
+    import HexagonBlock from "../components/hexagonBlock";
+    export default {
+      name: "proxyApply",
+      components: {HexagonBlock, SpecialTitle, HeaderComponent},
+      data(){
+        return{
+          step:2,
+          form:{
+            companyName:'',
+            name:'',
+            phonePrefix:'+86',
+            phone:'',
+            otherContact:'',
+            country:'',
+            prov:'',
+          },
+          areaOptions:[
+            {
+              label:'中国',
+              value:'+86'
+            }
+          ],
+          countryOptions:[
+            {
+              label:'中国',
+              value:'+86'
+            }
+          ],
+          provOptions:[
+            {
+              label:'中国',
+              value:'+86'
+            }
+          ],
+        }
+      }
+    }
+</script>
+
+<style scoped lang="less">
+  @import "../assets/less/_variable.less";
+  .banner{
+    background: url(../assets/proxyApply/banner.png) no-repeat 50% 50%;
+    background-size: cover;
+    width: 100%;
+    height: 400px;
+  }
+  .main-container{
+    width: 1200px;
+    margin: 15px auto;
+    & .step-bar-container{
+      width: 100%;
+      height: 110px;
+      background-color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      & .line{
+        width: 150px;
+        height:6px;
+        border: 0;
+        background-color: #eeeeee;
+        &.left-radius{
+          border-radius: 3px 0 0 3px;
+        }
+        &.right-radius{
+          border-radius: 0px 3px 3px 0px;
+        }
+        &.active{
+          background-color: #3884d3;
+        }
+      }
+      & .step-circle{
+        display: block;
+        margin: 0 10px;
+        position: relative;
+        width: 45px;
+        height: 45px;
+        background-color: #ffffff;
+        border: solid 1px #e5e5e5;
+        border-radius: 100%;
+        line-height: 45px;
+        font-size: 26px;
+        color: @lighterBlack;
+        &.active{
+          border: solid 1px #3884d3;
+          background-color: #3884d3;
+          color: white;
+          &>.description{
+            color:  #3884d3;
+          }
+        }
+        & .description{
+         left: -30px;
+          position: absolute;
+          top: -40px;
+          /*transform: translateX(-25%);*/
+          color: @lighterBlack;
+          font-size: 16px;
+          width: 100px ;
+
+
+        }
+      }
+    }
+    & .apply-form-container{
+      position: relative;
+      padding: 1px;
+      width: 100%;
+      margin-top: 10px;
+      background-color: white;
+      & .title{
+        font-weight: 700;
+        font-size: 25px;
+        color: @lightBlack;
+        width: 100%;
+        margin-top: 33px;
+        padding-bottom: 25px;
+        border-bottom: solid 1px #e5e5e5;
+      }
+      & .success-container{
+        & .icon{
+          display: inline-block;
+          margin-top: 80px;
+          text-align: center;
+          width: 50px;
+          height: 50px;
+
+        }
+        & .icon-success{
+          background:url(../assets/proxyApply/success.png) no-repeat;
+          background-size: cover;
+        }
+        & .success-title{
+          font-size: 25px;
+          color: @lightBlack;
+          margin-top: 40px;
+        }
+        & .success-content{
+          font-size: 14px;
+          color: @lighterBlack;
+          margin-top: 40px;
+        }
+        & .login-admin-button{
+          margin: 32px 0 70px;
+          cursor: pointer;
+          width: 140px;
+          height: 40px;
+          background-color: #ffffff;
+          border-radius: 20px;
+          border: solid 1px #e5e5e5;
+          font-size: 18px;
+          color:@primaryBlue
+
+        }
+      }
+      & .form-container{
+        padding-top: 48px;
+        width: 550px;
+        margin: 50px auto;
+        text-align: left;
+        & .apply-rule{
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: 0;
+          /*width: 64px;*/
+          height: 273px;
+          background-color: #0176c3;
+          & .rule-text{
+            width: 16px;
+            font-size: 16px;
+            color: white;
+            margin: 44px 20px;
+            line-height:20px;
+          }
+        }
+        & .red-dot{
+          position: absolute;
+          top: 0;
+          right:-15px;
+          color: red;
+          font-size: 16px;
+
+        }
+        & .bottom-notice{
+          font-size: 14px;
+          color: #3884d3;
+          width: 440px;
+          margin: 20px auto 0;
+        }
+
+        & .prov-select{
+          margin-left: 12px;
+        }
+        & .apply-button{
+          width: 384px;
+          height: 50px;
+          background-color: #0176c3;
+          border: 0;
+          color: white;
+          font-size: 16px;
+          cursor: pointer;
+          &.disabled{
+            cursor: default;
+            background-color: #dcdcdc;
+          }
+        }
+
+      }
+
+
+    }
+    & .other-apply-container{
+
+      padding-top: 48px;
+      background-color: white;
+      & .hex-container{
+        margin-top: 50px;
+        display: flex;
+        width: 100%;
+
+        justify-content: center;
+        justify-content: space-around;
+        & .hex{
+          flex-basis: 55px;
+        }
+      }
+    }
+  }
+</style>