<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(0)">
        <img src="@/assets/home/icon_kq4.png" alt="" />
        <p>待评价</p>
      </div>
      <div @click="handleServiceOrder(1)">
        <img src="@/assets/home/icon_kq5.png" alt="" />
        <p>已评价</p>
      </div>
      <div></div>
      <div></div>
      <div></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;
    div{
      width: 80px;
    }
    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>