vue-calendar-ui
Version:
一款高效、简洁、功能丰富、宽度可自适应的pc端考勤日历插件
175 lines (173 loc) • 3.13 kB
CSS
html,
body,
.vue-calendar-ui,
.vue-calendar-ui * {
margin: 0;
padding: 0;
list-style: none;
}
.vue-calendar-ui {
width: 100%;
/* height: 100%; */
overflow: hidden;
min-width: 460px;
border: 1px solid #E2E3E7;
border-radius: 12px;
/* min-height: 394px; */
}
.cv-controlBox {
width: 100%;
height: 40px;
padding: 0 22px;
padding-top: 20px;
box-sizing: border-box;
position: relative;
text-align: left;
}
.cv-title {
font-size: 20px;
color: #333333;
font-weight: 500;
line-height: 1;
}
.cv-arrowLeft {
float: right;
width: 20px;
height: 20px;
font-size: 20px;
margin-right: 20px;
transform: rotate(-180deg);
transform-origin: center;
cursor: pointer;
color: #3B3E66;
}
.cv-arrowRight {
float: right;
width: 20px;
height: 20px;
font-size: 20px;
cursor: pointer;
color: #3B3E66;
}
.cv-arrow-disabled{
cursor: not-allowed;
color: #666666 ;
}
.cv-contentBox {
float: left;
width: 100%;
padding-bottom: 30px;
box-sizing: border-box;
}
.cv-top {
float: left;
width: 100%;
margin-top: 30px;
font-size: 16px;
color: #9da5b1;
padding: 0 2%;
box-sizing: border-box;
}
.cv-top .cv-label {
float: left;
width: 14.28571428%;
text-align: center;
line-height: 1;
}
.cv-main {
float: left;
width: 100%;
padding: 0 2%;
box-sizing: border-box;
}
.cv-item {
float: left;
width: 14.28571428%;
text-align: center;
line-height: 1;
margin-top: 22px;
position: relative;
}
.cv-date {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
font-size: 14px;
color: #333333;
cursor: pointer;
position: relative;
}
.cv-prev .cv-date,
.cv-next .cv-date {
color: #cccccc;
}
.cv-click-Box{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: pointer;
}
.cv-today {
background-color: #4b7df6;
color: #fff;
}
.cv-date:hover{
background-color: #4B7DF6;
color: #fff;
}
.cv-circle{
position: absolute;
width: 6px;
height: 6px;
left: 50%;
bottom: -8px;
margin-left: -3px;
background-color: #4B7DF6;
border-radius: 50%;
}
.cv-circle-label{
background-color: transparent ;
font-size: 12px;
width: 100%;
height: auto;
line-height: normal;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
left: 0;
margin-left: 0;
bottom: -15px;
}
.cv-today-birthday{
position: absolute;
right: -5px;
top: -14px;
width: 25px;
height: 25px;
}
/* small */
.vue-calendar-small{
min-width: 320px;
}
.vue-calendar-small .cv-arrowLeft,.vue-calendar-small .cv-arrowRight{
top: 16px;
}
.vue-calendar-small .cv-top {
margin-top: 20px;
}
.vue-calendar-small .cv-item {
margin-top: 20px;
}
.vue-calendar-small .cv-date {
width: 26px;
height: 26px;
line-height: 26px;
}
.vue-calendar-small .cv-contentBox{
padding-bottom: 20px;
}