背景：最近，手机微信端的项目需要重构，涉及到日历页面，需要重新设计一个，遇到的日历页面布局如下，在此记录一下。
一、日历页面基本布局
查看设计稿，日历局部的布局难点在于红色部分，涉及到三级嵌套，而且有选中与未选中状态的背景色变化，且“入住”与“离店”状态之间又有灰色背景，处理好这部分的布局结构，那么问题也就迎刃而解了。
日历全局页面，分为两个部分，底层遮罩部分，上面日历页面部分。其中涉及到红色框中的部分，主要是层级排列，html部分注意结构就可以了。具体html结构部分如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>日历页面</title>
</head>
<body>
<div class="container1">
<div class="wi-mask"></div>
<div class="wi-dialog">
<div class="wi-toolbar">
<div class="tar-inner">
<a class="cal-pre-month"></a>
<div class="current-value">
<div class="current-month">2019年1月</div>
</div>
<a class="cal-next-month"></a>
</div>
</div>
<div class="wi-modal">
<div class="cal-week-days">
<div class="cal-week-day">日</div>
<div class="cal-week-day">一</div>
<div class="cal-week-day">二</div>
<div class="cal-week-day">三</div>
<div class="cal-week-day">四</div>
<div class="cal-week-day">五</div>
<div class="cal-week-day">六</div>
</div>
<div class="cal-months-wrapper">
<div class="cal-month-current">
<div class="week-row">
<div class="cal-day">
<div class="cal-fo"></div>
</div>
<div class="cal-day">
<div class="cal-fo"></div>
</div>
<div class="cal-day cal-day-prev">
<div class="cal-fo">1</div>
<div class="cal-festival">元旦</div>
</div>
<div class="cal-day cal-day-prev">
<div class="cal-fo">2</div>
</div>
<div class="cal-day">
<div class="cal-fo">3</div>
<div class="cal-festival">今天</div>
</div>
<div class="cal-day">
<div class="cal-fo">4</div>
</div>
<div class="cal-day">
<div class="cal-fo">5</div>
</div>
</div>
<div class="week-row">
<div class="cal-day">
<div class="cal-fo">6</div>
</div>
<div class="cal-day">
<div class="cal-fo">7</div>
</div>
<div class="cal-day">
<div class="cal-fo">8</div>
</div>
<div class="cal-day">
<div class="cal-fo">9</div>
</div>
<div class="cal-day">
<div class="cal-fo">10</div>
</div>
<div class="cal-day">
<div class="cal-fo">11</div>
</div>
<div class="cal-day">
<div class="cal-fo">12</div>
</div>
</div>
<div class="week-row">
<div class="cal-day">
<div class="cal-fo">13</div>
</div>
<div class="cal-day">
<div class="cal-fo">14</div>
</div>
<div class="cal-day">
<div class="cal-fo">15</div>
</div>
<div class="cal-day">
<div class="cal-fo">16</div>
</div>
<div class="cal-day">
<div class="cal-fo">17</div>
</div>
<div class="cal-day">
<div class="cal-fo">18</div>
</div>
<div class="cal-day">
<div class="cal-fo">19</div>
</div>
</div>
<div class="week-row">
<div class="cal-day">
<div class="cal-fo">20</div>
</div>
<div class="cal-day">
<div class="cal-fo">21</div>
</div>
<div class="cal-day">
<div class="cal-fo">22</div>
</div>
<div class="cal-day">
<div class="cal-fo">23</div>
</div>
<div class="cal-day">
<div class="cal-fo">24</div>
</div>
<div class="cal-day">
<div class="cal-fo">25</div>
</div>
<div class="cal-day">
<div class="cal-fo">26</div>
</div>
</div>
<div class="week-row">
<div class="cal-day">
<div class="cal-day-red cal-fo">27</div>
<div class="cal-festival cal-white">入住</div>
</div>
<div class="cal-day cal-day-gray">
<div class="cal-fo">28</div>
</div>
<div class="cal-day cal-day-gray">
<div class="cal-fo">29</div>
</div>
<div class="cal-day">
<div class="cal-fo">30</div>
<div class="cal-festival">三十</div>
</div>
<div class="cal-day">
<div class="cal-day-red cal-fo">31</div>
<div class="cal-festival cal-white">离店</div>
</div>
<div class="cal-day">
<div class="cal-fo"></div>
</div>
<div class="cal-day">
<div class="cal-fo"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>下面添加CSS部分的样式如下：
/*=================reset===================*/
html,.page{
font-size:100%;
height:100%;
}
.tabbar{height:100%;}
body,input,select,textarea,button,.wx-btn{
font-size:1em;
line-height:1.3;
font-family:PingFangSC-Regular,Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
}
html,body,nav,ul,li,h2,h3,figure,h1,p {
padding: 0px;
margin: 0px
}
body {
min-width: 320px;
max-width:540px;
overflow-x: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-text-size-adjust: none;
-moz-user-select: none;
margin:0 auto;
height:100%;
background:#f5f5f5;
}
/****日历****/
.container1 {
height: 100%;
overflow: auto;
box-sizing: border-box;
background-color: #F4F5F8;
}
.wi-dialog {
top: auto;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
width: 100%;
height: auto;
overflow: hidden;
padding: 20px 0px 0px 0px;
z-index: 120;
position: absolute;
box-sizing: border-box;
border-radius: 8px 8px 0px 0px;
}
.wi-dialog .wi-toolbar {
position: relative;
width: 100%;
height: 34px;
}
.wi-toolbar .tar-inner {
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
padding: 0 36px;
}
.tar-inner i.icon-ShapeCopyx,
.tar-inner i.icon-Shapex {
color: #F9504C;
font-size: 19px;
}
.current-value .current-month {
font-size:18px;
font-weight:600;
color:#414355;
line-height:18px;
text-align: center;
}
.current-value .current-day {
font-size:12px;
font-weight:400;
color:#82858D;
line-height:12px;
text-align: center;
margin-top: 4px;
}
.wi-modal {
/*padding: 0px 25px;*/
}
.wi-modal .cal-week-days {
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
padding: 0px 25px;
}
.cal-week-days .cal-week-day {
font-size:17px;
font-weight:600;
line-height:24px;
margin-top: 15px;
margin-bottom: 19px;
width: calc(100% / 7);
text-align: center;
}
.wi-modal .cal-months-wrapper {
width: 100%;
height: 300px;
overflow: auto;
position: relative;
}
.cal-months-wrapper .cal-month-current {
width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: row;
position: absolute;
top: 0;
left: 0;
}
.cal-month-current .cal-row-title {
font-size: 18px;
font-weight: 600;
color: #414355;
height: 18px;
line-height: 18px;
text-align: center;
margin-top: 20px;
}
.cal-months-wrapper .week-row {
height: 40px;
display: flex;
display: -webkit-flex;
flex-shrink: 1;
-webkit-flex-shrink: 1;
position: relative;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 25px;
padding-right: 25px;
}
.week-row .cal-day {
width: calc(100% / 7);
flex-shrink: 1;
-webkit-flex-shrink: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
box-sizing: border-box;
color: #414355;
font-weight: 400;
cursor: pointer;
text-align: center;
position: relative;
}
.cal-day .cal-fo {
font-size: 18px;
height: 40px;
}
.cal-day .cal-festival {
font-size: 10px;
color: #999999;
letter-spacing: 1px;
position: absolute;
z-index: 2;
bottom: 3px;
left: 0;
width: 100%;
height: 15px;
}
.week-row .cal-day.cal-day-prev {
color: #C6C9D2;
}
.week-row .cal-day-red {
width: 100%;
border-radius: 5px;
position: relative;
z-index: 1;
}
.cal-day .cal-white {
color: #ffffff;
z-index: 1;
}
此次，微信用户端UI改版，在IOS8遭遇了flex不兼容的情况，在IOS8以上暂未出现这类情况，所以，下次在联调时需要注意真机模拟测试。