SOURCE

const App = {
    template: `
    <div id="app">
        <div id="id1">

            <div class=group>
                <div class="name">结巴</div>

                <div class="line">
                    <div class="label">
                        <div class="labelItem">
                            <div class="labelText">30t</div>
                        </div>
                    </div>
                    <a-progress :percent="30" :showInfo="false" :strokeWidth="12"/>
                </div>
            </div>

            <div class=group>
                <div class="name">氧化铁皮</div>

                <div class="line">
                    <div class="label">
                        <div class="labelItem">
                            <div class="labelText">30t</div>
                        </div>
                    </div>
                    <a-progress :percent="30" :showInfo="false" />
                </div>
            </div>

            <div class=group>
                <div class="name">结巴</div>

                <div class="line">
                    <div class="label">
                        <div class="labelItem">
                            <div class="labelText">30t</div>
                        </div>
                    </div>
                    <a-progress :percent="30" :showInfo="false" />
                </div>
            </div>

            <div class=group>
                <div class="name">结巴</div>

                <div class="line">
                    <div class="label">
                        <div class="labelItem">
                            <div class="labelText">30t</div>
                        </div>
                    </div>
                    <a-progress :percent="30" :showInfo="false" />
                </div>
            </div>

            <div class=group>
                <div class="name">结巴</div>

                <div class="line">
                    <div class="label">
                        <div class="labelItem">
                            <div class="labelText">30t</div>
                        </div>
                    </div>
                    <a-progress :percent="30" :showInfo="false" />
                </div>
            </div>

        </div>

        <div id="id2">
            缺陷板坯重量（吨）
        </div>

        <div id="id3">
            产能（吨）
        </div>

        <div id="id4">
            轧制量（块）
        </div>

        <div id="id5">
            
        </div>
        <div id="id6">
            
        </div>
    </div>
    `,
    data() {
        return {
            
        };
    },
    methods: {
        
    },
    mounted () {
        
    },
}

new Vue({
    el: '#app',
    render: h => h(App),
});    

<div id="app">
</div>

#app {
    width: 1920px;
    height: 962px;
    display: grid;
    grid: repeat(100, 1%) / repeat(100, 1%);
    background: url("http://47.101.214.96/5.jpg");
    position: relative;
}

#id1 {
    position: absolute;
    top: 100px;
    left: 202px;
    height: 720px;
    width: 816px;
}

#id1 {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
}

#id1 .name {
    padding-top: 55px;
    font-size: 30px;
    width: 20%;
    color: rgb(255, 255, 255);
    height: 100px;
    float: left;
}

#id1 .line {
    width: 80%;
    height: 100px;
    float: left;
}

#id1 .label {
    height: 65px;
    position: relative;
    left: 30%;
}

#id1 .labelItem {
    width: 124px;
    height: 90px;
    background: url(http://47.101.214.96/4.png);
    position: relative;
    z-index: 2;
    left: -62px;
}

#id1 .labelText {
    font-size: 30px;
    text-align: center;
}

#id2 {
    position: absolute;
    top: 37px;
    left: 142px;
    font-size: 30px;
    color: #18F9C6;
}

#id3 {
    position: absolute;
    top: 35px;
    left: 1400px;
    font-size: 24px;
    color: #18F9C6;
    width: 250px;
    text-align: center;
}

#id4 {
    position: absolute;
    top: 465px;
    left: 1400px;
    font-size: 24px;
    color: #18F9C6;
    width: 250px;
    text-align: center;
}

#id5 {
    position: absolute;
    top: 110px;
    left: 1300px;
    width: 450px;
    height: 280px;
    background: rgb(255, 0, 0);
}

#id6 {
    position: absolute;
    top: 540px;
    left: 1300px;
    width: 450px;
    height: 280px;
    background: rgb(255, 0, 0);
}