element_ui的datePicker修改樣式

修改后的樣式：

代碼：

代碼在App.vue中，因為其他頁面中添加了<style  lang="scss" scoped>,scoped只對本組件有效，然而datePicker生成是和id="app"平級的關系，所以設置scoped的組件無法對datePicker生成的時間選擇框做樣式調整。我將App.vue作為了公共樣式

$colorTime:#45f0ea;
body{

  // 時間選擇整體,選擇下拉
  .el-picker-panel{
      background: url(~@/assets/images/rigt_con_bg.png) no-repeat !important;
      color: $colorTime !important;
      border-color: $colorTime !important;
    }
  //時間選擇內容頭部
   .el-date-picker__header--bordered{
    border-bottom: 1px solid $colorTime !important;
  }
  // 左右箭頭
  .el-picker-panel__icon-btn, .el-date-picker__header-label{
    color:$colorTime !important;
  }
  //年，月
  .el-year-table td .cell,.el-month-table td .cell{
    color:$colorTime;
    font-size: 14px;
  }
  //年月選中/滑過樣式
  .el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell,.el-year-table td.today .cell,
  .el-month-table td .cell:hover, .el-month-table td.current:not(.disabled) .cell,.el-month-table td.today .cell{
    color: #fff !important; 
    background-color: #01ccff !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    width: 60px;
    text-align: center;
  }
}