zuel-itsm-3.0.2/src/views/handlerLog.vue

<template>
<div class="handlerLog">
  <div class="label">沟通记录</div>
  <table class="handlerLog__table">
    <tr>
      <td class="xh">序号</td>
      <td class="date">沟通时间</td>
      <td class="clr">操作人</td>
      <td>沟通结果</td>
    </tr>
    <tr v-for="(item,i) in data" :key="item.id">
      <td>{{ i + 1 }}</td>
      <td>{{ item.opTime | timeFormat("yyyy-MM-dd HH:mm:ss")}}</td>
      <td>{{ item.userName }}</td>
      <td>{{ item.opValue }}</td>
    </tr>
  </table>
</div>
</template>

<script>
  export default {
    data(){
      return {}
    },
    props:{
      data:{
        type:Array,
        default(){
          return [];
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.label {
  background-color: #eeeeee;
  height: 0.6rem;
  line-height: 0.58rem;
  padding-left: 0.2rem;
  font-size: 0.24rem;
  color: #666666;
  span {
    font-size: 0.2rem;
    display: inline-block;
    margin-left: 0.08rem;
    color: #999999;
  }
  &.formLabel {
    background-color: #fff;
  }
}
.handlerLog{
  background-color: #fff;
}
.handlerLog .handlerLog__table{
  border-collapse: collapse;
  border: 1px solid #ccc;
  width: 100%;
}
.handlerLog .handlerLog__table td{
  text-align: center;
  border: 1px solid #ccc;
  word-break: break-all;
  font-size: 0.25rem;
  padding: 0.1rem 0;
}
.handlerLog .handlerLog__table td.xh  {
  width: 0.7rem;
}

.handlerLog .handlerLog__table td.clr  {
  width: 1.2rem;
}

.handlerLog .handlerLog__table td.date  {
  width: 2.6rem;
}
</style>