自定义步骤条

展示图:

在这里插入图片描述

<template><div class='createorder'><!-- 顶部步骤条 --><div class="createorder_top"><div class="createorder_top_left"><!-- 0 --><span class="createorder_left_set" :class="value == 0||value ==1||value ==2||value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==1||value ==2||value ==3||value ==4"></span><span class="look" v-else>1</span>店长信息</span><span class="createorder_left_setdivision" :class="value ==1||value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span><!-- 1 --><span class="createorder_left_set" :class="value ==1||value ==2||value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==2||value ==3||value ==4"></span><span class="look" v-else>2</span>企业及法人信息</span><span class="createorder_left_setdivision" :class="value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span><!-- 2 --><span class="createorder_left_set" :class="value ==2||value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==3||value ==4"></span><span class="look" v-else>3</span>药店信息</span><span class="createorder_left_setdivision" :class="value ==3||value ==4?'createorder_left_setdivisions':''"></span><!-- 3 --><span class="createorder_left_set" :class="value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==4"></span><span class="look" v-else>4</span>服务能力</span><span class="createorder_left_setdivision" :class="value ==4?'createorder_left_setdivisions':''"></span><!-- 4 --><span class="createorder_left_set" :class="value ==4?'activeSet':''"><span class="look" v-if="value ==4"></span><span class="look" v-else>5</span>入驻成功</span></div></div></div>
</template><script>
export default {props: {value: {type: Number,default: "",},},data(){return{}},created(){},mounted () {},methods: {}
}</script><style scoped lang='less'>
.look{text-align: center;font-size: 20px;display: inline-block;width: 25px;height: 25px;line-height: 25px;border-radius: 42px;border: 2px solid;margin-right: 5px;
}
.createorder_top {background-color: #F9F9F9;border-radius:50px;width: 99%;margin: 0 auto;margin-top: 10px;
}
.createorder_top .createorder_top_left{padding: 20px 30px;display: flex;justify-content: space-between;align-items: center;}
.createorder_top .createorder_top_left .createorder_left_set {font-size: 18px;color: #ABACB3;
}.createorder_top .createorder_top_left .activeSet {color: #2846FF;
}.createorder_top .createorder_top_left .createorder_left_setdivision {display: inline-block;background-color: #F1EFF2;width: 123px;height: 2px;margin: 10px 25px;margin-bottom: 5px;
}
.createorder_top .createorder_top_left .createorder_left_setdivisions {display: inline-block;background-color: #2846FF;width: 123px;height: 2px;margin: 10px 25px;margin-bottom: 5px;
}</style>

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

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

相关文章

element组件库中table自定义分页效果

1.在data中设置初始值 // 页数 页码search: { offset: 1, // 当前页limit: 10, // 条数total:0, //总数},2.设置获取后的数据分配 :data"tableData.slice((search.offset - 1) * search.limit, search.offset * search.limit)" 3.展示效果&#xff1a;

数据轮播图翻页封装(左右点击)

效果图&#xff1a; <template><div class"box" style"height:200px;"><!-- 左 --><div class"box-left" click"submitrote(left)" mouseenter"chenge_menu(1)" mouseleave"chenge_menu(2)"…

087-把PHP数组中的元素按随机顺序重新排列shuffle

<?php$arrarray(3,23,A,f,123,hello); //定义一个数组echo 排序之前的数组信息&#xff1a;<br>;print_r($arr);shuffle($arr); //对数组进行随机排序echo <br>排序之后的数组信息&#xff1a;<br>;print_r($arr); //输出数组信息#…

基于Element ui 实现输入框只能输入数字并支持千分位

实现效果 设置子组件 <template><el-inputref"money"v-model.trim"money":placeholder"placeholder"v-bind"$attrs"v-on"$listeners"input"formatNumber(money,money)"keyup.enter.native"moneyCh…

Vue-使用webpack+vue-cli搭建项目

一、准备 安装NodeJs 安装Webpack 配置环境变量 技巧使用&#xff1a; 1. npm 淘宝路径配置&#xff1a;npm config set registryhttps://registry.npm.taobao.org  2.查看npm命令列表 > $ npm help 二、搭建项目 1、全局安装vue脚手架工具 vue-cli npm install vue…

CSS-合理使用z-index控制盒子视轴高度,解决z-index失效

关于z-index我们的共识 共识一 首先&#xff0c;我们都同意&#xff0c;z-index对于普通盒子是无效的&#xff0c;这里的“普通盒子”是除了下文我会提到的“神奇盒子”外的所有盒子&#xff0c;至于什么是“神奇盒子”请慢慢看。 对于普通盒子&#xff0c;不管z-index值如何&…

Activiti6.0教程 Eclipse安装Activiti Diagram插件(一)

最近这段时间打算出一个Activiti6.0的详细教程&#xff0c;Activiti作为一个流行的开源工作流引擎&#xff0c;正在不断发展&#xff0c;其6.0版本以API形式提供服务&#xff0c;而之前版本基本都是要求我们的应用以JDK方式与其交互&#xff0c;只能将其携带到我们的应用中&…

JS性能优化之文档碎片-document.createDocumentFragment

讲这个方法之前&#xff0c;我们应该先了解下插入节点时浏览器会做什么。 在浏览器中&#xff0c;我们一旦把节点添加到document.body&#xff08;或者其他节点&#xff09;中&#xff0c;页面就会更新并反映出这个变化&#xff0c;对于少量的更新&#xff0c;一条条循…

左右滑动栏

展示效果图&#xff1a; 父 <template><div ref"topBox" class"swiper-in page-container bg-white"><div class"page-body"><drag-box class"drag-box"><div class"relative" :class"{ex…

Active MQ

转载于:https://www.cnblogs.com/ygl888/p/11020647.html

jQuery Ajax 实例

一、$.ajax的一般格式 $.ajax({ type: POST, url: url , data: data , success: success , dataType: dataType }); 二、$.ajax的参数描述 参数 描述 url 必需。规定把请求发送到哪个 URL。 data 可选。映射或字符串值。规定连同请求发送到服务器的数据。 success(data, textSt…

element ui封装 tree下拉框

展示&#xff1a; 子组件封装 <!-- 树状选择器 科室树形 --> <template><el-popoverref"popover"placement"bottom-start"trigger"click"show"onShowPopover"hide"onHidePopover"><el-treeref&quo…

前端开发-热更新原理解读

- 一、websocket简介- 二、热跟新原理- 三、实例剖析- 四、总结websocket简介 在h5推出之前&#xff0c;浏览器应用跟服务器端通信的机制只有http协议&#xff0c;http是一种无状态的网络协议&#xff0c;前端向服务器发起一个请求&#xff0c;服务器给出一次应答&#xff…

HTML5事件—visibilitychange 页面可见性改变事件

又看到一个很有意思的HTML5事件 visibilitychange事件是浏览器新添加的一个事件&#xff0c;当浏览器的某个标签页切换到后台&#xff0c;或从后台切换到前台时就会触发该消息&#xff0c;现在主流的浏览器都支持该消息了&#xff0c;例如Chrome, Firefox, IE10等。虽然这只是一…

java回型数

import java.util.Arrays;public class hello {public static void main(String[] args) {//输出5*5的int n 5;int [][] huizixingnew int[n][n];int minX0;//x轴最小下标int minY0;//y轴最小下标int maxXn-1;//x轴最大下标int maxYn-1;//y轴最大下标int counter0;//计数int xf…

用CSS3 vh 简单实现DIV全屏居中

vh、vw、vmin、vmax介绍 vw&#xff1a;视窗宽度的百分比&#xff08;1vw 代表视窗的宽度为 1%&#xff09;vh&#xff1a;视窗高度的百分比vmin&#xff1a;当前 vw 和 vh 中较小的一个值vmax&#xff1a;当前 vw 和 vh 中较大的一个值 浏览器兼容性 &#xff08;1&#xff09…

解决360等等浏览器兼容模式解析不兼容代码

之前写的代码不是很规范 , 在今天测试下发现360浏览器等等的浏览器使用兼容模式会有很多不兼容 , 网上了解过一下 , 说是很多浏览器的兼容模式可能就是为了兼容IE7之前的网站代码 , 而非我们字面理解的兼容二字 ... OK!跑题了 ... 我的解决方案是在页面head加<meta http…

缩小窗口时CSS背景图出现右侧空白BUG的解决方法

页面容器&#xff08;#wrap&#xff09;与页面头部&#xff08;#header &#xff09;为100%宽度。而内容的容器&#xff08;#page&#xff09;为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度&#xff1a; 改变浏览…

JAVA链接Mysql数据库(一)

第一步自定义 properties 文件 userroot password12345 urljdbc:mysql://localhost:3306/test?useUnicodetrue&characterEncodingutf8 driverClasscom.mysql.jdbc.Driver第二部 创建 java 文件运行 import java.io.InputStream; import java.sql.Connection; import java…

优化器,SGD+Momentum;Adagrad;RMSProp;Adam

Optimization 随机梯度下降&#xff08;SGD&#xff09;&#xff1a; 当损失函数在一个方向很敏感在另一个方向不敏感时&#xff0c;会产生上面的问题&#xff0c;红色的点以“Z”字形梯度下降&#xff0c;而不是以最短距离下降&#xff1b;这种情况在高维空间更加普遍。 SGD的…