veterans_H5/h5_web/pages/skillsTraining/skillsPackage/skillsPackage.vue

<!-- 技能包 -->
<template>
	<view class="package">

		<!-- 背景 -->
		<view class="package-bg">
			<view class="package-bg-1"></view>
			<view class="package-bg-2"></view>
		</view>

		<!-- 内容 -->
		<view class="package-content">

			<view class="package-content-title">
				<view class="left">
					<u-image src="https://img.redocn.com/sheying/20141029/changluqiuye_3346993.jpg" width="204"
						height="220" border-radius="10"></u-image>
					<view class="left-weekly">培训周期：2个月</view>
				</view>
				<view class="right">
					<view class="name">
						<view class="tip">汽修</view>
						<view class="professional">汽车检测与维修培训</view>
					</view>
					<view class="class"><text>汽车检测与维修班</text>2021.10.20</view>
					<view>培训学校：贵州工业职业技术学院</view>
					<view>培训导师：张子瑜</view>
					<view class="hardly">
						难度<u-rate :count="5" v-model="details.star" size="24" active-color="#EF651F"
							inactive-color="#EF651F"></u-rate>
						报名人数：10/20
					</view>
					<view class="status">未开班</view>
				</view>
			</view>

			<view class="package-content-details">
				<!-- 精选课程 -->
				<view class="package-content-details-classes">
					<view class="title">
						<view>
							<text>精选课程</text>精彩教学视频
						</view>
						<view @click="jumpPage('/pages/skillsTraining/skillsTrainingCourse/skillsTrainingCourse')">更多
							<u-icon name="arrow-right" color="#9D9D9D"></u-icon>
						</view>
					</view>
					<view class="list">
						<swiper class="swiper" :indicator-dots="false" :autoplay="false" height="196rpx">
							<swiper-item class="swiper-item" v-for="(item, index) in details.classesList" :key="index" @click="jumpPage('pages/skillsTraining/courseDetailed/courseDetailed')">
								<u-image :src="item.img" width="95%" height="196" mode="aspectFill"
									border-radius="10" />
								<view class="classes-name">{{ item.name }}</view>
								<view class="classes-subtitle">{{ item.subtitle }}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 技能详解 -->
				<view class="package-content-details-skill">
					<view class="title">
						<view>
							<text>技能详解</text>深入了解本课程
						</view>
					</view>
					<view class="content">
						<u-parse :html="details.content"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<view class="package-btn" @click="jumpPage('/pages/skillsTraining/submitSuccess/submitSuccess')">报名</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {
					star: 3,
					classesList: [{
							img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg',
							name: '解锁！轮胎更换诀窍',
							subtitle: '线上课程'
						},
						{
							img: 'https://img.redocn.com/sheying/20160805/caoyuanshaoyaohuahuahai_6869505.jpg',
							name: '解锁！轮胎更换诀窍',
							subtitle: '线上课程'
						},
						{
							img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg',
							name: '解锁！轮胎更换诀窍',
							subtitle: '线上课程'
						},
						{
							img: 'https://file03.16sucai.com/2017/1100/16sucai_p20161119096_1e4.JPG',
							name: '解锁！轮胎更换诀窍',
							subtitle: '线上课程'
						}
					],
					content: `<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />`
				}
			}
		},
		methods: {
			/**
			 * 跳转到指定页面
			 * @param {Object} url
			 * @param {Object} params
			 */
			jumpPage(url, params) {
				this.$u.route({
					url,
					params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './skillsPackage.scss';
</style>