vue中使⽤element-UI组件Timeline时间线的使⽤
vue中使⽤element-UI 组件Timeline 时间线的使⽤
重点是对时间点的赋值
this.activities[0][‘timestamp’]=payFinishTime
<template>
<div class="all">
<div class="desc">
付款成功
</div>
<div class="show">
<div class="main">
<p>商品名称：聚优保百万医疗</p>
<p>保单号：{{this.policyNo}}</p>
</div>
<div class="part">
</div>
</div>
<div class="body">
<p class="a">订单状态</p>
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="pe"
:color="lor"
:size="activity.size"
:timestamp="activity.timestamp">
{{t}}
</el-timeline-item>
</el-timeline>
</div>
<div class="back">
<div class="backBtn" @click="$router.push('/home')">
返回⾸页
</div>
<div class="bottom">
</div>
</div>
</div>
</div>
</template>
<script>
export default{
created(){
console.log(this.$route.query)
const{data}=this.$route.query
const base64DecryptData=JSON.parse(this.$Base64.decode(this.$jsd.decryptLong(this.$Base64.decode(data))))
const{payFinishTime,policyNo}= base64DecryptData
console.log(payFinishTime)
console.log(policyNo)
this.activities[0]['timestamp']=payFinishTime
this.policyNo=policyNo
},
data(){
return{
activities:[{
content:'订单付款成功，等待聚优保处理',
timestamp:'',
size:'large',
type:'primary',
color:'#0bbd87'
},
{
content:'处理完成后电⼦保单会发送到您的邮箱或⼿机',
color:'#0bbd87',
size:'large',
}],
policyNo:''
}
}
}
</script>
<style lang='scss' scoped>
.all{
width:375px;
.
desc{
height:44px;
text-align: center;
line-height:44px;
font-size:18px;
font-weight:600;
background-color: #fff;
}
.show{
margin-top:10px;
height:208px;
background-color: #fff;
padding-top:54px;
position: relative;
.main{
width:343px ;
height:135px;
background:url('../assets/PaymentSuccessfully/圆⾓矩形 1.png');        background-size: cover;
margin:0 auto;
padding-top:60px;
text-align: center;
color: #fff;
font-size:14px;
}
.part{vue element admin
width:80px;
height:80px;
background:url('../assets/PaymentSuccessfully/椭圆 1.png');
background-size: cover;
position: absolute;
top:0;
left:50%;
transform:translate(-50%);
}
}
.body{
background-color: #fff;
padding-left:15px;
.a {
color: #333;
}
.block {
margin-top:20px;
margin-left:20px;
}
}
.back{
height:360px;
.backBtn{
width:120px;
height:30px;
background:url('../assets/PaymentSuccessfully/圆⾓矩形 2 拷贝.png');        background-size: cover;
border-radius:5px;
margin:0 auto;
margin-top:10px;
color: #fff;
font-size:16px;
text-align: center;
line-height:30px;
}
.bottom{
height:120px;
width:340px;
background:url('../assets/PaymentSuccessfully/圆⾓矩形 6.png');
background-size: cover;
border-radius:10px;
margin-top:25px;
margin-left:5px;
}
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。