<template>
    <div>
      <div style="height: 300px">
        <mt-swipe :auto="4000">
          <mt-swipe-item style="background-color: #f00">1</mt-swipe-item>
          <mt-swipe-item style="background-color: #ff0">2</mt-swipe-item>
          <mt-swipe-item style="background-color: #f0f">3</mt-swipe-item>
        </mt-swipe>
      </div>

      <flexbox :gutter="0">
        <flexbox-item class="nav-warp">
          <div>
            <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;
  }
}
</style>
