<template>
	<view class="title">
		<view class="text">{{title}}</view>
		<view class="decorate"></view>
		<view class="light"></view>
	</view>
</template>

<script>
export default{
	props:{
		title:{
			type:String,
			default:""
		}
	}
}
</script>

<style lang="scss" scoped>
.title{
	position: relative;
	margin: 0 20rpx;
	color: #1f1f1f;
	font-weight: 500;
	font-size: 34rpx;
	width: 140rpx;
	height: 42rpx;
	overflow: hidden;
	.decorate{
		position: absolute;
		bottom: 0rpx;
		left: 0;
		width: 66rpx;
		height: 10rpx;
		background: #7cc6f1;
		z-index: -1;
	}
	.light{
		width: 80rpx;
		height: 10rpx;
		background: linear-gradient(#f8f8f8,#fff,#f8f8f8);
		opacity: 0.5;
		transform: rotate(-45deg);
		position: absolute;
		top: 8rpx;
		left: -30rpx;
		transform-origin: bottom;
		animation-name: light;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	@keyframes light {
	    0% {
	      left: -30rpx;
	    }
	    100% {
	      left: 120rpx;
	    }
	  }
}
</style>