<template>
	<view class="box font-14">
		<!-- 特效礼物 -->
		<special :url="specialUrl"></special>
		<scroll-view lower-threshold="20" scroll-y="true" class="chat" show-scrollbar="false" :scroll-top="scrollTop">
			<view class="cavasation my-2" v-for="(item,index) in msgList" :key="index">
				<view class="person">
					<u-avatar :src="item.avatar" size="60"></u-avatar>
					<span class="ml-1">{{item.sendName}}</span>
				</view>
				<view class="content">
					<span class="text">{{item.text}}</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:String,
			msgList:Array,
			// scrollTop: String,
		},
		data() {
			return {
				scrollFalg: false,
				scrollTop: 0,
			}
		},
		created() {
		},
		methods: {
			
		}
	}
</script>

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

	.font-14 {
		font-size: 14rpx;
	}

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

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

	.chat {
		box-sizing: border-box;
		height: calc(100vh - 500rpx);
		padding-bottom: 100rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		.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>
