teaching-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<statusBar :item="navBarData"></statusBar>
		<view class="top">
			<!-- <image src="http://43.139.158.220:5007/img/static/logo.png" mode="aspectFill"></image> -->
			<image src="http://43.139.158.220:5007/img/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="(item,index) in activeList" :key="index">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="activeTit sBtn-font" style="font-weight: bold;">
						{{ item.className }}
					</view>
					<view class="numData">
						<view class="proNum bqZ-font">{{ item.count }} 人报名</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="(item,index) in classList" :key="index" :classList='item'></teaching-case>
			</template>
		</viewX-Case>
<view class="" style="height: 30rpx;width: 100%;">
	
</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				navBarData: {
					title: '首页', //导航栏标题
					btn: 0 //是否显示返回按钮 0不显示  1 显示
				},
				activeList: [{
						img: 'http://43.139.158.220:5007/img/static/mine/img10.jpg',
						count: '1790',
						className: '创新思维开发与落地',
						intro: '《暂无简介》'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img11.jpg',
						count: '3842',
						className: '创业意识与商机识别',
						intro: '在创新创业的大氛围下，课堂上常常强调要以项目为中心，你却苦于迟迟无法最终确定具体的项目？那么，《创业意识与商机识别》这门课程可以帮助你。'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img12.png',
						count: '701',
						className: '机电（机械）技术创新创业实务',
						intro: '该课程是针对机电、机械行业、企业用户的一门关于创新创业的培训类课程。在国家“大众创业、万众创新”的新时代背景下，创新是引领一个企业发展的第一动力。为推动科技不断进步、促进企业快速健康发展，开发了《机电（机械）技术创新创业实务》课程。计划为36学时，理论讲授30学时，实践案例分析和操作6学时'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img13.jpg',
						count: '823',
						className: '打造黄金创始人团队',
						intro: '如何摆正自己的工作态度和位置，清醒认识到自己的职责，学会选人用人，努力提高领导力和执行力，带好团队，并最终成为一个卓越的管理者呢？本课程提供给你建议'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img14.jpg',
						count: '2287',
						className: '创业素质测评与团队组建',
						intro: '本课程采取案例分析、研讨、游戏的方式使同学们的聪明才智能够有发挥的空间，话语权能够得到满足。通过完成团队任务的方式使大家逐渐与陌生人建立良好沟通关系，掌握沟通技巧，使自己具有使命感、懂得感恩。'
					},
				],
				classList: [{
						img: 'http://43.139.158.220:5007/img/static/mine/img1.jpg',
						className: '创业者管理能力训练基础',
						intro: '《创业者管理能力训练基础》通过管理学、营销学、财税理论、创业基础知识及创业操作实务的提炼，以专题化的形式面向高职类所有专业的学生。本课程一共有三大部分、七个专题。分别为：第一部分，一般管理者能力训练基础，四个专题，即自我管理能力训练、团队管理能力训练、社会关系管理能力训练与团队建设能力训练。第二部分，创业者重要能力的领悟与训练，二个专题，即成功创业者的智力要素、成功创业者商务能力的领悟与训练。第三部分是咖啡厅实践训练。'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img2.jpg',
						className: '创业融资实务',
						intro: '本课程是创业管理专业、创业班的核心课程，根据专业培养目标的定位，主要面向创投机构服务专员岗位，培养该岗位应具备的相关创业融资知识和技能。课程主要采用“做中学”体验式的设计理念，引入真实项目进行“理实一体实战训练”。'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img3.jpg',
						className: '创业基础',
						intro: '《创业基础》是一门面向高等院校学生与社会青年开设一门必修的基础理论和易于实际操作的创业综合基础课程。旨激发学员创业激情，增强创业意识，培养学员具备创业基础知识与基本能力，为大学生自主创业、拓展就业及开创事业等提供系统的理论与实践支持。是顺应新时代社会经济与高校教育发展的要求，以市场变化及其趋势为前提，从人才培养机理与中小企业成长规律的角度出发，结合教师多年创业教育与企业家人才培养成功经验，运用企业现代管理新观念，让学员掌握中小企业开办与管理全过程的理论和实务的一门创业综合基础课程。'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img4.jpg',
						className: '打造无敌商业计划书',
						intro: '暂无简介'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img5.jpg',
						className: '创新思维',
						intro: '将创新思维意识与方法技能双元结合，综合微课学习与创造力实践训练融合演进，实现在线学习与配套教材混合驱动。'
					},
				]
			}
		},
		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: 288rpx;
			display: flex;
			margin-bottom: 20rpx;
			align-items: center;
			background-color: #fff;
			justify-content: center;

			image {
				height: 246rpx;
				width: 690rpx;
				border-radius: 12rpx;
			}
		}

		.mid {
			margin: 10px 0;
			height: 498rpx;

			.activeData {
				width: 290rpx;
				display: inline-block;
				padding-right: 20rpx;

				image {
					width: 100%;
					height: 80px;
					border-radius: 10px;
					margin-bottom: 10rpx;
				}

				.activeTit {
					// font-weight: 600;
					height: 64rpx;
					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 {
					border: none;
					padding: 0;
					float: left;
					text-align: center;
					// padding: 8px 24px 8px 24px;
					background-color: #3081e8;
					color: #fff;
					border-radius: 100rpx;
					width: 144rpx;
					height: 48rpx;
					line-height: 48rpx;
					letter-spacing: 1px;
					margin-bottom: 30rpx;
				}
			}

			.activeData:nth-child(1) {
				margin-left: 15px;
			}
		}

		.title {
			font-weight: bold;
		}

		.lookMore {
			color: #666666;
			// font-size: 14px;
		}



	}
</style>