日期选择

src/App.vue

@@ -29,8 +29,8 @@ body {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  // text-align: center;
+  color: #fff;
   background: url("./assets/img/bg.png") no-repeat;
   background-size: 100% 100%;
   background-position: center;

src/assets/css/public.less

@@ -54,12 +54,6 @@ i {
   height: 3vh;
 }
 
-.time-info {
-  .el-input__inner {
-    height: 0 !important;
-    line-height: 0 !important;
-  }
-}
 
 table {
   border-color: @main-color  !important;
@@ -365,44 +359,8 @@ i {
   }
 }
 
-// 时间选择器
-.el-date-editor {
-  opacity: 0;
-  position: absolute;
-  z-index: -100;
-  top: 0;
-  bottom: 0;
-  width: 0;
-}
-
-.el-picker-panel {
-  box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9) !important;
-  background: rgba(0, 100, 200, 0.45) !important;
-  border-color: @main-color  !important;
-  color: @font-color  !important;
-
-  .el-picker-panel__icon-btn {
-    color: @active-color  !important;
-  }
 
-  .el-date-picker__header-label {
-    color: inherit !important;
-    font-size: 1.7vh !important;
-  }
 
-  table {
-    td {
-      .cell {
-        font-size: 1.3vh !important;
-        color: inherit !important;
-      }
-    }
-
-    td.current {
-      color: @active-color  !important;
-    }
-  }
-}
 
 .el-dropdown-link {
   font-size: 1.4vh;

src/components/DateWidget/DateWidget.vue

+<template>
+  <div class="time-info">
+    <el-date-picker
+      ref="datePicker"
+      v-model="curTime"
+      type="year"
+      format="yyyy"
+      value-format="yyyy"
+      :clearable="false"
+      @change="clearPlay"
+    ></el-date-picker>
+    <label class="el-input__inner__picker" @click="showDatePicker">
+      {{ curTime }}
+    </label>
+    <i
+      :class="play ? 'el-icon-video-pause' : 'el-icon-video-play'"
+      @click="timePlay"
+    ></i>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateLevel: 'year',
+      curTime: '',
+      play: false
+    }
+  },
+  methods: {
+    showDatePicker() {
+      console.log('asdfsadf')
+      this.$refs.datePicker.focus()
+      console.log(this.$refs.datePicker)
+    },
+    // 清除播放事件
+    clearPlay(e) {
+      console.log(e)
+      this.play = false
+      // clearInterval(this.timer)
+    },
+    timePlay() {
+      console.log('ss')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import url('../../assets/css/public.less');
+.time-info {
+  cursor: pointer;
+  flex-direction: row;
+  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 1vw;
+  height: 45px;
+  // 时间选择器
+  .el-date-editor {
+    opacity: 0;
+    position: absolute;
+    z-index: -100;
+    top: 0;
+    bottom: 0;
+    width: 0;
+  }
+  /deep/.el-date-picker {
+    color: #fff;
+  }
+  .el-input__inner__picker {
+    cursor: pointer;
+    position: relative;
+    padding: 0;
+    font-size: 36px;
+    color: @font-light-color;
+    font-family: timeFont;
+    height: 100%;
+    line-height: 45px;
+    box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9);
+    padding: 0 25px;
+    border: 0.1vh solid @main-color;
+    border-radius: 25px;
+    &:hover {
+      border-color: #fff;
+    }
+  }
+  /deep/.el-picker-panel {
+    box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9);
+    background: rgba(0, 100, 200, 0.45);
+    border-color: @main-color;
+    color: @font-color;
+
+    .el-picker-panel__icon-btn {
+      color: @active-color;
+    }
+
+    .el-date-picker__header-label {
+      color: inherit;
+      font-size: 1.7vh;
+    }
+
+    table {
+      td {
+        .cell {
+          font-size: 1.3vh;
+          color: inherit;
+        }
+      }
+
+      td.current {
+        color: @active-color;
+      }
+    }
+  }
+
+  i {
+    cursor: pointer;
+    font-size: 32px;
+    margin-left: 0.7vw;
+    // height: 4.5vh;
+    // line-height: 4.5vh;
+    font-weight: 300;
+    height: 100%;
+    line-height: 45px;
+    color: @active-color;
+  }
+}
+</style>
\ No newline at end of file