fix conflict

src/components/commons/Header2.0.vue

@@ -13,6 +13,13 @@
                   {{user.userVO.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item>
+                    <router-link :to="{ name: 'UserCenter',params:{userId:user.userVO.id}}">
+                      <el-link icon="el-icon-user" :underline="false">
+                        个人中心
+                      </el-link>
+                    </router-link>
+                  </el-dropdown-item>
                   <el-dropdown-item v-if="rolesPermissions.isSystemAdministrator">
                     <router-link :to="{ name: 'AuthenticationManage'}">
                       <el-link icon="el-icon-view" :underline="false">

src/main.js

@@ -60,7 +60,9 @@ import {
   TimeSelect,
   Tooltip,
   Upload,
-  Progress
+  Progress,
+  Step,
+  Steps,
 } from 'element-ui'
 Vue.prototype.$moment = moment
 function getCurrentUserSuccess(res){
@@ -185,6 +187,8 @@ Vue.use(Image)
 Vue.use(Badge)
 Vue.use(Popover)
 Vue.use(Progress)
+Vue.use(Steps)
+Vue.use(Step)
 
 Vue.prototype.$msgbox = MessageBox
 Vue.prototype.$alert = MessageBox.alert

src/pages/UserCenter/Authentication.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div class="right-modifyPsw">
+      <div class="right-modifyPsw-title">
+        <span style="font-size: 18px;font-weight: bold">身份认证</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="authentication-card authentication-card-select">
+            <div class="authentication-card-title">个人认证</div>
+            <el-row :gutter="10">
+              <el-col :span="5">
+                <div class="authentication-card-img">
+                  <img src="../../assets/img/idcard1.png" >
+                </div>
+              </el-col>
+              <el-col :span="19">
+                <div class="authentication-card-title">手持证件照上传</div>
+                <div class="authentication-card-info">需要进行人工审核，审核周期1-3个工作日</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="authentication-card">
+            <div class="authentication-card-title">企业认证</div>
+            <el-row :gutter="10">
+              <el-col :span="5">
+                <div class="authentication-card-img">
+                  <img src="../../assets/img/idcard2.png" >
+                </div>
+              </el-col>
+              <el-col :span="19">
+                <div class="authentication-card-title">手持证件照上传</div>
+                <div class="authentication-card-info">需要进行人工审核，审核周期1-3个工作日</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "Authentication",
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+
+    .authentication-card{
+      background:rgba(249,249,249,1);
+      padding: 20px 20px 30px 20px;
+      .authentication-card-title {
+        font-size:20px;
+        font-family:Source Han Sans CN;
+        font-weight:500;
+        margin-bottom: 20px;
+      }
+      .authentication-card-info{
+        font-size:16px;
+        font-family:Source Han Sans CN;
+        font-weight:400;
+        color:rgba(153,153,153,1);
+      }
+      .authentication-card-img {
+        background:rgba(0,118,203,1);
+        border-radius:50%;
+        width: 65px;
+        height: 65px;
+        text-align: center;
+        vertical-align: middle;
+        display: table-cell;
+      }
+    }
+    .authentication-card-select {
+      background-image: url("../../assets/img/selectAuthentication.png");
+      background-size: 100% 100%;
+    }
+  }
+</style>

src/pages/UserCenter/BankCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="bank-card">
+    <div class="bank-card-title" style="padding: 10px;height:43px">
+      <img src="../../assets/img/bankimg.png">
+      <span class="" style="font-size: 16px;font-weight: bold;line-height: 43px">建设银行</span>
+      <el-button type="primary" plain class="pull-right" size="mini">编辑</el-button>
+    </div>
+    <div class="bank-card-detail-wrapper">
+      <div class="bank-card-detail">
+        <div class="bank-card-detail-info">张晓楠</div>
+        <div class="bank-card-detail-info">********************5656</div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: "BankCard",
+    data(){
+      return {
+        addBankCard:false,
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .bank-card {
+    /*width:285px;*/
+    height:160px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 1px 6px 0px rgba(8,6,6,0.13);
+    .bank-card-detail-wrapper {
+      padding: 10px;
+      .bank-card-detail{
+        margin-bottom: 5px;
+        .bank-card-detail-title {
+          font-size: 14px;
+        }
+        .bank-card-detail-info {
+          margin-left: 43px;
+        }
+      }
+    }
+  }
+</style>

src/pages/UserCenter/EnterpriseAuth.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="right-modifyPsw">
+    <div class="right-modifyPsw-title">
+      <span style="font-size: 18px;font-weight: bold">企业认证</span>
+    </div>
+    <el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
+      <el-step title="上传企业信息"></el-step>
+      <el-step title="上传法人信息"></el-step>
+      <el-step title="确认信息"></el-step>
+      <el-step title="认证结果"></el-step>
+    </el-steps>
+    <div class="upload-wrapper">
+      <div>
+        <el-upload
+          class="avatar-uploader"
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload">
+          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+        <div><span style="color: red">*</span>营业执照：（仅支持三证合一）</div>
+      </div>
+      <div class="authentication-detail">
+        <div class="authentication-detail-title">证件要求</div>
+        <ul class="authentication-detail-list">
+          <li>必须为清晰、完整的彩色原件扫描件或数码照</li>
+          <li>仅支持.jpg .bmp .png .gif的图片格式，图片大小不超过4M</li>
+          <li>必须在有效期内且年检章齐全（当年成立的公司可无年检章）</li>
+          <li>必须为中国大陆工商局颁发</li>
+        </ul>
+      </div>
+    </div>
+    <div class="enterprise-brn-wrapper">
+      <button class="enterprise-btn previousBtn">上一步</button>
+      <button class="enterprise-btn nextBtn">下一步</button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "EnterpriseAuth",
+    data() {
+      return {
+        active: 0,
+        imageUrl: ''
+      }
+    },
+    methods:{
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+
+    .upload-wrapper {
+      display: flex;
+      padding: 0 30px;
+
+      .authentication-detail {
+        padding:0 30px;
+        border-left: 1px solid rgba(220,220,220,1);
+        .authentication-detail-title {
+          font-size:16px;
+          font-family:Source Han Sans CN;
+          font-weight:600;
+          border-bottom: 1px dashed rgba(220,220,220,1);
+          margin-bottom: 10px;
+          padding-bottom: 5px;
+        }
+      }
+      .authentication-detail-list {
+        list-style-type: none;
+        padding-left: 0;
+        li:before{
+          content: "\2022";
+          color: #148AE0;
+          font-size: 22px;
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .enterprise-brn-wrapper {
+      margin-top: 40px;
+      display: flex;
+      justify-content: center;
+      .enterprise-btn{
+        border: 1px solid rgba(0,118,203,1);
+        width: 150px;
+        background-color: white;
+        color:rgba(0,118,203,1) ;
+        padding: 10px;
+        margin: 0 30px;
+      }
+      .nextBtn {
+        background-color:rgba(0,118,203,1);
+        color: white;
+      }
+    }
+
+  }
+</style>

src/pages/UserCenter/MailBinding.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="right-modifyPsw">
+      <div class="right-modifyPsw-title">
+        <span style="font-size: 18px;font-weight: bold">邮箱绑定</span>
+      </div>
+      <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
+        <span style="font-size: 16px">您还未绑定邮箱，为保护您帐号，建议您</span>
+        <el-button type="primary" plain size="mini">立即绑定</el-button>
+      </div>
+      <div>
+        邮箱绑定成功后，您将享受以下服务：
+      </div>
+      <div>①邮箱地址登录 可直接使用“邮箱地址”登录到众测服务平台</div>
+      <div>②重要事件提醒 进行（支付/提现/众测/中标）时，可及时收到邮件提醒</div>
+      <div>③找回账号密码 忘记密码时，可使用邮件找回密码</div>
+
+      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
+        <el-step title="添加邮箱"></el-step>
+        <el-step title="完成绑定"></el-step>
+      </el-steps>
+
+<!--      <el-form  label-width="80px"  v-if="active===0">-->
+<!--        <el-form-item label="邮箱号">-->
+<!--          <span v-model="mailBindingForm.mail">135****6699</span>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="验证码">-->
+<!--          <span v-model="mailBindingForm.phone">135****6699</span>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+
+      <el-form  label-width="80px"  v-if="active===0">
+        <el-form-item label="邮箱号">
+          <el-input v-model="mailBindingForm.mail"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <span v-model="mailBindingForm.phone">135****6699</span>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "MailBinding",
+    data() {
+      return {
+        active: 0,
+        mailBindingForm:{
+          mail:''
+        }
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+  }
+</style>

src/pages/UserCenter/ModifyPsw.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div class="right-modifyPsw">
+      <div class="right-modifyPsw-title">
+        <span style="font-size: 18px;font-weight: bold">修改密码</span>
+      </div>
+      <div style="background-color: rgba(233,239,249,1);padding: 10px">
+        <i class="el-icon-warning" style="color: rgba(0, 117, 203, 1);font-size: 18px"></i>
+        <span style="font-size: 16px">安全提醒：请妥善保管密码，众测服务平台人员不会以任何理由向您索取密码。</span>
+      </div>
+      <el-form ref="modifyForm" :model="modifyForm" label-width="80px" style="margin-top: 20px">
+        <el-form-item label="当前密码">
+          <el-input v-model="modifyForm.password"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码">
+          <el-input v-model="modifyForm.newpassword"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码">
+          <el-input v-model="modifyForm.password"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">确认修改</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "ModifyPsw",
+    data(){
+      return {
+        modifyForm: {
+          password:'',
+          newpassword: '',
+          repassword:'',
+        },
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+  }
+</style>

src/pages/UserCenter/MyBankCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div class="right-qualification">
+      <div class="right-qualification-title">
+        <span style="font-size: 18px;font-weight: bold">我的银行卡</span>
+        <el-button type="primary" size="mini" class="pull-right" @click="addBankCard = true">添加</el-button>
+      </div>
+      <el-row :gutter="15" style="margin-bottom: 15px">
+        <el-col :span="8">
+          <BankCard></BankCard>
+        </el-col>
+        <el-col :span="8">
+          <BankCard></BankCard>
+        </el-col>
+        <el-col :span="8">
+          <BankCard></BankCard>
+        </el-col>
+      </el-row>
+    </div>
+    <el-dialog
+      title="新增银行卡"
+      :visible.sync="addBankCard"
+      width="30%"
+    >
+      <el-form ref="bankCardForm" :model="bankCardForm" label-width="80px">
+        <el-form-item label="持卡人">
+          <el-input v-model="bankCardForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="卡号">
+          <el-input v-model="bankCardForm.cardNumber"></el-input>
+        </el-form-item>
+      </el-form>
+      <div>
+        银行卡绑定成功后，您将享受以下服务：
+      </div>
+      <div>①可以申请平台的收益</div>
+      <div>②可以申请平台的收益</div>
+      <div>③可以申请平台的收益</div>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="addBankCard = false">取 消</el-button>
+    <el-button type="primary" @click="addBankCard = false">确认添加</el-button>
+  </span>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+  import BankCard from './BankCard'
+  export default {
+    name: "MyBankCard",
+    components:{
+      BankCard
+    },
+    data(){
+      return {
+        addBankCard: false,
+        form: {
+          name: '',
+          number:'',
+          institution:'',
+          date:'',
+          isPublic:''
+        },
+        bankCardForm:{
+          username:'',
+          cardNumber:''
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-qualification {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-qualification-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+  }
+</style>

src/pages/UserCenter/MyQualification.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="right-qualification">
+      <div class="right-qualification-title">
+        <span style="font-size: 18px;font-weight: bold">我的资质</span>
+        <el-button type="primary" size="mini" class="pull-right" @click="addQualification = true">添加</el-button>
+      </div>
+      <el-row :gutter="15" style="margin-bottom: 15px">
+        <el-col :span="8">
+          <QualificationCard></QualificationCard>
+        </el-col>
+        <el-col :span="8">
+          <QualificationCard></QualificationCard>
+        </el-col>
+        <el-col :span="8">
+          <QualificationCard></QualificationCard>
+        </el-col>
+      </el-row>
+    </div>
+    <el-dialog
+      title="新增资质"
+      :visible.sync="addQualification"
+      width="30%"
+    >
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="证书名称">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="证书编号">
+          <el-input v-model="form.number"></el-input>
+        </el-form-item>
+        <el-form-item label="发证机构">
+          <el-input v-model="form.institution"></el-input>
+        </el-form-item>
+        <el-form-item label="发证时间">
+          <el-input v-model="form.date"></el-input>
+        </el-form-item>
+        <el-form-item label="是否公开">
+          <el-radio-group v-model="form.isPublic">
+            <el-radio label="公开"></el-radio>
+            <el-radio label="不公开"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="addQualification = false">取 消</el-button>
+    <el-button type="primary" @click="addQualification = false">确 定</el-button>
+  </span>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+  import QualificationCard from './QualificationCard'
+  export default {
+    name: "MyQualification",
+    components:{
+      QualificationCard
+    },
+    data(){
+      return {
+        addQualification: false,
+        form: {
+          name: '',
+          number:'',
+          institution:'',
+          date:'',
+          isPublic:''
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-qualification {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+  .right-qualification-title {
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 20px;
+  }
+  }
+</style>

src/pages/UserCenter/PhoneBinding.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="right-modifyPsw">
+      <div class="right-modifyPsw-title">
+        <span style="font-size: 18px;font-weight: bold">手机绑定</span>
+      </div>
+      <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
+        <img src="../../assets/img/phoneBinding.png"></img>
+        <span style="font-size: 16px">您已绑定的手机号码是138****1380</span>
+        <el-button type="primary" plain size="mini">修改号码</el-button>
+    </div>
+      <div style="background-color: rgba(233,239,249,1);padding: 10px">
+        <img src="../../assets/img/phoneUnbinding.png"></img>
+        <span style="font-size: 16px">您未绑定的手机号码是138****1380</span>
+          <el-button type="danger" plain size="mini">立即绑定</el-button>
+      </div>
+      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
+        <el-step title="验证原手机"></el-step>
+        <el-step title="绑定新手机"></el-step>
+        <el-step title="完成绑定"></el-step>
+      </el-steps>
+
+      <el-form  label-width="80px"  v-if="active===0">
+        <el-form-item label="原手机号">
+          <span v-model="phoneBindingForm.phone">135****6699</span>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <span v-model="phoneBindingForm.phone">135****6699</span>
+        </el-form-item>
+      </el-form>
+
+      <el-form  label-width="80px"  v-if="active===1">
+        <el-form-item label="新手机号">
+          <el-input v-model="phoneBindingForm.phone"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <span v-model="phoneBindingForm.phone">135****6699</span>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "PhoneBinding",
+    data() {
+      return {
+        active: 1,
+        phoneBindingForm:{
+          phone:''
+        }
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+  }
+</style>

src/pages/UserCenter/QualificationCard.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="qualification-card">
+    <div class="qualification-card-title" style="padding: 10px;height:28px">
+      <span class="pull-left" style="font-size: 16px;font-weight: bold;line-height: 28px">信息安全工程师</span>
+      <el-button type="primary" plain class="pull-right" size="mini">编辑</el-button>
+    </div>
+    <div class="qualification-card-detail-wrapper">
+      <div class="qualification-card-detail">
+        <div class="qualification-card-detail-title">证书编号：</div>
+        <div class="qualification-card-detail-info">314020191144011401528</div>
+      </div>
+      <div class="qualification-card-detail">
+        <div class="qualification-card-detail-title">发证机关：</div>
+        <div class="qualification-card-detail-info">314020191144011401528</div>
+      </div>
+      <div class="qualification-card-detail">
+        <div class="qualification-card-detail-title">发证时间：</div>
+        <div class="qualification-card-detail-info">2020-06-30</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "QualifucationCard"
+  }
+</script>
+
+<style scoped lang="less">
+.qualification-card {
+  /*width:285px;*/
+  height:160px;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 1px 6px 0px rgba(8,6,6,0.13);
+  .qualification-card-detail-wrapper {
+    padding: 10px;
+    .qualification-card-detail{
+      display: flex;
+      margin-bottom: 5px;
+      .qualification-card-detail-title {
+        font-size: 14px;
+      }
+      .qualification-card-detail-info {
+        color: rgba(153, 153, 153, 1);
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

src/pages/UserCenter/UserCenter.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="user-center container">
+    <el-row :gutter="20">
+      <el-col :span="5">
+        <div class="left-menu">
+          <div class="menu-block">
+            <div class="menu-block-title">
+              <img src="../../assets/img/user-info.png">个人资料
+            </div>
+            <div class="menu-item"><router-link to="/personal/mine">基本信息</router-link></div>
+            <div class="menu-item"><router-link to="/personal/qualification">我的资质</router-link></div>
+            <div class="menu-item"><router-link to="/personal/bankCard">我的银行卡</router-link></div>
+          </div>
+          <div class="menu-block">
+            <div class="menu-block-title">
+              <img src="../../assets/img/count-security.png">账号安全
+            </div>
+            <div class="menu-item"><router-link to="/personal/modifyPsw">修改登陆密码</router-link></div>
+            <div class="menu-item"><router-link to="/personal/phoneBinding">手机绑定</router-link></div>
+            <div class="menu-item"><router-link to="/personal/mailBinding">邮箱绑定</router-link></div>
+            <div class="menu-item"><router-link to="/personal/authentication">身份认证</router-link></div>
+          </div>
+          <div class="menu-block">
+            <div class="menu-block-title">
+              <img src="../../assets/img/project-manager.png">项目管理
+            </div>
+            <div class="menu-item">我的订单</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="19">
+        <router-view></router-view>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+  import QualificationCard from './QualificationCard'
+
+  export default {
+    name: "UserCenter",
+    components: {
+      QualificationCard
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .user-center {
+    margin-top: 15px;
+
+    .left-menu {
+      /*height:827px;*/
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+      padding: 20px 30px;
+
+      .menu-block {
+        margin-bottom: 20px;
+
+        .menu-block-title {
+          font-size: 18px;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+
+          img {
+            margin-right: 5px;
+          }
+        }
+
+        .menu-item {
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          margin: 3px 0 3px 28px;
+        }
+      }
+    }
+
+    .right-modifyPsw {
+      padding: 20px;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+      .right-modifyPsw-title {
+        padding: 10px;
+        border-bottom: 1px solid #ccc;
+        margin-bottom: 20px;
+      }
+    }
+  }
+</style>

src/pages/UserCenter/individualAuth.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="right-modifyPsw">
+    <div class="right-modifyPsw-title">
+      <span style="font-size: 18px;font-weight: bold">个人认证</span>
+    </div>
+    <div class="individual-steps-wrapper">
+      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px;width: 300px">
+        <el-step title="填写认证信息"></el-step>
+        <el-step title="认证结果"></el-step>
+      </el-steps>
+  </div>
+    <el-form ref="form" :model="form" label-width="120px" style="width: 70%">
+    <el-form-item label="真实姓名">
+      <el-input v-model="individualForm.username" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
+    </el-form-item>
+    <el-form-item label="身份证号码">
+      <el-input v-model="individualForm.idnumber" placeholder="身份证前后不能有空格"></el-input>
+    </el-form-item>
+      <el-form-item label="性别">
+        <el-radio-group v-model="individualForm.gender">
+          <el-radio label="男"></el-radio>
+          <el-radio label="女"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="身份证到期时间">
+        <el-input v-model="individualForm.idDate" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
+      </el-form-item>
+      <el-form-item label="家庭或单位地址">
+        <el-input v-model="individualForm.address"></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="upload-wrapper">
+      <el-row style="width: 100%">
+        <el-col :span="9" style="padding-left: 30px">
+          <div>
+            <el-upload
+              class="avatar-uploader"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload">
+              <img v-if="imageUrl" :src="imageUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <div style="text-align: center">手持身份证正面照</div>
+          </div>
+        </el-col>
+        <el-col :span="15">
+          <div class="authentication-detail">
+            <div class="authentication-detail-title">证件要求</div>
+            <el-row>
+              <el-col :span="11">
+                <div class="idcard-example1"></div>
+              </el-col>
+              <el-col :span="13" style="padding-left: 10px">
+                <ul class="authentication-detail-list">
+                  <li>请上传本人<span class="authentication-detail-list-blue">手持</span>身份证正面头部照片和上 半身照片</li>
+                  <li>照片为免冠、未化妆的数码照片原始图片<span class="authentication-detail-list-blue">请勿用任何软件编辑修改</span></li>
+                  <li>必须看清证件信息，且证件信息不能被遮挡， 持证人五官清晰可见</li>
+                  <li>仅支持.jpg .bmp .png .gif的图片格式，图 片大小不超过3M</li>
+                  <li>核实手持证件与原件方向一致，对焦身份证 进行拍照</li>
+                  <li>您提供的照片众测服务平台将予以保护，不 会用于其他用途</li>
+                </ul>
+                <a class="authentication-detail-list-blue">实名认证帮助></a>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row style="width: 100%">
+        <el-col :span="9" style="padding-left: 30px">
+          <div>
+            <el-upload
+              class="avatar-uploader"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload">
+              <img v-if="imageUrl" :src="imageUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <div style="text-align: center">身份证反面照</div>
+          </div>
+        </el-col>
+        <el-col :span="15">
+          <div class="authentication-detail">
+            <div style="height: 40px;width: 100%"></div>
+            <el-row>
+              <el-col :span="11">
+                <div class="idcard-example2"></div>
+              </el-col>
+              <el-col :span="13" style="padding-left: 10px">
+                <ul class="authentication-detail-list">
+                  <li>必须看清证件信息，且证件信息不能被遮挡</li>
+                  <li>仅支持.jpg .bmp .png .gif的图片格式，图 片大小不超过3M</li>
+                  <li>您提供的照片众测服务平台将予以保护，不 会用于其他用途</li>
+                </ul>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="enterprise-brn-wrapper">
+      <button class="enterprise-btn previousBtn">上一步</button>
+      <button class="enterprise-btn nextBtn">提交审核</button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "IndividualAuth",
+    data() {
+      return {
+        active: 0,
+        imageUrl: '',
+      individualForm:{}
+      }
+    },
+    methods:{
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+
+    .individual-steps-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+    .upload-wrapper {
+      /*display: flex;*/
+      /*padding: 0 30px;*/
+
+      .authentication-detail {
+        padding-left:20px;
+        border-left: 1px solid rgba(220,220,220,1);
+        .authentication-detail-title {
+          font-size:16px;
+          font-family:Source Han Sans CN;
+          font-weight:600;
+          border-bottom: 1px dashed rgba(220,220,220,1);
+          margin-bottom: 10px;
+          padding-bottom: 5px;
+        }
+        .idcard-example1 {
+          height: 140px;
+          background-image: url("../../assets/img/idcard-example1.png");
+          background-size: 100% 100%;
+        }
+        .idcard-example2 {
+          height: 140px;
+          background-image: url("../../assets/img/idcard-example2.png");
+          background-size: 100% 100%;
+        }
+      }
+      .authentication-detail-list {
+        list-style-type: none;
+        padding-left: 0;
+        font-size:12px;
+        font-family:Source Han Sans CN;
+        font-weight:400;
+        color:rgba(153,153,153,1);
+        li:before{
+          content: "\2022";
+          color: rgba(153,153,153,1);
+          font-size: 16px;
+          margin-right: 10px;
+        }
+        .authentication-detail-list-blue{
+          color: #148AE0;
+        }
+
+      }
+    }
+
+    .enterprise-brn-wrapper {
+      margin-top: 40px;
+      display: flex;
+      justify-content: center;
+      .enterprise-btn{
+        border: 1px solid rgba(0,118,203,1);
+        width: 150px;
+        background-color: white;
+        color:rgba(0,118,203,1) ;
+        padding: 10px;
+        margin: 0 30px;
+      }
+      .nextBtn {
+        background-color:rgba(0,118,203,1);
+        color: white;
+      }
+    }
+
+  }
+</style>

src/router/index.js

@@ -17,6 +17,7 @@ import AgencyAdd from '@/components/cheat/AgencyAdd'
 Vue.use(Router)
 
 export default new Router({
+  linkActiveClass: 'active',
   routes: [
     {
       path: '/',
@@ -361,7 +362,57 @@ export default new Router({
         requireAuth: false,
       }
     },
-
+    {
+      path: '/personal',
+      name: 'UserCenter',
+      component: resolve => require(['@/pages/UserCenter/UserCenter.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+      children: [
+        {
+          path: '/personal/mine',
+          component: resolve => require(['@/pages/UserCenter/Mine.vue'], resolve),
+        },
+        {
+          path: '/personal/qualification',
+          component: resolve => require(['@/pages/UserCenter/MyQualification.vue'], resolve),
+        },
+        {
+          path: '/personal/bankCard',
+          component: resolve => require(['@/pages/UserCenter/MyBankCard.vue'], resolve),
+        },
+        {
+          path: '/personal/modifyPsw',
+          component: resolve => require(['@/pages/UserCenter/ModifyPsw.vue'], resolve),
+        },
+        {
+          path: '/personal/phoneBinding',
+          component: resolve => require(['@/pages/UserCenter/PhoneBinding.vue'], resolve),
+        },
+        {
+          path: '/personal/mailBinding',
+          component: resolve => require(['@/pages/UserCenter/MailBinding.vue'], resolve),
+        },
+        {
+          path: '/personal/authentication',
+          component: resolve => require(['@/pages/UserCenter/Authentication.vue'], resolve),
+        },
+        {
+          path: '/personal/authentication/enterprise',
+          component: resolve => require(['@/pages/UserCenter/EnterpriseAuth.vue'], resolve),
+        },
+        {
+          path: '/personal/authentication/individual',
+          component: resolve => require(['@/pages/UserCenter/IndividualAuth.vue'], resolve),
+        },
+        {
+          path: '',
+          redirect: '/personal/mine'
+        }
+      ]
+    },
   ]
 })
 const originalPush = Router.prototype.push