<template>
	<view>
		<view class="padding-x-four d-flex flex-wrap">
			<view v-for="item in 6">
				<image class="evaluateListImgItem"
					src="https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					mode="scaleToFill"></image>
			</view>
		</view>
		<view class="paddding-x-two">
			<view class="eval-box">
				<view class="evaluate-title">文章标题文章标题文章标题文章标题文章标题</view>
				<view class="d-flex a-center j-sb margin-top-two">
					<view class="d-flex a-center">
						<image class="img" src="https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="widthFix"></image>
						<view class="evaluate-name">张三</view>
					</view>
					
					<view class="eval-time">发布于2022-11-16</view>
				</view>
				<view class="evaluateText text-indent">
					评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
				</view>
			</view>
		</view>
		<view class="bgWhite">
			<view class="padding-aval">
				<comment-list :personEvalList="personEvalList"></comment-list>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personEvalList: [{
						avatar: 'https://img2.baidu.com/it/u=955956276,3392954639&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						nickname: '李哈哈',
						date: '2022-01-31',
						content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
					},
					{
						avatar: 'https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						nickname: '李小乖',
						date: '2022-05-11',
						content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	page{
		background: #F7F8F9;
	}
	.padding-aval{
		padding: 30rpx 40rpx;
	}
	.eval-box{
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
	}
	.evaluate-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}
	/* 头像 */
	.img {
		width: 60rpx;
		height: 60rpx;
		display: table;
		border-radius: 50%;
	}
	
	.evaluate-name {
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	.evaluateListImgItem {
		width: 210rpx;
		height: 210rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	/* 内容样式 */
	.evaluateText {
		margin-top: 10rpx;
		font-size: 24rpx;
		letter-spacing: 0.5px;
		line-height: 40rpx;
	}
	.text-indent{
		text-indent: 2rem;
	}
	.eval-time{
		color: #666666;
		font-size: 24rpx;
	}
</style>
