console
<div class="page-group">
<div class="page finance" id="page_finance">
<header class="bar bar-nav">
<a class="icon icon-menu pull-left close-panel" data-panel='#panel-left-demo'></a>
<h1 class="title">日程表</h1>
</header>
<nav class="bar bar-tab">
<a class="tab-item external active" href="/pages/product-selclass">
<span class="btn-menu-new"></span>
<span class="tab-label">新增</span>
</a>
<a class="tab-item external" href="http://sellerdemo.carwor.com/foodig
">
<span class="btn-menu-food"></span>
<span class="tab-label">吃货团</span>
</a>
<a class="tab-item external" href="/pages/Orderpage">
<span class="btn-menu-date"></span>
<span class="tab-label">当日</span>
</a>
<a class="tab-item external" href="/pages/Setup">
<span class="btn-menu-order"></span>
<span class="tab-label">订单</span>
</a>
</nav>
<div class="content">
<div class="calendar">
<div class="year-month">
<span>2016年7月</span>
<a class="btn-prev icon icon-left" href="#"></a>
<a class="btn-next icon icon-right" href="#"></a>
</div>
<div class="week row">
<div class="col-13">日</div>
<div class="col-13">一</div>
<div class="col-13">二</div>
<div class="col-13">三</div>
<div class="col-13">四</div>
<div class="col-13">五</div>
<div class="col-13">六</div>
</div>
<div class="day row">
<div class="col-13 prev-month">26</div>
<div class="col-13 prev-month">27</div>
<div class="col-13 prev-month">28</div>
<div class="col-13 prev-month">29</div>
<div class="col-13 prev-month">30</div>
<div class="col-13">1</div>
<div class="col-13">2</div>
</div>
<div class="day row">
<div class="col-13">3</div>
<div class="col-13">4</div>
<div class="col-13">5</div>
<div class="col-13">6</div>
<div class="col-13 close">7</div>
<div class="col-13 close">8</div>
<div class="col-13 close">9</div>
</div>
<div class="day row">
<div class="col-13">10</div>
<div class="col-13 close">11</div>
<div class="col-13">12</div>
<div class="col-13 close">13</div>
<div class="col-13">14</div>
<div class="col-13 close">15</div>
<div class="col-13">16</div>
</div>
<div class="day row">
<div class="col-13 close">17</div>
<div class="col-13 close">18</div>
<div class="col-13">19</div>
<div class="col-13">20</div>
<div class="col-13">21</div>
<div class="col-13 close">22</div>
<div class="col-13 close">23</div>
</div>
<div class="day row">
<div class="col-13">24</div>
<div class="col-13 close">25</div>
<div class="col-13 close">26</div>
<div class="col-13">27</div>
<div class="col-13">28</div>
<div class="col-13">29</div>
<div class="col-13">30</div>
</div>
<div class="day row">
<div class="col-13">31</div>
<div class="col-13 next-month">1</div>
<div class="col-13 next-month">2</div>
<div class="col-13 next-month">3</div>
<div class="col-13 next-month">4</div>
<div class="col-13 next-month">5</div>
<div class="col-13 next-month">6</div>
</div>
<div class="mark">
<div class="row no-gutter">
<div class="item-left col-66">
点击日期调整当日店铺状态和库品库存
</div>
<div class="open-mark item-right col-33">
灰色为开店日
</div>
</div>
<div class="row no-gutter">
<div class="block-hidden item-left col-66">mark</div>
<div class="close-mark item-right col-33">
红色为关店日
</div>
</div>
</div>
</div>
<!-- end calendar -->
</div>
</div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
<div class="content-block">
<div class="profile-header">
<div class="profile-imgbox-box">
<img src="http://d.3987.com/dmlf_140505/005.jpg" alt="Profile Image" />
</div>
<div class="profile-info-box">
<div class="item-title">蒙厅·D·路飞</div>
<div class="item-title">
<a class="button-logout button-round close-panel">退出登陆</a>
</div>
</div>
</div>
<div class="panel-menu">
<div class="menu-item">
<div class="menu-title menu-multi">
<div class="btn-order">
</div>
<a class="menu-button" href="#order_sub_menu">
<div class="menu-inner">订单</div>
</a>
</div>
<div class="menu-dropdown hide" id="order_sub_menu">
<a class="menu-button" href="/pages/Orderpage-history">
过往订单
</a>
</div>
</div>
<div class="menu-item">
<div class="menu-title menu-multi">
<div class="btn-pro">
</div>
<a class="menu-button" href="#product_manager">
<div class="menu-inner">商品管理</div>
</a>
</div>
<div class="menu-dropdown hide" id="product_manager">
<a class="menu-button" href="/pages/product-selclass">
新增商品
</a>
<a class="menu-button" href="http://sellerdemo.carwor.com/foodig">
我的吃货团
</a>
<a class="menu-button" href="/pages/Invite">
发起吃货团
</a>
<a class="menu-button" href="/pages/product-down">
下架商品
</a>
</div>
</div>
<div class="menu-item">
<div class="menu-title">
<div class="btn-message">
</div>
<a class="menu-button" href="/pages/Message">
消息
</a>
</div>
</div>
<div class="menu-item">
<div class="menu-title">
<div class="btn-setting">
</div>
<a class="menu-button" href="/pages/setup ">
设置
</a>
</div>
</div>
</div>
</div>
</div>
.page-group {
max-width: 412px;
}
.row .col-13 {
width: 13%;
margin-left: 1%;
}
.week {
font-size: 0.6rem;
text-align: center;
font-weight: 400;
margin: auto;
height: 1rem;
line-height: 1rem;
}
.day {
text-align: center;
font-size: 0.75rem;
font-weight: 300;
margin: auto;
height: 2.2rem;
line-height: 2.2rem;
border-bottom: 0.01rem solid #ccc;
}
.day .col-13:after {
background: #ccc;
border-radius: 50%;
bottom: .5em;
display: block;
content: '';
height: 0.3rem;
width: 0.3rem;
left: 50%;
margin: -.25em 0 0 -.25em;
position: relative;
}
.day .close:after {
background: #a50002;
}
.mark {
font-size: 0.5rem;
margin: 0.5rem 0;
}
.mark .item-left {
text-align: left;
padding-left: 1rem;
}
.mark .item-right {
text-align: right;
padding-right: 1rem;
}
.mark .open-mark:before {
background: #ccc;
border-radius: 50%;
bottom: -0.6rem;
display: block;
content: '';
height: 0.45rem;
width: 0.45rem;
left: 18%;
margin: -.25em 0 0 -.25em;
position: relative;
}
.mark .item-right {
text-align: right;
padding-right: 1rem;
}
.mark .row {
margin: -0.3rem 0 !important;
}
.mark .item-left {
padding-top: 0.4rem;
}
.mark .close-mark:before {
background: #a50002;
border-radius: 50%;
bottom: -0.6rem;
display: block;
content: '';
height: 0.45rem;
width: 0.45rem;
left: 18%;
margin: -.25em 0 0 -.25em;
position: relative;
}
.mark .block-hidden {
visibility:hidden;
}
.day .prev-month,
.day .next-month {
color: #ccc;
}
.calendar {
text-align: center;
}
.calendar .year-month {
position: relative;
margin: 0.25rem 0;
}
.year-month .btn-prev,
.year-month .btn-next {
background: #cbd1d2;
color: #f9f9f9;
border-radius: 50%;
height: 2em;
font-size: .55em;
line-height: 2em;
margin: -1em;
position: absolute;
top: 50%;
width: 2em;
}
.year-month .btn-prev:hover,
.year-month .btn-next:hover {
background: #cbd1d2;
color: #f9f9f9;
}
.year-month .btn-prev {
left: 5em;
}
.year-month .btn-next {
right: 5em;
}