超简单的！纯css实现步骤条

zxo_apple

于 2024-08-06 10:52:09 发布

阅读量31

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/zxo_apple/article/details/140949786

版权

样式如图：

在这里插入图片描述

话不多说，直接上代码

// index.tsx
import React from "react";
import "./index.less";

export default function Steps() {
  const list = [
    {
      date: "2021",
      content:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique, beatae dicta, repudiandae qui maxime dolores dolore eum quis provident, praesentium aut perspiciatis molestias accusantium possimus hic veniam assumenda veritatis ut! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique, beatae dicta, repudiandae qui maxime dolores dolore eum quis provident, praesentium aut perspiciatis molestias accusantium possimus hic veniam assumenda veritatis ut! Lorem ipsum dolor sit, amet consectetur adipisicing elit.",
    },
    {
      date: "2022",
      content: "test content",
    },
    {
      date: "2023",
      content:
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique, beatae dicta, repudiandae qui maxime dolores dolore eum quis provident, praesentium aut perspiciatis molestias accusantium possimus hic veniam assumenda veritatis ut!",
    },
  ];
  return (
    <div className="steps">
      {list?.map((item, index) => (
        <div key={index} className="steps-item">
          <div className="date">{item?.date}</div>
          <div className="content">{item?.content}</div>
        </div>
      ))}
    </div>
  );
}

// index.less
.steps {
  border: 1px solid #eee;
  padding: 32px;
  border-radius: 8px;
  .steps-item {
    display: flex;
    margin-bottom: 12px;
    &:last-child {
      .content {
        &::after {
          content: none;
        }
      }
    }
    .date {
      margin-top: 14px;
      color: #4a5d73;
    }
    .content {
      font-size: 15px;
      padding: 14px;
      background: #f8f9fa;
      border-radius: 6px 6px 6px 6px;
      flex: 1;
      margin-left: 32px;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
      }
      &::before { // 圆圈
        width: 8px;
        height: 8px;
        background: #ffffff;
        border-radius: 100%;
        border: 2px solid #074489;
        left: -20px;
        top: 20px;
      }
      &::after { // 线条
        width: 2px;
        height: calc(100% + 12px); // 自适应高度 加上间距12px
        background-color: #074489;
        left: -15px;
        top: 30px;
      }
    }
  }
}