sh-chart 1.5.2

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

@@ -0,0 +1,544 @@
+<template>
+	<div v-resize="resize" class="sh-screen-header sh-screen-header4" :style="{ width: width, height: height }">
+		<svg width="1920px" height="90px" :style="svgStyle">
+			<g>
+				<g class="st0">
+					<linearGradient id="sh_screen_header4_svg_1_" gradientUnits="userSpaceOnUse" x1="464.9688" y1="52.2105" x2="464.9688" y2="20.0235">
+						<stop offset="0" :style="`stop-color${color};stop-opacity:0`" />
+						<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+					</linearGradient>
+					<polygon class="st1" points="593.9,51.9 367.9,52.2 336.1,20.3 562,20" />
+				</g>
+				<g class="st0">
+					<linearGradient
+						id="sh_screen_header4_svg_2_"
+						gradientUnits="userSpaceOnUse"
+						x1="-779.1147"
+						y1="52.2105"
+						x2="-779.1147"
+						y2="20.0234"
+						gradientTransform="matrix(-1 0 0 1 675.9166 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="st2" points="1326.1,51.9 1552.1,52.2 1583.9,20.3 1358,20" />
+				</g>
+			</g>
+			<g class="st3">
+				<linearGradient id="sh_screen_header4_svg_3_" gradientUnits="userSpaceOnUse" x1="959.95" y1="2973" x2="959.95" y2="2893" gradientTransform="matrix(1 0 0 1 0 -2893)">
+					<stop offset="0" :style="`stop-color:${color};stop-opacity:0.3`" />
+					<stop offset="1" :style="`stop-color${color};stop-opacity:0`" />
+				</linearGradient>
+				<path class="st4" d="M1365.2,0H554.7l49.8,49.1C624.6,68.9,651.7,80,679.9,80H1240c28.2,0,55.3-11.1,75.4-30.9L1365.2,0z" />
+			</g>
+			<g>
+				<g>
+					<polyline class="st5" :stroke="color" points="525.2,16.8 532.5,9.3 804.7,9.3" />
+					<polyline class="st5" :stroke="color" points="1394.6,16.6 1389.3,11.3 1117.1,11.3" />
+
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="stroke-dasharray"
+						attributeType="XML"
+						begin="0s"
+						calcMode="spline"
+						dur="1.2s"
+						fill="remove"
+						from="0, 150, 0, 150"
+						keySplines="0.4,1,0.49,0.98"
+						keyTimes="0;1"
+						repeatCount="indefinite"
+						restart="always"
+						to="0, 0, 2000, 0"></animate>
+				</g>
+				<g>
+					<polygon :fill="color" points="788.2,3.6 754.3,3.6 746.8,11.1 780.8,11.1" />
+
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="opacity"
+						begin="0s"
+						calcMode="linear"
+						dur="1.5s"
+						fill="remove"
+						repeatCount="indefinite"
+						restart="always"
+						values="0.8;0.6;0.2"></animate>
+				</g>
+				<g>
+					<polygon :fill="color" points="815.6,1.4 789.1,1.4 779.4,11.1 805.9,11.1" />
+
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="opacity"
+						begin="0s"
+						calcMode="linear"
+						dur="1.5s"
+						fill="remove"
+						repeatCount="indefinite"
+						restart="always"
+						values="1;0.8;0.4"></animate>
+				</g>
+				<g class="st7">
+					<polygon :fill="color" points="860.4,5.2 828.5,5.2 816.9,16.8 848.8,16.8">
+						<animate
+							accumulate="none"
+							additive="replace"
+							attributeName="fill"
+							begin="0s"
+							calcMode="linear"
+							dur="0.5s"
+							fill="remove"
+							repeatCount="indefinite"
+							restart="always"
+							:values="`${dark};${color};${dark}`"></animate>
+					</polygon>
+				</g>
+				<g>
+					<polygon :fill="color" points="1053.9,-0.5 866.4,-0.5 854.8,11.1 1066.3,11.1">
+						<animate
+							accumulate="none"
+							additive="replace"
+							attributeName="fill"
+							begin="0s"
+							calcMode="linear"
+							dur="0.5s"
+							fill="remove"
+							repeatCount="indefinite"
+							restart="always"
+							:values="`${color};${dark};${color}`"></animate>
+					</polygon>
+				</g>
+				<g class="st0">
+					<polygon :fill="color" points="803.1,16.8 1120.3,16.8 1126.3,10.8 796.7,10.8" />
+				</g>
+				<g class="st7">
+					<polygon :fill="color" points="1059.8,5.2 1091.7,5.2 1103.3,16.8 1071.4,16.8">
+						<animate
+							accumulate="none"
+							additive="replace"
+							attributeName="fill"
+							begin="0s"
+							calcMode="linear"
+							dur="0.5s"
+							fill="remove"
+							repeatCount="indefinite"
+							restart="always"
+							:values="`${dark};${color};${dark}`"></animate>
+					</polygon>
+				</g>
+				<g>
+					<polygon :fill="color" points="1133.9,3.6 1167.9,3.6 1175.3,11.1 1141.4,11.1" />
+
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="opacity"
+						begin="0s"
+						calcMode="linear"
+						dur="1.5s"
+						fill="remove"
+						repeatCount="indefinite"
+						restart="always"
+						values="0.8;0.6;0.2"></animate>
+				</g>
+				<g>
+					<polygon :fill="color" points="1106.5,1.4 1133,1.4 1142.7,11.1 1116.2,11.1" />
+
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="opacity"
+						begin="0s"
+						calcMode="linear"
+						dur="1.5s"
+						fill="remove"
+						repeatCount="indefinite"
+						restart="always"
+						values="1;0.8;0.4"></animate>
+				</g>
+			</g>
+			<g>
+				<g>
+					<polyline class="st5" :stroke="color" points="29.9,3.6 295.7,3.6 326.9,34.9" />
+
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="opacity"
+						begin="0s"
+						calcMode="linear"
+						dur="1.5s"
+						fill="remove"
+						repeatCount="indefinite"
+						restart="always"
+						values="1;0.9;0.7"></animate>
+					<g>
+						<rect x="323.5" y="31.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 71.1191 241.2776)" :fill="color" width="6.6" height="6.6" />
+
+						<animateTransform
+							accumulate="none"
+							additive="replace"
+							attributeName="transform"
+							calcMode="linear"
+							dur="3s"
+							fill="remove"
+							repeatCount="indefinite"
+							restart="always"
+							type="rotate"
+							values="0, 327 35;360, 327 35"></animateTransform>
+
+						<animate
+							accumulate="none"
+							additive="replace"
+							attributeName="opacity"
+							begin="0s"
+							calcMode="linear"
+							dur="1.5s"
+							fill="remove"
+							repeatCount="indefinite"
+							restart="always"
+							values="1;0.8;0.2"></animate>
+					</g>
+				</g>
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_4_" gradientUnits="userSpaceOnUse" x1="294.15" y1="35.7184" x2="294.15" y2="62.8549" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<stop offset="0" :style="`stop-color:${color};stop-opacity:0.9`" />
+					<stop offset="1" :style="`stop-color${color};stop-opacity:0`" />
+				</linearGradient>
+				<polygon class="st8" points="588,57.5 0.3,57.5 0.3,27.4 557.9,27.4" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_5_" gradientUnits="userSpaceOnUse" x1="31.95" y1="48.4602" x2="31.95" y2="84.6602" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="62.3,43.5 37.7,43.5 1.6,7.3 26.2,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_6_" gradientUnits="userSpaceOnUse" x1="64" y1="48.4602" x2="64" y2="84.6602" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="94.4,43.5 69.8,43.5 33.6,7.3 58.2,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_7_" gradientUnits="userSpaceOnUse" x1="96.05" y1="48.4602" x2="96.05" y2="84.6602" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<stop offset="0" :style="`stop-color${color};stop-opacity:0`" />
+					<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+				</linearGradient>
+				<polygon class="st11" points="126.4,43.5 101.8,43.5 65.7,7.3 90.3,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_8_" gradientUnits="userSpaceOnUse" x1="128.1" y1="48.4602" x2="128.1" y2="84.6602" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="158.5,43.5 133.9,43.5 97.7,7.3 122.3,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_9_" gradientUnits="userSpaceOnUse" x1="160.15" y1="48.4602" x2="160.15" y2="84.6602" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="190.5,43.5 165.9,43.5 129.8,7.3 154.4,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_10_" gradientUnits="userSpaceOnUse" x1="192.2" y1="48.4602" x2="192.2" y2="84.6602" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="222.6,43.5 198,43.5 161.8,7.3 186.4,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_11_" gradientUnits="userSpaceOnUse" x1="226.45" y1="45.2" x2="226.45" y2="84.7" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="259.6,46.8 232.8,46.8 193.3,7.3 220.1,7.3" />
+			</g>
+			<g class="st3">
+				<linearGradient id="sh_screen_header4_svg_12_" gradientUnits="userSpaceOnUse" x1="249.9" y1="40.7" x2="249.9" y2="84.7" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="286.8,51.3 257,51.3 213,7.3 242.9,7.3" />
+			</g>
+			<g>
+				<linearGradient id="sh_screen_header4_svg_13_" gradientUnits="userSpaceOnUse" x1="282.1" y1="21.9" x2="282.1" y2="84.6244" gradientTransform="matrix(1 0 0 -1 0 92)">
+					<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="334.7,70.1 292.1,70.1 229.5,7.3 272,7.3" />
+			</g>
+			<g>
+				<g>
+					<polyline class="st5" :stroke="color" points="1890.4,3.6 1624.7,3.6 1593.4,34.9" />
+
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="opacity"
+						begin="0s"
+						calcMode="linear"
+						dur="1.5s"
+						fill="remove"
+						repeatCount="indefinite"
+						restart="always"
+						values="1;0.9;0.7"></animate>
+					<g>
+						<rect x="1590.2" y="31.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 442.1089 1136.9716)" :fill="color" width="6.6" height="6.6" />
+
+						<animateTransform
+							accumulate="none"
+							additive="replace"
+							attributeName="transform"
+							calcMode="linear"
+							dur="3s"
+							fill="remove"
+							repeatCount="indefinite"
+							restart="always"
+							type="rotate"
+							values="0, 1594.2 35;360, 1594.2 35"></animateTransform>
+
+						<animate
+							accumulate="none"
+							additive="replace"
+							attributeName="opacity"
+							begin="0s"
+							calcMode="linear"
+							dur="1.5s"
+							fill="remove"
+							repeatCount="indefinite"
+							restart="always"
+							values="1;0.8;0.2"></animate>
+					</g>
+				</g>
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_14_" gradientUnits="userSpaceOnUse" x1="-950.2334" y1="35.7184" x2="-950.2334" y2="62.8549" gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<stop offset="0" :style="`stop-color:${color};stop-opacity:0.9`" />
+					<stop offset="1" :style="`stop-color${color};stop-opacity:0`" />
+				</linearGradient>
+				<polygon class="st18" points="1332.3,57.5 1920,57.5 1920,27.4 1362.4,27.4" />
+			</g>
+			<g class="st0">
+				<linearGradient
+					id="sh_screen_header4_svg_15_"
+					gradientUnits="userSpaceOnUse"
+					x1="-1212.4333"
+					y1="48.4602"
+					x2="-1212.4333"
+					y2="84.6602"
+					gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1858,43.5 1882.6,43.5 1918.7,7.3 1894.2,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient
+					id="sh_screen_header4_svg_16_"
+					gradientUnits="userSpaceOnUse"
+					x1="-1180.4333"
+					y1="48.4602"
+					x2="-1180.4333"
+					y2="84.6602"
+					gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1826,43.5 1850.5,43.5 1886.7,7.3 1862.1,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient
+					id="sh_screen_header4_svg_17_"
+					gradientUnits="userSpaceOnUse"
+					x1="-1148.3334"
+					y1="48.4602"
+					x2="-1148.3334"
+					y2="84.6602"
+					gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1793.9,43.5 1818.5,43.5 1854.6,7.3 1830.1,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient
+					id="sh_screen_header4_svg_18_"
+					gradientUnits="userSpaceOnUse"
+					x1="-1116.3334"
+					y1="48.4602"
+					x2="-1116.3334"
+					y2="84.6602"
+					gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<stop offset="0" :style="`stop-color${color};stop-opacity:0`" />
+					<stop offset="1" :style="`stop-color:${color};stop-opacity:0.9`" />
+				</linearGradient>
+				<polygon class="st22" points="1761.9,43.5 1786.4,43.5 1822.6,7.3 1798,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient
+					id="sh_screen_header4_svg_19_"
+					gradientUnits="userSpaceOnUse"
+					x1="-1084.2334"
+					y1="48.4602"
+					x2="-1084.2334"
+					y2="84.6602"
+					gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1729.8,43.5 1754.4,43.5 1790.5,7.3 1766,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient
+					id="sh_screen_header4_svg_20_"
+					gradientUnits="userSpaceOnUse"
+					x1="-1052.2334"
+					y1="48.4602"
+					x2="-1052.2334"
+					y2="84.6602"
+					gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1697.8,43.5 1722.3,43.5 1758.5,7.3 1733.9,7.3" />
+			</g>
+			<g class="st0">
+				<linearGradient id="sh_screen_header4_svg_21_" gradientUnits="userSpaceOnUse" x1="-1017.9333" y1="45.2" x2="-1017.9333" y2="84.7" gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1660.7,46.8 1687.5,46.8 1727,7.3 1700.2,7.3" />
+			</g>
+			<g class="st3">
+				<linearGradient id="sh_screen_header4_svg_22_" gradientUnits="userSpaceOnUse" x1="-994.4834" y1="40.7" x2="-994.4834" y2="84.7" gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1633.5,51.3 1663.3,51.3 1707.3,7.3 1677.4,7.3" />
+			</g>
+			<g>
+				<linearGradient id="sh_screen_header4_svg_23_" gradientUnits="userSpaceOnUse" x1="-962.3834" y1="21.9" x2="-962.3834" y2="84.6244" gradientTransform="matrix(-1 0 0 -1 675.9166 92)">
+					<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="1585.7,70.1 1628.2,70.1 1690.9,7.3 1648.3,7.3" />
+			</g>
+		</svg>
+		<div class="sh-screen-header-content" :style="svgStyle">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/header'
+export default {
+	name: 'ScreenHeader4',
+	mixins: [mixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-screen-header4 {
+	.st0 {
+		opacity: 0.2;
+	}
+	.st1 {
+		fill: url(#sh_screen_header4_svg_1_);
+	}
+	.st2 {
+		fill: url(#sh_screen_header4_svg_2_);
+	}
+	.st3 {
+		opacity: 0.6;
+	}
+	.st4 {
+		fill: url(#sh_screen_header4_svg_3_);
+	}
+	.st5 {
+		fill: none;
+		stroke-linecap: round;
+		stroke-miterlimit: 10;
+	}
+	.st7 {
+		opacity: 0.7;
+	}
+	.st8 {
+		fill: url(#sh_screen_header4_svg_4_);
+	}
+	.st9 {
+		fill: url(#sh_screen_header4_svg_5_);
+	}
+	.st10 {
+		fill: url(#sh_screen_header4_svg_6_);
+	}
+	.st11 {
+		fill: url(#sh_screen_header4_svg_7_);
+	}
+	.st12 {
+		fill: url(#sh_screen_header4_svg_8_);
+	}
+	.st13 {
+		fill: url(#sh_screen_header4_svg_9_);
+	}
+	.st14 {
+		fill: url(#sh_screen_header4_svg_10_);
+	}
+	.st15 {
+		fill: url(#sh_screen_header4_svg_11_);
+	}
+	.st16 {
+		fill: url(#sh_screen_header4_svg_12_);
+	}
+	.st17 {
+		fill: url(#sh_screen_header4_svg_13_);
+	}
+	.st18 {
+		fill: url(#sh_screen_header4_svg_14_);
+	}
+	.st19 {
+		fill: url(#sh_screen_header4_svg_15_);
+	}
+	.st20 {
+		fill: url(#sh_screen_header4_svg_16_);
+	}
+	.st21 {
+		fill: url(#sh_screen_header4_svg_17_);
+	}
+	.st22 {
+		fill: url(#sh_screen_header4_svg_18_);
+	}
+	.st23 {
+		fill: url(#sh_screen_header4_svg_19_);
+	}
+	.st24 {
+		fill: url(#sh_screen_header4_svg_20_);
+	}
+	.st25 {
+		fill: url(#sh_screen_header4_svg_21_);
+	}
+	.st26 {
+		fill: url(#sh_screen_header4_svg_22_);
+	}
+	.st27 {
+		fill: url(#sh_screen_header4_svg_23_);
+	}
+	.sh-screen-header-content {
+		position: absolute;
+		width: 100%;
+		top: 14px;
+		text-align: center;
+		font-size: 42px;
+		line-height: 65px;
+		font-weight: 600;
+	}
+}
+</style>