vue实现打标记录

最新推荐文章于 2024-08-19 22:58:54 发布

谈谈的心情

最新推荐文章于 2024-08-19 22:58:54 发布

阅读量329

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript 打标

本文链接：https://blog.csdn.net/ljw124213/article/details/121175322

版权

vue 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

项目需要的效果如下图：

实现代码：

<template>
  <div class="step-template">
    <div class="step" v-for="item in 12" :key="item">
      <div class="step-l">
        <p class="time">2021-08-01 12:09:11</p>
        <p class="name">张大炮</p>
      </div>
      <div class="step-r">
        <p class="tag">新增标签：【吞噬异物】（手动录入）</p>
        <p class="desc">说明：在押人员张大炮</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'personAction',
  props: {
    actionData: {
      type: Array
    }
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
.step-template {
  width: 600px;
  background: chartreuse;
  .step {
    display: flex;
    padding-bottom: 12px;
    font-size: 14px;
    position: relative;
    &:before {
      content: "";
      width: 1px;
      top: 4px;
      left: 50%;
      height: 100%;
      background: #ccc;
      position: absolute;
      z-index: 2;
    }
    &:after {
      content: "";
      width: 9px;
      height: 9px;
      top: 4px;
      left: ~"calc(50% - 4px)";
      background: #2080f7;
      position: absolute;
      z-index: 3;
      border-radius: 50%;
    }
    &:nth-child(3n + 2) {
      &::after {
        background: #ff0000;
      }
    }
    &:nth-child(3n + 1) {
      &::after {
        background: green;
      }
    }
    & > div {
      width: 50%;
      box-sizing: border-box;
    }
    &-l {
      text-align: right;
      padding-right: 20px;
      .time {
        color: #999;
      }
      .name {
        color: #4c4c4c;
        margin-top: 10px;
      }
    }
    &-r {
      padding-left: 20px;
      .tag {
        color: #4c4c4c;
      }
      .desc {
        margin-top: 10px;
        color: #999;
      }
    }
  }
}
</style>