sh-chart 1.5.2

package/packages/components/global-components/sh-screen-header/components/header3.vue

@@ -0,0 +1,452 @@
+<template>
+	<div v-resize="resize" class="sh-screen-header sh-screen-header3" :style="{ width: width, height: height }">
+		<svg width="1920px" height="90px" :style="svgStyle">
+			<radialGradient id="sh_screen_header3_svg_1_" cx="959.8125" cy="1013.375" r="431.0692" gradientTransform="matrix(1 0 0 8.416572e-02 0 -0.9164)" gradientUnits="userSpaceOnUse">
+				<stop offset="0" :style="`stop-color:${color};stop-opacity:0.9`" />
+				<stop offset="1" :style="`stop-color:${color};stop-opacity:0`" />
+			</radialGradient>
+			<ellipse class="st0" cx="959.8" cy="84.4" rx="439.9" ry="5.3" />
+			<g class="st1">
+				<linearGradient id="sh_screen_header3_svg_2_" gradientUnits="userSpaceOnUse" x1="955.0497" y1="-1813.2813" x2="955.0497" y2="-1902.7188" gradientTransform="matrix(1 0 0 -1 0 -1813)">
+					<stop offset="0" :style="`stop-color:${color};stop-opacity:0.3`" />
+					<stop offset="1" :style="`stop-color:${color};stop-opacity:0`" />
+				</linearGradient>
+				<polygon class="st2" points="1574.3,0.3 335.8,0.3 426.6,89.7 1483.5,89.7" />
+				<animate attributeType="CSS" attributeName="opacity" from="1" to="0.8" dur="2s" repeatCount="indefinite" />
+			</g>
+			<g>
+				<g>
+					<polyline class="st3" :stroke="color" points="525,89.7 532.3,82.2 804.6,82.2" />
+					<polyline class="st3" :stroke="color" points="1394.4,89.4 1389.1,84.2 1116.9,84.2" />
+					<animate
+						attributeName="stroke-dasharray"
+						attributeType="XML"
+						from="0, 157.52079728939617, 0, 157.52079728939617"
+						to="0, 0, 315.04159457879234, 0"
+						dur="1.2s"
+						begin="0s"
+						calcMode="spline"
+						keyTimes="0;1"
+						keySplines="0.4,1,0.49,0.98"
+						repeatCount="indefinite"></animate>
+				</g>
+				<g>
+					<polygon :fill="color" points="788.1,76.5 754.1,76.5 746.6,84 780.6,84" />
+				</g>
+				<g>
+					<polygon :fill="color" points="815.5,74.3 788.9,74.3 779.2,84 805.8,84" />
+				</g>
+				<g class="st5">
+					<polygon :fill="color" points="860.3,78 828.4,78 816.7,89.7 848.6,89.7" />
+				</g>
+				<g>
+					<polygon :fill="color" points="1053.8,72.3 866.3,72.3 854.6,84 1066.2,84" />
+				</g>
+				<g class="st6">
+					<polygon :fill="color" points="802.9,89.7 1120.2,89.7 1126.2,83.7 796.5,83.7" />
+				</g>
+				<g class="st5">
+					<polygon :fill="color" points="1059.6,78 1091.5,78 1103.2,89.7 1071.3,89.7" />
+				</g>
+				<g>
+					<polygon :fill="color" points="1133.7,76.5 1167.7,76.5 1175.2,84 1141.2,84" />
+				</g>
+				<g>
+					<polygon :fill="color" points="1106.4,74.3 1132.9,74.3 1142.6,84 1116.1,84" />
+				</g>
+			</g>
+			<g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_3_" gradientUnits="userSpaceOnUse" x1="459.899" y1="51.4684" x2="459.899" y2="11.9688">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st7" points="592.3,51.5 366.9,51.5 327.5,12 552.9,12" />
+					<animate attributeType="CSS" attributeName="opacity" from="0.2" to="0.1" dur="3s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<g>
+						<polyline class="st3" :stroke="color" points="301.7,33.8 567.5,33.8 598.7,65" />
+						<g>
+							<rect x="595.3" y="61.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 129.4274 442.2929)" :fill="color" width="6.6" height="6.6" />
+						</g>
+					</g>
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_4_" gradientUnits="userSpaceOnUse" x1="595.392" y1="51.4684" x2="595.392" y2="11.9688">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st8" points="628.5,51.5 601.7,51.5 562.3,12 589.1,12" />
+				</g>
+				<g class="st1">
+					<linearGradient id="sh_screen_header3_svg_5_" gradientUnits="userSpaceOnUse" x1="618.8832" y1="55.9688" x2="618.8832" y2="11.9688">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st9" points="655.8,56 625.9,56 582,12 611.9,12" />
+				</g>
+				<g>
+					<linearGradient id="sh_screen_header3_svg_6_" gradientUnits="userSpaceOnUse" x1="650.9935" y1="74.6932" x2="650.9935" y2="11.9688">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st10" points="703.6,74.7 661,74.7 598.4,12 641,12" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_7_" gradientUnits="userSpaceOnUse" x1="295.2105" y1="74.2105" x2="295.2105" y2="47.0741">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0.9`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0`" />
+					</linearGradient>
+					<polygon class="st11" points="590.2,75.4 0.2,75.4 0.2,45.3 560.2,45.3" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_8_" gradientUnits="userSpaceOnUse" x1="31.7848" y1="43.2976" x2="31.7848" y2="7.0938">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st12" points="62.1,43.3 37.6,43.3 1.4,7.1 26,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_9_" gradientUnits="userSpaceOnUse" x1="63.8348" y1="43.2976" x2="63.8348" y2="7.0938">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st13" points="94.2,43.3 69.6,43.3 33.5,7.1 58,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_10_" gradientUnits="userSpaceOnUse" x1="95.8848" y1="43.2976" x2="95.8848" y2="7.0938">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st14" points="126.2,43.3 101.7,43.3 65.5,7.1 90.1,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_11_" gradientUnits="userSpaceOnUse" x1="127.9348" y1="43.2976" x2="127.9348" y2="7.0938">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st15" points="158.3,43.3 133.7,43.3 97.6,7.1 122.1,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_12_" gradientUnits="userSpaceOnUse" x1="159.9848" y1="43.2976" x2="159.9848" y2="7.0938">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st16" points="190.3,43.3 165.8,43.3 129.6,7.1 154.2,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_13_" gradientUnits="userSpaceOnUse" x1="192.0348" y1="43.2976" x2="192.0348" y2="7.0938">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st17" points="222.4,43.3 197.8,43.3 161.7,7.1 186.3,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="299.4" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="1;0.8;1" dur="1s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="290.4" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.8;0.6;0.8" dur="1.1s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="281.1" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.6;0.4;0.6" dur="1.2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="272.1" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.4;0.2;0.4" dur="1.3s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="262.7" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.2;0.1;0.2" dur="1.4s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="253.7" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.1;0.05;0.1" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+			</g>
+			<g>
+				<g class="st6">
+					<linearGradient
+						id="sh_screen_header3_svg_14_"
+						gradientUnits="userSpaceOnUse"
+						x1="-238.4447"
+						y1="51.4684"
+						x2="-238.4447"
+						y2="11.9688"
+						gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st18" points="1327.7,51.5 1553.1,51.5 1592.5,12 1367.1,12" />
+					<animate attributeType="CSS" attributeName="opacity" from="0.2" to="0.1" dur="3s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<g>
+						<polyline class="st3" :stroke="color" points="1618.3,33.8 1352.5,33.8 1321.3,65" />
+						<g>
+							<rect x="1318.1" y="61.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 341.1203 953.3752)" :fill="color" width="6.6" height="6.6" />
+						</g>
+					</g>
+				</g>
+				<g class="st6">
+					<linearGradient
+						id="sh_screen_header3_svg_15_"
+						gradientUnits="userSpaceOnUse"
+						x1="-102.9518"
+						y1="51.4684"
+						x2="-102.9518"
+						y2="11.9688"
+						gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st19" points="1291.5,51.5 1318.3,51.5 1357.7,12 1330.9,12" />
+				</g>
+				<g class="st1">
+					<linearGradient
+						id="sh_screen_header3_svg_16_"
+						gradientUnits="userSpaceOnUse"
+						x1="-79.4606"
+						y1="55.9688"
+						x2="-79.4606"
+						y2="11.9688"
+						gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st20" points="1264.2,56 1294.1,56 1338,12 1308.1,12" />
+				</g>
+				<g>
+					<linearGradient
+						id="sh_screen_header3_svg_17_"
+						gradientUnits="userSpaceOnUse"
+						x1="-47.3503"
+						y1="74.6932"
+						x2="-47.3503"
+						y2="11.9688"
+						gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st21" points="1216.4,74.7 1259,74.7 1321.6,12 1279,12" />
+				</g>
+				<g class="st6">
+					<linearGradient
+						id="sh_screen_header3_svg_18_"
+						gradientUnits="userSpaceOnUse"
+						x1="-403.1333"
+						y1="74.2105"
+						x2="-403.1333"
+						y2="47.0741"
+						gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0.9`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0`" />
+					</linearGradient>
+					<polygon class="st22" points="1329.8,75.4 1919.8,75.4 1919.8,45.3 1359.8,45.3" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_19_" gradientUnits="userSpaceOnUse" x1="-666.559" y1="43.2976" x2="-666.559" y2="7.0938" gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st23" points="1857.9,43.3 1882.4,43.3 1918.6,7.1 1894,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_20_" gradientUnits="userSpaceOnUse" x1="-634.509" y1="43.2976" x2="-634.509" y2="7.0938" gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st24" points="1825.8,43.3 1850.4,43.3 1886.5,7.1 1861.9,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_21_" gradientUnits="userSpaceOnUse" x1="-602.459" y1="43.2976" x2="-602.459" y2="7.0938" gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st25" points="1793.8,43.3 1818.3,43.3 1854.5,7.1 1829.9,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_22_" gradientUnits="userSpaceOnUse" x1="-570.409" y1="43.2976" x2="-570.409" y2="7.0938" gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st26" points="1761.7,43.3 1786.3,43.3 1822.4,7.1 1797.8,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient
+						id="sh_screen_header3_svg_23_"
+						gradientUnits="userSpaceOnUse"
+						x1="-538.3589"
+						y1="43.2976"
+						x2="-538.3589"
+						y2="7.0938"
+						gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st27" points="1729.7,43.3 1754.2,43.3 1790.4,7.1 1765.8,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g class="st6">
+					<linearGradient id="sh_screen_header3_svg_24_" gradientUnits="userSpaceOnUse" x1="-506.309" y1="43.2976" x2="-506.309" y2="7.0938" gradientTransform="matrix(-1 0 0 1 1221.6563 0)">
+						<stop offset="0" :style="`stop-color:${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st28" points="1697.6,43.3 1722.2,43.3 1758.3,7.1 1733.8,7.1" />
+					<animate attributeName="opacity" values="0.3;0.2;0.3" dur="2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="1620.6" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="1;0.8;1" dur="1s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="1629.6" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.8;0.6;0.8" dur="1.1s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="1638.9" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.6;0.4;0.6" dur="1.2s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="1647.9" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.4;0.2;0.4" dur="1.3s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="1657.3" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.2;0.1;0.2" dur="1.4s" begin="0s" repeatCount="indefinite" />
+				</g>
+				<g>
+					<circle :fill="color" cx="1666.3" cy="33.8" r="3.1" />
+					<animate attributeName="opacity" values="0.1;0.05;0.1" dur="1.5s" begin="0s" repeatCount="indefinite" />
+				</g>
+			</g>
+		</svg>
+		<div class="sh-screen-header-content" :style="svgStyle">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/header'
+export default {
+	name: 'ScreenHeader3',
+	mixins: [mixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-screen-header3 {
+	.st0 {
+		fill: url(#sh_screen_header3_svg_1_);
+	}
+	.st1 {
+		opacity: 0.6;
+	}
+	.st2 {
+		fill: url(#sh_screen_header3_svg_2_);
+	}
+	.st3 {
+		fill: none;
+		stroke-linecap: round;
+		stroke-miterlimit: 10;
+	}
+	.st4 {
+		fill: #1de2ff;
+	}
+	.st5 {
+		opacity: 0.7;
+	}
+	.st6 {
+		opacity: 0.2;
+	}
+	.st7 {
+		fill: url(#sh_screen_header3_svg_3_);
+	}
+	.st8 {
+		fill: url(#sh_screen_header3_svg_4_);
+	}
+	.st9 {
+		fill: url(#sh_screen_header3_svg_5_);
+	}
+	.st10 {
+		fill: url(#sh_screen_header3_svg_6_);
+	}
+	.st11 {
+		fill: url(#sh_screen_header3_svg_7_);
+	}
+	.st12 {
+		fill: url(#sh_screen_header3_svg_8_);
+	}
+	.st13 {
+		fill: url(#sh_screen_header3_svg_9_);
+	}
+	.st14 {
+		fill: url(#sh_screen_header3_svg_10_);
+	}
+	.st15 {
+		fill: url(#sh_screen_header3_svg_11_);
+	}
+	.st16 {
+		fill: url(#sh_screen_header3_svg_12_);
+	}
+	.st17 {
+		fill: url(#sh_screen_header3_svg_13_);
+	}
+	.st18 {
+		fill: url(#sh_screen_header3_svg_14_);
+	}
+	.st19 {
+		fill: url(#sh_screen_header3_svg_15_);
+	}
+	.st20 {
+		fill: url(#sh_screen_header3_svg_16_);
+	}
+	.st21 {
+		fill: url(#sh_screen_header3_svg_17_);
+	}
+	.st22 {
+		fill: url(#sh_screen_header3_svg_18_);
+	}
+	.st23 {
+		fill: url(#sh_screen_header3_svg_19_);
+	}
+	.st24 {
+		fill: url(#sh_screen_header3_svg_20_);
+	}
+	.st25 {
+		fill: url(#sh_screen_header3_svg_21_);
+	}
+	.st26 {
+		fill: url(#sh_screen_header3_svg_22_);
+	}
+	.st27 {
+		fill: url(#sh_screen_header3_svg_23_);
+	}
+	.st28 {
+		fill: url(#sh_screen_header3_svg_24_);
+	}
+	.sh-screen-header-content {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		text-align: center;
+		font-size: 42px;
+		line-height: 65px;
+		font-weight: 600;
+	}
+}
+</style>