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> -->
				<image src="../../static/yym/Rectangle25.png" mode="aspectFill"></image>
			</view>
			
			<viewX-Case class="mid">
				<template #title>
					<view class="title three-font" >精选活动</view>
				</template>
				<template #lookMore>
					<view class="lookMore fz-font" @click="gotoActivity">查看更多</view>
				</template>
				<template #activeBlock>
					<view class="activeData" @click="gotoActivityDetail" v-for="i in 5" :key="i">
						<image src="../../static/resource/jqr.png" mode="aspectFill"></image>
						<view class="activeTit sBtn-font">
							这里是活动标题这里是活动标题这里是活动标题这里是活动标题
							<!-- <slot name="ac这里是活动标题这里是活动标题这里是活动标题tiveTit"></slot> -->
						</view>
						<view class="numData">
							<view class="proNum bqZ-font">74 人报名</view>
							<view class="price num-font"> <text class="fz-font">￥</text>299</view>
						</view>
						<button class="btn sBtn-font" @click.stop="gotoHd">立即报名</button>
					</view>
				</template>
			</viewX-Case>
			
			
			<viewX-Case>
				<template #title>
					<view class="title three-font">教研室活动</view>
				</template>
				<template #lookMore>
					<view class="lookMore fz-font" @click="teachmore">查看更多</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: {
			teachmore(){
				uni.navigateTo({
					url:"/pages/teachingList/teachingList"
				})
			},
			gotoTeDetail(){
				uni.navigateTo({
					url:"/pages/teachingDetail/teachingDetail"
				})
			},
			gotoActivity(){
				uni.navigateTo({
					url:"/pages/activityList/activityList"
				})
			},
			gotoActivityDetail(){
				uni.navigateTo({
					url:'/pages/activityDetail/activityDetail'
				})
			},
			gotoHd(){
				uni.navigateTo({
					url:'/pages/hd/hd'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: ;
		// background-color: #f0f2f5;
		.top{
			width: 750rpx;
			height: 150px;
			display: flex;
			margin-bottom: 20rpx;
			align-items: center;
			background-color: #fff;
			justify-content: center;
			image{
				height: 130px;
				width: 700rpx;
				border-radius: 10px;
			}
		}
		.mid{
			margin: 10px 0;
			.activeData{
				width: 290rpx;
				display: inline-block;
				padding-right: 20rpx;
				image{
					width: 100%;
					height: 80px;
					border-radius: 10px;
					margin-bottom: 10rpx;
				}
				.activeTit{
					// width: 100rpx;
					// overflow:hidden; 
					// text-overflow:ellipsis;
					font-weight: 600;
					// font-size: 30rpx;
					white-space:normal;
					/*隐藏溢出*/
					/*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
					/*规定段落中的文本不进行换行*/
					letter-spacing: 2rpx;
					 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: baseline;
					padding: 10rpx 0;
					.proNum{
						color: #999999;
						// font-size: 14px;
					}
					.price{
						color: #f68717;
						// font-size: 18px;
					}
				}
				.btn{
					// font-size: 12px;
					background-color: #3081e8;
					color: #fff;
					float: left;
					height: 28px;
					line-height: 28px;
					border-radius: 30px;
					margin: 15rpx 0;
					margin-bottom: 30rpx;
					// margin-top: 0px;
				}
			}
			.activeData:nth-child(1){
				margin-left: 15px;
			}
		}
		.title{
				font-weight: bold;
			}		
		.lookMore{
			color: #666666;
			// font-size: 14px;
		}
		
		
		
	}
</style>