<template>
|
<div class="processCon">
|
<div class="inner" :style="{'width':+process+'%'}"></div>
|
<div class="tips" :style="{'left':'calc('+process+'% - 10px)'}" style="left:">{{text}}</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: ['process', 'text'],
|
data() {
|
return {
|
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.processCon {
|
width: 100%;
|
height: 12px;
|
border-radius: 4px;
|
background-color: #f2f2f2;
|
position: relative;
|
}
|
|
.processCon .inner {
|
height: 12px;
|
border-radius: 4px;
|
background-color: #ffe328;
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
|
.processCon .tips {
|
position: absolute;
|
top: -40px;
|
left: 0;
|
background-color: #ffe328;
|
color: #333333;
|
font-size: 10px;
|
padding: 6px 12px;
|
border-radius: 4px;
|
}
|
|
.processCon .tips:before {
|
position: absolute;
|
content: '';
|
border-top: 10px #ffe328 solid;
|
border-left: 10px transparent dashed;
|
border-bottom: 10px transparent dashed;
|
border-right: 10px transparent dashed;
|
left: 0;
|
bottom: -16px;
|
/*覆盖并错开1px*/
|
border-top: 10px #ffe328 solid;
|
}
|
</style>
|
