vue 步骤条：虚线样式、进度条

一介俗人.....

已于 2024-05-06 18:18:08 修改

阅读量684

点赞数

文章标签：前端 java javascript

于 2023-11-10 14:24:51 首次发布

本文链接：https://blog.csdn.net/m0_59329255/article/details/134332244

版权

本文介绍如何使用Vue创建一个包含虚线样式的步骤条组件。通过展示HTML结构、CSS样式以及Vue的数据和方法，详细说明了如何展示进度状态，并提供编辑功能。示例中展示了接收投诉的流程，包括时间、接收人以及投诉详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 图：

2.代码：

div：

<div class="killwrap">

<div class="killBox" v-for="(item, index) in subList" :key="index">

<li class="killTitle">{{ item.createTime }}</li>

<li class="killBottom">

<span></span>

<span></span>

<span class="Killvoid"></span>

</li>



<div class="Jsts">

<div class="JstsBox">

<span>接收投诉</span>

<span>接收人: 刘建筑</span>

<span @click="edit(item)"><i class="bj">编辑</i></span>

</div>

<div class="Jsts_wrap">

<div class="Jsts_left" v-if="item.name">

<span class="img"></span>

<span>王先生</span>

<span>18318298843</span>

</div>

<div class="Jsts_right" v-if="item.name">

<span>{{ item.fwtd }}</span>

<span>{{ item.fanying }}</span>

</div>

<div class="Jsts_right">

<span>{{ item.wt }}</span>

</div>

</div>

</div>

</div>

</div>

data：

subList: [

{

createTime: '2023-03-04',

remark: '1sdfsdf',

name: '王先生',

fwtd: '服务态度生硬',

fanying: '反映：自己到北京市政务服务中心办理业务，二楼扶梯口有个引导员，对自己爱答不理，态度很差，而且向二层B商务中心要一个牛皮纸袋还收取了5元的费用'

},

{

createTime: '2023-03-04',

fwtd: '服务态度生硬',

fanying: '反映：自己到北京市政务服务中心办理业务，二楼扶梯口有个引导员，对自己爱答不理，态度很差，而且向二层B商务中心要一个牛皮纸袋还收取了5元的费用',

wt: '问题：自己到北京市政务服务中心办理业务，二楼扶梯口有个引导员，对自己爱答不理，态度很差，而且向二层B商务中心要一个牛皮纸袋还收取了5元的费用'

}

],

css：

.killwrap {

height: 720px;

overflow-y: scroll;

color: #000;

.killBox {

display: flex;

margin-top: 20px;

.killTitle {

width: 90px;

font-size: 15px;

height: 44px;

color: #000;

line-height: 20px;

padding-left: 10px;

font-style: italic;

color: #747070;

}

.killBottom {

padding-left: 10px;

display: flex;

margin-top: 5px;

position: relative;

span:nth-child(1) {

width: 15px;

height: 15px;

border-radius: 50%;

display: block;

background: url('../../../../assets/images/22.png');

background-repeat: no-repeat;

background-size: 100% 100% !important;

border: none;

}

span:nth-child(2) {

width: 30px;

height: 1px;

border: 1px dashed #ccc;

display: block;

margin-top: 7px;

}

span:nth-child(3) {

width: 1px;

height: 100%;

border: 1px dashed #ccc;

display: block;

position: absolute;

top: 20px;

left: 16px;

}

// .Killvoid:last-child {

// width: 0px;

// border: 0px dashed #fff;

// }

}

//

.Jsts {

width: 80%;

font-size: 14px;

color: #393333;

.JstsBox {

width: 100%;

height: 30px;

line-height: 20px;

background: #918f8f;

color: #fff;

display: flex;

flex-wrap: wrap; // 允许换行

padding: 5px 10px;

span {

display: block;

width: 33.3%;

}

span:nth-child(2) {

text-align: center;

}

span:nth-child(3) {

text-align: right;

.bj {

background: #186ef0;

padding: 2px 10px;

cursor: pointer;

border-radius: 5px;

font-style: normal;

}

.bj:hover {

box-shadow: 2px 2px 2px rgba(93, 94, 95, 0.9);

}

}

}

.Jsts_wrap {

width: 100%;

padding: 5px 10px;

display: flex;

background: #eee;

.Jsts_left {

width: 15%;

.img {

width: 33px;

height: 40px;

margin: 0 auto;

border: 1px solid #fff;

display: block;

}

span {

text-align: center;

display: block;

margin-top: 5px;

}

}

.Jsts_right {

span {

display: block;

margin-top: 5px;

margin-left: 10px;

margin-bottom: 5px;

}

}

}

.rightJsts {

padding: 10px 10px;

}

}

}

}