<template>
	<view>
		<u-navbar :back-text="info.title" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		
		<!-- 内容 -->
		<view class="main">
			 <view class="headline">
				{{info.title}}
			</view>
			<view class="title">
				培训详情
			</view>
			<!-- <view class="picture">
				<img src="@/assets/img/traniningPicture.png" alt="">
			</view> -->
			<!-- 详细信息 -->
			<view class="details" v-html="info.content">
				
			</view>

		</view>

		<!-- 资料 -->
	<!-- 	<view class="data">
			<view class="title">
				培训资料
			</view>
			<u-line color="#e6e6e6" />
			<view class="class">
				<view class="text">
					育婴师资格证（高级）培训课程表
				</view>
				<view class="download">
					<view class="icon">
						<img src="@/assets/img/md-file_download@1x.png" alt="">
					</view>
					<view class="download-text">
						下载
					</view>
				</view>
			</view>

		</view> -->

		<!-- 报名按钮 -->
		<view class="bottom">
			<button class="sign-up">我要报名</button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				id: "",
				info: {

				},
			}
		},
		onLoad(op) {
			this.id = op.id
			this.getInfo()
		},
		methods: {
			getInfo(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.trainingDetail({
					id: this.id,
				}).then((res) => {
					uni.hideLoading();
					this.info=res.data.trainingInfo;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 120px;
	}
</style>
<style lang="scss" scoped>
	.background {
		width: 100%;
		height: 376rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	// 内容
	.main {
		padding: 40rpx 32rpx;
		background-color: #fff;

		// 标题
		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 40rpx;
			font-family: 'PingFangSC-medium';
		}

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-family: 'PingFangSC-medium';
			margin-top: 40rpx
		}

		// 图片
		.picture {
			border-radius: 4px;
			width: 100%;
			height: 256rpx;
			margin-top: 50rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		// 详细信息
		.details {
			margin-top: 40rpx;
			line-height: 48rpx;
			color: rgba(51, 51, 51, 1);
		}
	}

	// 资料
	.data {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 24rpx 32rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.class {
			margin-top: 40rpx;
			border-radius: 5px;
			background-color: rgba(245, 245, 245, 1);
			padding: 28rpx 24rpx;
			color: #101010;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.download {
				display: flex;
				align-items: center;
				color: rgba(22, 119, 255, 1);

				img {
					vertical-align: middle;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	// 报名按钮
	.bottom {
		background-color: #fff;
		padding: 24rpx 32rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.sign-up {

			height: 96rpx;
			line-height: 96rpx;
			border-radius: 8px;
			background-color: rgba(39, 149, 253, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			text-align: center;
		}
	}
</style>