Vue手写模拟步骤条

效果图:

如果要使用element的步骤条就需要强行修改样式,参考之前的那篇步骤条。这里我采用手写div

代码:

思路是给最外层的div一个左边框,给里面的step-item设置左边框为图片,通过定位来移动。

 <div class="mock-step">  最外层的div<div class="step-item"> <span class="item-date">2024-01-21</span><span class="item-price">¥1,099,000</span></div><div class="step-item"><span class="item-date">2024-01-21</span><span class="item-price">¥1,099,000</span></div><div class="step-item"><span class="item-date">2024-01-21</span><span class="item-price">¥1,099,000</span></div></div>
 样式:

第一步中其实还有个属性叫 background-position也可以移动背景图片,但是我图定位方便;

其他样式属性我删掉了,只留了关键点;

    .mock-step {border-left: 1px solid rgb(238, 238, 238);.step-item {position: relative;   移动divleft: -4px;background-image: url('../../assets/insure/step-icon.png');  圈圈背景图 background-repeat: no-repeat;background-size: 8px 8px;height: 33px;display: flex;justify-content: space-between;.item-date {position: relative;  自行修改top: -4px;}.item-price {position: relative;top: -4px;}}}.mock-step:last-child .step-item:last-child {height: auto !important;}
方法二:

去掉了用图片做边框。直接将图片放在里面。用grid定位

修改版本.step-item {position: relative;left: -4px;// background-image: url('../../assets/insure/step-icon.png');// background-position: left;background-repeat: no-repeat;background-size: 8px 8px;// padding-left: 14px;padding-right: 12px;height: 33px;// display: flex;// justify-content: space-between;display: grid;grid-template-columns: repeat(3, 15px 60% 35%);
}
总结: 

但是这样会导致最后一个会有一点点超出,虽然做了处理还是比较明显,不知道优化了。有没有建议哦? 

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

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

相关文章

Canal实现mysql与缓存同步

什么是Canal Canal是阿里巴巴旗下的一款开源项目, 基于java开发. Canal是基于mysql的主从同步来实现的. github地址: https://github.com/alibaba/canal Canal把自己伪装成MySQL的一个slave节点, 从而监听master的binary log变化. 再把得到的变化信息通知给Canal的客户端, 进而…

个人简历主页搭建系列-02:github 仓库作为联系方式

这篇文章暂时没有开始正式搭建网站。首先是最重要的注意事项&#xff1a;隐私。 真实姓名如果大家自己不介意的话其实我觉得还好&#xff0c;现在在互联网上想扒个姓名挺简单的&#xff0c;而且很多人都实名上网hh&#xff08;比如我的几位田径队学弟笑&#xff09;。 电话&a…

小程序学习3 goods-card

pages/home/home home.wxml <goods-listwr-class"goods-list-container"goodsList"{{goodsList}}"bind:click"goodListClickHandle"bind:addcart"goodListAddCartHandle"/> <goods-list>是一个自定义组件&#xff0c;它具…

[抽象]工厂模式([Abstract] Factory)——创建型模式

[抽象]工厂模式——创建型模式 什么是抽象工厂&#xff1f; 抽象工厂模式是一种创建型设计模式&#xff0c;让你能够保证在客户端程序中创建一系列有依赖的对象组时&#xff0c;无需关心这些对象的类型。 具体来说&#xff1a; 对象的创建与使用分离&#xff1a; 抽象工厂模…

python常用库之WSGI工具包werkzeug

文章目录 python常用库之WSGI工具包werkzeug什么是Werkzeug功能特性 安装使用werkzeug.datastructures.FileStorage python常用库之WSGI工具包werkzeug 什么是Werkzeug 官网&#xff1a;https://palletsprojects.com/p/werkzeug/ 官方文档&#xff1a;https://werkzeug.palle…

信号与系统学习笔记——信号的分类

目录 一、确定与随机 二、连续与离散 三、周期与非周期 判断是否为周期函数 离散信号的周期 结论 四、能量与功率 定义 结论 五、因果与反因果 六、阶跃函数 定义 性质 七、冲激函数 定义 重要关系 作用 一、确定与随机 确定信号&#xff1a;可以确定时间函数…

HTML5、CSS3面试题(一)

1、H5 的新特性有哪些&#xff1f;C3 的新特性有哪些&#xff1f;&#xff08;必会&#xff09; H5 新特性 1、拖拽释放(Drap and drop) API ondrop 拖放是一种常见的特性&#xff0c;即抓取对象以后拖到另一个位置 在 HTML5 中&#xff0c;拖放是标准的一部分&#xff0c;任…

uniapp移动端 IOS系统下无法与webview通信

不知道有没有人遇到过这个问题 我的页面嵌套了一个webview&#xff08;文件位于项目的hybrif/html&#xff09;目录下 使用evalJS与webview进行通信 代码如下 在安卓里运行是没问题的&#xff0c;但在苹果手机上一直无法通信 连接真机&#xff0c;打印evalJS是个方法&#xf…

GEE:关于遥感生态指数(RSEI)的若干疑问

作者:CSDN @ _养乐多_ 本文记录了若干关于在 Google Earth Engine (GEE)平台上,计算基于主成分分析(PCA)的遥感生态指数(RSEI)的问题。并记录了解决这些问题的一些答案。问题包括,主成分分析的特征值的正负,主成分的占比,去云后空值像素的处理方法,异常值处理方法…

C语言中内存函数的使用

memcpy函数的使用和模拟实现 memcpy的使用 函数使用说明&#xff1a; • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0c;复制的结…

【python】centos 8新装python3.10.0

1.python源码包准备 2.gcc环境安装 如果系统已具备&#xff0c;可以略过。 有的已经自带了gcc&#xff0c;但是如果编译时启动优化的话&#xff0c;如果gcc版本过老就必须要升级。 3.make环境安装 如果系统已具备&#xff0c;可以略过。 4.更新openssl版本&#xff08;很重…

【ES6】let与const

目录 let命令 作用域 无变量提升 不允许重复声明 暂时性死区 块级作用域 函数能否在块级作用域中声明 const命令 let命令 作用域 ES6 新增了let命令&#xff0c;用来声明变量。它的用法类似于var&#xff0c;但是作用域不同&#xff0c;let命令只在所在的代码块内…

C# 根据两点名称,寻找两短路程的最优解,【有数据库设计,完整代码】

前言 如果我们遇到路径问题&#xff0c;可以使用点点连线&#xff0c;给定一个点&#xff0c;可以到达另外几个点&#xff0c;寻找最优解 例&#xff1a;如下图所示&#xff0c;如果要从A1-C1,可以有三条路 1.A1-B1-C1 2.A1-B2-C1 3.A1-B3-C1 最优解肯定是A1-B1-C1&#xff0c…

Java代码审计安全篇-XXE(XML外部实体注入)漏洞

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计&#xff0c;记录自己的学习过程&#xff0c;还希望各…

软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02

一、生成器模式 1-1、意图 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 1-2、结构图 Builder 为创建一个 Product 对象的各个部件指定抽象接口。ConcreteBuilder 实现 Builder 的接口以构造和装配该产品的各个部件&#xff0c;定…

3.14word直播知识点

word图表&#xff1a; 找到数据源→插入→图表→组合→带数据标签的折线图&#xff08;次要坐标轴&#xff09;→设计选项卡→切换行列&#xff08;excel不能关&#xff09;→&#xff08;单击右键&#xff0c;设置数据系列格式&#xff09;设置最大最小值→刻度单位→标签为无…

docker部署mysql5

1. 进入面板 2. 新建挂载文件夹 新建三个文件夹: mkdir -p /docker/mysql5/config && mkdir -p /docker/mysql5/data && mkdir -p /docker/mysql5/logsconfig&#xff1a;存放mysql配置data&#xff1a;存放mysql数据logs&#xff1a;存放mysql记录日志 3.…

css设置选中文字和选中图片字的颜色

要改变页面中选中文字的颜色&#xff0c;可以使用 CSS 的 ::selection 伪元素来实现 *::selection {/* 改变选中文字的背景色 */background-color: #c42121;/* 改变选中文字的文本颜色 */color: #fff; } 用通配符选择器给所有元素都加上了 ::selection伪元素&#xff0c;用于…

GPT实战系列-如何让LangChain的Agent选择工具

GPT实战系列-如何让LangChain的Agent选择工具 LangChain GPT实战系列-LangChain如何构建基通义千问的多工具链 GPT实战系列-构建多参数的自定义LangChain工具 GPT实战系列-通过Basetool构建自定义LangChain工具方法 GPT实战系列-一种构建LangChain自定义Tool工具的简单方法…

这个不需要吗 HttpServletRequest req

这个不需要吗 HttpServletRequest req 在这个特定场景下&#xff0c;您在OnlineStudentFeignService接口中确实不需要直接使用HttpServletRequest对象。因为Feign是一个声明式的HTTP客户端&#xff0c;它的设计目标是简化服务间的远程调用&#xff0c;它并不直接处理原始的HTT…