<template>
    <div class="box">
        <div class="left">
            <img src="../../assets/img/标题/能效管理-能耗.png" class="title" />
            <div class="fhgl">
                <div class="imgBox1">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>单耗</p>
                </div>
                <div class="first">
                    <img src="../../assets/NXGL/jide.png" alt="">
                    <ul>
                        <li class="danhao">
                            水泥单位产品综合能耗：
                            <span class="count">80</span>
                            <span class="danwei">kgce/t</span>
                        </li>
                        <li class="danhao">
                            水泥大内产品综合电耗：
                            <span class="count">40</span>
                            <span class="danwei">kgce/t</span>
                        </li>
                        <li class="danhao">
                            熟料单位产品综合能耗：
                            <span class="count">100</span>
                            <span class="danwei">kgce/t</span>
                        </li>
                        <li class="danhao">
                            熟料单位产品综合电耗：
                            <span class="count">48</span>
                            <span class="danwei">kgce/t</span>
                        </li>
                        <li class="danhao">
                            熟料单位产品综合煤耗：
                            <span class="count">94</span>
                            <span class="danwei">kgce/t</span>
                        </li>
                    </ul>
                </div>
                <div class="imgBox2">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>分类能耗</p>
                </div>
                <div class="second">
                    <div class="s_one">
                        <div class="s_l">
                            <p>今日:3122kWh</p>
                            <p>昨日:9400kWh</p>
                        </div>
                        <div class="s_r">
                            <p>
                                同比:<span class="tongbi">201%</span>
                                <img src="../../assets/NXGL/图层 905.png" alt="">
                            </p>
                        </div>
                    </div>
                    <div class="s_two">
                        <div class="s_l">
                            <p>今日:3122kWh</p>
                            <p>昨日:9400kWh</p>
                        </div>
                        <div class="s_r">
                            <p>
                                同比:<span class="tongbi">201%</span>
                                <img src="../../assets/NXGL/图层 905.png" alt="">
                            </p>
                        </div>
                    </div>
                    <div class="s_three">
                        <div class="s_l">
                            <p>今日:3122kWh</p>
                            <p>昨日:9400kWh</p>
                        </div>
                        <div class="s_r">
                            <p>
                                同比:<span class="tongbi">201%</span>
                                <img src="../../assets/NXGL/图层 905.png" alt="">
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ShuinichangNXGL',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    padding-top: 500px;
    box-sizing: border-box;
    display: flex;
    background-color: transparent;
    justify-content: space-between;
}

.left {
    width: 1237px;
    height: 2500px;
    margin-left: 61px;
    background-image: url("../../assets/img/侧边.png");
    padding-left: 59px;
    padding-right: 45px;
    box-sizing: border-box;

    .title {
        margin-top: 15px;
        margin-left: 60px;
    }

    .fhgl {
        position: relative;
        margin-top: 56px;

        .imgBox1 {
            height: 93px;
            width: 1156px;
            margin-bottom: 108px;

            p {
                position: absolute;
                color: #fff;
                top: 20px;
                left: 50px;
                font-size: 30px;
                font-family: "MicrosoftYaHei";
            }
        }

        .first {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            img {
                width: 320px;
            }

            ul {
                width: 555px;
                list-style: none;

                .danhao {
                    padding-left: 20px;
                    color: #fff;
                    width: 555px;
                    height: 60px;
                    line-height: 60px;
                    margin-bottom: 18px;
                    opacity: 1;
                    background: url(../../assets/NXGL/组\ 277.png);
                    background-size: cover;
                    font-size: 30px;

                    .count {
                        width: 60px;
                        height: 60px;
                        color: #00C0FA;
                        font-size: 40px;
                        padding-right: 10px;
                    }
                }
            }

        }

        // 左边第二个
        .imgBox2 {
            height: 93px;
            width: 1156px;
            margin-top: 80px;

            p {
                position: absolute;
                color: #fff;
                top: 692px;
                left: 50px;
                font-size: 30px;
                font-family: "MicrosoftYaHei";
            }
        }

        .second {
            .s_one {
                width: 100%;
                height: 175px;
                background: url(../../assets/NXGL/组\ 278.png);
                background-size: cover;
                margin-top: 80px;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .s_l {
                    padding-top: 10px;
                    margin-left: 200px;
                    width: 299px;
                    height: 120px;
                    font-size: 40px;
                    font-family: MicrosoftYaHei;
                    color: #FFFFFF;
                }

                .s_r {
                    width: 300px;
                    height: 120px;
                    line-height: 120px;
                    font-size: 40px;

                    p {
                        width: 300px;
                        height: 54px;
                        // line-height: 54px;
                        color: #FFFFFF;
                    }

                    span.tongbi {
                        font-size: 40px;
                        width: 133px;
                        height: 54px;
                        // line-height: 54px;
                        font-weight: 700;
                        font-family: YouSheBiaoTiHei;
                        color: #58FD64;
                        margin-left: 8px;
                        margin-right: 8px;
                    }
                }
            }

            .s_two {
                width: 100%;
                height: 175px;
                margin-top: 60px;
                background: url(../../assets/NXGL/组\ 279.png);
                background-size: cover;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .s_l {
                    padding-top: 10px;
                    margin-left: 200px;
                    width: 299px;
                    height: 120px;
                    font-size: 40px;
                    font-family: MicrosoftYaHei;
                    color: #FFFFFF;
                }

                .s_r {
                    width: 300px;
                    height: 120px;
                    line-height: 120px;
                    font-size: 40px;

                    p {
                        width: 300px;
                        height: 54px;
                        // line-height: 54px;
                        color: #FFFFFF;
                    }

                    span.tongbi {
                        font-size: 40px;
                        width: 133px;
                        height: 54px;
                        // line-height: 54px;
                        font-weight: 700;
                        font-family: YouSheBiaoTiHei;
                        color: #DA1015;
                        margin-left: 8px;
                        margin-right: 8px;
                    }
                }
            }

            .s_three {
                width: 100%;
                height: 175px;
                margin-top: 60px;
                background: url(../../assets/NXGL/组\ 280.png);
                background-size: cover;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .s_l {
                    padding-top: 10px;
                    margin-left: 200px;
                    width: 299px;
                    height: 120px;
                    font-size: 40px;
                    font-family: MicrosoftYaHei;
                    color: #FFFFFF;
                }

                .s_r {
                    width: 300px;
                    height: 120px;
                    line-height: 120px;
                    font-size: 40px;

                    p {
                        width: 300px;
                        height: 54px;
                        // line-height: 54px;
                        color: #FFFFFF;
                    }

                    span.tongbi {
                        font-size: 40px;
                        width: 133px;
                        height: 54px;
                        // line-height: 54px;
                        font-weight: 700;
                        font-family: YouSheBiaoTiHei;
                        color: #58FD64;
                        margin-left: 8px;
                        margin-right: 8px;
                    }
                }
            }
        }
    }
}</style>