teaching-uniapp/pages/activityPage/activityPage.vue

<template>
	<view class="activity">
		<statusBar :item="navBarData"></statusBar>
		
		<viewX-Case class="mid">
			<template #title>
				<view class="title">活动直播</view>
			</template>
			<template #lookMore>
				<view class="lookMore">
					查看更多
				</view>
			</template>
			<template #activeBlock>
				<view class="activeData" v-for="i in 4" :key="i">
					<image src="../../static/activity/bg1.png" mode="aspectFill"></image>
					<view class="liveBroadcast">
						<view class="title">
							<view class="tag">类型</view>
							<text>直播活动标题标题标题标题标题标题标题</text>
						</view>
						
						<view class="operate">
							<view class="left">
								<image src="../../static/logo.png"></image>
								<view class="user">用户名</view>
								<view class="collection">收藏</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</viewX-Case>
		
		<viewX-Case>
			<template #title>
				<view class="title">活动推荐</view>
			</template>
			<template #lookMore>
				<view class="lookMore">查看更多</view>
			</template>
			<template #activeBlock>
				<activity-case v-for="i in 10" :key="i"></activity-case>
			</template>
		</viewX-Case>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData:{
					title:'活动', //导航栏标题
					btn:0        //是否显示返回按钮 0不显示  1 显示
				}
			};
		}
	}
</script>

<style lang="scss">
	.activity{
		.mid{
			margin:20px 0;
			.activeData{
				width: 460rpx;
				display: inline-block;
				margin-right: 20px;
				image{
					width: 100%;
					height: 120px;
					border-radius: 10px;
					margin-bottom: 10px;
				}
				.liveBroadcast{
					flex: 1;
					width: 460rpx;
					display: flex;
					flex-direction: column;
					align-content: flex-end ;
					.title{
						display: flex;
						margin-bottom: 5px;
						.tag{
							border: 1px #00b2b6 solid;
							font-size: 12px;
							display: flex;
							white-space: nowrap;
							justify-content: center;
							align-items: center;
							padding: 2px 4px;
							border-radius: 3px;
							margin-right: 10rpx;
							color: #00b2b6;
						}
						text{
							// display: -webkit-box;//对象作为弹性伸缩盒子模型显示
							// overflow: hidden;//溢出隐藏
							// -webkit-box-orient: vertical;//设置伸缩盒子对象的子元素的排列方式
							// -webkit-line-clamp: 2;//设置 块元素包含的文本行数
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
						
					}
					.operate{
						.left{
							image{
								float: left;
								width:30px;
								height:30px;
								border-radius: 50%;
							}
							.user{
								float: left;
								padding-top: 10px;
								padding-left: 10px;
							}
							.collection{
								float: right;
								padding-top: 10px;
							}
						}
					}
				}	
			}	
			.activeData:nth-child(1){
				margin-left: 15px;
			}
		}
		
		.title{
				font-weight: bold;
			}		
		.lookMore{
			color: #ccc;
			font-size: 14px;
		}
	}
</style>