贷款用户信用分组件

效果图：

 封装组件：     xyfBar.vue

<template>
    <div>
        <div class="xyf">
            <div class="xyfBar1">
                一级
                <div class="warningLine" :style="`left:calc( ${percentNum}% - 30px )`" v-if="oneBool">
                    <div>一级/{{ num }}</div>
                    <div class="redLine"></div>
                </div>
            </div>
            <div class="xyfBar2">二级
                <div class="warningLine" v-if="twoBool" :style="`left:calc( ${percentNum}% - 30px )`">
                    <div>二级/{{ num }}</div>
                    <div class="redLine"></div>
                </div>
            </div>
            <div class="xyfBar3">三级
                <div class="warningLine" v-if="threeBool" :style="`left:calc( ${percentNum}% - 30px )`">
                    <div>三级/{{ num }}</div>
                    <div class="redLine"></div>
                </div>
            </div>
            <div class="xyfBar4">四级
                <div class="warningLine" v-if="fourBool" :style="`left:calc( ${percentNum}% - 30px )`">
                    <div>四级/{{ num }}</div>
                    <div class="redLine"></div>
                </div>
            </div>
            <div class="xyfBar5">五级
                <div class="warningLine" v-if="fiveBool" :style="`left:calc( ${percentNum}% - 30px )`">
                    <div>五级/{{ num }}</div>
                    <div class="redLine"></div>
                </div>
            </div>
        </div>
        <div style="display:flex;color: #999999;margin-top: 10px;">
            <div style="width:88px">0</div>
            <div style="width:102px">300</div>
            <div style="width:100px">450</div>
            <div style="width:100px">600</div>
            <div style="width:100px">750</div>
            <div style="width:100px">850</div>
        </div>
    </div>
 
</template>

<script>
export default {
    name: "xyfBar",
    props:{
        num:{
            typeof:Number,
            default:0
        }
    },
    watch:{
        num:{
            handler(val){
                this.init(val)
            },
            immediate:true
        }
    },
    data() {
      return {
        oneBool:false,
        twoBool:false,
        threeBool:false,
        fourBool:false,
        fiveBool:false,

        percentNum:0,
      }
    },
    methods:{
        init(num){
            if (num<300) {
                this.oneBool=true
                this.percentNum=(num/300).toFixed(2)*100
            } else if ( num>=300 && num<450 ){
                this.twoBool=true
                let a = num - 300
                this.percentNum=(a/150).toFixed(2)*100
            } else if ( num>=450 && num<600 ){
                this.threeBool=true
                let a = num - 450
                this.percentNum=(a/150).toFixed(2)*100
            } else if ( num>=600 && num<750 ){
                this.fourBool=true
                let a = num - 600
                this.percentNum=(a/150).toFixed(2)*100
            } else if ( num>=750 && num<=850 ){
                this.fiveBool=true
                let a = num - 750
                this.percentNum=(a/100).toFixed(2)*100
            }
        }
    }
}
</script>

<style lang="less" scoped>
.xyf{
    display: flex;
    margin-top: 30px;
    .xyfBar1{
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        background: linear-gradient(90deg, #FCE183 0%, #D0D981 100%);
        border-radius: 10px 0 0 10px;
        position: relative;
        .warningLine{
            width: 60px;
            display: flex;
            flex-direction: column;
            position: absolute;
            top: -25px;
            align-items: center;
            color: #FA5151;
            z-index: 999999;
            .redLine{
                width: 2px;
                height: 30px;
                background: #FA5151;
            }
        }
    }
    .xyfBar2{
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        margin-left: 1px;
        background: linear-gradient(90deg, #CCD981 0%, #9CD07F 100%);
        position: relative;
        .warningLine{
            width: 60px;
            position: absolute;
            top: -25px;
            left: ( 80% - 30px );
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FA5151;
            z-index: 999999;
            .redLine{
                width: 2px;
                height: 30px;
                background: #FA5151;
            }
        }
    }
    .xyfBar3{
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        margin-left: 1px;
        background: linear-gradient(90deg, #98CF7F 0%, #67C77C 100%);
        position: relative;
        .warningLine{
            width: 60px;
            position: absolute;
            top: -25px;
            left: ( 80% - 30px );
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FA5151;
            z-index: 999999;
            .redLine{
                width: 2px;
                height: 30px;
                background: #FA5151;
            }
        }
    }
    .xyfBar4{
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        margin-left: 1px;
        background: linear-gradient(90deg, #67C77C 0%, #33BE7A 100%);
        position: relative;
        .warningLine{
            width: 60px;
            position: absolute;
            top: -25px;
            left: ( 80% - 30px );
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FA5151;
            z-index: 999999;
            .redLine{
                width: 2px;
                height: 30px;
                background: #FA5151;
            }
        }
    }
    .xyfBar5{
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        margin-left: 1px;
        background: linear-gradient(90deg, #33BE7A 0%, #01B578 100%);
        border-radius: 0 10px 10px 0;
        position: relative;
        .warningLine{
            width: 60px;
            position: absolute;
            top: -25px;
            left: ( 80% - 30px );
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FA5151;
            z-index: 999999;
            .redLine{
                width: 2px;
                height: 30px;
                background: #FA5151;
            }
        }
    }
}
</style>

父组件引用： 

<xyfBar :num="xyf"></xyfBar>

import xyfBar from '@/views/fdd/modules/xyfBar.vue'

components:{
        xyfBar
    },


    data() {
      return {
        xyf:800,
      }
    },