<template>

  <div class="sales-view">
    <el-card shadow="hover">
      <template v-slot:header>
        <div class="menu-wrapper">
          <el-menu mode="horizontal"
                 :default-active="activeIndex"
                 @select="onMenuSelect"
                 class="sales-view-menu">
          <el-menu-item index="1">销售量</el-menu-item>
          <el-menu-item index="2">访问量</el-menu-item>
        </el-menu>
        <div class="menu-right">
          <el-radio-group v-model="radioSelect" size="small">
            <el-radio-button label="今日"/>
            <el-radio-button label="本周"/>
            <el-radio-button label="本月"/>
            <el-radio-button label="今年"/>
          </el-radio-group>
          <el-date-picker type="daterange" v-model="date" range-separator="至"  start-placeholder="开始时间"
          end-placeholder="结束日期" size="small"  unlink-panels
                          :picker-options="pickerOptions"  class="sales-view-date-picker"/>
        </div>
      </div>
    </template>
    <template>
      <div>222</div>
    </template>
  </el-card>
  </div>

</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1',
      radioSelect: '今日',
      date: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 24 * 1000 * 7)
            picker.$emit('pick', [start, end])
          }
},
          {
            text: '最近一个月',
            onClick (picker) {
              const start = new Date()
              const end = new Date()
              start.setTime(start.getTime() - 3600 * 24 * 1000 * 30)
              picker.$emit('pick', [start, end])
            }
},
          {
            text: '最近三个月',
            onClick (picker) {
              const start = new Date()
              const end = new Date()
              start.setTime(start.getTime() - 3600 * 24 * 1000 * 30 * 3)
              picker.$emit('pick', [start, end])
            }
        }]
      }
    }
  },
  methods: {
    onMenuSelect (index) {
      this.activeIndex = index
      console.log(this.activeIndex)
    }

  }
}
</script>

<style scoped>
  .sales-view{
      margin-top:20px;
        .menu-wrapper{
          position: relative;
          display: flex;
        .sales-view-menu{
            width: 100%;
            padding-left: 20px;
          .el-menu-item{
            height: 50px;
            line-height: 50px;
            marin: 0 20px;
          }
        }
          .menu-right{
            position: absolute;
            right: 20px;
            top: 0;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .sales-view-date-picker{
                margin-left: 20px;
            }
          }
    }
  }
</style>






之前的默认选择问题已经解决了 新的问题是 设置了样式 但是不生效 特别是 menu-right部分的 无法和 menu-wrapper平行展示