手机端日历calendar页面布局方案

最新推荐文章于 2021-05-26 09:45:22 发布

lilly呀

最新推荐文章于 2021-05-26 09:45:22 发布

阅读量986

点赞数

分类专栏： CSS布局 CSS记录篇

本文链接：https://blog.csdn.net/qq_26780317/article/details/89353117

版权

CSS记录篇同时被 2 个专栏收录

14 篇文章 8 订阅

订阅专栏

CSS布局

13 篇文章 0 订阅

订阅专栏

背景：最近，手机微信端的项目需要重构，涉及到日历页面，需要重新设计一个，遇到的日历页面布局如下，在此记录一下。

一、日历页面基本布局

查看设计稿，日历局部的布局难点在于红色部分，涉及到三级嵌套，而且有选中与未选中状态的背景色变化，且“入住”与“离店”状态之间又有灰色背景，处理好这部分的布局结构，那么问题也就迎刃而解了。

日历全局页面，分为两个部分，底层遮罩部分，上面日历页面部分。其中涉及到红色框中的部分，主要是层级排列，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以上暂未出现这类情况，所以，下次在联调时需要注意真机模拟测试。