styles: element

src/components/Conditions/DateOptions.vue

 <template>
-  <div>
+  <div class="date-options-container">
     <!-- 两种形式 0:select 1:button -->
     <template v-if="showType === 0">
       <!-- select -->
@@ -9,39 +9,69 @@
           :key="item.value"
           :label="item.label"
           :value="item.value"
-        >
-        </el-option>
+        />
       </el-select>
     </template>
     <template v-else>
       <!-- button -->
+      <div class="date-btn-wrapper">
+        <span
+          class="date-btn-item"
+          :class="{ active: dateType === item.value }"
+          v-for="item in dateList"
+          :key="item.value"
+          @click="onDateChange(item.value)"
+        >
+          <span class="date-btn">{{ item.label }}</span>
+        </span>
+      </div>
     </template>
+    <div class="date-option-wrapper">
       <el-date-picker
+        class="date-option-item"
         v-show="dateType === 'day'"
         v-model="dayVal"
         type="date"
         placeholder="选择日期"
+        :picker-options="pickerOptions"
       />
       <el-date-picker
+        class="date-option-item"
         v-show="dateType === 'week'"
         v-model="weekVal"
         type="week"
         format="yyyy 第 WW 周"
         placeholder="选择周"
+        :picker-options="pickerOptions"
       />
       <el-date-picker
+        class="date-option-item"
         v-show="dateType === 'month'"
         v-model="monthVal"
         type="month"
         placeholder="选择月"
+        :picker-options="pickerOptions"
       />
       <el-date-picker
+        class="date-option-item"
         v-show="dateType === 'year'"
         v-model="yearVal"
         type="year"
         placeholder="选择年"
+        :picker-options="pickerOptions"
+      />
+      <el-date-picker
+        class="date-option-item"
+        v-show="dateType === 'custom'"
+        v-model="customTimeVal"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :picker-options="pickerOptions"
       />
     </div>
+  </div>
 </template>
 
 <script>
@@ -49,6 +79,7 @@ const list = ['day', 'week', 'month', 'year'].map(item => ({
   label: item,
   value: item
 }))
+
 export default {
   name: 'DateOptions',
   props: {
@@ -67,10 +98,16 @@ export default {
   },
   data() {
     return {
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        }
+      },
       dayVal: '',
       weekVal: '',
       monthVal: '',
-      yearVal: ''
+      yearVal: '',
+      customTimeVal: ''
     }
   },
   computed: {
@@ -82,6 +119,74 @@ export default {
         this.$emit('update:defaultsDate', val)
       }
     }
+  },
+  created() {
+    // 初始化时间 日周月年自定义
+    this.dayVal = new Date()
+    this.weekVal = new Date()
+    this.monthVal = new Date()
+    this.yearVal = new Date()
+    this.customTimeVal = new Date()
+  },
+  methods: {
+    onDateChange(val) {
+      this.dateType = val
+    }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.date-options-container {
+  display: inline-block;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+.date-btn-wrapper {
+  display: inline-block;
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+.date-btn-item {
+  float: left;
+  font-size: 14px;
+  line-height: 1;
+  padding: 8px 24px;
+  border: 1px solid #e5e5e5;
+  margin-right: 36px;
+  color: #777;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &.active {
+    padding: 8px 24px;
+    background: #4bbeff;
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 10px -2px #666;
+  }
+}
+
+.date-option-wrapper {
+  float: right;
+  padding-left: 36px;
+}
+.date-option-item {
+  vertical-align: middle;
+  line-height: 30px;
+}
+</style>

src/layouts/BasicLayout.vue

@@ -19,8 +19,15 @@
           </span>
         </div>
         <div v-show="!collapsed" class="collapsed-content">
-          <date-options :defaults-date.sync="dateType" />
-          collapsed content
+          <date-options :show-type="1" :defaults-date.sync="dateType" />
+          <div class="operate-wrapper">
+            <el-button class="operate-btn" type="primary" @click="onConfirm"
+              >确 定</el-button
+            >
+            <el-button class="operate-btn reset-btn" @click="onConfirm"
+              >取 消</el-button
+            >
+          </div>
         </div>
       </div>
       <div class="content" :style="{ marginTop: collapsed ? '72px' : '132px' }">
@@ -42,6 +49,11 @@ export default {
       collapsed: false,
       dateType: 'day'
     }
+  },
+  methods: {
+    onConfirm() {
+      console.log('dateType::', this.dateType)
+    }
   }
 }
 </script>
@@ -69,7 +81,6 @@ export default {
   top: $headerHeight;
   z-index: 2;
   background: #fff;
-  text-align: center;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
   .content-title {
     font-size: 20px;
@@ -95,6 +106,7 @@ export default {
   }
 
   .condition-top {
+    text-align: center;
     line-height: 60px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
@@ -102,8 +114,17 @@ export default {
   .collapsed-content {
     background: #fff;
     height: 58px;
-    line-height: 58px;
+    // line-height: 58px;
+    padding: 13px 200px 15px 66px;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+  }
+
+  .operate-wrapper {
+    float: right;
+    .operate-btn + .operate-btn {
+      margin-left: 10px;
+    }
   }
 }
 </style>

src/layouts/components/FixedMenu/index.vue

@@ -18,6 +18,7 @@
       class="test"
       :style="{
         opacity: visible ? 1 : 0,
+        zIndex: visible ? 1 : -9999,
         top: currItemPostion.y,
         left: currItemPostion.x
       }"

src/styles/element-ui.scss

@@ -5,9 +5,52 @@
     line-height: 28px;
     border-radius: 2px;
     padding-left: 12px;
+    border-radius: 2px;
   }
 
   .el-input__icon {
     line-height: 28px;
   }
 }
+
+.date-option-item{
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 2px;
+  }
+
+  .el-input__icon {
+    line-height: 32px;
+  }
+}
+
+.el-button {
+  font-size: 14px;
+  padding: 8px 17px;
+  font-weight: 400;
+  border-color: #e5e5e5;
+  color: #666;
+  border-radius: 2px;
+}
+
+.reset-btn {
+  &:hover,
+  &:focus {
+    color: #409eff;
+    border-color: #c6e2ff;
+    background-color: #fff;
+  }
+}
+
+.el-button--primary {
+  background: #0069ff;
+  border: none;
+  color: #fff;
+
+  &:hover,
+  &:active,
+  &.is-active {
+    background-color: #014fbe;
+  }
+}