.box { display: block; z-index: 1001; background: #fff; height: 652rpx; border-radius: 10rpx 10rpx 0 0; } .box-flex { display: -webkit-box; display: -webkit-flex; display: flex; flex-wrap: wrap; } .flex-item { flex-flow: nowrap; flex-grow: 1; flex-shrink: 1; width: 14.2%; text-align: center; font-size: 26rpx; } .item-content { margin: 10rpx; text-align: center; height: 60rpx; line-height: 62rpx; color: #000; width: 60rpx; display: inline-block; } .checked { background-color: #ff5555; color: #fff; border-radius: 50%; } .no-optional { color: #999; } .checked.no-optional { background-color: #ff5555; color: #fff; border-radius: 50%; } .item-content-current-day { flex-grow: 8; margin: 10rpx; text-align: center; height: 60rpx; line-height: 60rpx; color: #000; display: inline-block; } .glyphicon.glyphicon-triangle-right,.glyphicon.glyphicon-triangle-left { position: relative; color: #f7f7f7; } .glyphicon.glyphicon-triangle-right:after { content: ""; position: absolute; display: inline-block; transform: rotate(45deg); height: 16rpx; width: 16rpx; right: 50rpx; top: 50%; margin-top: -12rpx; border-width: 1px 1px 0 0; border-color: #b2b2b2; border-style: solid; } .glyphicon.glyphicon-triangle-left:after { content: ""; position: absolute; display: inline-block; transform: rotate(-135deg); height: 16rpx; width: 16rpx; left: 50rpx; top: 50%; margin-top: -12rpx; border-width: 1px 1px 0 0; border-color: #b2b2b2; border-style: solid; }