<template>
  <div class="wrap">
    <div class="fl left">
      <span>车辆管理</span>
    </div>
    <ul class="fl right">
      <li>
        <span>我的钱包</span>
      </li>
      <li>
        <span>账户余额</span>
      </li>
      <li>
        <span>我的卡券</span>
      </li>
      <li>
        <span>停车订单</span>
      </li>
      <li>
        <span>欠费订单</span>
      </li>
      <li>
        <span>个人中心</span>
      </li>
    </ul>
  </div>
</template>

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

<style scoped lang="scss">
  .wrap {
    /*width: 1150px;*/
    margin: 46px auto 0;
    font-size: 20px;
  }

  .left {
    width: 212px;
    height: 443px;
    padding-top: 267px;
    background: rgba(255, 86, 86, 1) url("../assets/service/car.png") center 170px no-repeat;
    cursor: pointer;
  }
  .right{
    width: 710px;
    li{
      width:212px;
      height:212px;
      float: left;
      margin-left: 24px;
      margin-bottom: 19px;
      padding-top: 130px;
      background-position: center 60px;
      background-repeat: no-repeat;
      cursor: pointer;
      &:nth-of-type(1){
        background-color: #FFB537;
        background-image: url("../assets/service/money.png");
      }
      &:nth-of-type(2){
        background-color: #34C27B;
        background-image: url("../assets/service/balance.png");
      }
      &:nth-of-type(3){
        background-color: #FC7C9B;
        background-image: url("../assets/service/card.png");
      }
      &:nth-of-type(4){
        background-color: #44BAF3;
        background-image: url("../assets/service/manage.png");
      }
      &:nth-of-type(5){
        background-color: #FD8D8D;
        background-image: url("../assets/service/order.png");
      }
      &:nth-of-type(6){
        background-color: #89D8FD;
        background-image: url("../assets/service/person.png");
      }
    }
  }

</style>
