大二下学期第一次结对作业（第二阶段）

全球疫情信息已经爬取完毕，今日主要实现了前端可视化的布局，将页面分为了五个区块：

1.主要信息，2.头部信息，3.地图，4.查询区块，5.柱状图区块。

主要用div进行分块，利用了弹性布局，为了美观每个div之间有一定间距，并对字体等进行了初步设定。

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
    background: #f3f4f8;
    background-size: cover;
    /* 行高是字体1.15倍 */
    line-height: 1.15;
}

header {
    position: relative;
    height: 0.5rem;
    background-size: 100% 100%;
}

header font {
    font-size: 0.35rem;
    color: #14224f;
    line-height: 0.5rem;
}

header .showTime {
    line-height: 0.5rem;
    font-size: 0.3rem;
    color: #14224f;
    margin-left: 330px;
}

header .data {
    line-height: 0.5rem;
    font-size: 0.3rem;
    color: #14224f;
    margin-left: 330px;
}

.mainbox {
    min-width: 1024px;
    max-width: 1920px;
    padding: 0.125rem 0.125rem 0;
    display: flex;
}

.mainbox .column {
    flex: 2;
    background: #ffffff;
}

#map {
    background: #f3f4f8;
}

.mainbox .column2 {
    flex: 3;
    background: #ffffff;
}

.mainbox .column .map {
    height: 480px;
    background: #ffffff;
}

.mainbox .bar {
    height: 200px;
    margin-top: 10px;
    background: #ffffff;
}