retail-app/pages/news/index.vue

<template>
	<view class="news">
		<view class="list">
			<view class="list-item">
				<view class="time">2024-12-31 12:85</view>
				<view class="new-card">
					<view class="news-cons">
						<view class="name">充值信息</view>
						<view class="text ellipsis-2">消息内容文本文本文本文本文本文本文本文本</view>
					</view>
					<view class="news-detail">
						<view class="txt">查看详情</view>
						<re-image imgSrc="/retail/mall/icon_more.png" width="24" height="24"></re-image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
.news{
	padding: 32rpx 20rpx;
	.list{
		.list-item{
			.time{
				text-align: center;
				font-size: 26rpx;
				margin-bottom: 20rpx;
				color: #989897;
			}
			.new-card{
				background-color: #fff;
				border-radius: 16rpx;
				.news-cons{
					padding: 32rpx 32rpx 24rpx;
					border-bottom: 2rpx solid #F0F2F4;
					.name{
						font-size: 32rpx;
						font-weight: 500;
						color: #363531;
						margin-bottom: 16rpx;
					}
					.text{
						font-size: 28rpx;
						color: #7C7C7B;
					}
				}
				.news-detail{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 26rpx 32rpx 22rpx;
					.txt{
						font-size: 28rpx;
						font-weight: 400;
						color: #363531;
					}
				}
			}
		}
	}
}
</style>