vant4 自定义垂直步骤条时间线组件几行css代码改造完成（附效果图）

会点php的前端小渣渣

已于 2023-09-06 11:45:58 修改

阅读量1.1k

点赞数 1

分类专栏： vue3 css 文章标签： css 前端

于 2023-08-21 18:03:24 首次发布

本文链接：https://blog.csdn.net/qq_39523111/article/details/132413913

版权

vue3 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

css

21 篇文章 1 订阅

订阅专栏

直接上效果图片

<template>
  <!-- 审批流程 -->
  <div>
    <van-steps direction="vertical" active="-1">
      <van-step>
        <template #inactive-icon>
          <div class="relative">
            <img :src="girlIcon" />
            <img class="absolute right-0 bottom-0" :src="checkIcon" />
          </div>
        </template>

        <div class="flex items-end justify-between pl-10">
          <div>
            <div class="tj-color">提交</div>
            <div class="text-xs">张三</div>
          </div>
          <div>2021-12-30 17:20</div>
        </div>
      </van-step>

      <van-step>
        <template #inactive-icon>
          <div class="relative">
            <img :src="girlIcon" />
            <img class="absolute right-0 bottom-0" :src="closeIcon" />
          </div>
        </template>

        <div class="flex items-end justify-between pl-10">
          <div>
            <div class="bh-color">护士长驳回</div>
            <div class="text-xs">张三</div>
          </div>
          <div>2021-12-30 17:20</div>
        </div>
        <div class="flex items-end justify-between ml-10 py-1 px-2 shbg rounded text-sm mt-2"
          >审核意见审核意见审核意见审核意见审核意审核意见审核意见审核意见审核意见审核意审核意见审核意见审核意见审核意见审核意443</div
        >
      </van-step>

      <van-step>
        <template #inactive-icon>
          <div>
            <img :src="manIcon" />
            <img class="absolute right-0 bottom-0" :src="spIcon" />
          </div>
        </template>
        <div class="flex items-end justify-between pl-10">
          <div>
            <div class="sh-color">待护士长审核</div>
          </div>
          <div>2021-12-30 17:20</div>
        </div>
      </van-step>
    </van-steps>
  </div>
</template>

<script setup>
  import girlIcon from '@/assets/images/icon/girl.png';
  import manIcon from '@/assets/images/icon/man.png';
  import checkIcon from '@/assets/images/icon/check.png';
  import spIcon from '@/assets/images/icon/sp.png';
  import closeIcon from '@/assets/images/icon/close.png';

  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
</script>

<style lang="scss" scoped>
  $tj-color: #4caf50;
  $sh-color: #ef6c00;
  $bh-color: #d32f2f;
  ::v-deep(.van-step__circle-container) {
    left: 7px;
  }
  ::v-deep(.van-step__line) {
    left: 7px;
  }
  ::v-deep([class*='van-hairline']:after) {
    border: 0 dashed var(--van-border-color);
  }
  .tj-color {
    color: $tj-color;
    font-size: 15px;
  }
  .sh-color {
    color: $sh-color;
    font-size: 15px;
  }
  .bh-color {
    color: $bh-color;
    font-size: 15px;
  }
  .shbg {
    background-color: #f0f1f0;
  }
</style>