airquality.html

<div class="reading-box">
    <div class="title">
        <a id="pollutants_link" onclick="javascript:activeReading('pollutants')" class="active">Pollutants</a></div>
    <div class="pollutants" style="display:block;">
        <div class="pollutant-item">
            <div class="name">PM10</div>
            <div class="unit">μg/m³</div>
            <div class="value">87</div>
            <div class="ratio-bar" style="background:#EB3737; width:calc(100%*0.83194446563721);"></div>
            <div class="ratio-bar-bg"></div>
        </div>
        <div class="pollutant-item">
            <div class="name">PM2.5</div>
            <div class="unit">μg/m³</div>
            <div class="value">22</div>
            <div class="ratio-bar" style="background:#6AD54F; width:calc(100%*0.20435184902615);"></div>
            <div class="ratio-bar-bg"></div>
        </div>
        <div class="pollutant-item">
            <div class="name">NO2</div>
            <div class="unit">μg/m³</div>
            <div class="value">36</div>
            <div class="ratio-bar" style="background:#7CD565; width:calc(100%*0.058275289203397);"></div>
            <div class="ratio-bar-bg"></div>
        </div>
        <div class="pollutant-item">
            <div class="name">O3</div>
            <div class="unit">μg/m³</div>
            <div class="value">6</div>
            <div class="ratio-bar" style="background:#7CD565; width:calc(100%*0.01727272765805);"></div>
            <div class="ratio-bar-bg"></div>
        </div>
        <div class="pollutant-item">
            <div class="name">SO2</div>
            <div class="unit">μg/m³</div>
            <div class="value">5</div>
            <div class="ratio-bar" style="background:#7CD565; width:calc(100%*0.0053409091149918);"></div>
            <div class="ratio-bar-bg"></div>
        </div>
        <div class="clr"></div>
    </div>
</div>
<style>
.body {
    font-family: "SF Pro SC", "SF Pro Text", "Helvetica Neue", "Helvetica", "Myriad Set Pro", "HanHei SC", "SF Pro Icons", "PingFang SC", "Arial", sans-serif;
}
.reading-box{width: calc(100% - 30px); margin: 0px auto 30px;}
.reading-box .title{font-weight: 400; font-size: 15px; color: #333;}
.reading-box .title a{cursor: pointer;}
.reading-box .title .active{color: #333; font-weight: 400;}
.reading-box .title .spliter{margin: 0 8px; font-weight: 300; color: #aaa;}
.reading-box .pollutant-item{width: calc(50% - 10px); height: 55px; margin-top: 15px; position: relative;}
.reading-box .pollutant-item .name{position: absolute; top:0px; left:0px; font-size: 12px; color: #aaa; font-weight: 400;}
.reading-box .pollutant-item .unit{position: absolute; top:27px; right:0px; font-size: 12px; font-weight: 300; color: #aaa;}
.reading-box .pollutant-item .value{position: absolute; top:12px; left:0px; font-size: 28px; font-weight: 200; color: #222;}
.reading-box .pollutant-item .ratio-bar{position: absolute; bottom:0px; left:0px; width: 100%; height: 3px; z-index: 20;}
.reading-box .pollutant-item .ratio-bar-bg{position: absolute; bottom:0px; left:0px; width: 100%; height: 3px; background: #e8e8e8;}
</style>