<template>
	<view>
		<uni-list>
			<uni-list-item direction="column">
				<template v-slot:header>
					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
					<view class="uni-thumb uni-content list-picture">
						<image src="/static//user/back.jpg" mode="aspectFill"></image>
					</view>
				</template>
				<template v-slot:footer>
					<view class="uni-footer">
						<text class="uni-footer-text">评论</text>
						<text class="uni-footer-text">点赞</text>
						<text class="uni-footer-text">分享</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item direction="column">
				<template v-slot:header>
					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
					<view class="uni-thumb uni-content list-picture">
						<image src="/static//user/back.jpg" mode="aspectFill"></image>
					</view>
				</template>
				<template v-slot:footer>
					<view class="uni-footer">
						<text class="uni-footer-text">评论</text>
						<text class="uni-footer-text">点赞</text>
						<text class="uni-footer-text">分享</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item direction="column">
				<template v-slot:header>
					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
					<view class="uni-thumb uni-content list-picture">
						<image src="/static//user/back.jpg" mode="aspectFill"></image>
					</view>
				</template>
				<template v-slot:footer>
					<view class="uni-footer">
						<text class="uni-footer-text">评论</text>
						<text class="uni-footer-text">点赞</text>
						<text class="uni-footer-text">分享</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item direction="column">
				<template v-slot:header>
					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
					<view class="uni-thumb uni-content list-picture">
						<image src="/static//user/back.jpg" mode="aspectFill"></image>
					</view>
				</template>
				<template v-slot:footer>
					<view class="uni-footer">
						<text class="uni-footer-text">评论</text>
						<text class="uni-footer-text">点赞</text>
						<text class="uni-footer-text">分享</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item direction="column">
				<template v-slot:header>
					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
					<view class="uni-thumb uni-content list-picture">
						<image src="/static//user/back.jpg" mode="aspectFill"></image>
					</view>
				</template>
				<template v-slot:footer>
					<view class="uni-footer">
						<text class="uni-footer-text">评论</text>
						<text class="uni-footer-text">点赞</text>
						<text class="uni-footer-text">分享</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
