<template>
	<div class="title" >
		<img src="~@/assets/img/title-left.png" alt="">
		<slot>
		</slot>
		<img src="~@/assets/img/title-right.png" alt="">
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			orderData: {
				type: Object
			},
			
		},
		data() {
			return {

			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	@-webkit-keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}


	.title {
		position: relative;
		left: 130px;
		text-align:center;
		width: 290px;
		font-size: 22px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34px;
		position: relative;

		img {
			animation-name: breath;
			/*关键帧名称*/
			animation-timing-function: ease-in-out;
			/*动画的速度曲线*/
			animation-iteration-count: infinite;
			/*动画播放的次数*/
			animation-duration: 1.5s;
			/*动画所花费的时间*/
		}

		img:nth-child(1) {
			position: absolute;
			left: 0;
			top: 35%;
			width: 28px;
			height: 9px;

		}

		img:nth-child(2) {
			position: absolute;
			right: 0;
			top: 35%;
			width: 28px;
			height: 9px;
		}
	}
</style>
