<template>
  <div class="home_order">
    <div class="top">
      <p>我的订单</p>
    </div>
    <div class="icon_box">
      <div @click="handleCustom">
        <img src="@/assets/home/icon_kq1.png" alt="">
        <p>定制研学</p>
      </div>
      <div @click="handleServiceOrder(0)">
        <img src="@/assets/home/icon_kq2.png" alt="">
        <p>待付款</p>
      </div>
      <div @click="handleServiceOrder(1)">
        <img src="@/assets/home/icon_kq3.png" alt="">
        <p>待使用</p>
      </div>
      <div @click="handleServiceOrder(2)">
        <img src="@/assets/home/icon_kq4.png" alt="">
        <p>待评价</p>
      </div>
      <div @click="handleServiceOrder(3)">
        <img src="@/assets/home/icon_kq5.png" alt="">
        <p>已评价</p>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  props:{
    parent:{
      type:String,
      default:''
    }
  },
  methods: {
    // 定制研学
    handleCustom () {
      this.$toast('暂未开放，敬请期待！');
    },
    handleServiceOrder (active) {
      this.$router.push({ name: 'ServiceOrderXST', query: { active: active } })
    }
  }
}
</script>
<style lang="scss" scoped>
.home_order {
  width: 702px;
  margin: 0 auto;
  margin-top: -130px;
  box-sizing: border-box;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  .top {
    p {
      font-size: 28px;
      font-weight: bold;
    }
  }
  .icon_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 140px;
    margin-top: 20px;
    img {
      display: block;
      width: 62px;
      margin: 0 auto;
    }
    p {
      margin-top: 14px;
      font-size: 26px;
    }
  }
}
</style>
<style lang="scss">
  .elder{
    .home_order{
      .top{
        p{
          font-size: 44px;
        }
      }
       .icon_box p{
         font-size: 34px;
       }
    }
  }
</style>