.date-bar-wrap { height: 30px; border-bottom: 3px solid #f88c21; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; } .date-bar-wrap .date-bar-prev, .date-bar-wrap .date-bar-next { width: 28px; height: 28px; background: linear-gradient(to bottom, #fcfcfb, #e5e4e4); border-top: 1px solid #dfdfdf; border-bottom: 1px solid #d67e29; cursor: pointer; } .date-bar-wrap .date-bar-prev .arrow-left, .date-bar-wrap .date-bar-next .arrow-right { display: block; margin: 5px auto; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: relative; } .date-bar-wrap .date-bar-prev .arrow-left { border-right: 10px solid #a8a7a8; } .date-bar-wrap .date-bar-next .arrow-right { border-left: 10px solid #a8a7a8; } .date-bar-wrap .date-bar-prev .arrow-left:after, .date-bar-wrap .date-bar-next .arrow-right:after { content: ''; position: absolute; display: block; margin: 10px auto; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; top: -20px; } .date-bar-wrap .date-bar-prev .arrow-left:after { border-right: 10px solid #efeeee; left: 3px; } .date-bar-wrap .date-bar-next .arrow-right:after { border-left: 10px solid #efeeee; left: -13px; } .date-bar-wrap .date-bar-prev:hover .arrow-left { border-right: 10px solid #f88c21; } .date-bar-wrap .date-bar-next:hover .arrow-right { border-left: 10px solid #f88c21; } .date-bar-wrap .date-bar-prev { border-right: 1px solid #cccbc8; } .date-bar-wrap .date-bar-next { border-left: 1px solid #cccbc8; } .date-bar-wrap .date-bar { width: 922px; height: 30px; background: linear-gradient(to bottom, #f1f0f0, #dbdbdb); color: #777; } .date-bar-wrap .date-bar .date-bar-list { width: 100%; height: 30px; } .date-bar-wrap .date-bar .date-bar-list li { width: 14.28%; height: 100%; float: left; border-top: 1px solid #dfdfdf; border-left: 1px solid #b8b7b7; border-bottom: 1px solid #d67e29; position: relative; cursor: pointer; box-sizing: border-box; line-height: 28px; text-align: center; } .date-bar-wrap .date-bar .date-bar-list li.disabled { background-color: #cccccc; color: #aaaaaa; cursor: not-allowed; } .date-bar-wrap .date-bar .date-bar-list li h5 { font-weight: bold; font-size: 16px; text-align: center; margin-right: 8px; display: inline-block; } .date-bar-wrap .date-bar .date-bar-list li span { text-align: center; } .date-bar-wrap .date-bar .date-bar-list li.selected, .date-bar-wrap .date-bar .date-bar-list li:hover { background: linear-gradient(to bottom, #fc9e40, #f78b20); color: #ffffff; border-left: 1px solid #d67e29; border-top: 1px solid #d67e29; border-bottom: 1px solid #f78b20; } .date-bar-wrap .date-bar .date-bar-list li.disabled:hover { color: #aaaaaa; background: #cccccc; border-left-color: #b8b7b7; border-top-color: #dfdfdf; } .date-bar-wrap .date-bar .date-bar-list li.selected:after, .date-bar-wrap .date-bar .date-bar-list li.selected:before { content: ''; position: absolute; width: 0; height: 0; border-bottom: 5px solid #c6701a; border-left: 5px solid transparent; border-right: 5px solid transparent; top: 100%; left: 50%; margin-left: -5px; margin-top: -1px; } .date-bar-wrap .date-bar .date-bar-list li.selected:after { border-bottom: 5px solid #f5f5f5; margin-top: 0; } .date-bar-wrap .date-bar .date-bar-list li.selected + li { border-left: 1px solid #d67e29; } .date-bar-wrap .date-bar .date-bar-list li:last-child { } .date-bar-wrap .date-bar .date-bar-list li:first-child { border-left: none; } /*日期选择器*/ .date-selector { background-color: #ffffff; } .date-selector nav { line-height: 61px; overflow: hidden; font-size: 18px; overflow: hidden; } .date-selector nav .month-prev { float: left; padding-left: 15px; padding-right: 15px; cursor: pointer; color: rgb(249, 134, 5); } .month-first .month-next, .month-second .month-prev { display: none; } .date-selector nav .month-next { float: right; padding-right: 15px; padding-left: 15px; cursor: pointer; color: rgb(249, 134, 5); } .date-selector nav .month-prev:hover, .date-selector nav .month-next:hover { background-color: rgb(245, 208, 168); } .date-selector nav header { font-size: 18px; color: #7d848d; text-align: center; font-weight: bold; } .date-selector table { border-collapse: separate; width: 100%; } .date-selector table th { line-height: 31px; border-top: 1px solid #bb6c29; border-bottom: 1px solid #bb6c29; background: linear-gradient(to top, #f87c06, #fa9104); color: #ffffff; width: 45px; text-align: center; } .date-selector table td { line-height: 31px; border-bottom: 1px solid #e1e1e1; background: #f2f2f2; color: #7d848d; width: 45px; text-align: center; } .date-selector table td + td { border-left: 1px solid #e1e1e1; } .date-selector table td:hover, .date-selector table td.date-selected { background-color: #ff9b00; color: #ffffff; cursor: pointer; } /*.date-selector table td:active { background-color: #f78800; color: #ffffff; cursor: pointer; }*/ .date-selector .date-current { color: #f78800; font-weight: bold; } .date-selector .date-commonavailable { color: #d8a15e; background-color: #FFF1E0; font-weight: bold; } .date-selector .date-notavailable { background-color: #ffffff; color: #ccc; } .date-selector .date-notavailable:hover { cursor: not-allowed; background: none; color: #ccc; }