Arbitrate-Frontend/src/views/awardManagement/components/expressDeliveryDialog.vue

<template>
  <div>
    <el-dialog
      title="快递信息"
      :visible="showDelivery"
      @close="cancel"
      center
      :distroy-on-close="true"
    >
      <div class="deliverName">中通快递 85644454542121</div>
      <el-divider></el-divider>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
      <div slot="footer" class="dialog-footer">
         <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["showDelivery"],
  data() {
    return {
      // key: value
      reverse: true,
      activities: [  
        {
          content: "已下单 08-18 10:11",
          timestamp: "已下单",
        },
        {
          content: "已接单 08-19 10:11",
          timestamp: "已接单",
        },
        {
          content: "已发货 08-19 10:11",
          timestamp: "已发货",
        },
        {
          content: "已揽件 08-20 00:11",
          timestamp: "已揽件",
        },
        {
          content: "运输中 08-20 02:11",
          timestamp: "运输中",
        },
        {
          content: "派送中 08-22 10:11",
          timestamp: "【西安市】快递已到达西安市临潼区",
        },
        {
          content: "待取件 08-23 15:11",
          timestamp: "【西安市】快递已到达菜鸟驿站",
        },
      ],
    };
  },
  methods: {
    cancel() {
      this.$emit("closeDeliveryModel");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 600px;
  background: #ffffff;
  border-radius: 20px;
}
.deliverName {
  margin-left: 6%;
  font-size: 16px;
  font-weight: 500;
}
.endbutton {
  width: 154px;
  height: 37px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 19px;
  span {
    width: 31px;
    height: 13px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959595;
  }
}
</style>