.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
.l-date-box,.l-date-default{
  width: 200px;
  display: inline-block;
  .l-date-inner-box{
    width: 100%;
		height: auto;
		position: relative;
    .l-date-option,.l-date-option-default{
      width: 160%;
		  height: auto;
      position: absolute;
      bottom:0;
      border-radius: 4px;
      box-sizing: border-box;
      background-color: #fff;
      top:35px;
      z-index: 999999;
      .l-date-fipx-box{
        width: 100%;
        height: auto;
        position: relative;
        margin-top:13px;
        padding:4px 0px;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border: 1px solid #dcdfe6f6;
        border-radius: 3px;
        transition: all .1s ease;
        box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
        z-index: 999999;
        &:before{
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          top: -15.7px;
          right: 65.27%;
          padding:0;
          border-bottom:8px solid #FFFFFF;
          border-top:8px solid transparent;
          border-left:8px solid transparent;
          border-right:8px solid transparent;
          display: block;
          content:'';
          z-index: 12;
        }
        &:after{
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          top: -18px;
          right:65%;
          padding:0;
          border-bottom:9px solid #dcdfe6f6;
          border-top:9px solid transparent;
          border-left:9px solid transparent;
          border-right:9px solid transparent;
          display: block;
          content:'';
          z-index:10
        }
        .l-date-date-box{
          width: 100%;
          height:auto;
          overflow: hidden;
        }
      }
    }
    .l-date-option-small{
      width: 140%;
      top:31px;
      .l-date-fipx-box{
        width: 100%;
        margin-top:13px;
        padding:4px 0px;
      }
    }
    .l-date-option-mini{
      width: 120%;
      top:31px;
      .l-date-fipx-box{
        width: 100%;
        margin-top:12px;
        padding:4px 0px;
        &:before{
          top: -15.7px;
          right: 65.37%;
        }
        &:after{
          top: -18px;
          right:65%;
        }
      }
    }
  }
  .l-date-header,.l-date-header-default{
    width: 100%;
    height:38px;
    border-bottom: 1px solid #f0f0f0;
    padding:0 10px;
    display: flex;
    box-sizing: border-box;
    line-height: 38px;
    font-size:14px;
    .l-date-btn-left{
      width: 20%;
      float: left;
      text-align: left;
      span{
        color:#353538;
        cursor: pointer;
        font-weight: 550;
        &:hover{
          color:#74baff;
          font-weight: 600;
        }
      }
      span.l-i-rotate{
        i{
          transform: rotateY(180deg);
        }
        
      }
    }
    .l-date-btn-center{
      width: 60%;
      float: left;
      text-align: center;
      color:#505050;
      font-size: 14px;
      user-select: none;
      .chooseYear{
        cursor: pointer;
        &:hover{
          color:#74baff
        }
      }
      .chooseMonth{
        cursor: pointer;
        &:hover{
          color:#74baff
        }
      }
    }
    .l-date-btn-right{
      width: 20%;
      float: left;
      text-align: right;
      span{
        color:#353538;
        cursor: pointer;
        font-weight: 550;
        &:hover{
          color:#74baff;
          font-weight: 600;
        }
      }
    }
  }
  .l-date-header-small{
    height:34px;
    padding:0 10px;
    line-height: 34px;
    font-size:13px;
    .l-date-btn-left{
      width: 20%;
      span{
        font-weight: 550;
        i{
          font-size: 13px;
        }
        &:hover{
          color:#74baff;
          font-weight: 600;
        }
      }
    }
    .l-date-btn-center{
      width: 60%;
      font-size: 13px;
    }
    .l-date-btn-right{
      width: 20%;
      span{
        font-weight: 550;
        i{
          font-size: 13px;
        }
        &:hover{
          font-weight: 600;
        }
      }
    }
  }
  .l-date-header-mini{
    height:28px;
    padding:0 10px;
    line-height: 28px;
    font-size:12px;
    .l-date-btn-left{
      width: 20%;
      span{
        font-weight: 550;
        i{
          font-size: 12px;
        }
        &:hover{
          color:#74baff;
          font-weight: 600;
        }
      }
    }
    .l-date-btn-center{
      width: 60%;
      font-size: 12px;
    }
    .l-date-btn-right{
      width: 20%;
      span{
        font-weight: 550;
        i{
          font-size: 12px;
        }
        &:hover{
          font-weight: 600;
        }
      }
    }
  }
  .l-date-content-box,.l-date-content-box-default{
    width: 100%;
    height:auto;
    overflow: hidden;
    padding:0 10px;
    box-sizing: border-box;
    .l-date-year-month-box{
      width:100%;
      height:auto;
      overflow: hidden;
      padding-bottom: 10px;
      padding-top:10px;
      table{
        width:100%;
        box-sizing: border-box;
        border-spacing:0;
        tbody{
          tr{
            height:28px;
            font-size: 13px;
            user-select: none;
            td{
              padding:4px 4px;
              box-sizing: border-box;
              text-align: left;
              line-height: 30px;
              color: #505050;
              font-weight: 500;
              border-right:0;
              border-top:0;
              text-align: center;
              cursor: pointer;
              span{
                color:#505050;
                width:25px;
                height:25px;
                box-sizing: border-box;
                display: inline-block;
                line-height: 25px;
                border-radius: 2px;
                transition: all .2s ease;
                &:hover{
                  background: #f5f5f5;
                  color:#74baff;
                  font-weight: 600;
                }
              }
              span.active{
                background: #74baff;
                color:#fff;
                font-weight: 600;
              }
              span.prev-month,span.next-month{
                color:#cecbcb
              }
              span.date-span-disabled{
                width: 100%;
                background: #f5f5f5;
                color:#cecbcb;
                cursor: no-drop;
                padding:0 4px;
                &:hover{
                  color:#cecbcb;
                  font-weight: normal;
                }
              }
            }
            td.date-span-disabled{
              padding:4px 0
            }
            th{
              padding:0;
              box-sizing: border-box;
              span{
                color:#505050;
                font-weight: normal;
              }
            }
          }
        }
        
      }
    }
    .l-today-box{
      width: 100%;
      height:30px;
      text-align: center;
      line-height: 30px;
      font-size:14px;
      border-top: 1px solid #f0f0f0;
      span{
        color:#74baff;
        cursor: pointer;
      }
    }
  }
  .l-date-content-box-small{
    width: 100%;
    padding:0 10px;
    .l-date-year-month-box{
      padding-bottom: 10px;
      padding-top:10px;
      table{
        width:100%;
        tbody{
          tr{
            height:25px;
            font-size: 13px;
            td{
              padding:2px 2px;
              line-height: 27px;
              font-weight: 500;
              cursor: pointer;
              span{
                color:#505050;
                width:22px;
                height:22px;
                line-height: 22px;
                border-radius: 2px;
                font-size: 13px;
                &:hover{
                  font-weight: 550;
                }
              }
              span.active{
                font-weight: 550;
              }
              span.prev-month,span.next-month{
                color:#cecbcb
              }
              span.date-span-disabled{
                width: 100%;
                background: #f5f5f5;
                color:#cecbcb;
                cursor: no-drop;
                padding:0 2px;
                &:hover{
                  color:#cecbcb;
                  font-weight: normal;
                }
              }
            }
            td.date-span-disabled{
              padding:2px 0
            }
            th{
              padding:0;
              box-sizing: border-box;
              span{
                color:#505050;
                font-weight: normal;
              }
            }
          }
        }
        
      }
    }
  }
  .l-date-content-box-mini{
    width: 100%;
    padding:0 8px;
    .l-date-year-month-box{
      padding-bottom: 10px;
      padding-top:6px;
      table{
        width:100%;
        tbody{
          tr{
            height:22px;
            font-size: 12px;
            td{
              padding:2px 2px;
              line-height: 24px;
              font-weight: 500;
              cursor: pointer;
              span{
                color:#505050;
                width:20px;
                height:20px;
                line-height: 20px;
                border-radius: 2px;
                font-size: 12px;
                &:hover{
                  font-weight: 550;
                }
              }
              span.active{
                font-weight: 550;
              }
              span.prev-month,span.next-month{
                color:#cecbcb
              }
              span.date-span-disabled{
                width: 100%;
                background: #f5f5f5;
                color:#cecbcb;
                cursor: no-drop;
                padding:0 2px;
                &:hover{
                  color:#cecbcb;
                  font-weight: normal;
                }
              }
            }
            td.date-span-disabled{
              padding:2px 0
            }
            th{
              padding:0;
              box-sizing: border-box;
              span{
                color:#505050;
                font-weight: normal;
              }
            }
          }
        }
        
      }
    }
  }

  .l-choose-year-box,.l-choose-year-box-default{
    width:100%;
    height:auto;
    overflow: hidden;
    padding:20px 10px;
    box-sizing: border-box;
    transition: all .2s ease;
    div{
      width:25%;
      height:60px;
      display: inline-block;
      font-size:14px;
      text-align: center;
      line-height: 60px;
      cursor: pointer;
      user-select: none;
      transition: all .15s ease;
      color:#505050;
      span{
        width:45px;
        height:25px;
        border-radius: 2px;
        display: inline-block;
        line-height:25px;
        &:hover{
          background: #f5f5f5;
          color:#74baff;
        }
      }
      span.active{
        background: #74baff;
        color:#fff;
      }
    }
  }
  .l-choose-year-box-small{
    width:100%;
    height:auto;
    overflow: hidden;
    padding:18px 8px;
    box-sizing: border-box;
    transition: all .2s ease;
    div{
      width:25%;
      height:50px;
      font-size:13px;
      line-height: 50px;
      span{
        width:42px;
        height:22px;
        border-radius: 2px;
        display: inline-block;
        line-height:22px;
      }
    }
  }
  .l-choose-year-box-mini{
    width:100%;
    height:auto;
    overflow: hidden;
    padding:16px 6px;
    box-sizing: border-box;
    transition: all .2s ease;
    div{
      width:25%;
      height:45px;
      font-size:12px;
      line-height: 45px;
      span{
        width:40px;
        height:20px;
        border-radius: 2px;
        display: inline-block;
        line-height:20px;
      }
    }
  }
  .l-choose-month-box,.l-choose-month-box-default{
     width:100%;
    height:auto;
    overflow: hidden;
    padding:20px 10px;
    box-sizing: border-box;
    transition: all .2s ease;
    div{
      width:25%;
      height:60px;
      display: inline-block;
      font-size:14px;
      text-align: center;
      line-height: 60px;
      cursor: pointer;
      user-select: none;
      color:#505050;
      span{
        width:45px;
        height:25px;
        border-radius: 2px;
        display: inline-block;
        line-height:25px;
        &:hover{
          background: #f5f5f5;
          color:#74baff;
        }
      }
      span.active{
        background: #74baff;
        color:#fff;
      }
    }
  }
  .l-choose-month-box-small{
    padding:18px 8px;
    div{
      height:55px;
      font-size:13px;
      line-height: 55px;
      span{
        width:42px;
        height:22px;
        border-radius: 2px;
        line-height:22px;
      }
    }
  }
  .l-choose-month-box-mini{
    padding:16px 6px;
    div{
      height:50px;
      font-size:12px;
      line-height: 50px;
      span{
        width:40px;
        height:20px;
        border-radius: 2px;
        line-height:20px;
      }
    }
  }
}