CSS实现一个动态横向时间轴

最新推荐文章于 2025-11-23 21:04:38 发布

原创最新推荐文章于 2025-11-23 21:04:38 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍如何使用CSS实现一个动态横向时间轴，通过不同颜色的圆圈和线条展示流程进度，适用于展示项目进度或时间线。

CSS实现一个动态横向时间轴

先看效果

html

<template>
  <x-view class="stepFlex">
    <x-view
      v-for="(item, index) in testList"
      :key="index"
      style="position: relative; flex: 1; text-align: center;margin-top:-10px"
    >
      <x-view >{{ item.name }}</x-view>
      <x-view
        :class="item.ceshi == '1' ? 'greenCircle' :item.ceshi == '2' ? 'now' : 'greyCircle'"
      ></x-view>  
      <x-view
        v-if="index !== testList.length - 1"
        :class="testList[index + 1].ceshi != '3' ? 'greenline' : 'greyline'"
      ></x-view>
      <x-view style="margin-top:20px">{{ item.time }}</x-view>
    </x-view>
  </x-view>
</template>

css

.stepFlex {
  display: flex;
  .greenCircle {
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #08d0c3;
  }
  .now{
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    position: absolute;
    z-index: 3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #08d0c3;
    border: 4px solid #cef6f3;
  }
  .greyCircle {
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
  }

  .greenline {
    width: 100%;
    top: calc(50% - 2px);
    left: calc(50% - 2px);
    height: 2px;
    background-color: #08d0c3;
    position: absolute;
  }

  .greyline {
    height: 0;
    border: 1px dashed #ccc;
    width: 100%;
    top: calc(50% - 2px);
    left: calc(50% - 2px);
    position: absolute;
  }
}

testList:[{
      name:'购买',
      time:'2019/01/25',
      ceshi:1
    },
    {
      name:'起息',
      time:'2019/01/25',
      ceshi:2
    },{
      name:'到期',
      time:'2019/01/25',
      ceshi:3
    }],