forestProduct-trace-H5-UI/src/components/time-list.vue

<template>
  <ul class="time-list">
    <li v-for="(i, index) in value" :key="index">
      <template v-if="!(index % 2)">
        <!-- {{index}} -->
        <div class="info animated fadeInLeft">
          <p>
            <span>{{[i.processTime,1] | time}}</span>
            /{{[i.processTime,2] | time}}
          </p>
          <p>执行项: {{i.processItem}}</p>
          <p>负责人: {{i.processUser}}</p>
          <p>执行描述: {{i.processDesc}}</p>
        </div>
        <i class="point"></i>
        <el-image
          :src="i.processImgs | host"
          :preview-src-list="[i.processImgs] | hostList"
          class="animated fadeInRight"
        >
          <div slot="placeholder" class="img-loading">
            <i class="el-icon-loading"></i>
          </div>
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </template>
      <template v-else>
        <el-image
          :src="i.processImgs | host"
          :preview-src-list="[i.processImgs] | hostList"
          class="animated fadeInLeft"
        >
          <!-- <div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
          <div slot="placeholder" class="img-loading"><i class="el-icon-loading"></i></div>-->
          <div slot="placeholder" class="img-loading">
            <i class="el-icon-loading"></i>
          </div>
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <i class="point"></i>
        <div class="info animated fadeInRight">
          <p>
            <span>{{[i.processTime,1] | time}}</span>
            /{{[i.processTime,2] | time}}
          </p>
          <p>执行项: {{i.processItem}}</p>
          <p>负责人: {{i.processUser}}</p>
          <p>执行描述: {{i.processDesc}}</p>
        </div>
      </template>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  filters: {
    time([value, index]) {
      return ((value + "").split(" ")[0] || "").split("-")[index] || "";
    }
  },
  data() {
    return {
      src: 'https://icweiliimg9.pstatp.com/weili/l/79052111505202081.webp'
    };
  }
};
</script>

<style lang="less">
.time-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0.2rem;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #20374d;
  }
  > li {
    display: flex;
    justify-content: space-between;
    margin: 0.2rem 0;
    .info,
    .el-image {
      width: 42%;
      border-radius: 0.08rem;
      overflow: hidden;
      height: 2rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      padding-left: 0.3rem;
      width: calc(42% - 0.3rem);
      p {
        font-size: 0.2rem;
        span {
          font-size: 1.4em;
        }
      }
    }
    .el-image {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &:nth-child(even) {
      // transform: rotateY(180deg);
      .info,
      .el-image {
        // transform: rotateY(-180deg);
      }
    }
    .point {
      transform: rotateY(-180deg) translateY(0.3rem);
      width: 0.28rem;
      height: 0.28rem;
      border-radius: 50%;
      background: #397c53;
      border: 0.06rem solid #fff;
      box-shadow: 0 0 0 0.02rem #20374d;
    }
  }
}
</style>