<script setup>
	import {
		defineProps,
		withDefaults
	} from "vue"
	const {info} = defineProps(['info'])
</script>
<template>
	<view>
		<view class="news-box" v-if="info">
			<view class="hand" >
				<image :src="info.image" mode="widthFix" class="covera"></image>
				<view class="info">
					<view class="title">
						<text>{{info.title}}</text>
					</view>
					<view class="detail">
						<text class="detail-text">{{info.detile}}</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<!-- 可以在这里添加额外的页脚内容 -->
				<slot name="footer"></slot>
				<view class="row">
					<view class="left">
						<text>发布时间:{{info.time}}</text>
					</view>
					<view class="rigth">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.row{
		font-size: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.news-box {
		display: flex;
		width: 95%;
		margin: 0 auto;
		border-radius: 25rpx;
		background-color: #fff;
		flex-direction: column;
		padding: 10rpx;
		/* 添加内边距以获得更好的间距 */
		box-sizing: border-box;
		/* 确保padding和border包含在元素的总宽度和高度内 */
		overflow: hidden;
		/* 确保内容不会溢出 */

		.hand {
			display: flex;
			align-items: flex-start;
			margin-top: 20rpx;
			gap: 20rpx;
			width: 100%;

			/* 确保 hand 占满 news-box 的宽度 */
			.info {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				/* 确保 info 占据剩余空间 */
				align-items: flex-start;
				/* 垂直居中文本 */
				flex-wrap: wrap;
				/* 确保文本在较小屏幕上自动换行 */
				word-wrap: break-word;

				/* 强制长单词或URL换行 */
				.detail {
					margin-top: 10rpx;
					/* 为 detail 添加顶部间距 */
					font-size: 14px;
				}

				.detail-text {
					word-break: break-all;
					font-size: 18rpx;
					/* 确保长单词正确换行 */
				}
			}
		}

		.covera {
			width: 150rpx;
			height: auto;
			/* 保持宽高比 */
			flex-shrink: 0;
			/* 确保图片不会因为盒子变小而缩小 */
		}

		.footer {
			width: 100%;
			padding: 10rpx;
			/* 页脚的内边距 */
			text-align: center;
			/* 页脚内容居中 */
			border-top: 1px solid #eee;
			/* 页脚顶部的分隔线 */
		}
	}
</style>