<template>
	<view class="box font-14">
		<!-- 特效礼物 -->
		<special :url="specialUrl"></special>
		<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="true">
			<view class="cavasation my-2" v-for="(item,index) in datalist" :key="index">
				<view class="person">
					<u-avatar :src="item.avatar" size="60"></u-avatar>
					<span class="ml-1">{{item.name}}</span>
				</view>
				<view class="content">
					<span class="text">{{item.content}}</span>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import special from "@/components/footer/gift/special-effects/special.vue"
	export default {
		name: "chat",
		components:{ special },
		props:["specialUrl"],
		data() {
			return {
				scrollFalg: false,
				datalist: [{
						avatar: "../../static/images/礼物@2x.png",
						name: "主播",
						content: "课程生动有趣"
					},
					{
						avatar: "../../static/images/礼物@2x.png",
						name: "主播",
						content: "课程生动有趣"
					},
					{
						avatar: "../../static/images/礼物@2x.png",
						name: "主播",
						content: "课程生动有趣"
					},
					{
						avatar: "../../static/images/礼物@2x.png",
						name: "主播",
						content: "课程生动有趣"
					},
					{
						avatar: "../../static/images/礼物@2x.png",
						name: "主播",
						content: "课程生动有趣"
					},
					{
						avatar: "../../static/images/礼物@2x.png",
						name: "主播",
						content: "课程生动有趣"
					},
				]
			}

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.ml-1 {
		margin-left: 10rpx;
	}
	.font-14{
		font-size: 14rpx;
	}

	.my-2 {
		margin: 20rpx 0;
	}

	.box {
		flex: 1;
		overflow: hidden;
	}

	.chat {
		box-sizing: border-box;
		height: calc(100vh - 500rpx);
		padding: 40rpx;
		letter-spacing: 2rpx;

		.person {
			display: flex;
			align-items: center;
		}

		.content {
			line-height: 80rpx;
			margin-left: 80rpx;

			.text {
				display: inline-block;
				border-radius: 10rpx;
				padding: 0 24rpx;
				box-shadow: 5rpx 5rpx 10rpx #dedede;
			}
		}
	}
</style>
