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;   移动div
                left: -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%);
}
总结: 

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

opencv中的图像均值模糊—blur

平均模糊是通过对图像的每个像素及其周围像素的值求平均来实现的。 blur函数通过计算输入图像image中每个像素及其邻域内像素的平均值来工作。 // 图像卷积 void QuickDemo::Conv_image_demo(Mat &image) {Mat dst;blur(image, dst, Size(3, 3), Point(-1, -1));// Point(…

增删卜易——八宫六十四卦

之前看倪海厦的《天纪》笔记里面提到了六十四卦世应,觉得不知道这个世应是啥意思。很长时间就没看了,偶然间看到了张文江教授写的一本书《潘雨廷先生谈话录》提到了《卜筮正宗》,“卜筮最后的判断是非理性转义,其他一切都只是形式”,“明人的著作,从京氏易出,如今天几日…

#微信小程序(一个emo文案界面)

1.IDE&#xff1a;微信开发者工具 2.实验&#xff1a;一个emo文案界面 &#xff08;1&#xff09;最好使用rpx &#xff08;2&#xff09;图片宽度占不满&#xff0c;在CSS中设置width为100% &#xff08;3&#xff09;imag图片全部为网页链接图片 3.记录 4.代码 index.htm…

【图论】计算图的n-hop邻居个数,并绘制频率分布直方图

计算图的n-hop邻居个数&#xff0c;并绘制频率分布直方图 在图论中&#xff0c;n-hop邻居&#xff08;或称为K-hop邻居&#xff09;是指从某个顶点出发&#xff0c;通过最短路径&#xff08;即最少的边数&#xff09;可以到达的所有顶点的集合&#xff0c;其中n&#xff08;或…

[linux]信号处理:信号编码、基本API、自定义函数和集合操作的详解

一、信号的概述 1、定义 信号是 Linux 进程间通信的最古老的方式。信号是软件中断&#xff0c;它是在软件层次 上对中断机制的一种模拟&#xff0c;是一种异步&#xff08;不等待&#xff09;通信的方式 。信号可以导致一个正在运行的进程被 另一个正在运行的异步进程中断&a…

Qt_vc++崩溃日志分析

环境 Clion &#xff1a;2019.3.6 Qt &#xff1a;5.9.6&#xff08;vc2015&#xff09; 编译工具&#xff1a;vs2015 update3 崩溃日志收集 自行百度&#xff0c;会查到很多&#xff0c;一下代码仅供参考&#xff08;来自https://blog.csdn.net/weixin_45571586/article/…

修改vscode的相对路径计算逻辑

vscode的相对路径计算逻辑是&#xff0c;"./"表示当前项目的文件夹&#xff0c;而不是当前文件所在的文件夹 做出如下修改&#xff1a; File-->Preferences-->settings 搜索Execute in File Dir , 然后取消勾选

医学图像目标跟踪论文阅读笔记 2024.03.08~2024.03.14

“Inter-fractional portability of deep learning models for lung target tracking on cine imaging acquired in MRI-guided radiotherapy” 2024年 期刊 Physical and Engineering Sciences in Medicine 医学4区 没资源&#xff0c;只读了摘要&#xff0c;用的是U-net、a…

79岁TVB老戏骨宣布离巢另寻生计。

以童星身份出道的香港资深艺人冯素波&#xff08;波姐&#xff09;纵横影视圈超过70年&#xff0c;不少人认识她还是在TVB剧中&#xff0c;不过她昨日却突然宣布要离开TVB&#xff0c;令不少网友震惊。 其实早在几个月前已经有消息称波姐会离开TVB&#xff0c;不过本人一直没有…

爬虫逆向实战(35)-MyToken数据(MD5加盐)

一、数据接口分析 主页地址&#xff1a;MyToken 1、抓包 通过抓包可以发现数据接口是/ticker/currencyranklist 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有一个code参数 请求头是否加密&#xff1f; 无 响应是否加密&#xf…

【数学建模】线性规划

针对未来可能的数学建模比赛内容&#xff0c;我对学习的内容做了一些调整&#xff0c;所以先跳过灰色关联分析和模糊综合评价的代码&#xff0c;今天先来了解一下运筹规划类——线性规划模型。 背景&#xff1a; 某数学建模游戏有三种题型&#xff0c;分别是A&#xff0c;B&am…

架构实战--以海量存储系统讲解热门话题:分布式概念

关注我&#xff0c;持续分享逻辑思维&管理思维&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 有意找工作的同学&#xff0c;请参考博主的原创&#xff1a;《面试官心得--面试前应该如何准备》&#xff0c;《面试官心得--面试时如何进行自…

Jmeter扩展开发--自定义java取样器

简介 jmeter内置了包括&#xff1a;http、https、tcp等各种协议的支持&#xff0c;通常情况只需要做简单的参数配置即可使用。但在某些特殊情况下&#xff0c;还是希望能做自定义压测处理&#xff0c;此时就涉及Jmeter的扩展开发自定义Java取样器&#xff0c;如下图所示&#…

QT 如何防止 QTextEdit 自动滚动到最下方

在往QTextEdit里面append字符串时&#xff0c;如果超出其高度&#xff0c;默认会自动滚动到QTextEdit最下方。但是有些场景可能想从文本最开始的地方展示&#xff0c;那么就需要禁止自动滚动。 我们可以在append之后&#xff0c;添加如下代码&#xff1a; //设置编辑框的光标位…

HTML 列表 || 表格 || 表单

目录 1. 列表1.1 无序列表1.2 有序列表1.3 定义列表 2. 表格2.1 表格基本标签2.2 表格结构标签2.3 合并单元格 3. 表单3.1 input 标签基本使用3.1.1 单选框 radio3.1.2 上传文件 file3.1.3 多选框 checkbox 3.2 表单下拉菜单3.3 表单文本域3.4 label 标签3.5 按钮 button 正文开…

想要自己制作一款游戏,需要掌握哪些基本技能?

你是否曾经沉浸在游戏的世界中&#xff0c;感受到游戏带来的无限乐趣&#xff1f;你是否曾经梦想能够亲手制作一款属于自己的游戏&#xff0c;为玩家带来独特的体验&#xff1f;然而&#xff0c;要实现自己的游戏创作梦想&#xff0c;并不是一件轻松的事情。需要掌握各种技能和…

mac【启动elasticsearch报错:can not run elasticsearch as root

mac【启动elasticsearch报错&#xff1a;can not run elasticsearch as root 问题原因 es默认不能用root用户启动&#xff0c;生产环境建议为elasticsearch创建用户。 解决方案 为elaticsearch创建用户并赋予相应权限。 尝试了以下命令创建用户&#xff0c;adduser esh 和u…

uniapp中人脸识别图片并圈起人脸

效果如上&#xff0c;我用的是阿里云的人脸识别。首先&#xff0c;我们先封装一个阿里云的请求js文件 faceRecognition.js import CryptoJS from crypto-js//SignatureNonce随机数字 function signNRandom() {const Rand Math.random()const mineId Math.round(Rand * 1000…

visual studio 中添加qt类报错问题

添加ImportSetting类&#xff0c;在构造函数声名处已经写Q_OBJECT宏&#xff0c;但仍然报错。 无法解析的外部符号"public::virtual struct QMetaObject const*_cdecl ImportSettingFromFile::metaObject(void)const "(?metaObjectImportSettingFromFileUEBAPEBUQM…

Spring boot创建第一个项目

作者简介&#xff1a; zoro-1&#xff0c;目前大二&#xff0c;正在学习Java&#xff0c;数据结构&#xff0c;spring等 作者主页&#xff1a; zoro-1的主页 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; Spring boot创建第一个项目 sp…