uni-app纵向步骤条

分享一下项目中自封装的步骤条,存个档~
1. 话不多说,先看效果

2. 话还不多说,上代码
<template><!-- 获取一个数组,结构为[{nodeName:"流程发起"isAudit:falsetime:"2024-02-04 14:27:35"otherData:{assignee:{userId:"465"name:"XXX"company:"测试产业单位1"tenantId:"140"}}] --><view class="bg"><view class="steps"><view class="steps_item" v-for="(i, index) in infoList" :key="index"><view class="s_r"><view class="line" :style="{ backgroundColor: index != 0 ? '#EAEAEA' : 'rgba(0,0,0,0)' }"></view><view class="index" :style="{ backgroundColor: backgroundColor, color: color }"></view><viewclass="line":style="{ backgroundColor: index != infoList.length - 1 ? '#EAEAEA' : 'rgba(0,0,0,0)' }"></view></view><view class="s_l"><view class="info_item"><!-- 真是节点名称、时间 --><view class="top_info"><view class="title">{{ i.nodeName }}</view><view class="date">{{ i.time }}</view></view><view class="info"><!-- 是否为审批节点,审批节点可显示审批状态 --><template v-if="i.isAudit"><viewclass="audit-status"v-if="i.status === '1'":style="`background-color:${auditStatus(2).bgColor};color:${auditStatus(2).color}`">{{ auditStatus(2).text }}</view><viewclass="audit-status"v-else:style="`background-color:${auditStatus(3).bgColor};color:${auditStatus(3).color}`">{{ auditStatus(3).text }}</view></template><!-- 是否有其他信息需要展示,如审批人、签名、原因等 --><template v-if="i.otherData"><view class="text-grey" v-if="i.otherData.assignee">{{ i.otherData.assignee.name }} <text class="ml5"></text>{{ i.otherData.assignee.company }}</view><view class="mt10" v-if="i.otherData.sign"><imagestyle="width: 320rpx"mode="widthFix":src="i.otherData.sign"@click="handlePreview(i.otherData.sign)"/></view><view class="text-grey mt10" v-if="i.otherData.comment"> 原因:{{ i.otherData.comment }} </view></template></view></view></view></view></view></view>
</template><script>
export default {name: 'YSteps',props: {infoList: {type: Array,default: [],},color: {type: String,default: '#fff',},backgroundColor: {type: String,default: '#ff3838',},lineNum: {type: Number,default: 0,},},methods: {// 审核状态auditStatus(i) {if (i == 2) {return {text: '通过',color: '#00D288',bgColor: '#EAFFF8',}} else if (i == 3) {return {text: '驳回',color: '#FF4141',bgColor: '#FFDCD5',}}},handlePreview(url) {uni.previewImage({ urls: [url] })},},
}
</script><style lang="scss" scoped>
.steps {display: flex;flex-direction: column;.steps_item {display: flex;.s_r {padding: 0 20rpx;display: flex;flex-direction: column;align-items: center;.line {flex: 1;width: 5rpx;border-left: 4rpx dashed #fff;}.index {width: 24rpx;height: 24rpx;border-radius: 50rpx;border: 4rpx solid #e3eeff;box-sizing: border-box;}}.s_l {display: flex;flex-direction: column;padding: 20rpx 0;flex: 1;.info_item {background-color: #ffffff;margin-right: 30rpx;border-radius: 10rpx;display: flex;flex-direction: column;justify-content: center;padding: 30rpx 0;.top_info {display: flex;align-items: center;justify-content: space-between;}text {font-size: 24rpx;font-weight: 500;color: rgba(51, 51, 51, 1);}.title {width: calc(100vw - 330rpx);font-size: 28rpx;font-weight: 500;color: rgba(102, 102, 102, 1);overflow: hidden;text-overflow: ellipsis;display: -webkit-box;flex-direction: column;}.info {font-size: 24rpx;color: #afb4be;margin-top: 10rpx;}.date {font-size: 23rpx;color: #afb4be;}.audit-status {float: right;width: 120rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 22rpx;background: #eafff8;border-radius: 20rpx;}}.info_item:active {background-color: #f4f4f4;}}}
}
.ml5 {margin-left: 10rpx;
}
.mt10 {margin-top: 20rpx;
}
</style>

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

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

相关文章

【Flink】Flink 处理函数之基本处理函数(一)

1. 处理函数介绍 流处理API&#xff0c;无论是基本的转换、聚合、还是复杂的窗口操作&#xff0c;都是基于DataStream进行转换的&#xff0c;所以统称为DataStreamAPI&#xff0c;这是Flink编程的核心。 但其实Flink为了更强大的表现力和易用性&#xff0c;Flink本身提供了多…

Qt程序可执行文件打包

目录 一、新建一个目录二、命令行2.1 添加临时变量2.2 打包命令 三、添加动态库四、普通 Qt 项目打包 Qml 项目打包 笔者写的python程序打包地址&#xff08;https://blog.csdn.net/qq_43700779/article/details/136994813&#xff09; 一、新建一个目录 新目录(例如test)用以…

Vue.js前端开发零基础教学(三)

目录 2.6 计算属性 2.7侦听器 2.8 样式绑定 2.8.1 绑定class属性 2.8.2 绑定style属性 2.9 阶段案例——学习计划表 2.6 计算属性 概念&#xff1a;Vue提供了计算属性来描述依赖响应式数据的复杂逻辑。 计算属性可以实时监听数据的变化&#xff0c;返回一个计算…

真假“长文本”,国产大模型混战

文&#xff5c;郝 鑫 Kimi有多火爆&#xff1f;凭一己之力搅乱A股和大模型圈。 Kimi概念股连日引爆资本市场&#xff0c;多个概念股随之涨停。在一片看好的态势中&#xff0c;谁都想来沾个边&#xff0c;据光锥智能不完全统计&#xff0c;目前&#xff0c;至少有包括读客…

【蓝桥杯知识点】浮点数二分(开n次方根再也不会超时啦!)

今天继续学习基础算法&#xff01;这篇文章介绍了二分的另一种应用——浮点数二分&#xff0c;可以用于开n次方根的计算&#xff0c;会使时间大大缩短&#xff01;我偷偷问过电脑编译器了&#xff0c;它说它喜欢优化过的算法哈哈哈哈~相信你也会喜欢的&#xff01; PS&#xff…

现代化应用部署工具-Docker

Docker 简介 什么是Docker Docker 是一个开源的应用容器引擎&#xff0c;可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上。 Docker部署的优势 通过使用Docker等容器技术&#xff0c;可以将应用程序及其依赖项…

构建品牌故事:Kompas.ai在叙事营销中的应用

引言 在数字化和全球化的浪潮中&#xff0c;品牌建设已经从单一的产品竞争演变为品牌故事的较量。叙事营销&#xff0c;作为一种通过讲述故事来传递品牌价值和理念的策略&#xff0c;已经成为连接品牌与消费者情感的桥梁。本文将深入探讨叙事营销的重要性&#xff0c;详细介绍K…

路由 (hash模式和history模式)

首先我们了解一下资源请求&#xff1a; 1.什么是资源 在浏览器需要某一个数据或文件进行解析或者浏览器在解析某个脚本的时候需要数据进行DOM渲染等工作&#xff0c;那么这个数据或文件就是浏览器的资源 2.资源怎么获取 浏览器的资源都必须通过资源请求的方式或从缓存中调出…

【Java程序设计】【C00371】基于(JavaWeb)Springboot的社区防疫物资申报系统(有论文)

TOC 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;博客中有上百套程序可供参考&#xff0c;欢迎共同交流学习。 项目简介 项目获取 &#x1f345;文末点击卡片…

MapReduce配置和Yarn的集群部署

一、集群环境&#xff0c;还是如下三台服务器 192.168.32.101 node1192.168.32.102 node2192.168.32.103 node3 二、YARN架构 YARN&#xff0c;主从架构&#xff0c;有2个角色 主&#xff08;Master&#xff09;角色&#xff1a;ResourceManager从&#xff08;Slave&#x…

政安晨:【深度学习实践】【使用 TensorFlow 和 Keras 为结构化数据构建和训练神经网络】(三)—— 随机梯度下降

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras实战演绎 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 这篇文章中&#xff0c;咱们将使用Keras和TensorFlow…

看似简单的SQL,实则就是简单

加班遇到一个SQL问题&#xff0c;本想把别人的SQL改下成SparkSQL&#xff0c;在YARN上运行&#xff0c;然而数据一直对不上。 原SQL ⚠️说明&#xff1a;a.id&#xff0c;b.id没有空的&#xff0c;数据1:1&#xff0c;b.name可能存在空的 select a.id,b.id,b.name from tab…

JDK1.6、1.7、1.8内存区域的变化?

JDK1.6、1.7/1.8内存区域发生了变化&#xff0c;主要体现在方法区的实现&#xff1a; JDK1.6使用永久代实现方法区&#xff1a; JDK1.7时发生了一些变化&#xff0c;将字符串常量池、静态变量&#xff0c;存放在堆上 在JDK1.8时彻底干掉了永久代&#xff0c;而在直接内存中划出…

【每日八股】Java基础经典面试题4

前言&#xff1a;哈喽大家好&#xff0c;我是黑洞晓威&#xff0c;25届毕业生&#xff0c;正在为即将到来的秋招做准备。本篇将记录学习过程中经常出现的知识点以及自己学习薄弱的地方进行总结&#x1f970;。 本篇文章记录的Java基础面试题&#xff0c;如果你也在复习的话不妨…

阿里的库存秒杀是如何实现的?

一、阿里的库存秒杀的实现 阿里有很多业务&#xff0c;几十上百个业务线&#xff0c;各自都有一些需要做抢购、秒杀、热点扣将的场景。他们都用哪些方案呢? 我看了很多资料&#xff0c;也找了很多人做交流&#xff0c;最终得到的结论是啥都有&#xff0c;主要总结几个主流的&…

Linux离线部署gitLab及使用教程

一、下载gitLab的linux系统rpm包 地址&#xff1a;Index of /gitlab-ce/yum/el7/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 找到这个最新版 点击下载 二、上传到linux系统 笔者是在windows系统下的vmware虚拟机中部署安装的&#xff0c;虚拟机中安装了cent…

《C++ Primer 第五版 中文版》第12章 动态内存【阅读笔记 + 个人思考】

《C Primer 第五版 中文版》第12章 动态内存【阅读笔记 个人思考】 12.1 动态内存与智能指针12.1.1 shared_ptr类 静态内存包括&#xff1a;初始化只读数据段&#xff0c;初始化读写数据段&#xff0c;未初始化数据和常量数据段。 详细在下面博客总结&#xff1a; Linux系统下…

商家如何自己零成本免费制作点餐小程序项目完整源码

现在点餐小程序成为餐饮店的标配&#xff0c;顾客只要扫码&#xff0c;即可进入小程序点餐。顾客付款后&#xff0c;后厨自动打印出订单并开始制作。整个过程非常方便流畅&#xff0c;甚至还可以免去收银&#xff08;或服务&#xff09;人员。那么&#xff0c;这种餐饮小程序要…

STM32—控制蜂鸣器(定时器)

目录 1 、 电路构成及原理图 2 、编写实现代码 main.c tim_irq.c 3、代码讲解 4、烧录到开发板调试、验证代码 5、检验效果 此笔记基于朗峰 STM32F103 系列全集成开发板的记录。 1 、 电路构成及原理图 定时器中断是利用定时器的计数功能&#xff08;向上计数或向下计…

ChatGPTGPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术教程

原文链接&#xff1a;ChatGPTGPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247598798&idx2&sn014f5ae90306a3b1e8fd87ab58561411&chksmfa820329cdf58a3f72799a43016b223057fd1bd02284…