bt-xtgxq-population-bigdata/src/components/process/Process.vue

<template>
    <div class="container">
        <div class="left">
            <img :src="iconSrc"/>
        </div>
        <div class="right">
            <div class="top">
                <div class="title">{{ props.title }}</div>
                <div class="sub-title">{{ props.value }}</div>
            </div>
            <div class="bottom">
                <div class="process">
                    <div class="value" :style="{width: (props.process * 200) + 'px'}"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
    iconType: {
        type: Number,
        default: 1
    },
    color: {
        type: String,
        default: 'rgba(0, 0, 255)'
    },
    bgColor: {
        type: String,
        default: 'rgba(0, 0, 255, 0.3)'
    },
    title: {
        type: String,
        default: '标题'
    },
    value: {
        type: String,
        default: '0'
    },
    process: {
        type: Number,
        default: 0
    }
});
const color = ref(props.color)
const bgColor = ref(props.bgColor)
const iconSrc = ref('assets/imgs/icon/shbz1.png');
if(props.iconType === 2) {
    iconSrc.value = 'assets/imgs/icon/shbz2.png';
} else if(props.iconType === 3) {
    iconSrc.value = 'assets/imgs/icon/shbz3.png';
} else if(props.iconType === 4) {
    iconSrc.value = 'assets/imgs/icon/shbz4.png';
}

</script>

<style lang="stylus" scoped>
.container
    display flex
    .left
        margin-top 5px
        margin-right 10px
        img
            width 30px
            height 30px
    .right
        display flex
        flex-direction column
        .top
            display flex
            justify-content space-between
            align-items center
            height 18px
            margin 5px 0
            .title
                font-size 14px
            .sub-title
                font-size 12px
                color v-bind(color)
        .bottom
            width 200px
            .process
                background-color v-bind(bgColor)
                width 100%
                height 6px
                position relative
                .value
                    background linear-gradient(90deg, v-bind(color), #FFF)
                    box-shadow 0 0 3px rgba(0, 0, 0, 0.3)
                    position absolute
                    top 0
                    left 0
                    width 120px
                    height 6px
                    border-radius 0 5px 5px 0
            
</style>