1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

            <div class="compliance-bar" v-for="item in averageScore" :key="item.name">
                <div class="bar-label">
                    {{ item.name }}
                    <div>
                        <span :style="`color:${item.color}`">{{ item.value + `${item.base === '/ 100%' ? '%' : ''}`
                        }}</span> {{
                                item.base }}
                    </div>
                </div>
                <div class="bar-bg">
                    <div class="bar-fill"
                        :style="{ width: item.base === '/ 100%' ? item.value + '%' : item.value / 5 * 100 + '%', backgroundColor: item.color }">
                    </div>
                </div>
            </div>

1
2
3
4
5
6

const averageScore = [
    { name: "Qualitative Assessment (QA)", value: 2.4, base: '/ 5', color: "#ee6262" },
    { name: "Facility Proximity (FP)", value: 78.6, base: '/ 100%', color: "#ffe2a4" },
    { name: "Infrastructure Completion (IC)", value: 91.97, base: '/ 100%', color: "#b8afff" }
];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

        .compliance-bar {
            @include MarginBottom(20);

            .bar-label {
                display: flex;
                @include hHeight(17);
                font-family: PingFang SC;
                @include FontSize(12);
                text-transform: capitalize;
                @include MarginBottom(7);
                justify-content: space-between;
                color: #D3D3D4;
            }

            .bar-bg {
                width: 100%;
                @include hHeight(8);
                background: #39404a;

                .bar-fill {
                    height: 100%;
                    @include BorderRadius(4);
                }
            }

        }