<template>
  <div>
    <scroller>
      <div :style="{ width: width + 'px', height: height + 'px' }">
        <div :style="gradientTopStyle"></div>
      </div>
    </scroller>
  </div>
</template>
<style>
.gradient-panel {
  width: 750px;
  height: 800px;
}
</style>
<script>
export default {
  props: {
    width: {
      type: [Number, String],
      default: 750
    },
    height: {
      type: [Number, String],
      default: 600
    },
    startColor: {
      type: String,
      default: '#00A4F2'
    },
    endColor: {
      type: String,
      default: '#F9F9F9'
    }
  },

  data() {
    return {}
  },
  computed: {
    gradientStyle() {
      var { width, height, startColor, endColor } = this
      //是否为双色渐变，双色渐变处理渐变色透明度为90%
      startColor = `#E6${startColor.substring(1)}`
      endColor = `#E6${endColor.substring(1)}`
      return {
        width: `${width}px`,
        height: `${height}px`,
        backgroundImage: `linear-gradient(to bottom,${startColor}, ${endColor})`
      }
    },
    gradientTopStyle() {
      var { width, height, startColor, endColor } = this
      return {
        width: `${width}px`,
        height: `${height}px`,
        backgroundImage: `linear-gradient(to bottom, ${startColor}, ${endColor})`
      }
    },

    gradientBottomStyle() {
      var { width, height, startColor, endColor } = this
      return {
        width: `${width}px`,
        flex: 1,
        backgroundImage: `linear-gradient(to bottom, ${tempColor}, ${endColor})`
      }
    }
  },
  methods: {}
}
</script>
