css 步骤条虚线渐变色效果实现

news2024/10/4 4:25:52

效果如图所示:
在这里插入图片描述
思路:
使用元素覆盖的方式实现视觉上虚线的效果

实现代码:
html布局

<ul class="details-cont">
    <li class="details-li" v-for="item in 3" :key="item">
        <div class="li-status">{{ item }}</div>
        <div class="li-flow-box">
            <div class="flow-circle"></div>
            <div class="flow-line"></div>
            <div class="flow-line-other"></div>
        </div>
        <div class="li-details">
            <div class="details-top">文字</div>
            <div class="details-channel">文字文字文字</div>
            <div class="details-stream">文字文字文字文字</div>
        </div>
    </li>
</ul>

css样式

.details-cont{
    padding: 0 rem(24);
    .details-li{
        display: flex;
        padding-bottom: rem(20);
        .li-flow-box{
            position: relative;
            padding: rem(5) 0 0;
            .flow-circle{
                width: rem(8);
                height: rem(8);
                border-radius: 50%;
                margin: 0 rem(7) 0 rem(5);
                background: #D7D7D7;
            }
            .flow-line{
                position: absolute;
                left: rem(9);
                top: rem(13);
                bottom: rem(-23);
                width: 1px;
                border-left: 1px dashed #D7D7D7;
            }
        }
        .li-details{
            flex: 1;
            font-size: rem(12);
            color: #999999;
            line-height: 18px;
            .details-channel,.details-stream{
                padding: rem(6) 0 0;
            }
        }
    }
    .details-li:last-child{
        .li-flow-box{
            .flow-line-other{
                position: absolute;
                left: rem(9);
                top: rem(13);
                bottom: rem(-23);
                width: 1px;
                border-left: 1px dashed #fff;
            }
            .flow-line{
                border-image: linear-gradient(180deg, rgba(215, 215, 215, 1), rgba(237, 237, 237, 0.49), rgba(215, 215, 215, 0)) 1 1
                
            }
        }
    }
}

PS:因为在移动端使用,单位代码使用统一的方法对rem进行了处理,此处rem(1),就相当于1px,

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

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

相关文章

C/C++开发工具CLion全新发布v2024.1——提升CMake编辑体验

CLion是一款专为开发C及C所设计的跨平台IDE。它是以IntelliJ为基础设计的&#xff0c;包含了许多智能功能来提高开发人员的生产力。这种强大的IDE帮助开发人员在Linux、OS X和Windows上来开发C/C&#xff0c;同时它还使用智能编辑器来提高代码质量、自动代码重构并且深度整合CM…

多模态产品在智能文档处理应用的展望------以TextIn模型为例

前言发展现状TextIn 文档解析技术文本向量化展望合合信息 前言 第十四届视觉与学习青年学者研讨会(VALSE 2024)于5月5日-7日在山城重庆渝北区悦来国际会议中心举办。大会聚焦计算机视觉、模式识别、多媒体和机器学习等领域的国际前沿和热点方向。大会中&#xff0c;合合信息智能…

企业信息系统的总体框架

1.信息系统体系结构的总体参考框架 信息系统的架构&#xff08;Information System Architecture&#xff0c;ISA&#xff09;中的Architecture含义具有丰富内涵和作用&#xff0c;相比计算机领域的Architecture来说它的单一性、片面性模型是难以描述ISA的全部的&#xff0c;IS…

【SAP-FICO】SAP-FICO生产订单-结算规则配置路径(OKO7)

需求&#xff1a; 作为一个ABAPer&#xff0c;有接到一个狗屁倒灶的配置需求&#xff0c;要求如下&#xff0c;给生产订单的结算规则显示出来 图1&#xff1a;找一个生产订单&#xff0c;显示其结算规则 CO03→菜单栏-表头→结算规则 图2&#xff1a;查看该生产订单&#xff0c…

仿TCMalloc高并发内存池项目介绍

TCMalloc项目介绍 TCMalloc介绍 Thread-Caching Malloc&#xff08;TCMalloc&#xff09;&#xff0c;即线程缓存的malloc&#xff0c;是一种高性能的内存分配器&#xff0c;由Google开发并作为gperftools项目的一部分。TCMalloc旨在提高多线程程序的内存分配性能&#xff0c;通…

smardaten让原型不仅只有原型!

smardaten面向软件研发全流程&#xff0c;从设计、开发、测试、到运维人员均可以基于平台完成一体化的开发工作。 随着平台设计场景下功能与组件的不断完善&#xff0c;在面对招投标、售前演示、需求确认的诉求时&#xff0c;已经有不少企业将软件原型设计的主战场转移至smard…

【进程替换】自定义程序替换 | 替换函数execleexecvpe | execve

目录 自定义程序替换 Makefile mypragma.cc☞mypragma testexec.c☞testexec test.py&test.sh execle&execvpe 1.自定义 testexec.c☞testexec mypragma.cc☞mypragma 2.系统 3.系统修改putenv execve 替换函数总结 自定义程序替换 前面我们举例进程程…

PythonStudio 控件使用常用方式(十一)MessageBox

PythonStudio是一个极强的开发Python的IDE工具&#xff0c;它使用的是Delphi的控件&#xff0c;常用的内容是与Delphi一致的。但是相关文档并一定完整。现在我试试能否逐步把它的控件常用用法写一点点&#xff0c;也作为PythonStudio的参考。 MessageBox是一个消息对话框&…

docker八大架构之应用服务集群架构

应用服务集群架构 在之前&#xff0c;一个应用层要负责所有的用户操作&#xff0c;但是有时用户增加后就会导致供不应求的现象&#xff08;单个应用不足以支持海量的并发请求&#xff0c;高并发的时候站点响应变慢&#xff09;&#xff0c;这时就需要增加应用层服务器&#xf…

报表-设计器的使用

1、设计器目录结构 报表设计器以压缩包的方式提供&#xff0c;解压后&#xff0c;目录结构如下&#xff1a; 目录说明&#xff1a; 1、jdk-17&#xff1a;压缩包中自带的windows平台下的jdk17 2、lite-report&#xff1a;报表文件和数据源配置文件的保存位置 3、lite-repor…

无人售货机零售项目ECharts展现(最全!!,文档放最后哦!)

目录 背景 数据表 框架分析 可视化展示销售情况总分析 1、绘制仪表盘展示各特征及其环比增长率&#xff08;仪表盘&#xff09; 1. 销售金额及其环比增长率 2. 订单量及其环比增长率 3. 毛利率及其环比增长率 4.售货机数量及其环比增长率 2、绘制簇状柱状-折线图展示…

Controlnet作者张吕敏又一强力新作IC-Light,对图像进行重打光操作,不要太贴心了!

不论是否玩过AI绘画&#xff0c;光照/光照会影响一张照片的质量及完美度&#xff0c;好的光影对照片起到了画龙点睛的作用&#xff0c;更有助于提升电影质感 而在AI绘画中光影控制仅凭提示词&#xff0c;并不能准确细致满足我们的需要。所以Controlnet作者张吕敏新开发了一个重…

【Pychart】jupyter中pyecharts无法显示问题无法使用/No module named pyecharts

无法显示或No module&#xff0c;一般就是更换python版本后&#xff0c;没有在新的python里安装jupyter&#xff1b;另外原因就是引用方式问题&#xff0c;就是import方式不对&#xff1b;都解决后&#xff0c;有报错没有add&#xff0c;或者str问题。 最后的解决方案竟然是bin…

如何通过iptables配置URL过滤黑名单?

正文共&#xff1a;1555 字 16 图&#xff0c;预估阅读时间&#xff1a;2 分钟 我们前面曾经简单介绍过URL过滤功能&#xff08;URL过滤功能了解一下&#xff1f;&#xff09;&#xff0c;并且以H3C VFW为例简单配置了一下URL过滤功能。 首先回顾一下&#xff0c;URL过滤&#…

Linux线程(三)死锁与线程同步

目录 一、什么是死锁 死锁的四个必要条件 如何避免死锁 避免死锁算法 二、Linux线程同步 三 、条件变量 1、条件变量基本原理 2、条件变量的使用 3、条件变量使用示例 为什么 pthread_cond_wait 需要互斥量? 一、什么是死锁 死锁是计算机科学中的一个概念&#xff0c;…

C++指针和动态内存分配细节,反汇编,面试题05

文章目录 20. 指针 vs 引用21. new vs malloc 20. 指针 vs 引用 指针是实体&#xff0c;占用内存空间&#xff0c;逻辑上独立&#xff1b;引用是别名&#xff0c;与变量共享内存空间&#xff0c;逻辑上不独立。指针定义时可以不初始化&#xff1b;引用定义时必须初始化。指针的…

物理机转换成虚拟机之linux

文章目录 注意事项环境准备网络拓扑VMware Converter开始转换 注意事项 目标系统-vCenter-ESXI-VMwareConverter网络必须是互通的&#xff0c;否则&#xff0c;会卡在1% 环境准备 vCenteresxiVMware Converter 网络拓扑 VMware Converter开始转换

20 分页:较小的表

目录 简单的解决方案&#xff1a;更大的页 混合方法&#xff1a;分页和分段 多级页表 详细的多级示例 超过两级 ​编辑地址转换过程&#xff1a;记住TLB 反向页表 将页表交换到磁盘 之前提到的一个问题&#xff1a;就是页表太大&#xff0c;假设一个 32 位地址空间&…

如何进行资产梳理(信息收集)

前言 渗透测试流程 线路一:渗透测试人员 1.域名收集--(备案收集) 1.1在线收集子域名 1.1.1 站长之家 1.1.2 IP138网站 1.1.3 查子域 1.1.4 RapidDNS 1.1.5 聚名 1.1.6 Crt.sh 1.1.7 googleHack 1.2工具和资产测绘收集子域名 1.2.1 oneforall(最好用,最全面) 1.2.…

火山引擎VeDI:A/B测试平台指标能力升级,助力企业提升精细化运营效率

在数字化浪潮的推动下&#xff0c;数据分析与精细化运营已成为企业提升竞争力的关键。近日&#xff0c;火山引擎A/B测试DataTester完成了指标能力的全面升级&#xff0c;为企业在流量竞争激烈的市场中提供了更强大、更可信的数据支持。 此次升级亮点在于引入了“按某个属性去重…