<template>
  <div>
    <div style="height: 200px">
      <mt-swipe :auto="4000">
        <mt-swipe-item class="service1"></mt-swipe-item>
        <mt-swipe-item class="service2"></mt-swipe-item>
        <mt-swipe-item class="service3"></mt-swipe-item>
      </mt-swipe>
    </div>

    <flexbox :gutter="0">
      <flexbox-item class="nav-warp">
        <div @click="$router.push({path:'serviceDetail'})">
          <img src="../../assets/images/service/carservice.png" height="32" width="32"/>
        </div>
        <p>汽车服务</p>
      </flexbox-item>

      <flexbox-item class="nav-warp">
        <div>
          <img src="../../assets/images/service/safeservice.png" height="32" width="32"/>
        </div>
        <p>保险服务</p>
      </flexbox-item>

      <flexbox-item class="nav-warp">
        <div>
          <img src="../../assets/images/service/tripservice.png" height="32" width="32"/>
        </div>
        <p>出行服务</p>
      </flexbox-item>

    </flexbox>

  </div>
</template>

<script>
export default {
  name: "service"
};
</script>

<style scoped lang="scss">
  .nav-warp {
    padding-top: 20px;
    text-align: center;
    font-size: 16px;
    img {
      display: inline-block;
    }
  }

  .service1 {
    background: url("../../assets/images/service/service1.jpeg") no-repeat;
    background-size: 100% 100%;
  }

  .service2 {
    background: url("../../assets/images/service/service2.jpeg") no-repeat;
    background-size: 100% 100%;
  }

  .service3 {
    background: url("../../assets/images/service/service3.jpeg") no-repeat;
    background-size: 100% 100%;
  }
</style>
