sh-chart 1.5.2

package/packages/components/global-components/sh-border/components/border9.vue

@@ -0,0 +1,92 @@
+<template>
+	<div :ref="ref" class="sh-border-box-9">
+		<svg class="border-svg-container" :width="width" :height="height">
+			<defs>
+				<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+					<animate attributeName="x1" values="0%;100%;0%" dur="10s" begin="0s" repeatCount="indefinite" />
+
+					<animate attributeName="x2" values="100%;0%;100%" dur="10s" begin="0s" repeatCount="indefinite" />
+
+					<stop offset="0%" :stop-color="mergedColor[0]">
+						<animate attributeName="stop-color" :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`" dur="10s" begin="0s" repeatCount="indefinite" />
+					</stop>
+					<stop offset="100%" :stop-color="mergedColor[1]">
+						<animate attributeName="stop-color" :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`" dur="10s" begin="0s" repeatCount="indefinite" />
+					</stop>
+				</linearGradient>
+
+				<mask :id="maskId">
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`" />
+					<polyline fill="#fff" :points="`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3 ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}`" />
+
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`" />
+					<polyline fill="#fff" :points="`${width * 0.52}, 3 ${width * 0.58}, 3 ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9`" />
+					<polyline fill="#fff" :points="`${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1} ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9`" />
+
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`" />
+					<polyline fill="#fff" :points="`8, ${height * 0.55} 8, ${height * 0.7} 2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}`" />
+
+					<polyline stroke="#fff" stroke-width="3" fill="transparent" :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`" />
+					<polyline
+						fill="#fff"
+						:points="`${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8} ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${
+							width * 0.92 + 7
+						}, ${height - 9}`" />
+				</mask>
+			</defs>
+
+			<polygon
+				:fill="backgroundColor"
+				:points="`
+        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
+        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
+        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
+        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+      `" />
+
+			<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
+		</svg>
+
+		<div class="border-box-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/border'
+export default {
+	name: 'ShBorder9',
+	mixins: [mixin],
+	computed: {
+		gradientId() {
+			return `border-box-9-gradient-${this.borderId}`
+		},
+		maskId() {
+			return `border-box-9-mask-${this.borderId}`
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-border-box-9 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.border-svg-container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+	.border-box-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+	<component :is="borderName" class="sh-border-box" v-bind="$props">
+		<slot></slot>
+	</component>
+</template>
+
+<script>
+import border1 from './components/border1'
+import border2 from './components/border2'
+import border3 from './components/border3'
+import border4 from './components/border4'
+import border5 from './components/border5'
+import border6 from './components/border6'
+import border7 from './components/border7'
+import border8 from './components/border8'
+import border9 from './components/border9'
+import border10 from './components/border10'
+import border11 from './components/border11'
+import border12 from './components/border12'
+import border13 from './components/border13'
+export default {
+	name: 'ShBorder',
+	components: {
+		border1,
+		border2,
+		border3,
+		border4,
+		border5,
+		border6,
+		border7,
+		border8,
+		border9,
+		border10,
+		border11,
+		border12,
+		border13
+	},
+	props: {
+		type: {
+			type: [String, Number],
+			default: '1'
+		},
+		color: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		backgroundColor: {
+			type: String,
+			default: 'transparent'
+		},
+		dur: {
+			type: Number,
+			default: 3
+		},
+		reverse: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		borderType() {
+			return +this.type > 0 && +this.type < 14 ? this.type : 1
+		},
+		borderName() {
+			return `border${this.borderType}`
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/global-components/sh-border/mixin/border.js

@@ -0,0 +1,62 @@
+import autoResize from '../../mixin/autoResize'
+export default {
+	mixins: [autoResize],
+	props: {
+		type: {
+			type: [String, Number],
+			default: '1'
+		},
+		color: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		backgroundColor: {
+			type: String,
+			default: 'transparent'
+		},
+		dur: {
+			type: Number,
+			default: 3
+		},
+		reverse: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
+			defaultColors: [
+				['#4fd2dd', '#235fa7'],
+				['#fff', 'rgba(255, 255, 255, 0.6)'],
+				['#2862b7', '#2862b7'],
+				['red', 'rgba(0,0,255,0.8)'],
+				['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
+				['rgba(255, 255, 255, 0.35)', 'gray'],
+				['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
+				['#235fa7', '#4fd2dd'],
+				['#11eefd', '#0078d2'],
+				['#1d48c4', '#d3e1f8'],
+				['#8aaafb', '#1f33a2'],
+				['#2e6099', '#7ce7fd'],
+				['#6586ec', '#2cf7fe']
+			]
+		}
+	},
+	computed: {
+		ref() {
+			return `sh-border-box-${this.type}`
+		},
+		borderId() {
+			return this.uuid()
+		},
+		mergedColor() {
+			let defaultColor = this.defaultColors[this.type - 1]
+			return this.deepMerge(defaultColor, this.color)
+		}
+	},
+	methods: {},
+	mounted() {}
+}

package/packages/components/global-components/sh-charts/config/config.js

@@ -0,0 +1,58 @@
+const mainConfig = {
+	line: {},
+	bar: {},
+	pie: {
+		xAxis: {
+			show: false
+		},
+		yAxis: {
+			// show: false
+		}
+	},
+	scatter: {},
+	gauge: {
+		xAxis: {
+			show: false
+		},
+		yAxis: {
+			show: false
+		}
+	},
+	map: {
+		xAxis: {
+			show: false
+		},
+		yAxis: {
+			show: false
+		},
+		roamController: {
+			show: true,
+			left: 'right',
+			mapTypeControl: {
+				china: true
+			}
+		},
+		geo: {
+			map: 'china', // 与引用进来的地图js名字一致
+			zoom: 1,
+			roam: false, // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
+			label: {
+				show: true // 是否显示对应地名
+			},
+			itemStyle: {
+				normal: {
+					borderWidth: 1, // 边际线大小
+					borderColor: '#bbb', // 边界线颜色
+					areaColor: '#fff' // 默认区域颜色
+				},
+				emphasis: {
+					borderColor: '#fff',
+					borderWidth: 1,
+					areaColor: '#fcb1b4' // 鼠标滑过区域颜色
+				}
+			}
+		}
+	}
+}
+
+export default mainConfig

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

@@ -0,0 +1,169 @@
+<template>
+	<div :id="chartRef" :ref="chartRef" v-resize="resize" class="charts chart-common" :style="{ width: width, height: height }"></div>
+</template>
+
+<script>
+import defaultSetup from './config/config'
+
+export default {
+	name: 'ShChart',
+	props: {
+		type: String,
+		title: String,
+		subTitle: String,
+		theme: String,
+		legend: Boolean,
+		toolbox: Boolean,
+		loading: Boolean,
+		width: {
+			type: [String, Number],
+			default: '100%'
+		},
+		height: {
+			type: [String, Number],
+			default: '300px'
+		},
+		cdata: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		coption: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		cextra: {
+			type: Object,
+			default() {
+				return {
+					locale: 'ZH'
+				}
+			}
+		}
+	},
+	emits: ['finished'],
+	data() {
+		return {
+			renderFinished: false,
+			shChartObj: null
+		}
+	},
+	computed: {
+		chartRef() {
+			return 'shChart' + this._.uid
+		},
+		chartTheme() {
+			let theme = this.theme || this.$store.state.app.chartTheme
+			return theme ? 'shTheme-' + theme : ''
+		},
+		chartTitle() {
+			return {
+				show: this.title !== undefined,
+				text: this.title,
+				subtext: this.subTitle,
+				x: 'center'
+			}
+		},
+		chartOption() {
+			const { type, chartTitle, toolbox, legend, cdata, coption, $vUtils } = this
+			let xAxisData = cdata.map(_ => _.name)
+			let seriesData = cdata.map(_ => _.value)
+			let noadTypeCharts = ['map']
+			let seriesType = noadTypeCharts.includes(type) ? '' : type
+			var defaultOption = {
+				grid: {
+					left: '5%',
+					right: '5%',
+					top: '30',
+					bottom: '30'
+				},
+				tooltip: {
+					show: true
+				},
+				title: chartTitle,
+				legend: {
+					show: legend,
+					left: 'left',
+					top: chartTitle ? '40' : '0',
+					data: xAxisData
+				},
+				toolbox: {
+					show: toolbox,
+					orient: 'horizontal',
+					itemSize: 10,
+					itemGap: 8,
+					feature: {
+						restore: {},
+						dataZoom: {},
+						saveAsImage: {}
+					}
+				},
+				xAxis: {
+					type: 'category',
+					data: xAxisData
+				},
+				yAxis: {
+					type: 'value'
+				},
+				series: [
+					{
+						data: seriesData,
+						type: seriesType
+					}
+				]
+			}
+			return $vUtils.merge({}, defaultSetup[type], defaultOption, coption)
+		}
+	},
+	watch: {
+		chartOption: {
+			handler: function () {
+				this.chartRender(true)
+			},
+			deep: true
+		},
+		chartTheme() {
+			this.chartRender()
+		},
+		loading(value) {
+			if (this.shChartObj) {
+				value ? this.shChartObj.showLoading() : this.shChartObj.hideLoading()
+			}
+		}
+	},
+	mounted() {
+		this.chartRender()
+	},
+	beforeUnmount() {
+		if (this.shChartObj) this.shChartObj.dispose()
+	},
+	methods: {
+		chartRender(update = false) {
+			const that = this
+			let chart = null
+			that.renderFinished = false
+			if (update) {
+				chart = that.shChartObj
+			} else {
+				if (that.shChartObj) that.shChartObj.dispose()
+				that.shChartObj = chart = that.$echarts.init(that.$refs[that.chartRef], that.chartTheme, that.cextra)
+			}
+			chart.on('finished', () => {
+				that.finished()
+			})
+			chart.setOption(that.chartOption)
+		},
+		resize() {
+			this.renderFinished && this.shChartObj.resize()
+		},
+		// 渲染完成运行的函数
+		finished() {
+			this.renderFinished = true
+			return this.$emit('finished', this.shChartObj)
+		}
+	}
+}
+</script>

package/packages/components/global-components/sh-decoration/components/decoration1.vue

@@ -0,0 +1,81 @@
+<template>
+	<div :ref="ref" class="sh-decoration-1">
+		<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+			<template v-for="(point, i) in points" :key="i">
+				<rect v-if="Math.random() > 0.6" :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength" :width="pointSideLength" :height="pointSideLength">
+					<animate attributeName="fill" :values="`${mergedColor[0]};transparent`" dur="1s" :begin="Math.random() * 2" repeatCount="indefinite" />
+				</rect>
+			</template>
+
+			<rect v-if="rects[0]" :fill="mergedColor[1]" :x="rects[0][0] - pointSideLength" :y="rects[0][1] - pointSideLength" :width="pointSideLength * 2" :height="pointSideLength * 2">
+				<animate attributeName="width" :values="`0;${pointSideLength * 2}`" dur="2s" repeatCount="indefinite" />
+				<animate attributeName="height" :values="`0;${pointSideLength * 2}`" dur="2s" repeatCount="indefinite" />
+				<animate attributeName="x" :values="`${rects[0][0]};${rects[0][0] - pointSideLength}`" dur="2s" repeatCount="indefinite" />
+				<animate attributeName="y" :values="`${rects[0][1]};${rects[0][1] - pointSideLength}`" dur="2s" repeatCount="indefinite" />
+			</rect>
+
+			<rect v-if="rects[1]" :fill="mergedColor[1]" :x="rects[1][0] - 40" :y="rects[1][1] - pointSideLength" :width="40" :height="pointSideLength * 2">
+				<animate attributeName="width" values="0;40;0" dur="2s" repeatCount="indefinite" />
+				<animate attributeName="x" :values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`" dur="2s" repeatCount="indefinite" />
+			</rect>
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration1',
+	mixins: [mixin],
+	data() {
+		const pointSideLength = 2.5
+		return {
+			svgWH: [200, 50],
+			svgScale: [1, 1],
+			rowNum: 4,
+			rowPoints: 20,
+			pointSideLength,
+			halfPointSideLength: pointSideLength / 2,
+			points: [],
+			rects: []
+		}
+	},
+	methods: {
+		calcSVGData() {
+			const { calcPointsPosition, calcRectsPosition, calcScale } = this
+			calcPointsPosition()
+			calcRectsPosition()
+			calcScale()
+		},
+		calcPointsPosition() {
+			const { svgWH, rowNum, rowPoints } = this
+			const [w, h] = svgWH
+			const horizontalGap = w / (rowPoints + 1)
+			const verticalGap = h / (rowNum + 1)
+			let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]))
+			this.points = points.reduce((all, item) => [...all, ...item], [])
+		},
+		calcRectsPosition() {
+			const { points, rowPoints } = this
+			const rect1 = points[rowPoints * 2 - 1]
+			const rect2 = points[rowPoints * 2 - 3]
+			this.rects = [rect1, rect2]
+		},
+		calcScale() {
+			const { width, height, svgWH } = this
+			const [w, h] = svgWH
+			this.svgScale = [width / w, height / h]
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-1 {
+	width: 100%;
+	height: 100%;
+	svg {
+		transform-origin: left top;
+	}
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration10.vue

@@ -0,0 +1,80 @@
+<template>
+	<div :ref="ref" class="sh-decoration-10">
+		<svg :width="width" :height="height">
+			<polyline :stroke="mergedColor[1]" stroke-width="2" :points="`0, ${height / 2} ${width}, ${height / 2}`" />
+
+			<polyline :stroke="mergedColor[0]" stroke-width="2" :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`" :stroke-dasharray="`0, ${width * 0.2}`" fill="freeze">
+				<animate :id="animationId2" attributeName="stroke-dasharray" :values="`0, ${width * 0.2};${width * 0.2}, 0;`" dur="3s" :begin="`${animationId1}.end`" fill="freeze" />
+				<animate attributeName="stroke-dasharray" :values="`${width * 0.2}, 0;0, ${width * 0.2}`" dur="0.01s" :begin="`${animationId7}.end`" fill="freeze" />
+			</polyline>
+
+			<polyline :stroke="mergedColor[0]" stroke-width="2" :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`" :stroke-dasharray="`0, ${width * 0.6}`">
+				<animate :id="animationId4" attributeName="stroke-dasharray" :values="`0, ${width * 0.6};${width * 0.6}, 0`" dur="3s" :begin="`${animationId3}.end + 1s`" fill="freeze" />
+				<animate attributeName="stroke-dasharray" :values="`${width * 0.6}, 0;0, ${width * 0.6}`" dur="0.01s" :begin="`${animationId7}.end`" fill="freeze" />
+			</polyline>
+
+			<polyline :stroke="mergedColor[0]" stroke-width="2" :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`" :stroke-dasharray="`0, ${width * 0.2}`">
+				<animate :id="animationId6" attributeName="stroke-dasharray" :values="`0, ${width * 0.2};${width * 0.2}, 0`" dur="3s" :begin="`${animationId5}.end + 1s`" fill="freeze" />
+				<animate attributeName="stroke-dasharray" :values="`${width * 0.2}, 0;0, ${width * 0.3}`" dur="0.01s" :begin="`${animationId7}.end`" fill="freeze" />
+			</polyline>
+
+			<circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
+				<animate :id="animationId1" attributeName="fill" :values="`${mergedColor[1]};${mergedColor[0]}`" :begin="`0s;${animationId7}.end`" dur="0.3s" fill="freeze" />
+			</circle>
+
+			<circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
+				<animate :id="animationId3" attributeName="fill" :values="`${mergedColor[1]};${mergedColor[0]}`" :begin="`${animationId2}.end`" dur="0.3s" fill="freeze" />
+				<animate attributeName="fill" :values="`${mergedColor[1]};${mergedColor[1]}`" dur="0.01s" :begin="`${animationId7}.end`" fill="freeze" />
+			</circle>
+
+			<circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
+				<animate :id="animationId5" attributeName="fill" :values="`${mergedColor[1]};${mergedColor[0]}`" :begin="`${animationId4}.end`" dur="0.3s" fill="freeze" />
+				<animate attributeName="fill" :values="`${mergedColor[1]};${mergedColor[1]}`" dur="0.01s" :begin="`${animationId7}.end`" fill="freeze" />
+			</circle>
+
+			<circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
+				<animate :id="animationId7" attributeName="fill" :values="`${mergedColor[1]};${mergedColor[0]}`" :begin="`${animationId6}.end`" dur="0.3s" fill="freeze" />
+				<animate attributeName="fill" :values="`${mergedColor[1]};${mergedColor[1]}`" dur="0.01s" :begin="`${animationId7}.end`" fill="freeze" />
+			</circle>
+		</svg>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration10',
+	mixins: [mixin],
+	computed: {
+		animationId1() {
+			return `d10ani1${this.decorationId}`
+		},
+		animationId2() {
+			return `d10ani2${this.decorationId}`
+		},
+		animationId3() {
+			return `d10ani3${this.decorationId}`
+		},
+		animationId4() {
+			return `d10ani4${this.decorationId}`
+		},
+		animationId5() {
+			return `d10ani5${this.decorationId}`
+		},
+		animationId6() {
+			return `d10ani6${this.decorationId}`
+		},
+		animationId7() {
+			return `d10ani7${this.decorationId}`
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-10 {
+	width: 100%;
+	height: 100%;
+	display: flex;
+}
+</style>

package/packages/components/global-components/sh-decoration/components/decoration11.vue

@@ -0,0 +1,63 @@
+<template>
+	<div :ref="ref" class="sh-decoration-11">
+		<svg :width="width" :height="height">
+			<polygon :fill="fade(mergedColor[1] || defaultColor[1], 10)" :stroke="mergedColor[1]" :points="`20 10, 25 4, 55 4 60 10`" />
+			<polygon :fill="fade(mergedColor[1] || defaultColor[1], 10)" :stroke="mergedColor[1]" :points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`" />
+			<polygon :fill="fade(mergedColor[1] || defaultColor[1], 10)" :stroke="mergedColor[1]" :points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`" />
+
+			<polygon
+				:fill="fade(mergedColor[1] || defaultColor[1], 10)"
+				:stroke="mergedColor[1]"
+				:points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`" />
+
+			<polygon
+				:fill="fade(mergedColor[0] || defaultColor[0], 20)"
+				:stroke="mergedColor[0]"
+				:points="`20 10, 5 ${height / 2} 20 ${height - 10} ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10`" />
+
+			<polyline fill="transparent" :stroke="fade(mergedColor[0] || defaultColor[0], 70)" :points="`25 18, 15 ${height / 2} 25 ${height - 18}`" />
+			<polyline fill="transparent" :stroke="fade(mergedColor[0] || defaultColor[0], 70)" :points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`" />
+		</svg>
+
+		<div class="decoration-content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixin from '../mixin/decoration'
+export default {
+	name: 'ShDecoration11',
+	mixins: [mixin],
+	props: {
+		titleWidth: {
+			type: Number,
+			default: 250
+		},
+		title: {
+			type: String,
+			default: ''
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-decoration-11 {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	.decoration-content {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>