wt_project_web_bak/src/views/invest/components/wave.vue

<template>
  <div class="page">
    <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
      <defs>
        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
      </defs>
      <use class="wave" xlink:href="#wave" :fill="color1" x="50" y="10">
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0"
                          dur="3.2s" repeatCount="indefinite"/>
      </use>
    </svg>

    <svg class="waves" viewBox="0 24 180 24" preserveAspectRatio="none">
      <defs>
        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
      </defs>
      <use class="wave" xlink:href="#wave" :fill="color2" x="50" y="0">
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0"
                          dur="6.2s" repeatCount="indefinite"/>
      </use>
    </svg>

    <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
      <defs>
        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
      </defs>
      <use class="wave" xlink:href="#wave" :fill="color3" x="150" y="10">
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0"
                          dur="12.2s" repeatCount="indefinite"/>
      </use>
    </svg>

    <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
      <defs>
        <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
      </defs>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'wave',
  props: {
    color: {
      type: String,
      default: '#32B5F3'
    }
  },
  watch: {
    color: {
      handler () {
        this.init()
      },
      immediate: true
    }
  },
  data () {
    return {
      color1: '',
      color2: '',
      color3: ''
    }
  },
  methods: {
    init () {
      this.color1 = this.hexToRGB(this.color, 0.1)
      this.color2 = this.hexToRGB(this.color, 0.3)
      this.color3 = this.hexToRGB(this.color, 0.5)
    },
    hexToRGB (hex, alpha) {
      const r = parseInt(hex.slice(1, 3), 16)
      const g = parseInt(hex.slice(3, 5), 16)
      const b = parseInt(hex.slice(5, 7), 16)

      if (alpha) {
        return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')'
      } else {
        return 'rgb(' + r + ', ' + g + ', ' + b + ')'
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.page {
  width: 100%;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  .waves {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
}
</style>