<template>
  <div>
    <!-- table切换 -->
    <div class="tab">
      <div>
        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
          收件人
        </p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div v-if="index == 1">
        <div class="list">
          <div class="list_top">
            <p>派单号 213213213</p>
            <p>2021-02-12 10:30</p>
          </div>
          <div class="list_bottom">
            <div class="list_bottom_left">
              <p>王守业</p>
              <p>19898765765</p>
            </div>
            <div class="list_bottom_mid">
              <img src="../assets/images/ad_icon1.png" alt="" />
              <span></span>
              <p>已签收</p>
            </div>
            <div class="list_bottom_right">
              <p>王守业</p>
              <p>19898765765</p>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="list_top">
            <p>派单号 213213213</p>
            <p>2021-02-12 10:30</p>
          </div>
          <div class="list_bottom">
            <div class="list_bottom_left">
              <p>王守业</p>
              <p>19898765765</p>
            </div>
            <div class="list_bottom_mid">
              <img src="../assets/images/ad_icon1.png" alt="" />
              <span></span>
              <p>已签收</p>
            </div>
            <div class="list_bottom_right">
              <p>王守业</p>
              <p>19898765765</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="index == 2">
        <div class="list">
          <div class="list_top">
            <p>派单号 213213213</p>
            <p>2021-02-12 10:30</p>
          </div>
          <div class="list_bottom">
            <div class="list_bottom_left">
              <p>王守业</p>
              <p>19898765765</p>
            </div>
            <div class="list_bottom_mid">
              <img src="../assets/images/ad_icon1.png" alt="" />
              <span></span>
              <p>已签收</p>
            </div>
            <div class="list_bottom_right">
              <p>王守业</p>
              <p>19898765765</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titlename: "我的快件",
      index: 1
    };
  },
  methods: {
    tab(obj) {
      this.index = obj;
    }
  }
};
</script>

<style scoped lang="less">
.tab {
  font-size: 0.36rem;
  color: #8c8c8c;
  background: white;

  div {
    display: flex;
    text-align: center;
    border-radius: 0.05rem;
    justify-content: center;

    p {
      padding: 0.2rem 0.3rem;
      margin: 0px 0.4rem;
    }

    p.active {
      color: #0c2469;
      border-bottom: 0.02rem solid #0c2469;
    }
  }
}

.content {
  padding: 0.33rem;

  .list {
    background: white;
    font-size: 0.3rem;
    color: #333;
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.2rem;

    .list_top {
      font-size: 0.24rem;
      color: #999;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.3rem;
    }

    .list_bottom {
      display: flex;
      justify-content: space-between;

      .list_bottom_left {
        text-align: center;
        padding-top: 0.3rem;

        p:nth-of-type(2) {
          font-size: 0.24rem;
          margin-top: 0.2rem;
        }
      }

      .list_bottom_mid {
        text-align: center;

        img {
          width: 0.6rem;
          height: 0.6rem;
        }

        span {
          display: block;
          width: 2rem;
          height: 0.05rem;
          border-radius: 50%;
          background: #0c2469;
          margin: 0.15rem 0rem;
        }

        p {
          color: #f5693d;
          font-size: 0.26rem;
        }
      }

      .list_bottom_right {
        padding-top: 0.3rem;
        text-align: center;

        p:nth-of-type(2) {
          font-size: 0.24rem;
          margin-top: 0.2rem;
        }
      }
    }
  }
}
</style>
