teaching-uniapp/pages/mineActive/mineActive.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>


		<view class="activeBox" v-for="(item,index) in activeList" :key="index">
			<view class="teaching_case">
				<view class="img">
					<!-- <image src="http://43.139.158.220:5007/img/static/activity/bg2.png" mode="aspectFill"></image> -->
					<image :src="activeList[index].img" mode="aspectFill"></image>

				</view>

				<view class="right">
					<view class="title">
						<view class="tag bqZ-font">类型</view>
						<text class="three-font" style="font-weight: 600;">{{ item.className }}</text>
					</view>

					<view class="introduce">
						{{ item.intro }}
					</view>

					<view class="operate">
						<view class="left">
							<view class="money fNum-font"><text class="three-font">￥</text> 188</view>
							<view class="person">已报名{{ item.count }}人</view>
						</view>

						<view class="Oright">
							<view class="text">查看详情</view>
							<view class="arrow">
								<image src="http://43.139.158.220:5007/img/static/mine/arrow-right-blue.png" mode="aspectFill"></image>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%;height: 50rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '我的活动',
					btn: 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: '本课程采取案例分析、研讨、游戏的方式使同学们的聪明才智能够有发挥的空间，话语权能够得到满足。通过完成团队任务的方式使大家逐渐与陌生人建立良好沟通关系，掌握沟通技巧，使自己具有使命感、懂得感恩。'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img15.jpg',
						count: '2076',
						className: '创业素质测评与团队组建',
						intro: '《创业素质测评与团队建设课程》根据心理学者荣格所提的“人格特质”理论，围绕心智结构，以特质测评为基础，让同学们运用人格特质的分析了解不同人群之间的思维差异，学会根据不同特质的人才采取不同的行为沟通模式，确定其在创业团队的角色和地位，从而更好的促进创业团队建设及创业团队能力提升。'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img16.jpg',
						count: '11390',
						className: '行业创业实践',
						intro: '行业创业实践'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img17.jpg',
						count: '1639',
						className: '创业就业指导',
						intro: '本课程是公共基础课和必修课。课程根据国务院、广东省教育厅关于高校双创教育改革实施意见的有关通知精神，结合提升学生就业、创业竞争力和发展力需求，突出就业知识与技能、创业发展及职业素养的培养。通过本课程的学习，能够使学生掌握     的基础知识，初步具备就业与创业的核心能力；并为学生在职业发展的阶段特点；较为清晰地认识自己的个性特性、职业特性；个性创业素养、个体创业能力等方面提供必要的知识。为个人的生涯发展和社会的创新推动、提高自身就业竞争力，展现良好职业素养，为今后职业发展与事业发展拓展通道。'
					},
					{
						img: 'http://43.139.158.220:5007/img/static/mine/img18.jpg',
						count: '2129',
						className: '营销管理实务与创新',
						intro: '课程基于线上线下协同的教学方式，注重提升学生自主学习、市场运营创新能力的培养，不断蓄积其专业底蕴；通过学练一体的教学模式，实现对学生营销技术素养与职业人格的协同培养，建立面向复杂市场的商业逻辑。课程线上部分共24学时，开课一学期 ；线下部分一般以24～36学时为宜。'
					},
				]
			};
		}
	}
</script>

<style lang="scss">
	.activeBox {
		width: 100%;
		background-color: #fff;
		padding: 10px 0;

		.teaching_case {
			display: flex;
			justify-content: space-between;
			padding: 0 15px;

			.img {
				width: 160rpx;
				height: 160rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.right {
				padding-left: 15px;
				flex: 1;
				display: flex;
				flex-direction: column;
				// align-content: flex-end;
				justify-content: space-between;

				.title {
					display: flex;
					align-items: center;

					margin-bottom: 5px;

					.tag {
						border: 1px #00b2b6 solid;
						// font-size: 20rpx;
						width: 64rpx;
						height: 38rpx;
						display: flex;
						white-space: nowrap;
						justify-content: center;
						align-items: center;
						padding: 1rpx 4rpx;
						border-radius: 3px;
						margin-right: 10rpx;
						color: #00b2b6;
					}

					text {
						width: 180px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				.introduce {
					width: 230px;
					font-size: 28rpx;
					color: #a7a7a7;
					// margin-top: 8px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.operate {
					display: flex;
					justify-content: space-between;
					// align-items: flex-end;
					align-items: baseline;
					// margin-top: 15px;

					.left {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: baseline;
						width: 260rpx;

						.money {
							color: #FFA338;
							font-weight: bold;
							font-size: 36rpx;
							line-height: 20px;
						}

						.person {
							color: #00000099;
							font-size: 24rpx;
							// margin-left: 6px;
						}
					}

					.Oright {
						width: 80px;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						// flex-direction: row;
						// justify-content: space-around;
						// align-items: flex-end;

						.text {
							font-size: 24rpx;
							color: #3081E8;
						}

						.arrow {
							display: flex;
							justify-content: center;
							margin-top: 5rpx;

							image {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
		}
	}
</style>