方块进度条的实现

最终呈现样式

先说一下实现的原理，没什么复杂的，可以看到图中的分界线，里面的小方块是实际的div，外面的是border,带颜色的进度条是以div为相对定位的四条线。简单就是这么构成的，上代码

 <div id='app'>
        <div class="process_box" v-for="(item, index) in list" :key="index" :style="{
          width: processbox.data + 'px',
          height: processbox.data + 'px',
        }">
            <div class="params_pro" :style="{
                width: processbox.data + 'px',
              
              }">
                {{ item.processNum }}%
            </div>
            <div  class="params_title">
                {{ item.parameterName }}
            </div>
            <span class="process_top process_bar process_TB" :style="{
            width: processbox.data + 'px',
            height: processbox.progressbar,
          }">
                <span class="
              process_slider
              process_slider_TB
              process_slider_T
              process_slider_top
            " :style="{
              width: item.top,
              background: item.color,
              height: processbox.progressbar,
            }"></span>
            </span>
            <span class="process_right process_bar process_LR" :style="{
            height: processbox.data + 'px',
            width: processbox.progressbar,
          }">
                <span :style="{
              height: item.right,
              background: item.color,
              width: processbox.progressbar,
            }" class="
              process_slider
              process_slider_LR
              process_slider_right
              process_slider_R
            "></span>
            </span>
            <span class="process_bottom process_bar process_TB" :style="{
            width: processbox.data + 'px',
            height: processbox.progressbar,
          }">
                <span :style="{
              width: item.bottom,

              background: item.color,
              height: processbox.progressbar,
            }" class="process_slider process_slider_TB process_slider_bottom"></span>
            </span>
            <span class="process_left process_bar process_LR" :style="{
            height: processbox.data + 'px',
            width: processbox.progressbar,
          }">
                <span :style="{
              height: item.left,
              background: item.color,
              width: processbox.progressbar,
            }" class="
              process_slider
              process_slider_LR
              process_slider_L
              process_slider_left
            "></span>
            </span>
        </div>
    </div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            processbox: {
                data: 90,
                // 进度条width
                progressbar: "4px",
            },
            list: [
                {
                    parameterName: "浓度",
                    abnormalRatio: "0.3",
                    color: "linear-gradient(-3deg, #8C56E0, #6364DD)",
                },
                {
                    parameterName: "PH值",
                    abnormalRatio: "0.45",
                    color: "linear-gradient(-3deg, #CA6853, #DD6C97)",
                },
                {
                    parameterName: "流速",
                    abnormalRatio: "1",
                    color: "linear-gradient(-3deg, #8C56E0, #6364DD)",
                },
                {
                    parameterName: "流速",
                    abnormalRatio: "0.5",
                    color: "linear-gradient(-3deg, #8C56E0, #6364DD)",
                },
                // {
                //     parameterName: "硬度",
                //     abnormalRatio: "0.5",
                //     color: "linear-gradient(-3deg, #CA6853, #DD6C97)",
                // },
                // {
                //     title: "浓度",
                //     abnormalRatio: "0.9",
                //     color: " linear-gradient(-3deg, #CA6853, #DD6C97)",
                // },
                // {
                //     parameterName: "浓度",
                //     abnormalRatio: "0.53",
                //     color: "linear-gradient(-3deg, #6CC8C3, #30799C)",
                // },
                // {
                //     parameterName: "浓度",
                //     abnormalRatio: "0.96",
                //     color: " linear-gradient(-3deg, #CA6853, #DD6C97)",
                // },
                // {
                //     parameterName: "浓度",
                //     abnormalRatio: "0.30",
                //     color: "linear-gradient(-3deg, #6CC8C3, #30799C)",
                // },
            ],
        },
        methods: {
            processData() {
                this.list.forEach((item) => {
                    // /化为整数
                    // let processNum =Number(item.abnormalRatio) * 100
                    let processNum = (Number(item.abnormalRatio) * 100.0).toFixed(2);
                    this.$set(item, "processNum", processNum);
                    this.$set(item, "top", "");
                    this.$set(item, "right", "");
                    this.$set(item, "bottom", "");
                    this.$set(item, "left", "");
                    if (processNum < Number(50)) {
                        let processLength = (processNum / 2 / 25) * this.processbox.data;
                        item.bottom = processLength + "px";
                        item.left = processLength + "px";
                        item.right = "0px";
                        item.top = "0px";
                    }
                    if (processNum == 50) {
                        item.bottom = "100%";
                        item.left = "100%";
                        item.right = "0px";
                        item.top = "0px";
                    }
                    if (processNum > 50 && processNum <= 75) {
                        item.bottom = "100%";
                        item.left = "100%";
                        let topslider = ((processNum - 50) / 25) * this.processbox.data;
                        item.top = topslider + "px";
                        item.right = "0px";
                    }
                    if (processNum < 100 && processNum > 75) {
                        item.bottom = "100%";
                        item.left = "100%";
                        item.top = "100%";
                        let rightslider = ((processNum - 75) / 25) * this.processbox.data;
                        item.right = rightslider + "px";
                    }
                    if (processNum == 100 || processNum > 100) {
                        item.bottom = "100%";
                        item.left = "100%";
                        item.top = "100%";
                        item.right = "100%";
                    }
                });
            },
        },
        mounted() {
            this.processData()
        }

    })
</script>

<style>
    .process_box {
        border: 20px solid #1d234a;
        background: linear-gradient(-3deg, #2f3565, #2e2846);
        box-shadow: 0px 3px 7px 1px rgba(141, 131, 131, 0.26);
        border-radius: 4px;
        margin: 0 17px 0 2.5px;
        margin-bottom: 10px;
        position: relative;
    }

    .params_pro {
        position: absolute;
        font-size: 18px;
        text-align: center;
        top: 20%;
        font-weight: 500;
        color: #ffffff;
        transform: translate(-50%);
        left: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0px 4px 8px #141230;
    }

    .params_title {
        position: absolute;
        color: #fff;
        top: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 50px;
        text-align: center;
        font-size: 12px;
        transform: translate(-50%);
        left: 50%;
        box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.12);
        border-radius: 6px;
    }

    .process_bar {
        position: absolute;
        display: inline-block;
    }

    .process_top {
        top: 0px;
        height: 3px;
    }

    .process_right {
        right: 0px;
    }

    .process_TB {
        height: 4px;
        width: 80px;
    }

    .process_LR {
        height: 80px;
        width: 4px;
    }

    .process_bottom {
        bottom: 0px;
    }

    .process_left {
        left: 0px;
        bottom: 0;
    }

    .process_slider {
        position: absolute;
        display: inline-block;
    }

    .process_slider_TB {
        height: 4px;
    }

    .process_slider_LR {
        width: 4px;
    }

    .process_slider_R {
        border-radius: 0 0px 0 10px;
        z-index: 2;
        left: 0px;
    }

    .process_slider_T {
        border-radius: 0px 0px 10px 0;
        z-index: 1;
        top: 0px;
    }

    .process_slider_L {
        border-radius: 0px 10px 0px 0;
        left: 0px;
        bottom: 0px;
    }

    .process_slider_B {
        bottom: 0;
    }

    .process_slider_left {
        height: 80px;
        background-color: red;
    }

    .process_slider_top {
        width: 50px;
        background-color: red;
    }

    .process_slider_bottom {
        border-radius: 0 10px 0 0;
        width: 40px;
        background-color: red;
    }

    .process_slider_right {
        background-color: #d86060;
    }
</style>

</html>

好了，大概就是这样的over~