baiyuApp/pages/course/components/newCommentList.vue

<template>
	<view 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>
</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;
	}

	.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;
	}
</style>