jp-zeroWorkerStation/pages/skillTraining/trainingRegistration.vue

<template>
	<view>
		<u-navbar back-text="育婴师资格证（高级）认证..." back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<view class="background">
			<img src="../../assets/img/trainingBackground.png" alt="">
		</view>
		<!-- 内容 -->
		<view class="main">
			<view class="headline">
				育婴师资格证（高级）认证机构培训
			</view>
			<view class="title">
				培训详情
			</view>
			<view class="picture">
				<img src="../../assets/img/traniningPicture.png" alt="">
			</view>
			<!-- 详细信息 -->
			<view class="details">
				<view class="introduce">
					培训详细介绍培训详细介绍培训详细介绍培训详细介绍培训详细介绍培训详细介绍培训详细介绍培训详细介绍培训详细介绍，培训详细介绍培训详细介绍培训详细介绍培训详细介绍。
				</view>
				<p>报名日期：2021-06-18至2021-06-20</p>
				<p>培训日期：2021-06-21至2021-06-22</p>
				<p>培训地点：开发区管委会培训中心</p>
				<p>联系电话：0716-8123456</p>
			</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>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</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>