vue打卡日历_VUE 日历签到

.sign-box {

width:100%;

min-height: 100%;

background: #f5f5f5;

position: relative;

.top-box {

padding: px2rem(40) px2rem(30) px2rem(0);

background: #4bc7c7;

}

.person-box {

display: flex;

justify-content: space-around;

align-items: center;

}

.sign-personInfor {

display: flex;

color: #fff;

align-items: center;

.headImg {

position: relative;

margin-right: px2rem(30);

img {

width: px2rem(140);

height: px2rem(140);

display: block;

}

}

.nickname {

p:first-child {

font-size: px2rem(34);

}

p:last-child {

font-size: px2rem(28);

span {

color: #f60;

}

}

}

}

.sign-btn {

font-size: px2rem(34);

border:0;

background: rgba(0, 0, 0, 0.4);

height: px2rem(70);

line-height: px2rem(50);

width: px2rem(140);

border-radius: px2rem(14);

color: #fff;

}

.integral-box {

font-size: px2rem(30);

color: #fff;

display: flex;

justify-content: space-around;

margin-top: px2rem(20);

font-size: px2rem(34);

.sign-price {

flex:0 0 40%;

p {

text-align: center;

height: px2rem(80);

line-height: px2rem(80);

img {

width: px2rem(40);

margin-right: px2rem(10);

vertical-align: sub;

}

}

}

}

.calender {

background: #fff;

width:100%;

border-radius: px2rem(10);

box-shadow: 0 px2rem(4) px2rem(4) rgba($color: #000000, $alpha: 0.2);

.ui-datepicker-