crowd-test-service-frontend/src/pages/UserCenter/UserCenter.vue

<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>