vant4 自定义垂直步骤条时间线组件几行css代码改造完成(附效果图)

news2024/9/25 13:15:41

直接上效果图片

<template>
  <!-- 审批流程 -->
  <div>
    <van-steps direction="vertical" active="-1">
      <van-step>
        <template #inactive-icon>
          <div class="relative">
            <img :src="girlIcon" />
            <img class="absolute right-0 bottom-0" :src="checkIcon" />
          </div>
        </template>

        <div class="flex items-end justify-between pl-10">
          <div>
            <div class="tj-color">提交</div>
            <div class="text-xs">张三</div>
          </div>
          <div>2021-12-30 17:20</div>
        </div>
  

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

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

相关文章

JavaScript-console:JavaScript控制台(Console)常用方法

一、理解 console JavaScript 控制台&#xff08;console&#xff09;是一个开发人员在编写 JavaScript 代码时常用的工具。它是浏览器提供的一种界面&#xff0c;让开发人员能够追踪代码执行的状态和结果。JavaScript 控制台可以记录代码输出的信息、警告和错误&#xff0c;并…

opencv 进阶13-Fisherfaces 人脸识别-函数cv2.face.FisherFaceRecognizer_create()

Fisherfaces 人脸识别 PCA 方法是 EigenFaces 方法的核心&#xff0c;它找到了最大化数据总方差特征的线性组合。不可否认&#xff0c;EigenFaces 是一种非常有效的方法&#xff0c;但是它的缺点在于在操作过程中会损失许多特征信息。 因此&#xff0c;在一些情况下&#xff0c…

外贸网站怎么做推广优化

外贸网站的推广和优化是关键&#xff0c;因为它可以帮助您扩展国际市场并吸引更多的客户。以下是e6zz seo多年经验总结出一些有效的方法&#xff0c;可以帮助您推广和优化外贸网站&#xff1a; 优化网站内容&#xff1a; 确保您的网站内容对国际客户有吸引力&#xff0c;包括产…

lab4 traps

在开始做lab之前务必弄清楚 所谓的系统调用&#xff0c;本质上就是内核态和用户态之间的切换内核态和用户态的区别本质上就是一些关键属性的区别&#xff0c;比如页表 而他们的运行方式都一样&#xff0c;就是取指执行&#xff0c;没有魔法 只不过内核态和用户态的执行不在一个…

自动化客户服务必备神器——salesmartly

自动化客户服务必备神器——salesmartly 您是否正在寻找节省时间和简化客户服务流程的方法&#xff1f;客户服务自动化就是答案&#xff01;自动化使企业能够提供更快、更高效的客户服务&#xff0c;尤其是在电子商务领域。在本文中&#xff0c;我们将讨论自动化客户服务流程的…

没有高学历就没有高薪工作?

大家好&#xff0c;我是郑州软件测试4期的小路同学&#xff0c;是一个只有普通高中学历的河南人。由于自己上学的时候对学习不感兴趣&#xff0c;于是很早就辍学了。干过服务员&#xff0c;也卖过房子&#xff0c;但是干啥工作都没有挺过半年的&#xff0c;因为薪资很低&#x…

go_并发编程

go并发编程 一、 并发介绍1&#xff0c;进程和线程2&#xff0c;并发和并行3&#xff0c;协程和线程4&#xff0c;goroutine 二、 Goroutine1&#xff0c;使用goroutine1&#xff09;启动单个goroutine2&#xff09;启动多个goroutine 2&#xff0c;goroutine与线程3&#xff0…

docker compose的用法

目录 一、Docker-Compose介绍 1.1 Docker-Compose的概述 1.2 Docker-Compose 用来实现Docker容器快速编排 1.3 Docker-compose模板文件简介 二、YAML简介 2.1 YAML的概述 2.2 YAML的基本语法规则 2.3 YAML支持的数据架构 三、配置内部常用字段 四、Docker-compose 常…

常见的软件测试用例设计方法有哪些?

常见的软件测试用例设计方法&#xff0c;个人认为主要是下面这6种&#xff1a; 1)流程图法&#xff08;也叫场景法&#xff09; 2)等价类划分法 3)边界值分析 4)判定表 5)正交法 6)错误推测法 这6种常见方法中&#xff0c;我分别按照定义、应用场景、使用步骤、案例讲解这4个部…

Vue-13.创建完整的Vue项目(vue+vue-cli+js)-1

前言 之前写了命令创建Vue项目&#xff0c;但是事实上我们可以直接用编译器直接创建项目&#xff0c;这里我使用webstorm&#xff08;因为我是前后端兼修的所以我习惯使用Idea家族的编译器&#xff09; 只写前端的推荐用VsCode前后端都写的推荐用webstorm 新建项目 项目初始…

记录node 版本对应的 node-sass 版本号

当我们在项目中使用 node-sass 时&#xff0c;电脑的 node版本号一定要与 node-sass 版本号对应&#xff0c;不对应时下载就会报错 一、官方文档地址 https://www.npmjs.com/package/node-sass 二、对应版本表格

一张图看懂 USDT三种类型地址 Omni、ERC20、TRC20的区别

USDT是当前实用最广泛&#xff0c;市值最高的稳定币&#xff0c;它是中心化的公司Tether发行的。在今年的4月17日之前&#xff0c;市场上存在着2种不同类型的USDT。4月17日又多了一种波场TRC20协议发行的USDT&#xff0c;它们各自有什么区别呢?哪个转账最快到账&#xff1f;哪…

Android kotlin 跳转手机热点开关页面和判断热点是否打开

Android kotlin 跳转手机热点开关页面和判断热点是否打开 判断热点是否打开跳转手机热点开关页面顺带介绍一些其他常用的设置页面跳转 其他热点的一些相关知识Local-only hotspot 参考 判断热点是否打开 网上方法比较多&#xff0c;我这边使用了通过WifiManager 拿反射的getWi…

【C#学习笔记】委托和事件

文章目录 委托委托的定义委托实例化委托的调用多播委托 为什么使用委托&#xff1f;官方委托泛型方法和泛型委托 事件为什么要有事件&#xff1f;事件和委托的区别&#xff1a; 题外话——委托与观察者模式 委托 在 .NET 中委托提供后期绑定机制。 后期绑定意味着调用方在你所…

问题解决:Failed to start sshd.service: Unit is masked.

centos7.6 ssh突然不能用了 也启动不了 错误如下&#xff1a; 解决方式&#xff1a; systemctl unmask sshd systemctl start sshd

day 34 | ● 62.不同路径 ● 63. 不同路径 II

62.不同路径 递归公式为上 左 func uniquePaths(m int, n int) int {dp : make([][]int, m)for i : 0; i < m; i{tmp : make([]int, n)dp[i] tmpdp[i][0] 1}for i : 0; i < n; i{dp[0][i] 1}for i : 1; i < m; i{for j : 1; j < n; j{dp[i][j] dp[i - 1][j] …

倒计时动效

1. 效果 2. html <div class"count"><span>3</span><span>2</span><span>1</span> </div>3. css body {width: 100vw;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: cente…

数据存储效率对决:Redis String vs. Hash性能大比拼,哪个更适合你?

一、Redis的数据类型 1、常规类型 1&#xff09;String&#xff08;字符串&#xff09;&#xff1a;最基本的数据结构&#xff0c;可以存储任何类型的字符串、数字或二进制数据。 2&#xff09;Hash&#xff08;哈希表&#xff09;&#xff1a;类似于关联数组或字典&#xff…

售后服务管理软件怎么选择?售后服务管理系统有什么用?

随着企业信息化发展&#xff0c;越来越多的企业纷纷选择售后服务管理软件来服务客户和进行内部人员管理。借助这款软件&#xff0c;企业能够高效地满足客户提出的需求&#xff0c;并提高客户对售后服务的满意度。售后服务通常涉及客户、客服、维修师傅和服务管理人员等各种角色…