82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
<template>
|
|
<div class="contractGuarantee">
|
|
<div class="top">
|
|
<p class="title">{{obj.title}}</p>
|
|
<p class="value">{{obj.value}}%</p>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="success" :style="{width:obj.value + '%'}"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "contractGuarantee",
|
|
data() {
|
|
return {
|
|
obj:{
|
|
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(value) {
|
|
this.obj = value
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.contractGuarantee{
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
.top{
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
.title{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
}
|
|
.value{
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #150002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.progress{
|
|
width: 100%;
|
|
height: 14px;
|
|
background: #E5E8EF;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
.success{
|
|
position: absolute;
|
|
left: 0;top: 0;
|
|
height: 100%;
|
|
background: #1E80FF;
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|