css实现步骤条中的横线

实现步骤中的横线,我们使用css中的after选择器,content写空,然后给这个范围设定一个绝对定位,相当于和它设置伪类选择的元素的位置,直接看代码:

    const commonStyle = useMemo(() => ({fontSize: '30px'}),[])const guideProcesses = useMemo(() => ([{ step: '下载激活文件', desc: 'License Agent: 下载需要被授权服务的激活文件(文件7天有效)', icon: <i style={commonStyle} className="iconfont line icon-folder"></i> },{ step: '获取授权文件', desc: 'License Service/SI Console: 通过上传文件激活服务,并下载授权文件', icon: <i style={commonStyle} className="iconfont line icon-auth"></i> },{ step: '授权服务', desc: 'License Agent: 上传授权文件,可在许可证页面看到生成的服务授权信息', icon: <i style={commonStyle} className="iconfont line icon-download"></i> },{ step: '重启服务', desc: '重启服务,服务重新获取授权', icon: <i style={commonStyle} className="iconfont line icon-restart"></i> },{ step: '查看服务授权状态', desc: 'License Agent: 刷新服务页面,查看服务的授权状态', icon: <i style={commonStyle} className="iconfont icon-check"></i> }]),[commonStyle])const guideInfo = useMemo(() => <Row className="steps">{guideProcesses.map((item: any) => <Col className="s-info" span={4} key={item.step}><div className="s-icon">{item.icon}</div><div className="s-step">{item.step}</div><div className="s-desc">{item.desc}</div></Col>)}</Row>,[guideProcesses])

相关css

.steps {.s-info {text-align: center;&:not(:first-child) {margin-left: 45px;}.s-icon {color: #1890FF;.line::after {content: "";position: absolute;top: 20px;left: 150px;width: 180px;height: 1px;background-color: #1890FF;display: inline-block;}}.s-step {font-weight: 600;}.s-desc {opacity: .6;}}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/11279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端开发中的微服务架构设计

前端服务化和小程序容器技术为前端应用带来了更好的组织结构、可维护性和可扩展性。这些技术的应用将促进前端开发的创新和发展&#xff0c;使团队能够更好地应对复杂的前端需求和业务挑战。通过将前端视为一个服务化的架构&#xff0c;我们能够构建出更强大、可靠且可持续的前…

scp命令----跨服务器传输文件

scp命令 Linux scp 命令用于 Linux 之间复制文件和目录。 scp 是 secure copy 的缩写, scp 是 linux 系统下基于 ssh 登陆进行安全的远程文件拷贝命令。 scp 是加密的&#xff0c;rcp 是不加密的&#xff0c;scp 是 rcp 的加强版。 一、Linux scp 命令 以下是scp命令常用的…

windows安装npm, 命令简介

安装步骤 要在Windows上安装npm&#xff0c;按照以下步骤操作&#xff1a; 首先&#xff0c;确保您已经在计算机上安装了Node.js。可以从Node.js官方网站&#xff08;Node.js&#xff09;下载并安装Node.js。完成Node.js的安装后&#xff0c;打开命令提示符&#xff08;Command…

“深入解析Spring Boot:从入门到精通的完整指南“

标题&#xff1a;深入解析Spring Boot&#xff1a;从入门到精通的完整指南 摘要&#xff1a;本文将深入解析Spring Boot框架&#xff0c;从入门到精通&#xff0c;为读者提供全面的指南。我们将介绍Spring Boot的基本概念、核心特性以及使用方法&#xff0c;并通过示例代码演示…

【libuv】httpserver启用ssl 及 播放的日志打印

VLC vlc 第一次 接收不安全的证书黑屏。重启服务,再次vlc这次次好像就可以了。main debug: processing request item: zhangbin.flv, node: 播放列表, skip: 0 main debug: rebuilding array of current - root 播放列表 main debug: rebuild done - 2 items, index 1 main de…

Linux推出Debian 12.1,并进行多方面系统修复

据了解&#xff0c;Debian是最古老的 GNU / Linux 发行版之一&#xff0c;也是许多其他基于 Linux 的操作系统的基础&#xff0c;包括 Ubuntu、Kali、MX 和树莓派 OS 等。 此外&#xff0c;该操作系统以稳定性为重&#xff0c;不追求花哨的新功能&#xff0c;因此新版本的发布…

【Huawei】WLAN实验(三层发现)

拓扑图如上&#xff0c;AP与S1在同一VLAN,S1与AC在同一VLAN&#xff0c;AP采用三层发现AC&#xff0c;AP与客户的DHCP由S1提供。 S1配置 vlan batch 10 20 30 dhcp enable ip pool apgateway-list 192.168.20.1network 192.168.20.0 mask 255.255.255.0option 43 sub-option …

Lua脚本解决多条命令原子性问题

Redis是一个流行的键值存储数据库&#xff0c;它提供了丰富的功能和命令。在Redis中&#xff0c;我们可以使用Lua脚本来编写多条命令&#xff0c;以确保这些命令的原子性执行。Lua是一种简单易学的编程语言&#xff0c;下面将介绍如何使用Redis提供的调用函数来操作Redis并保证…

行为型-状态模式(State Pattern)

概述 状态模式是一种行为设计模式&#xff0c;它可以让对象在内部状态改变时改变它的行为。简而言之&#xff0c;状态模式允许对象在不同状态下更改其行为&#xff0c;而不需要通过使用大量的条件语句进行手动更改。 优点&#xff1a; 状态模式将与特定状态相关的行为分散到…

【设计模式——学习笔记】23种设计模式——桥接模式Bridge(原理讲解+应用场景介绍+案例介绍+Java代码实现)

问题引入 现在对不同手机类型的不同品牌实现操作编程(比如:开机、关机、上网&#xff0c;打电话等)&#xff0c;如图 【对应类图】 【分析】 扩展性问题(类爆炸)&#xff0c;如果我们再增加手机的样式(旋转式)&#xff0c;就需要增加各个品牌手机的类&#xff0c;同样如果我们…

JAVA-字符串生成图片

直接上代码 public static void main(String[] args) throws IOException {createFontImage("红色", new Font("宋体", Font.BOLD, 50), 400, 400);}/*** 根据str,font的样式将文字变成图片,然后返回一个流** param str 字符串* param font 字体* pa…

YOLOv5多模型推理,同时实现多个任务数据集识别。

YOLOv5-6.0多模型推理,同时实现多个任务数据集识别。 ↓下滑可见代码↓ YOLOv5-6.0多模型推理,同时实现多个任务数据集识别。 ↓下滑可见代码↓ YOLOv5-6.0多模型推理,同时实现多个任务数据集识别。 ↓下滑可见代码↓ YOLOv5-6.0多模型推理,同时实现多个任务数据集识别。 ↓…

高阶k8s二次开发教程 -- 通过阅读Istio源码习得

本篇文章全网几乎找不到&#xff0c;在做深层次的k8s二次开发时非常管用。那就是使用Client-go去访问自定义CRD资源。 我们先使用kubebuilder生成一个CRD&#xff0c;论生成CRD这些&#xff0c;还是kubebuilder更加方便。 创建CRD apiVersion: "apiextensions.k8s.io/v…

了解Unity编辑器 之组件篇Effects(十一)

一、Halo&#xff1a;是一个可用于游戏对象的特效组件&#xff0c;它可以在对象周围添加一个光晕效果 Color属性: 用于设置Halo的颜色。你可以通过选择颜色面板中的颜色来指定光晕的外观。选择适当的颜色可以使光晕与游戏场景中的其他元素相匹配或突出显示。 Size属性: 用于设…

[SQL挖掘机] - 视图介绍

介绍: 视图&#xff08;View&#xff09;是数据库中的一种虚拟表格&#xff0c;它是基于一个或多个实际表格&#xff08;或其他视图&#xff09;的查询结果集合。与实际表格不同&#xff0c;视图不包含实际存储的数据&#xff0c;而是根据定义在其之上的查询语句来动态生成数据…

LeetCode|backtracking|review:40. 131. 93. 47. 332. | 37. Sudoku Solver

复习&#xff1a; 40. Combination Sum II [1,1,2,3]中&#xff0c;答案里有[1,1,2], 但是不能有两个[1,2,3] 131. Palindrome Partitioning 每个for都是在给定的start之后找一个palindrome。当start 93. Restore IP Addresses forloop每次loop都是在给定的start的后三个数…

javascript 模板引擎

使用场景 在实际开发中&#xff0c;一般都是使用动态请求数据来更新页面&#xff0c;服务器端通常返回json格式的数据&#xff0c;正常操作是我们手动的去拼装HTML&#xff0c;但麻烦且容易出错&#xff0c;因此出现了一些用模版生成HTML的的框架叫js模板引擎如&#xff1a;jq…

Sugar BI : AI 问答,即问即答

AI 探索功能提供给所有用户自由探索和分析数据模型的能力。在 AI 探索页中&#xff0c;有授权的用户可以通过 AI 问答和字段拖拽两种方式对数据模型进行探索。 下面&#xff0c;我们将为大家详细指导如何使用 AI 探索 新建 AI 探索页 空间管理员可以在报表管理中新建「AI 探索…

Docker 容器基础操作

Docker容器基础操作 容器(container)是Docker镜像的运行实例,类似于可执行文件与进程的关系,Docker是容器引擎,相当于系统平台。 容器的生命周期 容器的基础操作(以 tomcat8.0 为例) # 拉取tomcat8.0镜像 [root@tudou tudou]# docker pull tomcat:8.0 8.0: Pulling f…

紫光FPGA试用--软件篇

目录 一 软件安装启动 二 如何打开IP核&#xff1f;查看/修改现有IP核参数&#xff1f; 三 如何定义引脚&#xff1f; 四 如何下载code进入FPGA? 1. 下载到FPGA芯片内&#xff1a; 2.下载到外部FLASH中 五 如何进入在线调试模式&#xff0c;调试步骤 操作步骤&#xff…