手写一个uniapp的步骤条组件

news2024/12/24 0:49:44

在template实现

<template>
	<view class="process_more">
		<!-- 步骤条 -->
			<view class="set-2" :key="index" v-for="(item,index) in options">
                <!-- 图片 -->
                <view class="img-border">
                    <view class="left_img"></view>
                </view>
				<view v-if='index!=0' class="left_line_up"></view>
				<view v-if='index!=options.length-1' class="left_line_down"></view>
				<view class="set-view">
					<view class="set-view-test">
                        <view class="set-view-test2">{{item.time}}</view>
					</view>
					<view class="set-view-test3">{{item.text1}}</view>

				</view>
			</view>
		</view>
</template>

js中(样式图大概是,可以随意替换图片等)

// 步骤条
				options: [{
						text1: '打卡时间 09:01:01',
						time: '上班打卡 09:01:01'
					},
					{
						text1: '2022-5-21 2:00:12',
						time: '下班打卡'
					},
				]

CCS里面实现 

<style lang="scss">
	/* 时间线 */
	.process_more {
		background-color: #fff;
	}

	.process_text {

		position: relative;

		.process_left {
			position: absolute;
			top: 170rpx;
			left: 40rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.set-2:last-child::after {
		display: none;
	}

	.set-2 {
		border-radius: 10rpx;
		width: 600rpx;
		margin-left: 100rpx;
		margin-top: 60rpx;
		position: relative;

		.set-view {
			width: 493rpx;

			.set-view-test {
				margin: 0 auto;
				padding-top: 26rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.set-view-test2 {
					width: 100%;
					height: 26rpx;
					font-family: Gibson;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.set-view-test3 {
				margin: 0 auto;
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	/* 普通 */
	.set-2 .img-border {
		width: 18rpx;
		height: 17rpx;
		background: gray;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		margin-top: -1rpx;
		left: -58rpx;
		z-index: 100;

	}

	/* 特殊 */
	.set-2:nth-of-type(1)>.img-border {
		width: 38rpx;
		height: 38rpx;
		background: #4B74F1;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		margin-top: -3rpx;
		left: -68rpx;
		z-index: 100;
	}

	.set-2:nth-of-type(1) .left_img {
		border-radius: 50%;
		width: 16rpx;
		height: 16rpx;
		background: #4B74F1;
		top: 50%;
		margin-top: 13rpx;
		margin-left: 10rpx;
	}

	.left_line_up {
		position: absolute;
		top: 0;
		left: -52upx;
		height: 50%;
		margin-top: -22rpx;
		border-style: solid;
		border-left: 1rpx;
		border-color: #ccc;

	}

	.left_line_down {
		position: absolute;
		top: 50%;
		left: -52upx;
		height: 60%;
		margin-top: 22rpx;
		border-style: solid;
		border-left: 1rpx;
		border-color: #ccc;
	}
</style>

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

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

相关文章

造物者:专注游戏音乐创造——奏响游戏世界乐章

游戏的世界宛如一幅壮丽的画卷&#xff0c;由华丽的图像和引人入胜的故事构成&#xff0c;然而&#xff0c;其完美之作还有一部分不可或缺的元素&#xff0c;那就是音乐。在这个数字时代&#xff0c;北京造物者科技有限公司&#xff08;以下简称造物者&#xff09;正崭露头角&a…

【RP-RV1126】配置一套简单的板级配置

文章目录 官方配置新建一套新配置新建板级pro-liefyuan-rv1126.mk配置文件新建一个Buildroot的defconfigs文件 吐槽&#xff1a;RP-RV1126 的SDK奇怪的地方make ARCHarm xxx_defconfig 生成的.config文件位置不一样savedefconfig命令直接替换原配置文件坑爹的地方 Buildroot上增…

【本周骑行香杆箐活动简介】- 探索秋天的美景与健康同行

校长骑行的骑友们&#xff0c;大家好&#xff01;在这个秋高气爽的季节里&#xff0c;是不是已经跃跃欲试&#xff0c;想要投入大自然的怀抱&#xff0c;感受那无比清新的空气和金黄色的落叶呢&#xff1f;别再犹豫了&#xff0c;让我们一起骑行在香杆箐&#xff0c;体验一次不…

91 前K个高频元素

前K个高频元素 题解1 大根堆(STL) 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2] 示例 2: 输入: nums [1], k 1 输出: [1] 提示&#xff1a;…

KADP应用加密组件实现数据动态脱敏 安当加密

动态脱敏是一种针对敏感数据进行数据抽取、数据漂白和动态掩码的专业数据脱敏技术。它通过在不动数据库中原始数据的前提下&#xff0c;依据用户的角色、职责和其他IT定义身份特征&#xff0c;动态的对生产数据库返回的数据进行专门的屏蔽、加密、隐藏和审计。可确保不同级别的…

双十一数码推荐什么?双十一选购攻略大全!实用数码产品推荐!

​在双十一这个购物狂欢节里&#xff0c;各大品牌和商家都会推出各种优惠活动&#xff0c;为消费者提供丰富的购物选择。在这个特殊的日子里&#xff0c;你是否也准备为自己或亲朋好友选购一些数码好物呢?本次推荐将为你精选一些值得购买的数码产品&#xff0c;让你在双十一这…

MATLAB和西门子SMART PLC OPC通信

西门子S7-200SMART PLC OPC软件的下载和使用,请查看下面文章 Smart 200PLC PC Access SMART OPC通信_基于pc access smart的opc通信_RXXW_Dor的博客-CSDN博客文章浏览阅读2.7k次,点赞2次,收藏5次。OPC是一种利用微软COM/DCOM技术达成自动控制的协议,采用典型的C/S模式,针…

(01)Mycat说明与介绍

1、Mycat是什么 Mycat是一个数据库中间件&#xff0c;前身是阿里的cobar。 2、Mycat可以用来做什么 1.读写分离 2.数据分片 &#xff08;1&#xff09;垂直拆分 &#xff08;2&#xff09;水平拆分 &#xff08;3&#xff09;垂直水平拆分 3.多数据源整合 3、Mycat实现的…

前端出大事儿了

大家好&#xff0c;我是风筝 文章首发于 前端出大事儿了 最近这两天&#xff0c;在前端圈最火的图片莫过于下面这张了。 这是一段 React 代码&#xff0c;就算你完全没用过 React 也没关系&#xff0c;一眼看过去就能看到其中最敏感的一句代码&#xff0c;就是那句 SQL 。 咱…

Linux安装sysv-rc-conf报错:出现NO_PUBKEY...问题,急需安装证书的情况

Linux下安装MySQL时&#xff0c;出现一个使用chkconfig命令&#xff0c;但无该命令的情况&#xff01; chkconfig --add mysql # 出现chkconfig command not found于是就展开了一次替换的行动&#xff0c;将chkconfig替换为sysv-rc-conf 第一步&#xff1a; 尝试直接安装&am…

最新阿里云服务器优惠价格表,企鹅看了瑟瑟发抖!

今年2023年阿里云双十一优惠活动云服务器价格太低了&#xff0c;比腾讯云都便宜&#xff0c;轻量2核2G服务器3M带宽优惠价87元一年、2核4G4M带宽优惠价165元一年&#xff0c;云服务器ECS经济型e实例2核2G3M固定带宽优惠价格99元一年&#xff0c;还有2核4G、2核8G、4核8G、4核16…

Leetcode刷题---轮转数组

轮转数组 题目描述&#xff1a; Java中List是有序、可重复的单列集合&#xff0c;集合中的每个元素都有对应的顺序索引&#xff0c;我们可以通过该索引来访问指定位置上的集合元素。 思路&#xff1a; 首先选用list来存储中间结果。首先用k对n(数组长度)求余获取要移动的位数…

2023年【P气瓶充装】最新解析及P气瓶充装考试技巧

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 P气瓶充装最新解析参考答案及P气瓶充装考试试题解析是安全生产模拟考试一点通题库老师及P气瓶充装操作证已考过的学员汇总&#xff0c;相对有效帮助P气瓶充装考试技巧学员顺利通过考试。 1、【多选题】LNG加气站有哪些…

手把手教你使用媲美人声的AI配音神器

1、找到微信小程序界面 2、搜索番茄AI配音&#xff0c;找到番茄AI配音图标&#xff0c;点击进入小程序 3、复制粘贴文本到最上方的界面 4、在选择主播的地方&#xff0c;选择自己喜欢的主播声音 5、然后点击制作语音图标&#xff0c;制作成功之后可以试听一下 6、觉得满意之后&…

台灯太亮会导致近视吗?精选高品质的台灯

台灯相信很多家庭都会备上一台&#xff0c;用于办公、休闲或者给孩子学习使用&#xff0c;如果使用的台灯亮度过高的话&#xff0c;可能会对视力造成一定的影响&#xff0c;尤其是夜晚的时候。建议是选择带有亮度调节功能的台灯会比较好一点&#xff0c;可以自行根据周围环境的…

Winclone pro v10.2(Boot Camp分区备份还原工具)

Winclone Pro 10是一款专为Mac用户设计的高级Windows系统备份和迁移工具。它提供了强大而易于使用的功能&#xff0c;让用户能够轻松地创建、克隆和还原Windows系统&#xff0c;并在Mac上运行。 Winclone Pro 10的主要特点包括&#xff1a; 完整的系统备份和还原&#xff1a;…

右击文件或者文件夹使用vscode打开

平常我们在打开项目时&#xff0c;经常会需要快捷打开方式&#xff0c;直接使右键使用编辑器打开&#xff0c;但是有时在安装时忘记了选择 “Add “Open with Code” action to Windows Explorer file context menu” 在Windows资源管理器文件上下文菜单中添加“用代码打开”操…

初识Vue 输出Hello World 及注意事项

在我们还没接触Vue之前&#xff0c;我同学常说我可以直接在元素里输出JS的表达式吗&#xff1f;肯定是不太行。当我们接触vue.js后&#xff0c;这个想法成了现实。 每当我们学习一门新的语言或者框架时&#xff0c;我们都习惯打印一个“hello world”&#xff0c;在我们vue当中…

找到数组中出现一种/两种奇数——异或运算

找到数组中出现一种/两种奇数 题目&#xff1a;一个数组有一种数出现了奇数次&#xff0c;其他数都出现了偶数次&#xff0c;怎么找到并打印这个数&#xff1f; trick 因为异或运算有个特点&#xff0c;满足交换律和结合律&#xff0c;同时有两个重要的特点&#xff1a; n^n…

页面淘汰算法模拟实现与比较

1.实验目标 利用标准C 语言&#xff0c;编程设计与实现最佳淘汰算法、先进先出淘汰算法、最近最久未使用淘汰算法、简单 Clock 淘汰算法及改进型 Clock 淘汰算法&#xff0c;并随机发生页面访问序列开展有关算法的测试及性能比较。 2.算法描述 1. 最佳淘汰算法&#xff08;Op…