teaching-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<statusBar :item="navBarData"></statusBar>
			<view class="top">
				<image src="../../static/logo.png" mode="aspectFill"></image>
			</view>
			
			<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 5" :key="i">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<view class="activeTit">
							查看更多查看更多查看更多查看更多查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多
							<!-- <slot name="activeTit"></slot> -->
						</view>
						<view class="numData">
							<view class="proNum">74报名</view>
							<view class="price">￥299</view>
						</view>
						<button class="btn">立即报名</button>
					</view>
				</template>
			</viewX-Case>
			
			
			<viewX-Case>
				<template #title>
					<view class="title">教研室活动</view>
				</template>
				<template #lookMore>
					<view class="lookMore">查看更多</view>
				</template>
				<template #teaching>
					<teaching-case v-for="i in 10" :key="i"></teaching-case>
				</template>
			</viewX-Case>
	</view>
</template>

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

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: ;
		// background-color: #f0f2f5;
		.top{
			width: 750rpx;
			height: 150px;
			display: flex;
			align-items: center;
			background-color: #fff;
			justify-content: center;
			image{
				height: 130px;
				width: 700rpx;
				border-radius: 10px;
			}
		}
		.mid{
			margin: 20px 0;
			.activeData{
				width: 290rpx;
				display: inline-block;
				margin-right: 20px;
				image{
					width: 100%;
					height: 80px;
					border-radius: 10px;
					margin-bottom: 10px;
				}
				.activeTit{
					// width: 100rpx;
					// overflow:hidden; 
					// text-overflow:ellipsis;
					white-space:normal;
					/*隐藏溢出*/
					/*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
					/*规定段落中的文本不进行换行*/
					
					 display: -webkit-box;
					 word-break: break-all;
					 text-overflow: ellipsis;
					 overflow: hidden;
					 -webkit-box-orient: vertical;
					 -webkit-line-clamp:2;/*设置 需要显示的行数*/
				}
				.numData{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					.proNum{
						color: #999999;
						font-size: 14px;
					}
					.price{
						color: #f68717;
						font-size: 18px;
					}
				}
				.btn{
					// width: 200rpx;
					font-size: 12px;
					background-color: #3081e8;
					color: #fff;
					float: left;
					border-radius: 30px;
					margin: 15px 0;
					margin-top: 10px;
				}
			}
		}
		.title{
				font-weight: bold;
			}		
		.lookMore{
			color: #ccc;
			font-size: 14px;
		}
		
		
		
	}
</style>