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代码 摘要…...
Graphormer在药物发现中的应用:催化剂吸附预测落地实践
Graphormer在药物发现中的应用:催化剂吸附预测落地实践 1. 项目背景与价值 在药物研发和材料科学领域,分子属性预测一直是一项耗时且昂贵的任务。传统实验方法需要大量试错,而计算化学方法又面临精度与效率的平衡问题。Graphormer作为一款基…...
Phi-4-mini-reasoning部署实操手册:supervisor服务管理与日志排查指南
Phi-4-mini-reasoning部署实操手册:supervisor服务管理与日志排查指南 1. 模型概述 Phi-4-mini-reasoning 是一个专注于推理任务的文本生成模型,特别适合处理数学题、逻辑题、多步分析和简洁结论输出。与通用聊天模型不同,它采用"题目…...
东华OJ-基础题-48-数列1(C++)
问题描述 思维的严密性是相当重要的,尤其是在程序设计中,一个小小的错误,就可能导致无法想象的后果。明明的爸爸是一名富有经验的程序设计专家,深知思维严密的重要性。于是在明明很小的时候,就通过游戏的方式训练明明的…...
AIVideo效果对比展示:不同参数下的视频生成质量评测
AIVideo效果对比展示:不同参数下的视频生成质量评测 1. 开场白:参数设置对视频效果的影响 你有没有遇到过这样的情况:用AI生成视频时,明明输入的内容一样,但出来的效果却天差地别?有时候画面模糊不清&…...
AMD显卡专属优化:Ollama-for-amd本地大模型部署终极指南
AMD显卡专属优化:Ollama-for-amd本地大模型部署终极指南 【免费下载链接】ollama-for-amd Get up and running with Llama 3, Mistral, Gemma, and other large language models.by adding more amd gpu support. 项目地址: https://gitcode.com/gh_mirrors/ol/ol…...
cv_resnet101_face-detection_cvpr22papermogface 模型部署的网络安全考量:防范403 Forbidden等常见攻击
cv_resnet101_face-detection_cvpr22papermogface 模型部署的网络安全考量:防范403 Forbidden等常见攻击 把一个人脸检测模型,比如 cv_resnet101_face-detection_cvpr22papermogface,部署成一个Web API,这事儿听起来挺酷的。想象…...
3步解决macOS应用更新烦恼:开源神器Latest使用指南
3步解决macOS应用更新烦恼:开源神器Latest使用指南 【免费下载链接】Latest A small utility app for macOS that makes sure you know about all the latest updates to the apps you use. 项目地址: https://gitcode.com/gh_mirrors/la/Latest 你是否曾为m…...
封神级C++设计:用3个成员实现可清空、可恢复、零开销的容器(颠覆传统思维)
封神级C设计:用3个成员实现可清空、可恢复、零开销的容器(颠覆传统思维) 文章目录封神级C\\设计:用3个成员实现可清空、可恢复、零开销的容器(颠覆传统思维)一、传统方案的“坑”:要么笨重&…...
从云中心到边缘节点,Java Runtime冷启动优化全解析,将延迟压至87ms以内
第一章:Java边缘运行时部署的演进与挑战随着物联网、5G和实时AI推理场景的爆发式增长,Java应用正加速向边缘侧迁移。然而,传统JVM设计面向服务器长期运行环境,其启动延迟高、内存占用大、冷启动慢等特性与边缘设备资源受限、事件驱…...
《QGIS快速入门与应用基础》248:对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/
作者:翰墨之道,毕业于国际知名大学空间信息与计算机专业,获硕士学位,现任国内时空智能领域资深专家、CSDN知名技术博主。多年来深耕地理信息与时空智能核心技术研发,精通 QGIS、GrassGIS、OSG、OsgEarth、UE、Cesium、OpenLayers、Leaflet、MapBox 等主流工具与框架,兼具…...
