.date-picker{position:relative;display:inline-block}.date-input{outline:none;cursor:pointer}.calendar-panel{position:absolute;top:40px;left:0;width:280px;background:#fff;border:1px solid #e4e7ed;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,0.1);padding:10px;z-index:9999;display:none}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.calendar-btn{width:28px;height:28px;line-height:28px;text-align:center;border:none;background:transparent;cursor:pointer;font-size:16px;color:#606266;border-radius:4px;font-family:cursive}.calendar-btn:hover{background:#f5f7fa}.calendar-title{font-size:14px;font-weight:500;color:#303133}.calendar-week{display:flex;background:#f5f7fa;border-radius:4px 4px 0 0}.week-item{flex:1;height:30px;line-height:30px;text-align:center;font-size:12px;color:#909399}.calendar-days{display:flex;flex-wrap:wrap}.day-item{width:14.28%;height:30px;line-height:30px;text-align:center;font-size:14px;cursor:pointer;box-sizing:border-box}.day-item:hover{background:#ecf5ff}.day-item.disabled{color:#c0c4cc;cursor:not-allowed;background:#fff}.day-item.active{background:#409eff;color:#fff;border-radius:4px}.day-item.other-month{color:#c0c4cc}