lineage-app/components/tabNvue/mediaList.nvue

<template>
	<div class="tui-list-view">
		<div class="tui-list-cell" :class="[lastChild?'tui-last-child':'']" @click="bindClick">
			<div class="tui-title-box">
				<text class="tui-cell-title">{{entity.title}}</text>
			</div>
			<div class="tui-img-container" v-if="entity.imgArr && entity.imgArr.length>0">
				<div class="tui-cell-img" v-for="(item,index) in entity.imgArr" :key="index">
					<image :src="item" class="tui-img"></image>
				</div>
			</div>
			<div class="tui-sub-title">
				<text class="tui-badge" :class="[getClass(entity.badgeType)]" v-if="entity.badgeType!=0">{{entity.badgeText}}</text>
				<text class="tui-sub-content">{{entity.subContent}}</text>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			entity: {
				type: Object,
				default: function(e) {
					return {}
				}
			},
			lastChild: {
				type: Boolean,
				default: function(e) {
					return false
				}
			}
		},
		methods: {
			bindClick() {
				this.$emit('click')
			},
			getClass(type) {
				//1-tui-red 2-tui-blue  3-tui-orange 4-tui-green
				return ["tui-red", "tui-blue", "tui-orange", "tui-green"][type - 1];
			}
		}
	}
</script>

<style>
	.tui-list-view {
		width: 750px;
		background-color: #fff;
		/* padding-bottom: env(safe-area-inset-bottom); */
	}

	.tui-list-view:active {
		background-color: #eeeeee;
	}

	.tui-list-cell {
		width: 750px;
		padding-top: 30px;
		padding-bottom: 30px;
		padding-right: 30px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #E6E6E6;
	}



	.tui-last-child {
		border-bottom-width: 0;
	}

	.tui-title-box {
		width: 690px;
		flex: 1;
		lines: 2;
	}

	.tui-cell-title {
		font-size: 36px;
		line-height: 56px;
		flex: 1;
		lines: 2;
		text-overflow: ellipsis;
		color: #333333;
	}

	.tui-img-container {
		width: 690px;
		padding-top: 24px;
		height: 184px;
		flex-direction: row;
		justify-content: space-between;
	}

	.tui-cell-img {
		width: 220px;
		overflow: hidden;
		position: relative;
	}

	.tui-img {
		width: 220px;
		height: 184px;
		border-radius: 4px;
	}

	.tui-sub-title {
		padding-top: 24px;
		align-items: center;
		flex-direction: row;
	}

	.tui-sub-content {
		font-size: 28px;
		color: #BCBCBC;
	}

	.tui-badge {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 24px;
		border-radius: 4px;
		margin-right: 20px;
	}

	.tui-red {
		background-color: #FCEBEF;
		color: #8A5966;
	}

	.tui-blue {
		background-color: #ECF6FD;
		color: #4DABEB;
	}

	.tui-orange {
		background-color: #FEF5EB;
		color: #FAA851
	}

	.tui-green {
		background-color: #E8F6E8;
		color: #44CF85
	}
</style>