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;我们能够构建出更强大、可靠且可持续的前…

windows安装npm, 命令简介

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

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并保证…

【设计模式——学习笔记】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…

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

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

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…

智慧园区楼宇合集:数字孪生管控系统

智慧园区是指将物联网、大数据、人工智能等技术应用于传统建筑和基础设施&#xff0c;以实现对园区的全面监控、管理和服务的一种建筑形态。通过将园区内设备、设施和系统联网&#xff0c;实现数据的传输、共享和响应&#xff0c;提高园区的管理效率和运营效益&#xff0c;为居…

学习笔记|大模型优质Prompt开发与应用课(二)|第五节:只需3步,优质Prompt秒变应用软件

原作者&#xff1a;依依│百度飞桨产品经理 一乔│飞桨开发者技术专家 分享内容 01:大模型应用简介 02:LLM应用开发范式 03: Al Studio大模型社区 04:AI对话类应用开发技巧 大模型技术爆发&#xff0c;各类应用产品涌现 文心产业级知识增强大模型 工作中的“超级助手”—…

兵兵数码:网络机顶盒哪个好?2023最新网络机顶盒排名

网络机顶盒让电视机重生&#xff0c;解决卡顿、资源少、广告多等问题&#xff0c;我们每年都会进行网络机顶盒测评&#xff0c;今年已经测评过17款&#xff0c;通过多角度对比筛选了五款表现最佳的产品整理成网络机顶盒排名&#xff0c;近期想买网络机顶盒不知道网络机顶盒哪个…

7.28黄金还会继续下跌吗?收官多空如何布局

近期有哪些消息面影响黄金走势&#xff1f;黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a; 周五&#xff08;7月28日&#xff09;亚洲时段&#xff0c;现货黄金震荡微涨&#xff0c;目前交投于1952.94附近&#xff0c;隔夜金价大跌后&#xff0c;吸引了一些逢低…

医学案例|配对wilcoxon符号秩检验

一、案例介绍 某单位想要研究某保健品对小鼠是否具有抗疲劳作用&#xff0c;将同种属的小鼠按性别与年龄相同、体重相近配成对子&#xff0c;共14对&#xff0c;并将每对中的两只小鼠随机分配到两个不同的保健食品剂量组&#xff0c;测量小鼠负重5&#xff05;体重时的游泳时间…

git 合并非关联分支

面对的场景&#xff1a;现在有三个仓库&#xff0c;一个是本地的仓库1&#xff0c;第二个是和仓库1关联的在github上的仓库2&#xff0c;第三个是把仓库1拷贝到一个无网络环境中持续开发一段时间的仓库3. 分析 基本想法是把仓库3作为仓库1的远程仓库&#xff0c;然后在仓库1上…

uiautomatorViewer无法获取Android8.0手机屏幕截图的解决方案

问题描述&#xff1a; 做APP UI自动化的时候&#xff0c;会碰到用uiautomatorViewer在Android 8.0及以上版本的手机上&#xff0c;无法获取到手机屏幕截图&#xff0c;无法获取元素定位信息的问题&#xff0c;会有以下的报 在低版本的Android手机上&#xff0c;则没有这个问题…