效果:
组件template内容:
<div class="flex-row p-cart-con">
<div class="flex1 p-slider-box p-slider-blue" v-for="(obj, index) in arr" :key="index">
<div class="p-slider">
<div class="p-slider-tips"
:style="{left: obj.left,borderTopColor: obj.color}"></div>
<div class="p-slider-bar" :style="{width: obj.width,backgroundColor: obj.color}"></div>
<div class="p-slider-wrap p-slider-start" :style="{borderColor: obj.color}"></div>
<div class="p-slider-wrap p-slider-end"
:style="{left: obj.left,borderColor: obj.color}"></div>
</div>
<div class="p-slider-text flex-row">
<div class="p-slider-left-text">
<span>{{obj.data1}}</span>
<p>{{obj.text1}}</p>
</div>
<div class="p-slider-right-text">
<span :style="{color: obj.color}">{{obj.data2}}</span>
<p>{{obj.text2}}</p>
</div>
</div>
</div>
</div>
data数据内容:
arr: [{
left: '50%',
width: '50%',
color: '#1a80ff',
data1: '2天',
text1: '提案SLA',
data2: '2天',
text2: '处理时间',
}, {
left: '50%',
width: '50%',
color: '#3ad500',
data1: '2',
text1: '提案SLA',
data2: '2天',
text2: '处理时间',
}, {
left: '30%',
width: '30%',
color: '#ff733b',
data1: '2天',
text1: '提案SLA',
data2: '2天',
text2: '处理时间',
}, {
left: '50%',
width: '50%',
color: '#00bc9a',
data1: '2天',
text1: '提案SLA',
data2: '2天',
text2: '处理时间',
}, {
left: '80%',
width: '80%',
color: '#8c77ff',
data1: '4天',
text1: '提案SLA',
data2: '6天',
text2: '处理时间',
}, {
left: '100%',
width: '100%',
color: '#e25481',
data1: '2天',
text1: '提案SLA',
data2: '2天',
text2: '处理时间',
}, {
left: '50%',
width: '50%',
color: '#eeeeee',
data1: '2天',
text1: '提案SLA',
data2: '2天',
text2: '处理时间',
}, {
left: '50%',
width: '50%',
color: '#eeeeee',
data1: '2天',
text1: '提案SLA',
data2: '2天',
text2: '处理时间',
}],
css样式:
<style lang="scss" scoped>
.p-title {
font-size: 24px;
color: #333333;
text-align: center;
line-height: 70px;
height: 70px;
}
.p-content {
margin: 0 20px;
}
.p-cart {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
margin-bottom: 10px;
overflow: hidden;
.p-block-title {
font-size: 14px;
color: #06a8ff;
line-height: 34px;
height: 34px;
padding: 0 10px;
background-color: #f9fafb;
.p-total-case {
display: inline-block;
color: #06a8ff;
&:after {
content: "";
width: 10px;
height: 10px;
background-color: #fff100;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
}
.p-more-ellipsis {
span {
display: inline-block;
width: 4px;
height: 4px;
background-color: #cccccc;
border-radius: 100%;
margin: 0 1px;
vertical-align: middle;
}
}
}
.p-cart-con {
padding: 10px;
}
}
.fr {
float: right;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex1 {
flex: 1;
}
.p-slider-box {
border-right: 1px solid #eeeeee;
padding: 25px 15px 0;
.p-slider {
height: 6px;
background-color: #eeeeee;
position: relative;
cursor: pointer;
.p-slider-bar {
/*width: 50%;*/
background-color: #eeeeee;
height: 6px;
position: absolute;
top: 0;
left: 0;
}
.p-slider-wrap {
width: 14px;
height: 14px;
background-color: #ffffff;
border: 2px solid #eeeeee;
border-radius: 100%;
position: absolute;
top: -4px;
z-index: 10;
transition: 0.3s;
&.p-slider-wrap:hover {
transform: scale(1.2);
}
}
.p-slider-start {
left: 0;
}
.p-slider-end {
/*left: 50%;*/
margin-left: -8px;
}
.p-slider-tips {
width: 0;
height: 0;
border: 8px solid #eee;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: -16px;
/*left: 50%;*/
transform: translateX(-50%);
}
}
.p-slider-text {
margin-top: 10px;
font-size: 12px;
line-height: 18px;
color: #999;
.p-slider-left-text {
text-align: left;
flex: 1;
}
.p-slider-right-text {
text-align: right;
flex: 1;
span {
display: block;
height: 18px;
}
}
}
&.p-slider-blue {
.p-slider-tips {
border-top-color: #1a80ff;
}
}
&.p-slider-blue {
.p-slider-wrap {
border-color: #1a80ff;
}
}
&.p-slider-blue {
.p-slider-bar {
background-color: #1a80ff;
}
}
&.p-slider-blue {
.p-slider-text {
.p-slider-right-text {
span {
color: #1a80ff;
}
}
}
}
&.p-slider-green {
.p-slider-tips {
border-top-color: #3ad500;
}
}
&.p-slider-green {
.p-slider-wrap {
border-color: #3ad500;
}
}
&.p-slider-green {
.p-slider-bar {
background-color: #3ad500;
}
}
&.p-slider-green {
.p-slider-text {
.p-slider-right-text {
span {
color: #3ad500;
}
}
}
}
&.p-slider-orange {
.p-slider-tips {
border-top-color: #ff733b;
}
}
&.p-slider-orange {
.p-slider-wrap {
border-color: #ff733b;
}
}
&.p-slider-orange {
.p-slider-bar {
background-color: #ff733b;
}
}
&.p-slider-orange {
.p-slider-text {
.p-slider-right-text {
span {
color: #ff733b;
}
}
}
}
&.p-slider-darkcyan {
.p-slider-tips {
border-top-color: #00bc9a;
}
}
&.p-slider-darkcyan {
.p-slider-wrap {
border-color: #00bc9a;
}
}
&.p-slider-darkcyan {
.p-slider-bar {
background-color: #00bc9a;
}
}
&.p-slider-darkcyan {
.p-slider-text {
.p-slider-right-text {
span {
color: #00bc9a;
}
}
}
}
&.p-slider-purple {
.p-slider-tips {
border-top-color: #8c77ff;
}
}
&.p-slider-purple {
.p-slider-wrap {
border-color: #8c77ff;
}
}
&.p-slider-purple {
.p-slider-bar {
background-color: #8c77ff;
}
}
&.p-slider-purple {
.p-slider-text {
.p-slider-right-text {
span {
color: #8c77ff;
}
}
}
}
&.p-slider-magenta {
.p-slider-tips {
border-top-color: #e25481;
}
}
&.p-slider-magenta {
.p-slider-wrap {
border-color: #e25481;
}
}
&.p-slider-magenta {
.p-slider-bar {
background-color: #e25481;
}
}
&.p-slider-magenta {
.p-slider-text {
.p-slider-right-text {
span {
color: #e25481;
}
}
}
}
}
.p-slider-total {
text-align: center;
.p-day-num {
font-size: 40px;
line-height: 46px;
color: #010101;
}
.p-slider-text {
margin-top: 10px;
font-size: 12px;
line-height: 18px;
color: #999;
}
}
.middle-con {
width: 33.4vw;
margin: 0 10px;
}
.fl-con,
.fr-con {
width: 33.3vw;
}
.border-bottom-d {
border-bottom: 1px dashed #eeeeee;
padding-bottom: 10px;
margin-bottom: 6px;
}
.p-sample-pic {
margin-right: 10px;
margin-bottom: 10px;
img{
height:78px;
}
}
.p-subtitle {
font-size: 14px;
color: #333;
line-height: 22px;
margin-bottom: 5px;
}
.p-details-pic {
margin-left: 10px;
ul {
display: flex;
flex-wrap: wrap;
align-content: center;
li {
width: 120px;
height: 78px;
text-align: center;
margin: 0 10px 10px 0;
overflow: hidden;
img{
width:120px;
height:78px;
}
}
}
}
.p-form {
.p-form-item {
display: flex;
.p-col-lg5,
.p-col-lg3,
.p-col-lg2,
.p-col-lg7,
.p-col-lg12 {
font-size: 12px;
line-height: 24px;
color: #333333;
display: flex;
.p-form-label {
width: 100px;
color: #999999;
text-align: right;
white-space: nowrap;
}
.p-input-block {
flex: 1;
}
}
.p-col-lg5 {
width: 50%;
}
.p-col-lg3 {
width: 33.3%;
}
.p-col-lg2 {
width: 25%;
}
.p-col-lg7 {
width: 66.7%;
}
.p-col-lg12{
width:100%;
}
}
&.p-form-lg {
.p-form-item {
.p-form-label {
width: 110px;
}
}
}
&.p-form-sm {
.p-form-item {
.p-form-label {
width: 80px;
}
}
}
}
.p-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
table-layout: fixed;
border: 1px solid #ebeef5;
th {
background-color: #f5f7fa;
}
td {
border-top: 1px solid #ebeef5;
}
th,
td {
padding: 7px 5px;
font-size: 12px;
color: #333333;
line-height: 20px;
}
}
.p-hint {
margin-right: -20px;
span {
display: inline-block;
width: 116px;
height: 28px;
font-size: 12px;
color: #06a8ff;
line-height: 28px;
text-align: center;
background-color: #ecf5ff;
border: 1px solid #c6e2ff;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 20px;
cursor: pointer;
}
}
.p-unfold{
width:100%;
text-align: center;
margin:5px 0;
a{
display: inline-block;
position: relative;
font-size:12px;
color:#06a8ff;
line-height:24px;
padding-right:15px;
&:after{
content:'';
width:8px;
height:8px;
border-bottom:1px solid #06a8ff;
border-right:1px solid #06a8ff;
transform: rotate(45deg);
position:absolute;
top:50%;
margin-top:-8px;
right:0;
}
}
}
.p-plan-item{
display: flex;
overflow: hidden;
background-color:#f9f9f9;
border-radius: 8px;
margin-bottom:6px;
.p-plan-title{
display: flex;
align-items: center;
background-color:#f2f2f2;
padding:6px 0;
span{
width:25px;
font-size:12px;
color:#06a8ff;
line-height:18px;
text-align: center;
}
}
.p-plan-con{
padding:5px 0;
}
}
</style>