vue-mobile-calendar-lhq
Version:
vue calendar lhq
153 lines (132 loc) • 10.6 kB
CSS
.m-calendar {
background: #fff;
}
.m-calendar .m-toolbar {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
height: 44px;
font-size: 17px;
}
.m-calendar .m-toolbar .drop-down {
margin: 3px 0 0 5px;
width: 0;
height: 0;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 5px solid #515151;
}
.m-calendar .m-toolbar .m-month-selector,
.m-calendar .m-toolbar .m-year-selector {
display: flex;
align-items: center;
justify-content: space-between;
width: 50%;
padding: 0 20px;
}
.m-calendar .m-toolbar .m-month-selector .m-prev-btn,
.m-calendar .m-toolbar .m-year-selector .m-prev-btn,
.m-calendar .m-toolbar .m-month-selector .m-next-btn,
.m-calendar .m-toolbar .m-year-selector .m-next-btn {
cursor: pointer;
width: 20px;
height: 20px;
background-size: 100% 100%;
-webkit-tap-highlight-color: transparent;
}
.m-calendar .m-toolbar .m-month-selector .m-prev-btn,
.m-calendar .m-toolbar .m-year-selector .m-prev-btn {
background-image: url(data:image/png;base64,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);
}
.m-calendar .m-toolbar .m-month-selector .m-next-btn,
.m-calendar .m-toolbar .m-year-selector .m-next-btn {
background-image: url(data:image/png;base64,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);
}
.m-calendar .m-week-header {
position: relative;
display: flex;
box-sizing: border-box;
font-size: 11px;
background: #fff;
}
.m-calendar .m-week-header .m-week-day {
flex: 1;
text-align: center;
line-height: 18px;
}
.m-calendar .m-months-container {
position: relative;
box-sizing: border-box;
height: 240px;
overflow: hidden;
}
.m-calendar .m-months-container .m-months-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.m-calendar .m-months-container .m-months-wrapper .m-months {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
will-change: transform;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row {
position: relative;
display: flex;
height: 40px;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row::before {
/* content: '';
position: absolute;
background-color: #ccc;
display: block;
right: 0;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 0; */
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day {
position: relative;
line-height: 40px;
font-size: 14px;
width: calc(14.285714285714286%);
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-day-num {
width: 30px;
height: 30px;
line-height: 30px;
display: inline-block;
border-radius: 100%;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-grey {
color: #b8b8b8;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-today {
background: #e3e3e3;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-disable {
color: #b8b8b8;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-select {
background: #e30013;
color: #fff;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-during {
background: #007aff;
color: #fff;
width: 100%;
height: 100%;
line-height: 40px;
border-radius: initial;
}