baiyuApp/pages/course/components/newCommentList.vue

<template>
	<view v-if="commentList.length > 0" class="contentViewClass">
		<view class="commentItem" v-for="(item, index) in commentList" :key="index">
			<image class="comment-avatar" :src="$isEmpty(item.avatar) ? defHeadImg : item.avatar" mode="aspectFill"></image>
			<view class="comment-box">
				<view class="comment-people">
					<view class="comment-people-name textOne">{{ item.nickName }}</view>
					<view class="comment-time">{{ $isEmpty(item.createTime) ? "" : $formatDate(item.createTime) }}</view>
				</view>
				<view class="comment-text">{{ item.content }}</view>
			</view>
		</view>
	</view>
	<view class="emptyCourse" v-else>暂无评论~</view>
</template>

<script>
export default {
	name: "newCommentList",
	props: {
		commentList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			defHeadImg: "/static/image/hall/my_heads_icon.png",
		};
	},
}
</script>

<style scoped lang="scss">
.contentViewClass {
	width: 100%;
	padding-bottom: 180rpx;
}

.commentItem {
	width: 100%;
	display: flex;
	align-items: flex-start;
	margin-bottom: 24rpx;
}

.comment-avatar {
	width: 90rpx;
	height: 90rpx;
	margin-right: 12rpx;
	border-radius: 100%;
}

.comment-box {
	width: calc(100vw - 150rpx);
}

.comment-people {
	width: 100%;
	margin-bottom: 12rpx;
}

.comment-people-name {
	width: 100%;
	font-weight: 600;
	font-size: 32rpx;
	color: #222222;
	margin-bottom: 12rpx;
}

.comment-time {
	font-weight: 400;
	font-size: 28rpx;
	color: rgba(0, 0, 0, 0.45);
}

.comment-text {
	font-weight: 400;
	font-size: 32rpx;
	color: #222222;
	line-height: 44rpx;
}

.emptyCourse {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200rpx;
	padding: 24rpx 50rpx;
	color: #999999;
}
</style>