效果图：
html:
<div class="calendar_box calendar" id="calendar" >
<dl class="dateItem">
<dt class="monthData"><span class="fullyear"></span>年<span class="month"></span>月</dt>
<dd class="direct pre"></dd>
<dd class="direct next"></dd>
</dl>
<ul class="weeklist">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<div class="dayContainer">
<ol class="daylist"></ol>
<ol class="daylist"></ol>
</div>
</div>
js绘制日历：
//calendar start
var Calendar = function (id, first) {
this.$container = document.getElementById(id);
this.fullyear = 0;
this.month = 0;
this.week = 0;
this.curday = 0;
this.days = 0;
this.index = 1;
if (first != 1 && first != -1) {
this.init(first);
}
};
Calendar.prototype.init = function (first) {
var date = new Date();
this.fullyear = date.getFullYear();
this.month = date.getMonth() + 1;
this.week = date.getDay();
this.curday = date.getDate();
if (first == 1 || first == -1) { } else {
this.days = this.getDays(this.fullyear, this.month);
}
this.fillDate();
};
Calendar.prototype.getDays = function (fullyear, month) {
var day = new Date(fullyear, month, 0);
//获取天数：
var days = day.getDate();
return days;
};
Calendar.prototype.setIndex = function (index) {
this.index = index;
};
Calendar.prototype.setPreMonth = function (id, first) {
var monher = this.month;
this.calendar = new Calendar(id, -1);
this.calendar.setIndex(0);
};
Calendar.prototype.setNextMonth = function (id, first) {
var monher = this.month;
this.calendar = new Calendar(id, 1);
this.calendar.setIndex(1);
};
var htmlHeight = "";
var currentShowYear = '';
var currentShowMonth = '';
var totalMonthDays = '';
var currentMonNoO = '';
Calendar.prototype.fillDate = function (whitch) {
var fullyear;
if (whitch == 1) {
fullyear = this.fullyear;
var mon = ++this.month,
month = mon < 10 ? '0' + mon : '' + mon;
index = this.index;
if (this.month > 12) {
this.month = '0' + 1;
fullyear = ++this.fullyear;
}
if (month == 13) {
month = '0' + 1;
}
var day1 = new Date(fullyear, month, 0);
days = day1.getDate();//当月总天数
totalMonthDays = days;
} else if (whitch == -1) {//上个月
fullyear = this.fullyear;
var premon = --this.month;
month = premon < 10 ? '0' + premon : '' + premon;
index = this.index;
if (this.month < 1) {
this.month = 12;
fullyear = --this.fullyear;
}
if (month == 0) {
month = 12;
}
var day2 = new Date(fullyear, month, 0);
days = day2.getDate();
totalMonthDays = days;
} else {
fullyear = this.fullyear,
month = this.month < 10 ? '0' + this.month : '' + this.month;
index = this.index;
var day3 = new Date(fullyear, month, 0);
days = day3.getDate();
totalMonthDays = days;
}
var $fullyear = this.$container.getElementsByClassName('fullyear')[0],
$month = this.$container.getElementsByClassName('dateItem')[0].getElementsByClassName('monthData')[0].getElementsByClassName('month')[0],
$daylist = this.$container.getElementsByClassName('daylist')[index];
$daylist.setAttribute('data-month', month);
$fullyear.innerHTML = fullyear;
$month.innerHTML = month;
currentShowYear = fullyear;
currentShowMonth = month;
currentMonNoO = this.month
var date = new Date(),
startWeek;
date.setMonth(month - 1);
date.setDate(1);
startWeek = date.getDay();
var before = new Date(this.fullyear + '/' + this.month + '/1').getDay(),/* 把这个替换掉 var before = startWeek,*/
end = 7 - (before + days) % 7;
var beforeMonth = month - 1,
beforeYear = fullyear;
if (beforeMonth == 0) {
beforeMonth = 12;
beforeYear -= 1;
}
var beforeDays = this.getDays(beforeYear, beforeMonth);
var i, data = '';
//去年的日期
var qunian = new Date().getFullYear() - 1;
var beforeLastWeek = new Date(currentShowYear + '/' + currentShowMonth + '/1').getDay();//获得去年的每月一号是周几
var dateOther = new Date();
var yearother = date.getFullYear();//今年
if (fullyear != yearother) {//非今年
for (i = beforeLastWeek - 1; i > -1; i--) {/*上个月的日期*/
data += '<li><span class="borderScale unmonth">' + (beforeDays - i) + '</span></li>';
}
} else {//今年
for (i = before - 1; i > -1; i--) {/*上个月的日期*/
data += '<li><span class="borderScale unmonth">' + (beforeDays - i) + '</span></li>';
}
}
for (i = 0; i < days; i++) {/*当前月的日期*/
var d = i + 1;
d = d < 10 ? '0' + d : '' + d;
data += '<li class="curMonthLi"><span data-day="' + fullyear + '-' + month + '-' + d + '" class="borderScale monthData">' + (i + 1) + '<label></label><i class="iBefore"></i></span></li>';
}
if (fullyear == qunian) {
for (i = 0; i <= end; i++) {/*下个月的日期*/
data += '<li><span class="borderScale unmonth">' + (i + 1) + '</span></li>';
}
} else {
for (i = 0; i < end; i++) {/*下个月的日期*/
data += '<li><span class="borderScale unmonth">' + (i + 1) + '</span></li>';
}
}
$daylist.innerHTML = data;
this.signAction(days);
var checkBottm = this.$container.getElementsByClassName('daylist')[this.index].getElementsByClassName('monthData');
var checkBottmAll = this.$container.getElementsByClassName('daylist')[this.index].getElementsByClassName('borderScale');
var checkBottmHeight = checkBottm[checkBottm.length - 1].parentNode;
var checkBottmAllHeight = checkBottmAll[checkBottmAll.length - 1].parentNode;
var boffsettop = checkBottmAllHeight.offsetTop;
var btop = checkBottmHeight.offsetTop;
if (boffsettop != btop) {
var lastcount = 0;
for (var i = 0, l = checkBottmAll.length; i < l; i++) {
if (checkBottmAll[i].parentNode.offsetTop >= boffsettop) {
lastcount = i;
checkBottmAll[i].parentNode.style.display = "none";
}
}
for (var i = 0, l = checkBottmAll.length - lastcount; i < l; i++) {
checkBottmAll[i + lastcount].parentNode.style.display = "none";
}
}
};
Calendar.prototype.signAction = function (days) {
var $month = this.$container.getElementsByClassName('daylist')[this.index].getElementsByClassName('monthData');
var cname,todayDay;
var monDate = new Date();
var yearnow = monDate.getFullYear();
var monnow = monDate.getMonth() + 1;
var weeknow = monDate.getDay();
var curnow = monDate.getDate();
for (var i = 0; i < days; i++) {
cname = $month[i].className;
todayDay = $month[i].dataset.day;
if ($month[i].innerText == curnow && todayDay.split('-')[0] == yearnow && todayDay.split('-')[1] == monnow) {
//今天的日期加边框样式
cname += ' curBlue greenfill';
}
$month[i].className = cname;
}
androidCss();
};
//控制日历的，点击左滑显示上个月的日期，点击右滑显示下个月的日期
var CalendarControl = function (id) {
this.$container = document.getElementById(id);
this.$dayContainer = this.$container.getElementsByClassName('dayContainer')[0];
this.calendar = new Calendar(id);
this.curMonth = new Date().getMonth() + 1;
this.index = this.curMonth;
this.$pre = this.$container.getElementsByClassName('pre')[0];
this.$next = this.$container.getElementsByClassName('next')[0];
this.init(id);
};
CalendarControl.prototype.init = function (id) {
var datem = new Date();
var mon = datem.getMonth() + 1;
var __cls = this;
this.$pre.addEventListener('click', function () {
__cls.preAction(id);
}, false);
this.$next.addEventListener('click', function () {
__cls.nextAction(id);
}, false);
};
CalendarControl.prototype.preAction = function (id) {
this.index--;
this.calendar.setIndex(0);
this.calendar.fillDate(-1);
this.calendar.setPreMonth(id, -1);
var __cls = this,
left;
moveLeft();
this.$next.style.display = 'block';
};
CalendarControl.prototype.nextAction = function (id) {
this.index++;
if (this.index == this.curMonth) {
this.$next.style.display = 'none';
}
this.calendar.setIndex(1);
this.calendar.fillDate(1);
this.calendar.setNextMonth(id, 1);
var __cls = this,
left;
moveRight();
}
var leftheight = 0;
var rightheight = 0;
function moveLeft() {
$("#calendar .dayContainer").find(".daylist").eq(0).css({ 'height': 'auto' });
leftheight = $("#calendar .dayContainer").find(".daylist").eq(0).height();
$("#calendar").find(".dayContainer").css({ "margin-left": "-100%" });
$("#calendar").find(".dayContainer").animate({ "margin-left": "0%" }, 300);
if (leftheight < rightheight) {
$("#calendar .dayContainer").find(".daylist").eq(1).css({ "height": leftheight });
}
}
function moveRight() {
$("#calendar .dayContainer").find(".daylist").eq(1).css({ 'height': 'auto' });
rightheight = $("#calendar .dayContainer").find(".daylist").eq(1).height();
$("#calendar").find(".dayContainer").css({ "margin-left": "0%" });
$("#calendar").find(".dayContainer").animate({ "margin-left": "-100%" }, 300);
if (leftheight > rightheight) {
$("#calendar .dayContainer").find(".daylist").eq(0).css({ "height": leftheight });
}
}
//最重要的，调用并显示日历
var calendarDate = new CalendarControl('calendar');
css文件:(里面包含了日历的css,但是也有其他页面的css,我没认真筛选，都贴在这里)
* {
-webkit-user-select: none;
-moz-user-select: none;
-webkit-touch-callout: none;
user-select: none
}
html, body{
margin:0;
padding:0;
background-color:#fff;
}
body{
font:15px/1.2 '微软雅黑', sans-serif;
}
a{
text-decoration: none;
}
em{
font-weight: normal;
font-style:normal;
font-size: 100%;
}
h1, h2, h3, h4, h5, h6{
margin-top:0;
margin-bottom:0;
font-size:100%;
font-weight: normal;
}
p{
margin-top:0;
margin-bottom:0;
}
dl, ul, ol{
margin-top:0;
margin-bottom:0;
margin-left:0;
padding-left:0;
list-style:none;
}
dd{
margin-left:0;
}
img{
border:none;
}
/*=common*/
.center{
text-align: center;
}
.ellipsis{
width:100%;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.breakword{
word-break:break-all;
}
.middle{
height:100%;
display: table-cell;
vertical-align: middle;
line-height: 22px;
}
footer.center{
visibility: hidden;
}
.scale, .borderScale{
position: relative;
}
.scale:after{
content:"";
position: absolute;
bottom: 1px;
left: -1px;
right:0px;
/* border-bottom:1px solid transparent; */
-webkit-transform:scaleY(0.5);
-webkit-transform-origin:0 0;
}
/*=layerout*/
.container{
padding:0 20px;
margin:0;
}
.item{
margin:20px 0 0 0;
position: relative;
}
.contentItem{
overflow: hidden;
position: relative;
}
/*=component*/
.user{
padding:20px;
border-bottom: 0.5px solid #d8d8d8;
}
.person{
position: relative;
padding:0 65px;
height:50px;
top: 4px;
}
.person .middle{
height:50px;
}
.avatar{
position: absolute;
top:0;
left:0;
width: 49px;
height: 49px;
}
.avatar img{
width:100%;
height:100%;
border-radius: 50%;
-webkit-border-radius: 50%;
border: 0.5px solid #979797;
}
.avatar:after{
border-radius:60px;
-webkit-border-radius:60px;
}
.vipState{
text-align: center;
position: absolute;
width:50px;
height:28px;
line-height: 28px;
position: absolute;
top:50%;
margin-top:-14px;
right:0;
border-radius: 3px;
}
.title{
height:14px;
line-height: 14px;
padding:0 0 0 12px;
position: relative;
}
.subtitle{
position: absolute;
top:-2px;
right:0;
}
.title:before{
content:"";
position: absolute;
top:0;
left:0;
width:3px;
height:14px;
border-radius:7px;
-webkit-border-radius:7px;
}
.leaderBoard{
float:right;
padding-left:20px;
background:url('../../../Images/ting/board.png') 0 50% no-repeat;
background-size:15px 13px;
}
.headinfo{
position: absolute;
left:70px;
top:50%;
}
.headinfo .userid{
color:#8c8c8c;
font-size: 12px;
}
.headinfo .desc{
font-size: 13px;
padding-top:4px;
}
.lineContainer{
margin: 12px 7px 0 40px;
box-sizing:border-box;
height:180px;
border-width:0 1px 1px 1px;
border-style:solid;
border-right-style:dashed;
position: relative;
}
#polyLine{
position: absolute;
top: 3px;
left:0px;
height:180px;
width: 100%;
}
.line{
position: absolute;
width:100%;
height: 34px;
left:0;
top:0;
}
.percent{
text-align: right;
position: absolute;
width:3em;
height:100%;
margin-left: -40px;
margin-top:-0.5em;
text-align: left;
}
.ln0{
top:0%;
}
.ln1{
top:20%;
}
.ln2{
top:40%;
}
.ln3{
top:60%;
}
.ln4{
top:80%;
}
.ln5{
top:100%;
border-top:none;
}
.dataContainer{
height: 68px;
margin-left:40px;
top: 12px;
left:0;
position: relative;
}
.date{
text-align: center;
position: absolute;
top:0;
left: 0px;
width: auto;
margin-left: -6px;
width: 18.5px;
}
.week{
display: block;
margin-top:8px;
}
.dn1{
left: 16.66%;
}
.dn2{
left: 33.33%;
}
.dn3{
left: 49.6%;
}
.dn4{
left: 66.266%;
}
.dn5{
left: 83.3333%;
}
.dn6{
left: 98%;
}
.number{
padding:0 10px 0 100px;
height:57px;
margin:40px 0 0 0;
background:url('../../../Images/ting/icons.png') 0 0 no-repeat;
background-size:83px 228px;
position: relative;
}
.number p{
position: absolute;
left: 100px;
top: 50%;
}
.ting_dub_play {
background: url('/Images/ting/ting_dub_play.png') 0 0 no-repeat;
}
.ting_dub_zan {
background: url('/Images/ting/ting_dub_zan.png') 0 0 no-repeat;
}
.ting_dub_article {
background: url('/Images/ting/ting_dub_article.png') 0 0 no-repeat;
}
.ting_dub_time {
background: url('/Images/ting/ting_dub_time.png') 0 0 no-repeat;
}
.dub_number {
padding: 0 10px 0 100px;
height: 64px;
margin: 40px 0 0 0;
background-size: 84px 64px;
position: relative;
}
.dub_number p {
position: absolute;
left: 100px;
top: 50%;
}
.book {
background-position: 0 -57px;
}
.vocabulary{
background-position: 0 -114px;
}
.article{
background-position: 0 -171px;
}
.dateItem{
height:30px;
line-height: 30px;
text-align: center;
position: relative;
margin-bottom: 20px;
}
.direct{
width:30px;
height:30px;
background:url('../../../Images/ting/direct.png') 0 0 no-repeat;
background-size:30px 60px;
position: absolute;
top:0;
cursor: pointer;
}
.pre{
background-position: 0 0;
left:0;
}
.next{
background-position: 0 -30px;
right:0;
display: none;
}
.calendar{
width:100%;
}
.dayContainer{
width:200%;
margin-left:-100%;
}
.daylist{
width: 50%;
min-height:100px;
float:left;
}
.weeklist, .daylist{
text-align: center;
overflow: hidden;
/* padding-right: 30px; */
box-sizing:border-box;
position: relative;
}
.weeklist{
text-align: left;
margin:2px 0;
font-size: 12px;
}
.weeklist li, .daylist li{
float:left;
width: 14.28%;
padding-right: 0px;
/* padding-left: 1%; */
text-align: center;
}
.weeklist li:nth-child(7), .daylist li:nth-child(7n){
/* width: 30px; */
/* margin-right: 0px; */
}
.weeklist li:nth-child(6), .daylist li:nth-child(7n+6){
margin-right: 0%;
}
.daylist li{
position: relative;
margin:12px 0;
height:30px;
}
.daylist span{
width:28px;
height:28px;
line-height: 30px;
position: absolute;
top:0;
left: 50%;
border-radius: 30px;
-webkit-border-radius:30px;
text-align: center;
border: 1px solid #AAADB9;
line-height: 27px;
font-size: 15px;
margin-left: -15px;
}
.daylist span:after{
border-radius: 40px;
-webkit-border-radius:40px;
}
.daylist span:before{
content:"";
position: absolute;
width: 12px;
height: 12px;
top: -4px;
right: -3px;
background-repeat: no-repeat;
background-size:12px 36px;
z-index: 10;
/* box-shadow: 0 0 1px #333 inset; */
border-radius: 50%;
-webkit-border-radius: 50%;
}
.daylist span.sign:before{
background-image:url('../../../Images/ting/sign.png');
background-position: 0 0;
box-shadow: 0 0 0.5px #61c768 inset;
}
.daylist span.cur.sign:before{
background-position: url('../../../Images/ting/sign.png');
background-position: 0 0px;
}
.daylist span.unsign:before{
/* background-image:url('../../../Images/ting/sign.png'); */
background-position: 0 -24px;
}
#vip{
margin-top: -8px;
font-size: 13px;
}
.pie{
position: relative;
height:186px;
width:100%;
margin-bottom:35px;
}
#pie,#dub_pie{
position: absolute;
top:0;
left:50%;
width:186px;
height:186px;
margin-left:-98px;
}
.listen{
margin-bottom:30px;
}
.leader{
position: absolute;
text-align: center;
width: 140px;
height:102px;
top:50%;
left:50%;
margin-left: -74px;
margin-top:-51px;
font-weight: 600;
}
.totalPercent, .dub_totalPercent {
display: block;
margin: 15px 0;
font-weight: bold;
text-align: center;
}
.totalListen{
margin-top:16px;
}
.channelItem{
height:100px;
line-height: 28px;
padding:0 10px 0 118px;
box-sizing:border-box;
margin:40px 0 0 0;
position: relative;
}
.channelItem .middle{
height:100px;
}
.channelItem canvas{
position: absolute;
top:0;
left:0;
width:100px;
height: 100px;
}
.channelImg{
position: absolute;
width:42px;
height:42px;
left:29px;
top:50%;
margin-top:-21px;
background-size:42px 42px;
}
.recommand{
position: relative;
width:100%;
max-width:335px;
margin:15px auto;
}
.recTitle{
text-align: center;
position: absolute;
width:60%;
height:30px;
line-height: 30px;
left:50%;
top:50%;
margin-top:-15px;
margin-left:-30%;
padding:0 15px;
box-sizing:border-box;
border-radius: 20px;
-webkit-border-radius:20px;
}
.recImg{
border:3px;
width:100%;
}
/*=font*/
.totalPercent, .dub_totalPercent {
font-size: 36px;
}
.recentTotal{
font-size:22px;
}
.data, .total, .day, .listen, .channelPercent{
font-size:18px;
}
.name, .monthData{
font-size:16px;
}
.vip, .title, .date, .totalListen, .number{
font-size:14px;
}
.recTitle{
font-size:13px;
}
.leader{
font-size:12px;
}
.email{
font-size:11px;
}
.unvip, .percent, .week{
font-size:13px;
}
.otherinfo{
width:100%;
height:26px;
line-height: 26px;
color:##4f5c69;
text-align: center;
margin:40px 0;
}
/*=color*/
body{
color:#4f5c69;
}
.user:after{
/* border-bottom-color:#D8D8D8; */
}
.avatar:after{
/* border-color:#979797; */
}
.daylist span{
color:#AAADB9;
}
.daylist span.sign{
color:#fff;
background-color:#76DD7D;
border-color: #61c768;
}
.daylist span.unsign{
color:#FF6E6B;
background-color:#fff;
border: 1px solid #ff6e7b;
}
.daylist span.unmonth{
color:#D2D2D6;
border: 1px solid #D2D2D6;
}
.daylist span.cur {
color: #FFAB42;
border-color: #FFAB42;
}
.daylist span.cur.sign {
color: #fff;
background-color: #39ae43;
border-color: #39ae43;
}
.daylist span:after{
border-color:#AAADB9;
}
.daylist span.sign:after{
border-color:#61C768;
}
.daylist span.unsign:after{
border-color:#FF6E6B;
}
.daylist span.unmonth:after{
border-color:#D2D2D6;
}
.daylist span.cur:after{
border-color:#FFAB42;
}
.name{
color:#444444;
padding-bottom: 4px;
max-height:18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width:180px;
}
.email{
color:#8c8c8c;
}
.vipState{
color:#fff;
}
.vip{
background-color:#00AFFF;
}
.unvip{
background-color:#FDB157;
}
.title{
color:#607c99;
}
.title:before{
background-color:#1191E6;
}
.title:after{
border-bottom-color:#D8D8D8;
}
.day{
color:#FDAE26;
}
.lineContainer{
border-color: #D8D8D8;
}
.line{
border-top:1px dashed #D8D8D8;
}
.percent, .date{
color:#495159;
}
.week, .weeklist{
color:#7f858a;
}
.data, .total, .day, .recentTotal, .channelPercent{
color:#01c4f4;
padding:0 0.3em;
font-weight: bold;
}
.leader{
color:#93A4BC;
}
.recTitle{
color:#fff;
border:1px solid #fff;
background-color:rgba(0, 0, 0, 0.1);
}
.fr .totalPercent, .dub_totalPercent {
color: #3188FF;
}
.listenc{
margin-bottom:20px;
width:97%;
}
.firstitem{
margin:30px 0 0 0;
}
#shareme{
width:100%;
height:44px;
background: #1191E6;
position:fixed;
bottom:0;
left:0;
text-align: center;
z-index: 20;
}
#shareme a{
height:44px;
line-height: 44px;
text-align: center;
color: #fff;
font-size: 16px;
/*background: url('../../../Images/ting/share_icon.png') 43% 50% no-repeat;*/
background-size: 21px 19px;
display: block;
}
@media all and (min-width:660px){
.number{
font-size:15px;
box-sizing:border-box;
width:50%;
float:left;
}
.channelItem{
width:50%;
float:left;
}
.recommand{
width:50%;
float:left;
padding:0 15px;
box-sizing:border-box;
max-width: 100%;
}
.infoclear{
clear:both;
}
}
.daylist span.signtoday{
background: #ffbf6e;
color:#fff;
}
.daylist span.signtoday:before{
background: url('../../../Images/ting/sign.png');
background-position: 0px -12px;
box-shadow: 0 0 0.5px #ffab42 inset;
background-size: 12px 36px;
}
.shareinfo{
height:44px;
margin:0 auto;
position: relative;
padding-left: 32px;
display: inline-block;
}
.shareinfo img{
margin-right:10px;
width:22px;
margin-top:2px;
position: absolute;
left: 0;
/* margin-left: -18px; */
top:50%;margin-top:-9px;
}
.sign .title{
margin-bottom:0;
}
.listenitem{
margin:40px 0 0 0;
}
#beforeinfo{
width: 132px;
height:36px;
text-align: center;
line-height: 36px;
font-size:14px;
border:1px solid #8a8fa3;
border-radius:20px;
-webkit-border-radius:20px;
position: absolute;
left:50%;
margin-left: -66px;
z-index:10;
background: #fff;
top:50%;
margin-top:18px;
}
.words{
margin:10px 0 60px 0;
}
#weichat{
position: relative;
top:-30px;
margin-bottom: -10px;
}
.weicrcode{
width:100%;
height:auto;
display: block;
}
#pie_con{width:186px;height:186px;margin:0 auto;}
p#p_playDuration {
text-align: center;
margin-top: 20px;
margin-bottom: 36px;
}
/*用户自定义统计时间*/
.sevenOrmonth {
color: #555;
}
.sevenOrmonth > div {
display: inline-block;
padding:0 8px;
height: 24px;
line-height: 24px;
text-align: center;
border: 1px solid #E0E0E0;
border-radius: 1px;
margin-right: 10px;
color: #919191;
}
.userChangeInput {
/*font-size: 20px;
width:160px;*/
}
.userChange_groupinput {
padding-bottom: 10px;
}
.userChange_groupinput input {
font-size: 18px;
outline: none;
color: #919191;
}
.sevenOrmonth {
padding-bottom: 20px;
}
input[type="date"]:before {
content: attr(placeholder);
color: #ccc;
}
::-webkit-input-placeholder {
color: #ccc;
}
.start_dateinput, .end_dateinput {
display: inline-block;
border: 1px solid #E0E0E0;
border-radius: 1px;
height:24px;
line-height:24px;
padding:0 24px 0 8px;
}
.date_input2, .date_input1 {
}
.title_span {
color: #607c99;
display:inline-block;
padding-bottom:10px;
}
.select_day {
border: 1px solid #637F9B!important;
}
.unfixed {
position: absolute;
left: auto;
bottom: 0;
}
.arrow {
width: 6px;
height: 6px;
border-top: 1px solid #BCBCBC;
border-left: 1px solid #BCBCBC;
position: absolute;
right: 8px;
top: 7px;
transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
}
/*confrim*/
.confirm {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
top: 0;
z-index: 9999;
display: none;
}
.confirm>div{
overflow:hidden;
}
.confirm_header{
text-align:center;
}
.confirm_header > p:first-child {
font-family: '黑体';
font-weight: bold;
padding-top: 15px;
}
.confirm_title{
font-size:12px;
margin-top:5px;
}
.confirm > div {
position: absolute;
width: 250px;
height: 110px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -125px;
background: #fff;
border-radius: 10px;
}
.confirm > div > div:first-child {
height: 70px;
text-align: center;
font-size: 16px;
}
.confrim_click {
width: 100%;
border-top: 1px solid #eee;
position:relative;
}
.confrim_click > span {
width: 50%;
text-align: center;
line-height: 39px;
color: #007aff;
font-family: '黑体';
position:absolute;
}
.confrim_click > span:first-child{
left:0;
}
.confrim_click > span:last-child {
right:0;
}
.confrim_click > span:first-child {
border-right: 1px solid #eee;
}
/*by wjl 2017.11.15*/
.shareDiv{
display:none;
}
.pie,.listen{
display:none;
}
/*补签提示*/
#btn_prompt {
position: fixed;
left: 50%;
top: 50%;
width: 122px;
padding: 8px 15px;
background: #fffbfb;
margin-left: -61px;
margin-top: -20px;
z-index: 1000000;
text-align: center;
display: none;
}
#btn_prompt p {
margin: 0px;
}
.w_error {
background: #fffbfb;
border: 1px solid #ffb6b1;
color: #ff7b7b !important;
box-shadow: 3px 3px 6px #ffe3e3;
}
.w_success {
color: #00c292;
border: 1px solid #b7dfd5;
background: #f5fffc;
box-shadow: 3px 3px 6px #c6f7eb;
}
/*iphoneX兼容*/
.AdaptationIphoneX {
display: none;
z-index: 999999;
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
#shareme {
bottom: 34px !important;
}
.AdaptationIphoneX {
display: block;
}
}
.container h2.title {
display:inline-block;
}
.container .totaldays {
position: absolute;
top: -2px;
right: 33%;
}
.container .totaldays, .container .subtitle {
font-size: 14px !important;
}
.empty_line {
height: 14px;
border-bottom: 0.5px solid #d8d8d8;
margin-bottom: 20px;
}
.two_section {
font-size: 14px;
line-height: 14px;
display: inline-block;
position: absolute;
right: 0;
margin-top: 1px;
}
.continues {
display: inline-block;
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
