SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♿ optimize the image comparison component

Browse Source
This commit is contained in:
landaiqing
2024-12-13 23:23:03 +08:00
parent 6ea5038f5b
commit 7896541c2d
19 changed files with 1108 additions and 1476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue
View File

@@ -1,459 +0,0 @@
<script setup lang="ts">
import anime from 'animejs/lib/anime.es.js';
const planesCard = anime.timeline({
direction: 'forwards',
loop: true
});
planesCard.add({
targets: '#card2 .card_text',
scaleX: [0, 1],
delay: function (_target, index) {
return index * 300;
},
easing: [0.17, 0.17, 0.35, 1.00],
duration: 300,
offset: 0
}).add({
targets: '#plane1',
opacity: {
value: [0, 1],
duration: 100,
delay: 84
},
translateX: {
value: ['-199', '+888']
},
translateY: {
value: ['-36', '+404']
},
rotate: {
value: -12
},
scale: {
value: 0,
duration: 200,
delay: 300
},
easing: [0.17, 0.17, 0.79, 1.00],
duration: 541,
offset: 250
}).add({
targets: '#card1',
opacity: 0,
loop: true,
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 708
}).add({
targets: '#card3_bg-white',
easing: [0.17, 0.11, 0.40, 1.26],
duration: 666,
offset: 625,
scale: [0, 1]
}).add({
targets: '#cards',
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 708,
translateY: ['-=257']
}).add({
targets: '#card3_icon',
translateX: ['+=35', 0],
translateY: ['+=35', 0],
scale: [0, 1],
loop: true,
easing: [0.41, 1.9, 0.59, 0.94],
duration: 708,
offset: 780
}).add({
targets: '#card3 .card_text',
scaleX: [0, 1],
delay: function (_target, index) {
return index * 300;
},
easing: [0.17, 0.17, 0.35, 1.00],
duration: 300,
offset: 989
}).add({
targets: '#plane2',
opacity: {
value: [0, 1],
duration: 167,
delay: 84
},
scaleX: {
value: -1,
duration: 0
},
translateX: {
value: [-1620, -180]
},
translateY: {
value: [-78, 320]
},
rotate: {
value: -12,
duration: 500,
delay: 100
},
scale: {
value: 0,
duration: 250,
delay: 285
},
easing: [0.17, 0.17, 0.79, 1.00],
duration: 600,
offset: 1380
}).add({
targets: '#card2',
opacity: 0,
loop: true,
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 1875
}).add({
targets: '#card4_bg-white',
easing: [0.17, 0.11, 0.40, 1.26],
duration: 666,
offset: 1793,
scale: [0, 1]
}).add({
targets: '#cards',
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 1875,
translateY: ['-=257']
}).add({
targets: '#card4_icon',
translateX: ['+=35', 0],
translateY: ['+=35', 0],
scale: [0, 1],
loop: true,
easing: [0.41, 1.9, 0.59, 0.94],
duration: 708,
offset: 1957
});
</script>
<template>
<svg viewBox="0 0 2579 1132" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hello@zajno.com</title>
<defs>
<linearGradient x1="118.314446%" y1="48.8841826%" x2="-30.2984871%" y2="51.1919321%" id="linearGradient-1">
<stop stop-color="#7F9BFC" offset="0%"></stop>
<stop stop-color="#839FFC" stop-opacity="0.9563" offset="5.509039%"></stop>
<stop stop-color="#849FFC" stop-opacity="0.9533" offset="5.884359%"></stop>
<stop stop-color="#8AA4FC" stop-opacity="0.8154" offset="23.03%"></stop>
<stop stop-color="#9CB1FD" stop-opacity="0.6239" offset="46.86%"></stop>
<stop stop-color="#BAC7FD" stop-opacity="0.4019" offset="74.47%"></stop>
<stop stop-color="#D3DAFE" stop-opacity="0.2445" offset="94.06%"></stop>
<stop stop-color="#F0F0FF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0334507%" y1="-143.800704%" x2="50.0334507%" y2="63.3151408%" id="linearGradient-2">
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FFDE46" stop-opacity="0.1416" offset="15.24%"></stop>
<stop stop-color="#FFA764" stop-opacity="0.4337" offset="46.69%"></stop>
<stop stop-color="#FF916F" stop-opacity="0.5396" offset="58.08%"></stop>
<stop stop-color="#FF5782" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.8485923%" y1="72.7804172%" x2="49.8485923%" y2="-43.2541461%" id="linearGradient-3">
<stop stop-color="#F7CF83" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0154912%" y1="-52.011784%" x2="50.0154912%" y2="71.9581815%" id="linearGradient-4">
<stop stop-color="#FDFDFE" offset="0%"></stop>
<stop stop-color="#86DD87" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0074976%" y1="99.049164%" x2="50.0074976%" y2="-16.925746%" id="linearGradient-5">
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FF57B0" offset="100%"></stop>
</linearGradient>
<rect id="path-6" x="0" y="0" width="615" height="851"></rect>
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-44.8815257%" id="linearGradient-8">
<stop stop-color="#FE5E85" offset="21.81%"></stop>
<stop stop-color="#E94B96" offset="40.49%"></stop>
<stop stop-color="#B21CC1" offset="79.01%"></stop>
<stop stop-color="#9100DB" offset="99.97%"></stop>
</linearGradient>
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-57.9189338%" id="linearGradient-9">
<stop stop-color="#FE5E85" offset="21.81%"></stop>
<stop stop-color="#E94B96" offset="40.49%"></stop>
<stop stop-color="#B21CC1" offset="79.01%"></stop>
<stop stop-color="#9100DB" offset="99.97%"></stop>
</linearGradient>
<linearGradient x1="50.0078125%" y1="-14.3794118%" x2="50.0078125%" y2="84.3210478%" id="linearGradient-10">
<stop stop-color="#0025FF" offset="0%"></stop>
<stop stop-color="#00FFD7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="92.6689445%" y1="127.3586%" x2="11.4142528%" y2="14.4674737%" id="linearGradient-11">
<stop stop-color="#0025FF" offset="3.619557%"></stop>
<stop stop-color="#0025FF" stop-opacity="0.8587" offset="16.82%"></stop>
<stop stop-color="#0025FF" stop-opacity="0" offset="97.01%"></stop>
</linearGradient>
<linearGradient x1="114.073989%" y1="198.165562%" x2="-10.8913485%" y2="-38.4110424%" id="linearGradient-12">
<stop stop-color="#7F9BFC" offset="0%"></stop>
<stop stop-color="#C9D3FE" offset="62.89%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
<linearGradient x1="140.812842%" y1="110.913212%" x2="45.1242839%" y2="33.8259447%" id="linearGradient-13">
<stop stop-color="#CFCFF6" offset="0%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
<linearGradient x1="101.805599%" y1="153.92944%" x2="40.0355701%" y2="46.5605817%" id="linearGradient-14">
<stop stop-color="#CFCFF6" offset="0%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
</defs>
<g id="planes" transform="translate(-6.000000, -47.000000)">
<g id="bg" transform="translate(1013.000000, 123.000000)" fill-rule="nonzero">
<g id="board-header">
<path
d="M615.5,94.5 L0.8,94.5 L0.8,12.8 C0.8,5.9 6.4,0.3 13.3,0.3 L603,0.3 C609.9,0.3 615.5,5.9 615.5,12.8 L615.5,94.5 Z"
id="header-bg" fill="url(#linearGradient-1)"></path>
<g id="buttons" transform="translate(38.000000, 33.000000)">
<circle id="Oval" fill="url(#linearGradient-2)" cx="14.7" cy="14.3" r="14.2"></circle>
<circle id="Oval" fill="url(#linearGradient-3)" cx="63.2" cy="14.3" r="14.2"></circle>
<circle id="Oval" fill="url(#linearGradient-4)" cx="111.6" cy="14.3" r="14.2"></circle>
</g>
</g>
<path
d="M603.586617,1065 L12.5121604,1065 C5.60544785,1065 -5.68434189e-14,1059.4 -5.68434189e-14,1052.5 L-5.68434189e-14,120 L616,120 L615.99868,1052.6 C616.098777,1059.4 610.493329,1065 603.586617,1065 Z"
id="board-bg" fill="url(#linearGradient-5)"></path>
</g>
<g id="cards-wrap" transform="translate(1013.000000, 243.000000)" mask="url(#mask-7)">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<g id="Rectangle"></g>
<g id="cards" style="transform: translateY(-248.817px);">
<g id="card1" style="opacity: 0.0318414;">
<g transform="translate(38.000000, 97.000000)">
<g id="card1_bg">
<g id="Group" opacity="0.15">
<g></g>
</g>
<g id="Group"></g>
<path
d="M519.7,159.304348 L20.2,159.304348 C9.1,159.304348 0,150.360248 0,139.229814 L0,20.7701863 C0,9.73913043 9,0.695652174 20.2,0.695652174 L519.7,0.695652174 C530.8,0.695652174 539.9,9.63975155 539.9,20.7701863 L539.9,139.229814 C539.9,150.360248 530.8,159.304348 519.7,159.304348 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card1_bg-white"
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card1_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
<g id="card1-icon-wrap" transform="translate(45.000000, 25.838509)">
<g id="card1_icon">
<g id="Group" fill-rule="nonzero">
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
ry="54.0621118"></ellipse>
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
<path
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
</g>
</g>
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
</g>
</g>
<g id="card2" style="opacity: 1;">
<g transform="translate(38.000000, 354.000000)">
<g id="card2_bg">
<path
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card2_bg-white"
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card2-icon-wrap" transform="translate(42.000000, 24.844720)">
<g id="card2_icon">
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="54.757764"
rx="54.4" ry="54.0621118"></ellipse>
<g id="Group" transform="translate(5.000000, 17.888199)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.1118012 C77.9,25.5403727 70.8,25.4409938 67,30.1118012 L45.8,55.9503106 L28.2,43.2298137 C24.6,40.6459627 19.6,40.9440994 16.3,43.9254658 L-5.68434189e-14,58.8322981 C8.5,77.8136646 27.6,91.0310559 49.8,91.0310559 C73.7,91.0310559 94,75.7267081 101.3,54.4596273 L81.6,30.1118012 Z"></path>
<ellipse id="Oval" cx="37.7" cy="7.85093168" rx="7.5" ry="7.45341615"></ellipse>
</g>
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.757764" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
<g id="card2_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
</g>
</g>
</g>
<g id="card3">
<g transform="translate(38.000000, 611.000000)">
<g id="card3_bg">
<path
d="M519.796259,159.701863 L20.2037414,159.701863 C9.1016855,159.701863 0,150.735348 0,139.577017 L0,20.8204985 C0,9.76179579 9.00166698,0.695652174 20.2037414,0.695652174 L519.796259,0.695652174 C530.898315,0.695652174 540,9.66216784 540,20.8204985 L540,139.577017 C540,150.735348 530.898315,159.701863 519.796259,159.701863 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card3_bg-white"
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(1);"></path>
</g>
<g id="card3_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0.170117);"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
</g>
<g id="card3-icon-wrap" transform="translate(45.000000, 25.838509)">
<g id="card3_icon" transform="scale(0)"
style="transform: translateX(-2.21467px) translateY(-2.21467px) scale(1.06328);">
<g id="Group" fill-rule="nonzero">
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
ry="54.0621118"></ellipse>
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
<path
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
</g>
</g>
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
</g>
</g>
<g id="card4">
<g transform="translate(38.000000, 868.000000)">
<g id="card4_bg">
<path
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card4_bg-white"
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(0);"></path>
</g>
<g id="card4-icon-wrap" transform="translate(42.000000, 25.000000)">
<g id="card4_icon" transform="scale(0)" style="transform: translateX(35px) translateY(35px) scale(0);">
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
r="54.4"></circle>
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
</g>
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
r="54.4"></circle>
</g>
</g>
<g id="card4_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
</g>
</g>
<g id="card5">
<g transform="translate(38.000000, 1125.000000)">
<g id="card5_bg">
<path
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card5_bg-white"
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card5-icon-wrap" transform="translate(42.000000, 25.000000)">
<g id="card5_icon" transform="scale(0)">
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
r="54.4"></circle>
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
</g>
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
r="54.4"></circle>
</g>
</g>
<g id="card5_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
</g>
</g>
</g>
</g>
<g id="plane2-wrap" transform="translate(320.000000, 30.00000)">
<g id="plane2" fill-rule="nonzero"
style="opacity: 0; transform: scaleX(-1) translateX(-1620px) translateY(-78px) rotate(0deg) scale(1);">
<path
d="M832.927808,725.921924 L342.327808,31.8219235 C250.027808,-98.7780765 -111.072192,339.321924 46.3278083,403.821924 L832.927808,725.921924 Z"
fill="url(#linearGradient-11)" opacity="0.0458220109"
transform="translate(420.019183, 366.784851) rotate(1.000000) translate(-420.019183, -366.784851) "></path>
<polygon fill="url(#linearGradient-12)" points="832.3 734.9 680.2 679.8 697.9 616"></polygon>
<polygon fill="url(#linearGradient-13)" points="832.3 734.9 697.9 616 738.8 591.3"></polygon>
<polygon fill="url(#linearGradient-14)" points="832.3 734.9 624.1 660.4 671.7 631.8"></polygon>
</g>
</g>
z
<g id="plane1-wrap" transform="translate(-320.000000, -30.00000)">
<g id="plane1" fill-rule="nonzero"
style="opacity: 1; transform: translateX(888px) translateY(404px) rotate(-12deg) scale(0);">
<path d="M826.3,718.9 L335.7,24.8 C243.4,-105.8 -117.7,332.3 39.7,396.8 L826.3,718.9 Z"
fill="url(#linearGradient-11)" opacity="0.0536345109"></path>
<polygon fill="url(#linearGradient-12)" points="826.3 718.9 674.2 663.8 691.9 600"></polygon>
<polygon fill="url(#linearGradient-13)" points="826.3 718.9 691.9 600 732.8 575.3"></polygon>
<polygon fill="url(#linearGradient-14)" points="826.3 718.9 618.1 644.4 665.7 615.8"></polygon>
</g>
</g>
</g>
</svg>
</template>
<style scoped lang="scss" src="./index.scss">
</style>

24
src/components/AnimatedSvgIllustration/index.scss
View File

@@ -1,24 +0,0 @@
svg {
width: 100%;
height: auto;
}
#card1_bg-white, #card2_bg-white, #card3_bg-white, #card4_bg-white {
transform-origin: 2% 8%;
transform-style: preserve-3D;
}
#card3_bg-white,
#card4_bg-white,
#card5_bg-white {
transform: scale(0);
}
#plane1 {
transform-origin: 620px 580px;
}
#plane2 {
transform: scaleX(-1) translate(-1500px, -150px);
transform-origin: 500px 650px;
}

373
src/components/EffectsCard/EffectsCard.vue
View File

@@ -1,373 +0,0 @@
<template>
<div class="center">
<h1>Daily UI 002: Credit Card Checkout</h1>
<div class="wrapper">
<button class="checkout">Checkout</button>
<div class="card-wrap">
<div class="card">
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 216.3 234.1" enable-background="new 0 0 216.3 234.1" xml:space="preserve">
<g id="shadow">
<g>
<path fill="#5A488F" d="M178.1,211.7c14.8-2.1,23.9-5.1,23.9-8.3c0-6.6-37.8-11.9-84.4-11.9c-46.6,0-84.4,5.3-84.4,11.9
c0,5.1,23,9.5,55.3,11.2c-10.5,2.1-16.7,4.7-16.7,7.6c0,6.6,32.4,11.9,72.3,11.9c39.9,0,72.3-5.3,72.3-11.9
C216.3,217.7,200.8,213.7,178.1,211.7z"></path>
</g>
</g>
<g id="back_hand">
<g>
<path fill="#FFFFFF" d="M43.4,127.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.2-6.2,14.1-6.2,14.1H4.8
c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6h10.2v20.5c0,0.5,0.4,1,1,1H18h4.5h8.8c7.5,0,14-5.6,14.7-13.1
C46.4,133.8,45.3,130.4,43.4,127.7z"></path>
<g>
<path fill="#DAEDF7" d="M32.7,125.9h-3.4c-2.3,0-4-1.9-3.8-4.2v0h7.2L32.7,125.9z"></path>
</g>
<g>
<path fill="#665AA7" d="M18,130.2H4.8c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h27.9c0.6,0,1.1,0.5,1.1,1.1
s-0.5,1.1-1.1,1.1H4.8c-1.4,0-2.5,1.1-2.5,2.5c0,1.4,1.1,2.6,2.5,2.6H18c0.6,0,1.1,0.5,1.1,1.1S18.6,130.2,18,130.2z"></path>
</g>
<g>
<path fill="#DAEDF7" d="M29.3,130.9c8.3-0.6,11.2,16.6,2,19.1c-3.3,0.6-2.8-0.8-2.8-0.8l0.6-2.6c0,0-2.7-2.4,0-7.4
C27.9,136.2,29.3,133.6,29.3,130.9z"></path>
</g>
<g>
<path fill="#665AA7" d="M31.7,151.6H18c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1h13.7c7.3,0,13.3-5.9,13.3-13.3
c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1c-0.3-0.3-0.7-0.4-1-0.4
c-3.6,0.6-5.5,7-5.3,17.1c0,0.6-0.5,1.1-1.1,1.2c-0.6,0-1.1-0.5-1.2-1.1c-0.3-11.7,2.3-18.6,7.2-19.4c1.1-0.2,2.2,0.2,3,1
c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9C47.2,144.7,40.3,151.6,31.7,151.6z"></path>
</g>
<g>
<path fill="#665AA7" d="M26.1,137.3h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
C30.4,135.4,28.5,137.3,26.1,137.3z M17.6,130.2c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"></path>
</g>
<g>
<path fill="#665AA7" d="M26.1,144.5h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
C30.4,142.5,28.5,144.5,26.1,144.5z M17.6,137.3c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"></path>
</g>
<g>
<path fill="#665AA7" d="M26.1,151.6h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
C30.4,149.7,28.5,151.6,26.1,151.6z M17.6,144.5c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"></path>
</g>
</g>
</g>
<g id="card">
<g>
<path fill="#E02E92" d="M178.4,203.4H56.8c-4.8,0-8.6-3.9-8.6-8.6V8.6c0-4.8,3.9-8.6,8.6-8.6h121.5c4.8,0,8.6,3.9,8.6,8.6v186.2
C187,199.6,183.1,203.4,178.4,203.4z"></path>
</g>
<g>
<rect x="144" fill="#363284" width="27.9" height="203.4"></rect>
</g>
</g>
<g id="front_hand">
<g>
<g>
<path fill="#FFFFFF" d="M132.2,131.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.1-6.2,14.1-6.2,14.1H93.6
c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6H104l0.4,21.4h16.2c7.9,0,14.4-6.4,14.4-14.4C135,137,134,134.1,132.2,131.7z"></path>
</g>
<g>
<path fill="#DAEDF7" d="M125,125.7c0,0-0.6-2.5,0.8-6.9c0.6-1.9-2-2.9-3.3-0.6c0,0-0.9,1.5-0.9,7.3
C124.5,125.7,125,125.7,125,125.7z"></path>
</g>
<g>
<path fill="#665AA7" d="M120.6,155.6h-13.7c-2.6,0-4.7-2.1-4.7-4.7c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5
c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5c0-0.9,0.3-1.8,0.7-2.5h-9.3c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h26.7
c0-4.1,0.8-13,7.2-14.1c1.1-0.2,2.2,0.2,3,1c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9
C136.1,148.7,129.1,155.6,120.6,155.6z M108,147.3c0,0.6-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.4,1.1,2.5,2.4,2.5h13.7
c7.3,0,13.3-5.9,13.3-13.3c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1
c-0.3-0.3-0.7-0.4-1-0.4c-4.9,0.8-5.3,9.6-5.3,11.9h1.6c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1H93.6c-1.4,0-2.5,1.1-2.5,2.5
c0,1.4,1.1,2.6,2.5,2.6h13.2c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.2,0.8,2.2,2,2.4
c0.5,0.1,0.9,0.6,0.9,1.1l0,0.1c0,0.5-0.4,1-0.9,1.1c-1.1,0.2-2,1.2-2,2.4c0,1.4,1.1,2.5,2.4,2.5
C107.5,146.2,108,146.7,108,147.3z"></path>
</g>
<g>
<path fill="#FFFFFF" d="M88.3,136"></path>
</g>
</g>
</g>
<g id="coins">
<g>
<g>
<g>
<g>
<path fill="#ED912F" d="M206.4,216c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
v-4.8h81.4V216z"></path>
</g>
<g>
<ellipse fill="#F9C441" cx="165.8" cy="211.2" rx="40.7" ry="3.9"></ellipse>
</g>
</g>
<g>
<g>
<path fill="#ED912F" d="M206.4,207.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
V203h81.4V207.8z"></path>
</g>
<g>
<ellipse fill="#F9C441" cx="165.8" cy="203" rx="40.7" ry="3.9"></ellipse>
</g>
</g>
<g>
<g>
<path fill="#ED912F" d="M213.7,200.5c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
v-4.8h81.4V200.5z"></path>
</g>
<g>
<ellipse fill="#F9C441" cx="173" cy="195.7" rx="40.7" ry="3.9"></ellipse>
</g>
</g>
<g>
<g>
<path fill="#ED912F" d="M196.4,192.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
V188h81.4V192.8z"></path>
</g>
<g>
<ellipse fill="#F9C441" cx="155.7" cy="188" rx="40.7" ry="3.9"></ellipse>
</g>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M195.9,192.5V188c0-2.1-18.3-3.9-40.8-3.9s-40.8,1.7-40.8,3.9v4.8c0,1.5,1.3,2.7,2.8,3
c2.9,0.6,7.9,1.4,15.1,2v2.7c0,0.1,0.1,0.2,0.1,0.3c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1
v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2c17.9,0,32.3-2,38-3.2c1.4-0.3,2.2-1.6,2.2-3v-4.8c0-0.3-0.4-0.7-1.3-1
c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c2.6-0.3,3.5-0.6,4.7-0.8c1.4-0.3,2.4-1.6,2.4-3v-4.8C212.7,194.4,205.6,193.2,195.9,192.5z"></path>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"></use>
</clipPath>
</g>
</g>
</g>
<g>
<defs>
<path id="SVGID_3_" d="M196.4,192.5V188c0-2.1-18.2-3.9-40.7-3.9c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-5.6,0-11,0.1-15.8,0.3
c3.5-3.5,6.1-6.3,7.6-8.1c0.9-1.1,1-2.8,0.1-3.9l-3-3.8c-1.3-1.7-16.7,8.3-34.3,22.3c-17.6,14-30.8,26.7-29.5,28.3l3,3.8
c0.9,1.2,2.5,1.5,3.8,0.8c5.1-2.6,17.9-10.2,31.9-21.3c2.3-1.9,4.6-3.7,6.7-5.5c2,0.2,4.2,0.5,6.6,0.7v2.7c0,0.1,0.1,0.2,0.1,0.3
c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2
c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c17.9,0,32.6-2,38.2-3.2c1.4-0.3,2.5-1.6,2.5-3v-4.8c0-0.3-0.4-0.7-1.3-1
c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c1.9-0.3,3.6-0.6,4.7-0.8c1.4-0.3,2.5-1.6,2.5-3v-4.8C213.7,194.4,206.8,193.2,196.4,192.5z"></path>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"></use>
</clipPath>
<polygon opacity="0.24" clip-path="url(#SVGID_4_)" fill="#ED1C24" points="146.8,176.4 150.7,184.1 173.6,191.5 173.4,198.3
179.8,199.6 179.8,206.6 179.7,221.8 137.1,236.3 97.8,224.2 "></polygon>
</g>
<g>
<g>
<path fill="#ED912F" d="M146.9,172.5c0.9,1.2,0.9,2.8-0.1,3.9c-3.7,4.4-14,15.1-28,26.2c-14,11.1-26.8,18.7-31.9,21.3
c-1.3,0.7-2.9,0.3-3.8-0.8l-3-3.8l63.7-50.6L146.9,172.5z"></path>
</g>
<g>
<ellipse transform="matrix(0.7832 -0.6217 0.6217 0.7832 -96.3369 111.7049)" fill="#F9C441" cx="112"
cy="194" rx="40.7" ry="3.9"></ellipse>
</g>
</g>
</g>
<g id="mouth">
<g>
<path fill="#363284" d="M106.3,86.3c-1,0-1.9-0.1-2.9-0.4c-0.6-0.2-0.9-0.8-0.8-1.4c0.2-0.6,0.8-0.9,1.4-0.8
c2.2,0.6,4.4,0.3,6.4-0.7c2-1.1,3.4-2.9,4-5.1c0.2-0.6,0.8-0.9,1.4-0.8c0.6,0.2,0.9,0.8,0.8,1.4C115.2,83.2,110.9,86.3,106.3,86.3
z"></path>
</g>
</g>
<g id="right_eye_wink">
<g display="inline">
<path fill="#363284" d="M116.4,40.9c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C116.8,40.9,116.6,40.9,116.4,40.9z"></path>
</g>
<g display="inline">
<path fill="#363284" d="M130.7,55.9c-0.2,0-0.5-0.1-0.7-0.2c-4.1-3.1-11.8-2.8-11.9-2.8c-0.5,0-0.9-0.3-1.1-0.8
c-0.2-0.5,0-1,0.4-1.3c0.3-0.2,8.1-5.8,14.3-3.1c0.6,0.3,0.8,0.9,0.6,1.5c-0.3,0.6-0.9,0.8-1.5,0.6c-2.8-1.3-6.3-0.2-8.8,1
c2.9,0.3,6.7,1.1,9.4,3.1c0.5,0.4,0.6,1.1,0.2,1.6C131.4,55.8,131.1,55.9,130.7,55.9z"></path>
</g>
</g>
<g id="right_eye">
<g>
<path fill="#363284" d="M133.5,53.6c-0.6-0.3-1.2-0.6-1.8-0.9c0.1-0.5,0.2-0.9,0.2-1.4c0-4-3.2-7.3-7.3-7.3c-4,0-7.3,3.2-7.3,7.3
c0,0.6,0.1,1.2,0.2,1.7c-0.8,0.4-1.4,0.8-1.9,1.1c-0.5,0.3-0.7,1-0.3,1.6c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2
c2.8-1.9,8.5-4.4,15.4-0.4c0.5,0.3,1.2,0.1,1.5-0.4C134.2,54.6,134,54,133.5,53.6z"></path>
<g>
<path fill="#FFFFFF"
d="M123,45.8c0.2,0.2,0.3,0.5,0.1,0.7s-0.4,0.2-0.6,0c-0.2-0.2-0.4-0.4-0.2-0.6S122.8,45.6,123,45.8z"></path>
</g>
<g>
<path fill="#FFFFFF" d="M122.2,47.5c0,0.6-0.5,0.4-1.1,0.4c-0.6,0-1.1,0.2-1.1-0.4c0-0.6,0.5-1.1,1.1-1.1
C121.7,46.5,122.2,46.9,122.2,47.5z"></path>
</g>
<g>
<path fill="#363284" d="M116.4,39.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C116.8,39.2,116.6,39.2,116.4,39.2z"></path>
</g>
</g>
</g>
<g id="left_eye">
<g>
<path fill="#363284" d="M85.5,53.6c-0.6-0.3-1.2-0.6-1.8-0.9c0.1-0.5,0.2-0.9,0.2-1.4c0-4-3.2-7.3-7.3-7.3c-4,0-7.3,3.2-7.3,7.3
c0,0.6,0.1,1.2,0.2,1.7c-0.8,0.4-1.4,0.8-1.9,1.1c-0.5,0.3-0.7,1-0.3,1.6c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2
c2.8-1.9,8.5-4.4,15.4-0.4c0.5,0.3,1.2,0.1,1.5-0.4C86.2,54.6,86,54,85.5,53.6z"></path>
<g>
<path fill="#FFFFFF"
d="M75,45.8c0.2,0.2,0.3,0.5,0.1,0.7s-0.4,0.2-0.6,0c-0.2-0.2-0.4-0.4-0.2-0.6S74.8,45.6,75,45.8z"></path>
</g>
<g>
<path fill="#FFFFFF" d="M74.2,47.5c0,0.6-0.5,0.4-1.1,0.4c-0.6,0-1.1,0.2-1.1-0.4c0-0.6,0.5-1.1,1.1-1.1
C73.7,46.5,74.2,46.9,74.2,47.5z"></path>
</g>
<g>
<path fill="#363284" d="M68.4,39.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C68.8,39.2,68.6,39.2,68.4,39.2z"></path>
</g>
</g>
</g>
<g id="sunglasses">
<g>
<g>
<path fill="#F9C441" d="M35.7,30v1.8c0,0.9,0.9,1.3,1.8,1.3h4.2v6.2c0,15.4,12.4,27.9,27.8,27.9l-0.1,0c12.6,0,23.2-8,26.6-19.6
c0.7-2.5,2.7-4.5,5.2-5.1c3.7-0.8,7.2,1.5,8.2,4.9c3.3,11.3,13.2,19.2,25.2,19.8c16.2,0.7,29.1-12.7,29.1-28.9v-5.2h4.1
c0.9,0,1.9-0.4,1.9-1.3V30c0-0.9-1-1.9-1.9-1.9H37.5C36.6,28.1,35.7,29.1,35.7,30z"></path>
</g>
<g>
<defs>
<path id="SVGID_5_" d="M67.9,60.1c-11.7,0-22.2-8.9-22.2-20.8v-6.2h111v5.7c0,12.4-9.5,22.9-21.6,22.9l-0.1,0
c-9.9-0.2-17.8-6.4-20.6-15.8c-1.5-5.3-6.3-9.1-11.8-9.1c-5.5,0-10.3,2.8-11.9,8.2c-2.8,9.5-11.4,15-21.4,15H67.9z"></path>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"></use>
</clipPath>
<g clip-path="url(#SVGID_6_)">
<path fill="#FFFFFF"
d="M157.3,23.1h-9.2l-26.3,57h9.2L157.3,23.1z M145,23.1h-2.7l-26.3,57h2.7L145,23.1z"></path>
</g>
<g clip-path="url(#SVGID_6_)">
<path fill="#FFFFFF"
d="M88.4,23.1h-9.2l-26.3,57h9.2L88.4,23.1z M76.1,23.1h-2.7l-26.3,57h2.7L76.1,23.1z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
h1 {
font-size: 1em;
font-family: "Montserrat";
text-transform: uppercase;
margin-bottom: 20px;
text-align: center;
color: #b6d0e0;
position: relative;
margin-top: -15px;
line-height: 15px;
}
.center {
margin: auto;
}
.wrapper {
width: 700px;
flex-shrink: 0;
background: white;
overflow: hidden;
height: 364px;
border-radius: 8px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.card-wrap {
width: 260px;
float: right;
background: #665aa7;
padding: 50px;
transform: scale(1.5) rotate(20deg);
}
.card {
transform: scale(0.75) rotate(-20deg);
}
svg {
width: 150%;
position: relative;
right: 130px;
top: 10px;
overflow: visible;
}
svg:not(:root) {
overflow: visible;
}
#sunglasses {
transition: transform 0.15s;
}
.checkout:hover ~ .card-wrap #sunglasses {
transform: translateY(-40px);
}
#right_eye_wink {
display: none;
}
.checkout:active ~ .card-wrap #right_eye {
display: none;
}
.checkout:active ~ .card-wrap #right_eye_wink {
display: block;
}
#mouth {
transition: transform 0.15s;
}
.checkout:hover ~ .card-wrap #mouth {
transform: translateY(-10px);
}
#front_hand, #back_hand {
transition: transform 0.03s;
}
.checkout:active ~ .card-wrap #front_hand, .checkout:active ~ .card-wrap #back_hand {
transform: translateX(10px);
}
.checkout {
outline: none;
background: #665aa7;
border: 0;
color: white;
position: relative;
top: 50%;
left: 15%;
transform: translateY(-50%);
padding: 12px 16px;
font-family: "Montserrat",serif;
text-transform: uppercase;
font-size: 1.1em;
letter-spacing: 0.1em;
border-radius: 4px;
transition: all 0.1s ease-out;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.checkout:hover:not(:active) {
background: #857bb9;
}
</style>

2
src/components/VueCompareImage/VueCompareImage.vue
View File

@@ -82,7 +82,7 @@ const horizontal = !vertical.value;
const containerRef = ref();
const rightImageRef = ref<HTMLImageElement | null>(null);
const leftImageRef = ref<HTMLImageElement | null>(null);
const sliderPosition = ref(sliderPositionPercentage.value);
const sliderPosition = ref(sliderPositionPercentage.value);
const containerWidth = ref(0);
const containerHeight = ref(0);
const leftImgLoaded = ref(false);