<template>
  <div>
    <div class="order-list">
      <ul>
        <li>
          <div class="order-info">
            <img src="../../assets/images/tx.png" alt="">
            <div class="txt">
              课程标题道路旅客运输企业课
              程标题道路旅客运输企业
            </div>
          </div>
          <div class="deti">
            <div class="tit">课程状态：</div>
            <div class="val">已付款/未付款</div>
          </div>
          <div class="deti">
            <div class="tit">共计：</div>
            <div class="val">$199.00</div>
          </div>
          <div class="deti">
            <div class="val col">
              继续购买
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/pay.js'
export default {
  mounted() {
    this.getMyOrder()
  },
  methods: {
    getMyOrder() {
      api.getMyOrder().then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-list{
  li{
    padding: .1rem .4rem;
    margin-bottom: .4rem;
  }
  .order-info{
    display: flex;
    img{
      width: 2.4rem;
      height: 2.4rem;
      display: block;
    }
    .txt{
      margin-left: .2rem;
      font-size: .3rem;
      color: #222;
      word-wrap: break-word;
    }
  }
  .deti{
    display: flex;
    margin-bottom: .4rem;
    .tit{
      font-size: .26rem;
      color: #222;
    }
    .val{
      font-size: .26rem;
      color: #222;
      margin-left: auto;
    }
    .col{
      color: #FF6767;
      font-size: .3rem;
    }
  }
}
</style>
