sh-chart 1.5.2

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

@@ -0,0 +1,291 @@
+<template>
+	<div v-resize="resize" class="sh-screen-header sh-screen-header5" :style="{ width: width, height: height }">
+		<svg width="1920px" height="90px" :style="svgStyle">
+			<radialGradient id="sh_screen_header5_svg_1_" cx="960.2" cy="-6297.3101" r="431.0873" gradientTransform="matrix(1 0 0 -8.416572e-02 0 -445.3614)" 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="960.2" cy="84.7" rx="439.9" ry="5.3" />
+			<g class="st1">
+				<linearGradient id="sh_screen_header5_svg_2_" gradientUnits="userSpaceOnUse" x1="960.2" y1="2965.6001" x2="960.2" y2="2901.5688" gradientTransform="matrix(1 0 0 1 0 -2893)">
+					<stop offset="0" style="stop-color: #1de2ff; stop-opacity: 0.4" />
+					<stop offset="1" :style="`stop-color:${color};stop-opacity:0`" />
+				</linearGradient>
+				<polygon class="st2" :stroke="color" points="1283.8,8.5 636.6,8.5 701.6,72.6 1218.9,72.6" />
+			</g>
+			<g>
+				<g>
+					<polyline class="st3" :stroke="color" points="0.2,52.8 27.4,80.1 805,80.1" />
+					<polyline class="st3" :stroke="color" points="1919.9,53.2 1894.9,78.1 1117.3,78.1" />
+					<animate
+						accumulate="none"
+						additive="replace"
+						attributeName="stroke-dasharray"
+						attributeType="XML"
+						begin="0s"
+						calcMode="spline"
+						dur="10s"
+						fill="remove"
+						from="0, 1000, 0, 10"
+						keySplines="0.1,0.5,0.2,1"
+						keyTimes="0;1"
+						repeatCount="indefinite"
+						restart="always"
+						to="0, 0, 1000, 0"></animate>
+				</g>
+				<g>
+					<polygon :fill="color" points="788.5,85.8 754.5,85.8 747.1,78.3 781,78.3" />
+					<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.9,88 789.3,88 779.6,78.3 806.2,78.3" />
+				</g>
+				<g class="st5">
+					<polygon :fill="color" points="860.7,84.3 828.8,84.3 817.1,72.6 849,72.6" />
+				</g>
+				<g>
+					<polygon :fill="color" points="1054.2,90 866.7,90 855,78.3 1066.6,78.3" />
+				</g>
+				<g class="st6">
+					<polygon :fill="color" points="803.3,72.6 1120.6,72.6 1126.6,78.6 797,78.6" />
+				</g>
+				<g class="st5">
+					<polygon :fill="color" points="1060,84.3 1091.9,84.3 1103.6,72.6 1071.7,72.6" />
+				</g>
+				<g>
+					<polygon :fill="color" points="1134.2,85.8 1168.1,85.8 1175.6,78.3 1141.6,78.3" />
+					<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.8,88 1133.3,88 1143,78.3 1116.5,78.3" />
+				</g>
+			</g>
+			<g>
+				<g>
+					<polygon :fill="color" points="1001.6,9.7 918.7,9.7 916.4,7.4 1004,7.4" />
+				</g>
+			</g>
+			<g>
+				<g>
+					<polyline class="st3" :stroke="color" points="-0.2,9.6 604.2,9.6 635.1,40.5" />
+					<g>
+						<ellipse transform="matrix(0.8507 -0.5257 0.5257 0.8507 73.5829 339.8563)" :fill="color" cx="635" cy="40.4" rx="3.8" ry="3.8" />
+					</g>
+				</g>
+			</g>
+			<g>
+				<linearGradient id="sh_screen_header5_svg_3_" gradientUnits="userSpaceOnUse" x1="732.7" y1="56.3" x2="732.7" y2="87.9" 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="st7" points="764.4,35.7 732.6,35.7 701,4.1 732.9,4.1" />
+			</g>
+			<g class="st1">
+				<linearGradient id="sh_screen_header5_svg_4_" gradientUnits="userSpaceOnUse" x1="692.8" y1="56.3" x2="692.8" y2="87.9" 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="st8" points="724.5,35.7 692.7,35.7 661.1,4.1 692.9,4.1" />
+			</g>
+			<g class="st6">
+				<linearGradient id="sh_screen_header5_svg_5_" gradientUnits="userSpaceOnUse" x1="652.85" y1="56.3" x2="652.85" y2="87.9" 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="684.5,35.7 652.7,35.7 621.2,4.1 653,4.1" />
+			</g>
+			<g>
+				<polygon :fill="color" points="607.7,17.5 591.9,17.5 586.8,12.3 602.5,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.05" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st10">
+				<polygon :fill="color" points="588.9,17.5 573.2,17.5 568,12.3 583.8,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.1" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st1">
+				<polygon :fill="color" points="570.2,17.5 554.5,17.5 549.3,12.3 565,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.2" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st11">
+				<polygon :fill="color" points="551.5,17.5 535.7,17.5 530.6,12.3 546.3,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.4" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st6">
+				<polygon :fill="color" points="532.8,17.5 517,17.5 511.8,12.3 527.6,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.6" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st12">
+				<polygon :fill="color" points="514,17.5 498.3,17.5 493.1,12.3 508.8,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.8" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st12">
+				<polygon :fill="color" points="495.3,17.5 327.7,17.5 322.5,12.3 490.1,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="1.1" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g>
+				<g>
+					<polyline class="st3" :stroke="color" points="1920.2,9.6 1315.8,9.6 1284.9,40.5" />
+					<g>
+						<path :fill="color" d="M1282.4,37.7c-1.5,1.5-1.5,3.8,0,5.3s3.8,1.5,5.3,0s1.5-3.8,0-5.3C1286.2,36.3,1283.8,36.3,1282.4,37.7z" />
+					</g>
+				</g>
+			</g>
+			<g>
+				<linearGradient id="sh_screen_header5_svg_6_" gradientUnits="userSpaceOnUse" x1="85.325" y1="56.3" x2="85.325" y2="87.9" gradientTransform="matrix(-1 0 0 -1 1272.625 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="1155.6,35.7 1187.4,35.7 1219,4.1 1187.1,4.1" />
+			</g>
+			<g class="st1">
+				<linearGradient id="sh_screen_header5_svg_7_" gradientUnits="userSpaceOnUse" x1="45.425" y1="56.3" x2="45.425" y2="87.9" gradientTransform="matrix(-1 0 0 -1 1272.625 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="1195.5,35.7 1227.3,35.7 1258.9,4.1 1227.1,4.1" />
+			</g>
+			<g class="st6">
+				<linearGradient id="sh_screen_header5_svg_8_" gradientUnits="userSpaceOnUse" x1="5.475" y1="56.3" x2="5.475" y2="87.9" gradientTransform="matrix(-1 0 0 -1 1272.625 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="1235.5,35.7 1267.3,35.7 1298.8,4.1 1267,4.1" />
+			</g>
+			<g>
+				<polygon :fill="color" points="1312.3,17.5 1328.1,17.5 1333.2,12.3 1317.5,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.05" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st10">
+				<polygon :fill="color" points="1331.1,17.5 1346.8,17.5 1352,12.3 1336.2,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.1" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st1">
+				<polygon :fill="color" points="1349.8,17.5 1365.5,17.5 1370.7,12.3 1355,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.2" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st11">
+				<polygon :fill="color" points="1368.5,17.5 1384.3,17.5 1389.4,12.3 1373.7,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.4" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st6">
+				<polygon :fill="color" points="1387.2,17.5 1403,17.5 1408.2,12.3 1392.4,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.6" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st12">
+				<polygon :fill="color" points="1406,17.5 1421.7,17.5 1426.9,12.3 1411.2,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="0.8" repeatCount="indefinite" />
+				</polygon>
+			</g>
+			<g class="st12">
+				<polygon :fill="color" points="1424.7,17.5 1592.3,17.5 1597.5,12.3 1429.9,12.3">
+					<animate attributeName="fill" :values="`transparent;${color}`" dur="1.1" begin="1.1" repeatCount="indefinite" />
+				</polygon>
+			</g>
+		</svg>
+		<div class="sh-screen-header-content" :style="svgStyle">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/header'
+export default {
+	name: 'ScreenHeader5',
+	mixins: [mixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-screen-header5 {
+	.st0 {
+		fill: url(#sh_screen_header5_svg_1_);
+	}
+	.st1 {
+		opacity: 0.6;
+	}
+	.st2 {
+		fill: url(#sh_screen_header5_svg_2_);
+		stroke-miterlimit: 10;
+	}
+	.st3 {
+		fill: none;
+		stroke-linecap: round;
+		stroke-miterlimit: 10;
+	}
+	.st5 {
+		opacity: 0.7;
+	}
+	.st6 {
+		opacity: 0.2;
+	}
+	.st7 {
+		fill: url(#sh_screen_header5_svg_3_);
+	}
+	.st8 {
+		fill: url(#sh_screen_header5_svg_4_);
+	}
+	.st9 {
+		fill: url(#sh_screen_header5_svg_5_);
+	}
+	.st10 {
+		opacity: 0.8;
+	}
+	.st11 {
+		opacity: 0.4;
+	}
+	.st12 {
+		opacity: 0.1;
+	}
+	.st13 {
+		fill: url(#sh_screen_header5_svg_6_);
+	}
+	.st14 {
+		fill: url(#sh_screen_header5_svg_7_);
+	}
+	.st15 {
+		fill: url(#sh_screen_header5_svg_8_);
+	}
+	.sh-screen-header-content {
+		position: absolute;
+		width: 100%;
+		top: 6px;
+		text-align: center;
+		font-size: 42px;
+		line-height: 65px;
+		font-weight: 600;
+	}
+}
+</style>

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

@@ -0,0 +1,206 @@
+<template>
+	<div v-resize="resize" class="sh-screen-header sh-screen-header6" :style="{ width: width, height: height }">
+		<svg width="1920px" height="90px" :style="svgStyle">
+			<radialGradient
+				id="sh_screen_header6_svg_1_"
+				cx="-65.2149"
+				cy="-245.8751"
+				r="755.9723"
+				fx="-65.5286"
+				fy="-471.926"
+				gradientTransform="matrix(0.8529 0 0 0.145 56.011 -9.8191)"
+				gradientUnits="userSpaceOnUse">
+				<stop offset="0" :style="`stop-color:${color};stop-opacity:0.9`" />
+				<stop offset="1" :style="`stop-color:${color};stop-opacity:0`" />
+			</radialGradient>
+			<path
+				class="st0"
+				d="M641.6,24.3c0,13.4-248.1,24.3-554.2,24.3c-35.5,0-87.5-0.3-87.5-0.3L0.3,0c0,0,54.2,0,87.1,0
+c242.8,0,554.3,0,554.3,0S641.6,21.6,641.6,24.3z" />
+			<g class="st1">
+				<linearGradient id="sh_screen_header6_svg_2_" gradientUnits="userSpaceOnUse" x1="595.2904" y1="49.9371" x2="595.2904" y2="10.4375" 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="st2" points="593.2,49.9 620.1,49.9 659.5,10.4 632.7,10.4" />
+				<animate
+					accumulate="none"
+					additive="replace"
+					attributeName="opacity"
+					begin="0s"
+					calcMode="linear"
+					dur="3s"
+					fill="remove"
+					repeatCount="indefinite"
+					restart="always"
+					values="0.6;0.4;0.3"></animate>
+			</g>
+			<g class="st3">
+				<linearGradient id="sh_screen_header6_svg_3_" gradientUnits="userSpaceOnUse" x1="618.7816" y1="54.4375" x2="618.7816" y2="10.4375" 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="st4" points="566,54.4 595.8,54.4 639.8,10.4 609.9,10.4 " />
+				<animate
+					accumulate="none"
+					additive="replace"
+					attributeName="opacity"
+					begin="0.2s"
+					calcMode="linear"
+					dur="3s"
+					fill="remove"
+					repeatCount="indefinite"
+					restart="always"
+					values="0.3;0.4;0.6"></animate>
+			</g>
+			<g class="st1">
+				<linearGradient id="sh_screen_header6_svg_4_" gradientUnits="userSpaceOnUse" x1="-53.7348" y1="72.6793" x2="-53.7348" y2="45.5429" 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="st5" points="631.5,73.9 1919.3,73.9 1919.3,43.8 661.6,43.8 " />
+			</g>
+			<g class="st1">
+				<linearGradient id="sh_screen_header6_svg_5_" gradientUnits="userSpaceOnUse" x1="31.6832" y1="41.7663" x2="31.6832" y2="5.5625" 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="st6" points="1159.6,41.8 1184.2,41.8 1220.3,5.6 1195.8,5.6 " />
+				<animate
+					accumulate="none"
+					additive="replace"
+					attributeName="opacity"
+					begin="0.8s"
+					calcMode="linear"
+					dur="3s"
+					fill="remove"
+					repeatCount="indefinite"
+					restart="always"
+					values="0.6;0.2"></animate>
+			</g>
+			<g class="st3">
+				<linearGradient id="sh_screen_header6_svg_6_" gradientUnits="userSpaceOnUse" x1="63.7332" y1="41.7663" x2="63.7332" y2="5.5625" 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="st7" points="1127.6,41.8 1152.1,41.8 1188.3,5.6 1163.7,5.6 " />
+				<animate
+					accumulate="none"
+					additive="replace"
+					attributeName="opacity"
+					begin="0.4s"
+					calcMode="linear"
+					dur="3s"
+					fill="remove"
+					repeatCount="indefinite"
+					restart="always"
+					values="0.8;0.4"></animate>
+			</g>
+			<g>
+				<linearGradient id="sh_screen_header6_svg_7_" gradientUnits="userSpaceOnUse" x1="95.7832" y1="41.7663" x2="95.7832" y2="5.5625" 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="st8" points="1095.5,41.8 1120.1,41.8 1156.2,5.6 1131.7,5.6 " />
+				<animate
+					accumulate="none"
+					additive="replace"
+					attributeName="opacity"
+					begin="0s"
+					calcMode="linear"
+					dur="3s"
+					fill="remove"
+					repeatCount="indefinite"
+					restart="always"
+					values="1;0.6"></animate>
+			</g>
+			<g>
+				<linearGradient id="sh_screen_header6_svg_8_" gradientUnits="userSpaceOnUse" x1="538.7734" y1="23.6644" x2="97.4729" y2="23.6644" 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="st9" points="682.9,41.8 1088,41.8 1124.2,5.6 719,5.6 " />
+			</g>
+			<g class="st10">
+				<g>
+					<line class="st11" :stroke="color" x1="1919.3" y1="75.5" x2="610.8" y2="75.5" />
+					<g>
+						<rect x="607.7" y="72.2" :fill="color" width="6.6" height="6.6" />
+					</g>
+				</g>
+			</g>
+			<g class="st1">
+				<g>
+					<polyline class="st11" :stroke="color" points="1919.5,5.6 1229.5,5.6 1198.3,36.8 " />
+					<g>
+						<rect x="1195.1" y="33.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 325.0493 858.1429)" :fill="color" width="6.6" height="6.6" />
+					</g>
+				</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: 'ScreenHeader6',
+	mixins: [mixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-screen-header6 {
+	.st0 {
+		fill: url(#sh_screen_header6_svg_1_);
+	}
+	.st1 {
+		opacity: 0.2;
+	}
+	.st2 {
+		fill: url(#sh_screen_header6_svg_2_);
+	}
+	.st3 {
+		opacity: 0.6;
+	}
+	.st4 {
+		fill: url(#sh_screen_header6_svg_3_);
+	}
+	.st5 {
+		fill: url(#sh_screen_header6_svg_4_);
+	}
+	.st6 {
+		fill: url(#sh_screen_header6_svg_5_);
+	}
+	.st7 {
+		fill: url(#sh_screen_header6_svg_6_);
+	}
+	.st8 {
+		fill: url(#sh_screen_header6_svg_7_);
+	}
+	.st9 {
+		fill: url(#sh_screen_header6_svg_8_);
+	}
+	.st10 {
+		opacity: 0.8;
+	}
+	.st11 {
+		fill: none;
+		stroke-linecap: round;
+		stroke-miterlimit: 10;
+	}
+	.sh-screen-header-content {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		text-align: left;
+		font-size: 46px;
+		line-height: 90px;
+		font-weight: 600;
+		margin-left: 40px;
+	}
+}
+</style>

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

@@ -0,0 +1,50 @@
+<template>
+	<component :is="headername" :color="color" :width="width" :height="height">
+		<slot>{{ title }}</slot>
+	</component>
+</template>
+
+<script>
+import header1 from './components/header1'
+import header2 from './components/header2'
+import header3 from './components/header3'
+import header4 from './components/header4'
+import header5 from './components/header5'
+import header6 from './components/header6'
+export default {
+	name: 'ShScreenHeader',
+	components: {
+		header1,
+		header2,
+		header3,
+		header4,
+		header5,
+		header6
+	},
+	props: {
+		type: {
+			type: String,
+			default: '1'
+		},
+		title: {
+			type: String
+		},
+		color: {
+			type: String
+		},
+		width: {
+			type: String
+		},
+		height: {
+			type: String
+		}
+	},
+	computed: {
+		headername() {
+			return +this.type > 0 && +this.type < 7 ? `header${this.type}` : 'header1'
+		}
+	}
+}
+</script>
+
+<style lang="scss"></style>

package/packages/components/global-components/sh-screen-header/mixin/header.js

@@ -0,0 +1,62 @@
+export default {
+	props: {
+		// 主色
+		color: {
+			type: String,
+			default: '#1de2ff'
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: 'auto'
+		},
+		scale: {
+			type: [Object, Number],
+			default() {
+				return {
+					widthScale: 1,
+					heightScale: 1
+				}
+			}
+		}
+	},
+	data() {
+		return {
+			svgWidth: 0,
+			svgHeight: 0
+		}
+	},
+	computed: {
+		svgStyle() {
+			return {
+				zoom: this.svgWidth / 1920
+			}
+		},
+		dark() {
+			const color = this.color
+			const colorArray = this.$vUtils.getRgbaValue(color)
+			colorArray[3] = 0.3
+			return `rgba(${colorArray.join(',')})`
+		},
+		light() {
+			const color = this.color
+			const colorArray = this.$vUtils.getRgbaValue(color)
+			colorArray[3] = 0.6
+			return `rgba(${colorArray.join(',')})`
+		}
+	},
+	methods: {
+		resize() {
+			const rect = this.$el?.getBoundingClientRect()
+			if (!rect) return
+			const { widthScale = 1, heightScale = 1 } = typeof this.scale === 'object' ? this.scale : { widthScale: this.scale || 1, heightScale: this.scale || 1 }
+			this.svgWidth = rect.width / widthScale
+			this.svgHeight = rect.height / heightScale
+			this.$emit('resize', [this.svgWidth, this.svgHeight])
+		}
+	},
+	mounted() {}
+}

package/packages/components/global-components/sh-spin/index.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="sh-spin">
+		<svg width="50px" height="50px">
+			<circle cx="25" cy="25" r="20" fill="transparent" stroke-width="3" stroke-dasharray="31.415, 31.415" stroke="#02bcfe" stroke-linecap="round">
+				<animateTransform attributeName="transform" type="rotate" values="0, 25 25;360, 25 25" dur="1.5s" repeatCount="indefinite" />
+				<animate attributeName="stroke" values="#02bcfe;#3be6cb;#02bcfe" dur="3s" repeatCount="indefinite" />
+			</circle>
+
+			<circle cx="25" cy="25" r="10" fill="transparent" stroke-width="3" stroke-dasharray="15.7, 15.7" stroke="#3be6cb" stroke-linecap="round">
+				<animateTransform attributeName="transform" type="rotate" values="360, 25 25;0, 25 25" dur="1.5s" repeatCount="indefinite" />
+				<animate attributeName="stroke" values="#3be6cb;#02bcfe;#3be6cb" dur="3s" repeatCount="indefinite" />
+			</circle>
+		</svg>
+		<div class="sh-spin-tip">
+			<slot>{{ content }}</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShSpin',
+	props: {
+		content: {
+			type: String,
+			default: ''
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-spin {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	.sh-spin-tip {
+		font-size: 15px;
+	}
+}
+</style>

package/packages/components/index.js

@@ -0,0 +1,24 @@
+// 全局公共封装组件
+import ShBorder from './global-components/sh-border'
+import ShChart from './global-components/sh-charts'
+import ShDecoration from './global-components/sh-decoration'
+import ShScreenHeader from './global-components/sh-screen-header'
+import ShSpin from './global-components/sh-spin'
+
+const components = {
+	ShBorder,
+	ShChart,
+	ShDecoration,
+	ShScreenHeader,
+	ShSpin
+}
+
+const index = {
+	install: function (Vue) {
+		Object.keys(components).forEach(key => {
+			Vue.component(key, components[key])
+		})
+	}
+}
+
+export default index