SOURCE

<div id="app">

    <div id="id1">
        <span class="class1">板坯号</span>
        <span class="class2">E91668620300</span>
    </div>

    <div id="id2">
        <div class="class1">
            <span class="font">F17</span>
            <span class="number">100</span>
            <span class="symbol">%</span>
        </div>
        <div class="class1">
            <span class="font">CT</span>
            <span class="number">100</span>
            <span class="symbol">%</span>
        </div>
        <div class="class1">
            <span class="font">凹度</span>
            <span class="number">100</span>
            <span class="symbol">%</span>
        </div>
        <div class="class1">
            <span class="font">锲形</span>
            <span class="number">22.5</span>
            <span class="symbol">%</span>
        </div>
        <div class="class1">
            <span class="font">平直度</span>
            <span class="number">100</span>
            <span class="symbol">%</span>
        </div>
        <div class="class1">
            <span class="font">C25-C40</span>
            <span class="number">100</span>
            <span class="symbol">%</span>
        </div>
        <div class="class1">
            <span class="font">C40-C75</span>
            <span class="number">100</span>
            <span class="symbol">%</span>
        </div>
        <div class="class1">
            <span class="font">镰刀湾</span>
            <span class="number">100</span>
            <span class="symbol" display: none;>%</span>
        </div>
    </div>

    <div id="id3">
        <span class="font">厚度</span>
        <span class="number">100</span>
        <span class="symbol">%</span>
    </div>

    <div id="id4">
        <span class="font">宽度</span>
        <span class="number">100</span>
        <span class="symbol">%</span>
    </div>

</div>

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

.font {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 20px;
    width: 150px;
    float: left;
    text-align: right;
}
.number {
    font-size: 72px;
    color: #FFFFFF;
    width: 130px;
}
.symbol {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 20px;
}

#id1 {
    position: absolute;
    top: 60px;
    left: 281px;
    background: linear-gradient(0deg, #2c87ff, #aceefd);
    -webkit-background-clip: text;
}

#id1 .class1 {
    font-size: 57px;
    color: transparent;
    margin: 10px;
    text-shadow:12px 17px 60px #318BFF;
}

#id1 .class2 {
    font-size: 96px;
    color: transparent;
    margin: 10px;
    text-shadow:12px 17px 60px #318BFF;
}

#id2 {
    position: absolute;
    right: 93px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

#id2 .class1 {
    display: flex;
    align-items: center;
}

#id2 .number {
    font-size: 72px;
    color: #45DEFF;
    width: 130px;
}

#id3 {
    position: absolute;
    left: 20px;
    top: 300px;
    display: flex;
    align-items: center;
}

#id4 {
    position: absolute;
    left: 950px;
    top: 250px;
    display: flex;
    align-items: center;
}