|
|
@@ -2,37 +2,70 @@
|
|
|
<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"/>
|
|
|
+ <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"/>
|
|
|
+ <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"/>
|
|
|
+ <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"/>
|
|
|
+ <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"/>
|
|
|
+ <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"/>
|
|
|
+ <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"/>
|
|
|
+ <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>
|
|
|
@@ -49,13 +82,13 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
color: {
|
|
|
- handler () {
|
|
|
+ handler() {
|
|
|
this.init()
|
|
|
},
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
color1: '',
|
|
|
color2: '',
|
|
|
@@ -63,12 +96,12 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- init () {
|
|
|
+ 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) {
|
|
|
+ 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)
|
|
|
@@ -83,7 +116,7 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang='scss' scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.page {
|
|
|
width: 100%;
|
|
|
height: 50px;
|