/*
* @Author: shs
* @Date: 2019-04-19 17:48:39
* @Last Modified by: shs
* @Last Modified time: 2019-04-22 11:30:55
*/
<template>
<div class="p-r" style="overflow: hidden" :style="{width: widths, background: 'lightgray'}">
<div class="p-a" :style="{width: actwidths, background: '#4cf9ff'}"></div>
<span class="left"><span>{{dataf.cur}}</span>{{dataf.leftword}}</span><span class="right">{{dataf.rightword1}}<span>{{dataf.total}}</span>{{dataf.rightword2}}</span>
</div>
</template>
<script>
export default {
data () {
return {
actwidths: '0%'
}
},
props: {
dataf: {
type: Object,
default: {
total: 0,
cur: 0,
leftword: '台开机',
rightword1: '总',
rightword2: '台'
}
},
widths: {
type: String,
defalut: '100%'
},
settings: {
type: Object,
defalut: {
}
}
},
methods: {
},
watch: {
data: function(val, old) {
if (val.total !== 0 && val.cur !== 0) { //total
this.actwidths = ((val.cur/val.total) * 100).toFixed(1) +'%'
console.log(this.actwidths)
}
}
},
mounted () { //wait dom loading, operate data
if (this.dataf.total !== 0&&this.dataf.cur !== 0) { //total
console.log(this.dataf)
this.actwidths = ((this.dataf.cur/this.dataf.total) * 100).toFixed(1) +'%'
console.log(this.actwidths)
}
}
}
</script>
<style lang="scss" scoped>
$back-fill: #4cf9ff;
$height: 30px;
$font-color: white;
.p-r {
position: relative;
width: 100%;
height: $height;
}
.p-a {
display: inline-block;
position: absolute;
top: 0;
left: 0;
height: $height;
}
.p-a:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
right: -10px;
border-top: 20px solid $back-fill;
border-left: 5px solid $back-fill;
border-right: 5px solid transparent;
border-bottom: 20px solid transparent;
}
.left {
display: inline-block;
position: absolute;
top:0;
left: 10px;
height: $height;
width: 50%;
line-height: $height;
color: $font-color;
}
.right {
display: inline-block;
position: absolute;
top: 0;
right: 10px;
height: $height;
width: 50%;
line-height: $height;
text-align: right;
color: $font-color;
}
</style>