当前位置: 首页 > news >正文

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>

相关文章:

uni-app纵向步骤条

分享一下项目中自封装的步骤条&#xff0c;存个档~ 1. 话不多说&#xff0c;先看效果 2. 话还不多说&#xff0c;上代码 <template><!-- 获取一个数组&#xff0c;结构为[{nodeName:"流程发起"isAudit:falsetime:"2024-02-04 14:27:35"otherDat…...

【JavaEE -- 文件操作IO有关面试题】

文件操作IO有关面试题 1.查找硬盘上的文件位置1.1 思路1.2 执行代码 2. 实现文件复制2.1 思路2.2 代码执行 3. 打印搜索的词的文件路径3.1 思路3.2 代码执行 1.查找硬盘上的文件位置 给定一个文件名&#xff0c;去指定的目录中进行搜索&#xff0c;找到文件名匹配的结果&#…...

Open WebUI大模型对话平台-适配Ollama

什么是Open WebUI Open WebUI是一种可扩展、功能丰富、用户友好的大模型对话平台&#xff0c;旨在完全离线运行。它支持各种LLM运行程序&#xff0c;包括与Ollama和Openai兼容的API。 功能 直观的界面:我们的聊天界面灵感来自ChatGPT&#xff0c;确保了用户友好的体验。响应…...

[2021]Zookeeper getAcl命令未授权访问漏洞概述与解决

今天在漏洞扫描的时候蹦出来一个zookeeper的漏洞问题&#xff0c;即使是非zookeeper的节点&#xff0c;或者是非集群内部节点&#xff0c;也可以通过nc扫描2181端口&#xff0c;获取极多的zk信息。关于漏洞的详细描述参考apache zookeeper官方概述&#xff1a;CVE-2018-8012: A…...

vscode添加gitee

1.创建仓库 2.Git 全局设置 3.初始化仓库 2.1 打开vscode打开需要上传到给git的代码文件 2.2.点击左边菜单第三个的源代码管理->初始化仓库 4.点击加号暂存所有更改 5.添加远程仓库 5.1 添加地址&#xff0c;回车 5.2 填写库名&#xff0c;回车 6.提交和推送 6.1 点击✔提交…...

数据库底层原理

本文将介绍数据库在储存和通讯时的原理 数据库储存 首先&#xff0c;数据库的作用持久化存储数据&#xff0c;数据库的存储形式就是文件&#xff0c;每一张表就是一个文件&#xff0c;其他数据也是文件形式&#xff0c;比如索引文件。 比如像mysql数据库&#xff0c;其中的数…...

JVM虚拟机-实战篇

专属小彩蛋:前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站(前言 - 床长人工智能教程) 目录 一、内存溢出和内存泄漏 什么是内存泄漏? 二、解决内存泄漏 解决内存泄漏的思路 top命令 发现问题 VisualVM 发现问…...

上岸跨考生的备考经验,送给零基础跨考计算机的你!

九个月的时间绝对是够用的&#xff0c;就算是跨考也够用&#xff01; 一般来说&#xff0c;专业课要复习三轮&#xff0c;九个月的时间&#xff0c;复习三轮完全够用 复习资料&#xff1a;王道四本书王道真题 打基础阶段&#xff1a;3-6月&#xff1a; 学习目标&#xff1a…...

js改变图片曝光度(高亮度)

方法一&#xff1a; 原理&#xff1a; 使用canvas进行滤镜操作&#xff0c;通过改变图片数据每个像素点的RGB值来提高图片亮度。 缺点 当前项目使用的是svg&#xff0c;而不是canvas 调整出来的效果不是很好&#xff0c;图片不是高亮&#xff0c;而是有些发白 效果 代码 …...

【NLP笔记】大模型prompt推理(提问)技巧

文章目录 prompt概述推理&#xff08;提问&#xff09;技巧基础prompt构造技巧进阶优化技巧prompt自动优化 参考链接&#xff1a; Pre-train, Prompt, and Predict: A Systematic Survey of Prompting Methods in Natural Language Processing预训练、提示和预测&#xff1a;NL…...

【目标检测】西红柿成熟度数据集三类标签原始数据集280张

文末有分享链接 标签名称names: - unripe - semi-ripe - fully-ripe D00399-西红柿成熟度数据集三类标签原始数据集280张...

Java File类(文件操作类)

背景&#xff1a; 在Java编程语言中&#xff0c;操作文件和目录是一项常见的任务。而File类&#xff0c;则是java.io包中的重要类&#xff0c;它是唯一代表磁盘文件本身的对象。通过File类提供的方法&#xff0c;我们可以轻松地创建、删除、重命名文件和目录等操作。 构造方法&…...

正则表达式 vs. 字符串处理:解析优势与劣势

title: 正则表达式 vs. 字符串处理&#xff1a;解析优势与劣势 date: 2024/3/27 15:58:40 updated: 2024/3/27 15:58:40 tags: 正则起源正则原理模式匹配优劣分析文本处理性能比较编程应用 1. 正则表达式起源与演变 正则表达式&#xff08;Regular Expression&#xff09;最早…...

1、goreplay流量回放

目的 在实际项目中&#xff0c;会有大量的回归测试工作&#xff0c;通常会使用自动化代码的手段来实现回归&#xff0c;但是对于一个庞大的系统来说&#xff0c;通过自动化脚本的方式来实现回归测试&#xff0c;又显得很费时费力。并且如果有定期将线上数据同步到测试环境的需求…...

Transformer的前世今生 day06(Self-Attention和RNN、LSTM的区别)

Self-Attention和RNN、LSTM的区别 RNN的缺点&#xff1a;无法做长序列&#xff0c;当输入很长时&#xff0c;最后面的输出很难参考前面的输入&#xff0c;即长序列会缺失上文信息&#xff0c;如下&#xff1a; 可能一段话超过50个字&#xff0c;输出效果就会很差了 LSTM通过忘…...

UDP send 出现大量“Resource temporarily unavailable”

背景 最近排查用户现场环境&#xff0c;查看日志出现大量的“send: Resource temporarily unavailable”错误&#xff0c;UDP设置NO_BLOCK模式&#xff0c;send又发生在进程上下文&#xff0c;并且还设置了SO_SNDBUF 为8M&#xff0c;在此情况下为什么还会出现发送队列满的情况…...

怎么拆解台式电脑风扇CPU风扇的拆卸步骤-怎么挑

今天我就跟大家分享一下如何选购电脑风扇的知识。 我也会解释一下机箱散热风扇一般用多少转。 如果它恰好解决了您现在面临的问题&#xff0c;请不要忘记关注本站并立即开始&#xff01; 文章目录列表&#xff1a;大家一般机箱散热风扇都用多少转&#xff1f; 机箱散热风扇选择…...

Windows安装Odoo结合内网穿透实现公网访问本地企业管理系统

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…...

Portainer的替代Dockge?又一个Docker Compose管理器?

Dockge&#xff1a;让Docker Compose管理触手可及&#xff0c;一图胜千言&#xff0c;轻松构建与管控您的容器服务栈&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 Docker&#xff0c;这一开放源代码的创新平台&#xff0c;旨在实现应用程序部署、扩展与运维的自动化…...

Midjourney AI绘图工具介绍及使用

介绍 Midjourney是一款目前被誉为最强的AI绘图工具。只要输入想到的文字&#xff0c;就能通过人工智能产出相对应的图片。 官网只是宣传和登录入口&#xff0c;提供个人主页、订阅管理等功能&#xff0c;Midjourney实际的绘画功能&#xff0c;是在另外一个叫discord的产品中实…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...