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; 抽象工厂模…

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

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

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

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

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;很重…

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;定…

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工具的简单方法…

先验分布、后验分布、极大似然的一点思考

今天和组里同事聊天的时候&#xff0c;无意中提到了贝叶斯统计里先验分布、后验分布、以及极大似然估计这三个概念。同事专门研究如何利用条件概率做系统辨识的&#xff0c;给我画了一幅图印象非常深刻&#xff1a; 其中k表示时序关系。上面这个图表示后验分布是由先验分布与似…

2024年云服务器ECS价格表出炉——阿里云

2024年阿里云服务器租用费用&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核4G服务…

深入理解TCP的四次分手过程

文章目录 深入理解TCP的四次分手过程四次分手的意义四次分手的工作原理四次分手的重要性实际应用中的考虑结论补充:TIME_WAIT在哪一步?TIME_WAIT状态的目的TIME_WAIT状态的影响 深入理解TCP的四次分手过程 在网络通信中&#xff0c;TCP&#xff08;传输控制协议&#xff09;确…

在Linux/Ubuntu/Debian中使用7z压缩和解压文件

要在 Ubuntu 上使用 7-Zip 创建 7z 存档文件&#xff0c;你可以使用“7z”命令行工具。 操作方法如下&#xff1a; 安装 p7zip&#xff1a; 如果你尚未在 Ubuntu 系统上安装 p7zip&#xff08;7-Zip 的命令行版本&#xff09;&#xff0c;你可以使用以下命令安装它&#xff1a;…

Gitlab光速发起Merge Request

前言 在我们日常开发过程中需要经常使用到Merge Request&#xff0c;在使用过程中我们需要来回在开发工具和UI界面之前来回切换&#xff0c;十分麻烦。那有没有一种办法可以时间直接开发开工具中直接发起Merge Request呢&#xff1f; 答案是有的。 使用 Git 命令方式创建 Me…

Unity资源热更新----AssetBundle

13.1 资源热更新——AssetBundle1-1_哔哩哔哩_bilibili Resources 性能消耗较大 Resources文件夹大小不能超过2个G 获取AssetBundle中的资源 打包流程 选择图片后点击 创建文件夹&#xff0c;Editor优先编译 打包文件夹位置 using UnityEditor; using UnityEngine; public cla…

ideaSSM社区二手交易平台C2C模式开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea ssm 社区二手交易平台系统是一套完善的完整信息管理系统&#xff0c;结合SSM框架完成本系统SpringMVC spring mybatis &#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码…