hlt_app/pages/message/components/messageCard.vue

<template>
	<view class="message-card">
		<view class="card-info-content">
			<view class="left-icon">
				<image style="width: 100%;height: 100%;" src="../../../static/images/index/icon1.svg" mode="scaleToFill"></image>
			</view>
			<view class="right-content">
				<view class="header">
					<view class="name">
						{{ message.name }}
					</view>
					<view class="time">
						{{ message.time }}
					</view>
				</view>
				<view class="body">
					{{ message.remark }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { defineProps } from 'vue';
	const props = defineProps({
		message:{
			type: Object,
			default: ()=>{
				return {}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.message-card{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		
		.card-info-content{
			display: flex;
			align-items: center;
			
			.left-icon{
				width: 114rpx;
				height: 114rpx;
				flex-shrink: 0;
			}
			
			.right-content{
				width: calc(100% - 114rpx);
				display: flex;
				flex-direction: column;
				height: 100rpx;
				justify-content: space-between;
				
				.header{
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					
					.name{
						font-family: 思源黑体;
						font-size: 36rpx;
						color: $uni-text-color;
					}
					.time{
						font-family: 思源黑体;
						font-size: 26rpx;
						color: $uni-text-color-grey;
					}
				}
				
				.body{
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: 思源黑体;
					font-size: 26rpx;
					color: $uni-text-color;
				}
			}
		}
	}
</style>