<template>
	<view class="audioPlayback">
		<view class="audioPlayback-bg">
			<image class="audioPlayback-bg-img" src="@/static/images/txz.jpg"></image>
		</view>
		<TopNavigation />
		<PaddingTopB>
			<view class="audioPlayback-c audioPlayback-content">
				<view class="audioPlayback-content-1">
					<view class="ItemQ">
						<view class="ItemQ-1">
							<image src="@/static/images/txz.jpg"></image>
						</view>
						<view class="ItemQ-2">音频</view>
					</view>
				</view>
				<view class="audioPlayback-content-2">
					<yz-audio
						@ended="ended"
						:autoplay="true" 
						singer="歌手" 
						epname="专辑名称" 
						title="歌曲标题" 
						ref="player1"></yz-audio>
				</view>
			</view>
		</PaddingTopB>
	</view>
</template>

<script>
	import TopNavigation from "./components/TopNavigation/index.vue"
	import PaddingTopB from "@/components/PaddingTopB/index.vue"
	export default {
		components: {
			TopNavigation,
			PaddingTopB
		},
		data() {
			return {
				
			};
		},
		methods: {
			ended() {
				
			}
		}
	}
</script>

<style lang="scss">
.audioPlayback{
	
	.ItemQ{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 100rpx;
		.ItemQ-1{
			image{
				height: 390rpx;
				width: 390rpx;
				border-radius: 45rpx;
			}
		}
		.ItemQ-2{
			font-size: 30rpx;
			line-height: 45rpx;
			color: #FFFFFF;
			margin-top: 40rpx;
			text-align: center;
		}
	}
	.audioPlayback-c{
		width: 100%;
	}
	.audioPlayback-bg{
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
		z-index: 0;
		.audioPlayback-bg-img{
			height: 100vh;
			width: 100vh;
			filter: blur(100rpx);
			opacity: 0.1;
		}
	}
	.audioPlayback-content{
		.audioPlayback-content-1{
			padding-top: 150rpx;
		}
		.audioPlayback-content-2{
			padding: 0 50rpx;
			margin-top: 130rpx;
		}
	}
}
</style>