vue竖向步骤条
效果图:

弹框组件代码:
<template><el-dialog:visible.sync="dialogVisible":append-to-body="true":close-on-click-modal="false":close-on-press-escape="false"titlewidth="8.2rem"custom-class="assistance-dialog"center><div class="assistance-cont flex-top-start"><div class="assistance-code-box">左边</div><div class="assistance-steps flex-column-between"><div class="assistance-steps-box"><div class="assistance-steps-title">助力步骤</div><div class="assistance-steps-cont"><div class="assistance-steps-line"></div><div class="assistance-steps-item-cont"><divclass="assistance-steps-item flex-start"v-for="(item, index) in stepsCont":key="index"><div class="assistance-steps-item-idx">{{ index + 1 }}</div><div class="assistance-steps-item-name">{{ item }}</div></div></div></div></div><div class="flex-end"><el-button type="primary">保存海报</el-button></div></div></div></el-dialog>
</template><script>
export default {name: "assistance-dialog",props: {value: {type: Boolean,default: false,},},components: {},data() {return {stepsCont: ["保存海报","发送海报给好友","好友扫码登录小程序","助力成功",],};},computed: {dialogVisible: {get() {return this.value;},set(val) {this.$emit("input", val);},},},watch: {},methods: {},created() {},mounted() {},beforeCreate() {},beforeMount() {},beforeUpdate() {},updated() {},beforeDestroy() {},destroyed() {},activated() {},
};
</script>
<style lang='scss' scoped>
.assistance-dialog {.assistance-code-box {width: 3.45rem;height: 5.07rem;background: #f4f6f9;border-radius: 0.08rem;margin-right: 0.32rem;}.assistance-steps {height: 5.07rem;flex: 1;}.assistance-steps-box {width: 100%;.assistance-steps-title {font-size: 0.21rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #242e42;line-height: 0.29rem;margin-bottom: 0.24rem;}.assistance-steps-cont {width: 100%;position: relative;}.assistance-steps-line {position: absolute;width: 0.32rem;height: 3.32rem;border-left: 1px dashed rgba(0, 101, 255, 1);top: 0.3rem;left: 0.16rem;z-index: 1;}.assistance-steps-item-cont {width: 100%;height: 4rem;position: absolute;z-index: 2;}.assistance-steps-item:not(:last-child) {margin-bottom: 0.8rem;}.assistance-steps-item-idx {width: 0.32rem;height: 0.32rem;line-height: 0.32rem;text-align: center;background: #0065ff;border-radius: 0.08rem;font-size: 0.18rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #ffffff;margin-right: 0.16rem;}.assistance-steps-item-name {font-size: 0.18rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #242e42;line-height: 0.25rem;}}
}
</style>
页面引用:
<template><div id="index"><!-- 助力 --><assistance-dialog v-model="showAssistance"></assistance-dialog></div>
</template>
<script>
export default {name: "index",layout: "default",components: {"assistance-dialog": () =>import("@/components/coupon/assistance-dialog.vue"), //助力},data() {return {showAssistance: true, //助力};},mounted() {},methods: {},
};
</script>
相关文章:
vue竖向步骤条
效果图: 弹框组件代码: <template><el-dialog:visible.sync"dialogVisible":append-to-body"true":close-on-click-modal"false":close-on-press-escape"false"titlewidth"8.2rem"custom-c…...
java八股文面试[多线程]——Synchronized优化手段:锁膨胀、锁消除、锁粗化和自适应自旋锁
1.锁膨胀 (就是锁升级) 我们先来回顾一下锁膨胀对 synchronized 性能的影响,所谓的锁膨胀是指 synchronized 从无锁升级到偏向锁,再到轻量级锁,最后到重量级锁的过程,它叫锁膨胀也叫锁升级。 JDK 1.6 之前…...
【数据结构】队列---C语言版(详解!!!)
文章目录 🐸一、队列的概念及结构🍄1、队列的概念定义🍄2、动图演示 🐸二、队列的实现🐸三、链表结构队列详解🍎创建队列的结构⭕接口1:定义结构体(QNode、Queue)⭕接口2…...
java:详解http模块request对象
文章目录 背景继承关系获取数据request获取请求行数据获取请求头数据获取请求体数据 示例:防盗链其他功能获取请求参数通用方式请求转发共享数据获取ServletContext 背景 在 Java 中,HTTP 模块的 request 对象和 response 对象分别表示客户端向服务器发…...
力扣20. 有效的括号
20. 有效的括号 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应…...
用springboot+elasticserach7的demo,对比sider和百度ai的异同
对比aigc引擎:sider chatgpt3.5和百度ai 提示词: springboot2.5,连接elasticsearch7的demo,要有基本的操作,用模板方法 以下是一个使用Spring Boot 2.5连接Elasticsearch 7的示例代码,包括基本的操作方法…...
Python的pymysql模块与MySQL数据库的互动:基础与实例
Python的pymysql模块与MySQL数据库的互动:基础与实例 一、连接数据库二、创建游标三、执行SQL命令四、关闭连接 在Python的世界里,操作MySQL数据库最常用的库就是pymysql。 pymysql是一个灵活且易于使用的库,它允许我们以Python的方式操作MyS…...
滑动窗口实例1(长度最小的子数组)
题目: 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] ,并返回其长度。如果不存在符合条件的子数组,返回 0 。 示例 1: …...
EI、Scopus双检索| 2023年第四届自动化、机械与设计工程国际会议
会议简介 Brief Introduction 2023年第四届自动化、机械与设计工程国际会议(SAMDE 2023) 会议时间:2023年12月8 -10日 召开地点:中国南京 大会官网:www.samde.org 机械设计制造及其自动化学科在国民经济中处于极其重要…...
【混合时变参数系统参数估计算法】使用范数总和正则化和期望最大化的混合时变参数系统参数估计算法(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
vue的公共方法封装以及class高阶封装
一、Vue.use与Vue.prototype的区别和用法 1、Vue.use和Vue.prototype区别 相同点:都是注册插件的方式,没有本质区别,都是在vue.prototype上添加了一个方法不同点:vue.use适用于注册vue生态内的插件(vuex、router、elementUI)&…...
OpenGL-入门-BMP像素图glReadPixels(1)实现读取屏幕中间的颜色和获取屏幕上鼠标点击位置的颜色
glReadPixels函数用于从帧缓冲区中读取像素数据。它可以用来获取屏幕上特定位置的像素颜色值或者获取一块区域内的像素数据。下面是该函数的基本语法: void glReadPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *da…...
斥资4亿,收购这家WLAN厂商,结果……
晚上好,我的网工朋友 不少朋友可能有隐形,2019年的时候,Juniper花费4.05亿美元,收购WiFi初创公司Mist Systems。 Mist Systems是一家买无线产品起家的公司,由前思科高管创建的。主打的产品是“AI-Driven WLAN”&…...
【简单】2511. 最多可以摧毁的敌人城堡数目
原题链接:https://leetcode.cn/problems/maximum-enemy-forts-that-can-be-captured 2511. 最多可以摧毁的敌人城堡数目 给你一个长度为 n ,下标从 0 开始的整数数组 forts ,表示一些城堡。forts[i] 可以是 -1 ,0 或者 1 &#…...
Linux用一键安装包部署禅道(18.5版本)
一、安装 禅道软件下载地址:禅道官方下载地址 - 禅道开源项目管理软件 - 禅道开源项目管理软件 请根据自己的需要下载对应的版本。 官方教程地址: (推荐)Linux用一键安装包 - 禅道使用手册 - 禅道开源项目管理软件 注:Linux 一键安装包必须直接解压到 …...
【2】openGL shader着色器分析三角形填色
源代码在下面。文档查询 > docs.gl 结果展示:使用自己的shader和打印错误描述 该篇主要在上一部分代码的基础上添加了自己写的shader,即着色器。最常用的两个着色器 vertex shader 和 fragment shader,即顶点着色器和片段着色器。 大概…...
mysql数据表Table is marked as crashed and should be repaired 的解决办法
错误原因 网上查了一下,错误的产生原因,有网友说是频繁查询和更新XXXX表造成的索引错误,还有说法是Mysql数据库因某种原因而受到了损坏。 【如:数据库服务器突发性断电,在数据表提供服务时对表的源文件进行某种操作都…...
【Unity基础】1.项目搭建与视图编辑
【Unity基础】1.项目搭建与视图编辑 大家好,我是Lampard~~ 欢迎来到Unity基础系列博客,终于要开始写基础系列的博客了,前两篇的内容基本上与入门系列相同,如果有紧跟入门系列的同学可以直接从第三篇文章开始看 好了话不多说我们开…...
C语言每日一练---Day(14)
本专栏为c语言练习专栏,适合刚刚学完c语言的初学者。本专栏每天会不定时更新,通过每天练习,进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字:统计每个月兔子的总数 数列的和 💓博主csdn个人主页&#x…...
基于孔雀算法优化的BP神经网络(预测应用) - 附代码
基于孔雀算法优化的BP神经网络(预测应用) - 附代码 文章目录 基于孔雀算法优化的BP神经网络(预测应用) - 附代码1.数据介绍2.孔雀优化BP神经网络2.1 BP神经网络参数设置2.2 孔雀算法应用 4.测试结果:5.Matlab代码 摘要…...
手把手教你用FUTURE POLICE:会议录音秒变带时间轴字幕
手把手教你用FUTURE POLICE:会议录音秒变带时间轴字幕 1. 为什么需要高精度字幕对齐? 在日常工作中,我们经常遇到这样的场景:重要会议录音需要整理成文字稿,但人工听写耗时耗力;视频剪辑时需要添加字幕&a…...
Phi-4-mini-reasoning一文详解:专为多步推理设计的开源大模型实战
Phi-4-mini-reasoning一文详解:专为多步推理设计的开源大模型实战 1. 模型概述 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型,特别擅长处理需要多步分析的复杂问题。与通用聊天模型不同,它被设计用来解决数学题、逻辑题等需要逐…...
从零构建树莓派人脸识别门禁:硬件选型、环境部署与实战避坑
1. 硬件选型与采购清单 第一次玩树莓派人脸识别项目时,我在淘宝上花了整整三天对比各种硬件参数。当时最纠结的就是摄像头模块——普通USB摄像头才30块钱,而官方推荐的Raspberry Pi Camera Module V2要200多。后来实测发现,这差价真不能省。 …...
突破资源封装壁垒:RePKG开源工具全维度应用指南
突破资源封装壁垒:RePKG开源工具全维度应用指南 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg 问题:专用资源格式的困境与破局思路 如何突破专用格式的封锁…...
40 个 AI agent 跑营销,还不是最狠的
过去一年,AI 做营销最常见的用法,还是写文案、出海报、改标题、做几个短视频脚本。大家也都看腻了。 现在,真正的变化开始了。 AI 开始往营销里最难、最费人、但又最影响结果的地方发起来进攻,那就是: 盯数据、跑测…...
汽车智能制造如何落地?从“黑灯工厂”看AI赋能的关键路径
一、当工厂学会在黑暗中自行运转偌大的汽车生产车间里,灯光熄灭,只有AGV小车穿梭的微光和机械臂有节奏的运作声。没有工人的手电筒,也没有巡检的脚步,一切生产、检测、调度都在黑灯状态下有条不紊地进行。这并非科幻电影ÿ…...
springboot+vue基于web的汽车后市场维修保养管理系统的设计与实现
目录系统功能模块分析维修保养业务模块财务与统计模块客户端交互功能技术实现要点项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作系统功能模块分析 用户管理模块 实现用户注册、登录、权限管理(管理员、员工、客户…...
WAN2.2文生视频效果实测对比:不同SDXL风格对动态连贯性的影响分析
WAN2.2文生视频效果实测对比:不同SDXL风格对动态连贯性的影响分析 最近在玩WAN2.2文生视频模型时,我发现一个挺有意思的现象:虽然模型本身很强大,但生成的视频效果好不好,很大程度上取决于你选的“风格”。WAN2.2集成…...
AW88195音频编解码器驱动从MTK到RK平台的移植实践
1. 认识AW88195音频编解码器驱动移植 第一次接触AW88195音频编解码器驱动移植时,我也是一头雾水。这个来自艾为的音频芯片主要用于提升扬声器音质,但厂商提供的驱动包往往只适配特定平台。比如这次遇到的AW88195_Driver_MTK_V0.1.6.zip就是专门为MTK平台…...
BilibiliDown:从技术视角重新定义B站视频下载体验
BilibiliDown:从技术视角重新定义B站视频下载体验 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/Bi…...
