<template>
  <div>
    <div class="person-bg">
      <div class="person-ifo">
        <div class="person-pic"></div>
        <ul class="person-con">
          <li>15911111111</li>
          <li>账户余额: <span>￥100.00</span></li>
          <li>我的卡券：<span>20张</span></li>
        </ul>
      </div>
    </div>

    <mt-cell title="会员卡"  is-link :to="{ name: 'Toast' }"></mt-cell>

    <mt-cell title="车辆管理"  is-link :to="{ name: 'Toast' }"></mt-cell>

    <mt-cell title="停车记录"  is-link :to="{ name: 'parkNotes' }"></mt-cell>

    <mt-cell title="建议反馈"  is-link :to="{ name: 'suggestionBack' }"></mt-cell>

    <div class="leftRightPadding" style="margin-top: 34px">
      <mt-button type="danger" size="large">退出账户</mt-button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'selfNav'
}
</script>

<style scoped lang="scss">
  .person-bg {
    height: 160px;
    background: url("../../assets/images/mySelf/selfNavBg.png") no-repeat;
    background-size: 100% 100%;
  }

  .person-ifo {
    padding: $commonLeftRightPadding;
    padding-top: 45px;
    display: flex;
    color: #ffbfbf;
    .person-pic{
      width: 64px;
      height: 64px;
      margin-right: 15px;
      background: url("../../assets/images/mySelf/photoBG.png") no-repeat;
    }
  }
  .person-con{
    span{
      font-size: 16px;
      font-weight: bold;
    }
  }

  .mint-cell{
    border-bottom: 1px solid #EFEDED;
  }
</style>
