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">
								<view class="img">
									<image src="../../static/jys/jys.png"></image>
								</view>
								<view class="user">用户名</view>
							</view>
							<view class="collection">
								<uni-icons type="star" size="20"></uni-icons>
								收藏
							</view>
						</view>
					</view>
				</view>
			</template>
		</viewX-Case>
		
		<viewX-Case style="margin-top: 10px;">
			<template #title>
				<view class="title">活动推荐</view>
			</template>
			<template #lookMore>
				<view class="lookMore" @click="lookMore">查看更多</view>
			</template>
			<template #activeBlock>
				<!-- <activity-case v-for="i in 10" :key="i"></activity-case> -->
				<teaching-case v-for="i in 10" :item="actData" :key="i"></teaching-case>
			</template>
		</viewX-Case>
		
		
		
		<uni-fab ref="fab" 
		:pattern="pattern" 
		:horizontal="horizontal" 
		:vertical="vertical"
		:direction="direction"
		 
		@fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData:{
					title:'活动', //导航栏标题
					btn:0        //是否显示返回按钮 0不显示  1 显示
				},
				actData:{
					btn:1
				},
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
			};
		},
		methods:{
			lookMore(){
				uni.navigateTo({
					url:'/pages/activityList/activityList'
				})
			},
			fabClick(){
				// console.log(111);
				uni.navigateTo({
					url:'/pages/publish/publish'
				})
			}
		}
	}
</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{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
						color: #666666;
						// margin-bottom: 20rpx;
						// padding-bottom: 20rpx;
						.left{
							display: flex;
							// justify-content: flex-start;
							align-items: center;
							.img{
								width:30px;
								height:30px;
								// padding-right: 20rpx;
								margin-right: 20rpx;
								
								image{
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}
							
							.user{
								font-size: 16px;
								// padding-left: 15rpx;
							}
							
						}
						.collection{
							// float: right;
							font-size: 14px;
							// padding-top: 10px;
						}
					}
				}	
			}	
			.activeData:nth-child(1){
				margin-left: 15px;
			}
		}
		
		.title{
				font-weight: bold;
				// color: #999999;
			}		
		.lookMore{
			color: #999999;
			font-size: 14px;
		}
	}
</style>