Arbitrate-Frontend/src/views/caseManagement/components/caselogDialog.vue

<template>
  <div>
    <el-dialog
      title="案件日志"
      :visible="showcaseLog"
      @close="cancel"
      center
      :distroy-on-close="true"
    >
      <div class="loading" v-if="flagLoading">
        <i class="el-icon-loading"></i>
      </div>
      <div v-else>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
            placement="top"
          >
            <el-card>
              <h4>{{ activity.doOperate }}</h4>
              <p>{{ activity.content }}</p>
            </el-card>
          </el-timeline-item>
          <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/3 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/2" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item> -->
        </el-timeline>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="endbutton1"
          ><span>取 消</span></el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["showcaseLog", "flagLoading"],
  data() {
    return {
      // key: value
      reverse: true,
      activities: [
        {
          content: "韩超勃 申请于 2023/10/3 20:46",
          timestamp: "申请",
          doOperate: "申请立案"
        },
        {
          content: "韩超勃 提交于 2023/10/4 20:46",
          timestamp: "提交",
          doOperate: "提交立案"
        },
        {
          content: "氢气球 立案审查 2023/10/3 20:46",
          timestamp: "立案审查",
          doOperate: "立案审查"
        },
        {
          content: "风格的 提交于 2023/10/3 20:46",
          timestamp: "提交",
          doOperate: "提交立案"
        },
        {
          content: "乖乖 提交于 2023/10/3 20:46",
          timestamp: "提交",
          doOperate: "提交立案"
        },
        {
          content: "烤羊腿 提交于 2023/10/3 20:46",
          timestamp: "提交",
          doOperate: "提交立案"
        },
      ],
    };
  },
  methods: {
    cancel() {
      this.$emit("cancelcaseLog");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 700px !important;
  overflow: auto !important;
}
::v-deep .el-dialog {
  width: 800px;
  background: #ffffff;
  border-radius: 20px;
}
.endbutton1 {
  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;
  }
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-icon-loading {
    font-size: 50px;
  }
}
</style>