<template>
<view class="commentSwiper">
	<scroll-view class="scroll-view_H" scroll-x="true" @scrolltolower="onScrolltolower">
		<view v-for="(item,index) in commentSwiperLIst" :key="index" class="scroll-view">
			<view class="commentCard">
				<view class="left">
					<image :src="item.imgUrl" mode="widthFix" class="img"></image>
				</view>
				<view class="right">
					<view class="info">
						<image :src="item.headImg" mode="widthFix" class="headImg"></image>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="score">
						<sl-star :star.sync="item.star"></sl-star>
					</view>
					<view class="content">{{item.content}}</view>
				</view>
			</view>
		</view>
	</scroll-view>
</view>
</template>

<script>
import slStar from "@/sdk/sl-star/index.vue"
export default{
	components:{
		slStar
	},
	props:{
		commentSwiperLIst:{
			type:Array,
			default:()=>[]
		}
	},
	data(){
		return {
			
		}
	},
	methods:{
		onScrolltolower(e){
			uni.navigateTo({
				url: '/pages/comment/comment',
			});
		}
	}
}
</script>

<style scoped lang="scss">
.scroll-view_H{
	white-space: nowrap;
	width: 100%;
}
.scroll-view{
	display: inline-block;
	margin-right: 20rpx;
}
.commentCard{
	display: flex;
	width: 100%;
	align-items: center;
	background: #f8f8f8;
	border-radius: 20rpx;
	margin-right: 20rpx;
	.left{
		width: 200rpx;
		height: 200rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.img{
			border-radius: 10rpx;
		}
	}
	.right{
		width: 350rpx;
		.score{
			margin: 10rpx 0;
		}
	}
	.info{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		.headImg{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
	.content{
		font-size: 26rpx;
		color: #999;
	}
}
</style>