jp-zeroWorkerStation/pages/packages/skillTraining/skillTraining.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="content">
		  <!-- 图片 -->
		  <view class="picture">
		  	<img src="@/assets/img/traniningPicture.png" alt="">
		  </view>
		  <u-line  color="#e6e6e6"/>
	  	<!-- 标题 -->
		<view class="title">
			育婴师资格证（高级）认证机构培训
		</view>
		<!-- 报名状态 -->
		<view class="state">
			开放报名
		</view>
	  </view>
	  
	  <view class="content">
	  		  <!-- 图片 -->
	  		  <view class="picture">
	  		  	<img src="@/assets/img/traniningPicture.png" alt="">
	  		  </view>
	  		  <u-line  color="#e6e6e6"/>
	  	<!-- 标题 -->
	  		<view class="title">
	  			育婴师资格证（高级）认证机构培训
	  		</view>
	  		<!-- 报名状态 -->
	  		<view class="state state2">
	  			开放报名
	  		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>

<style lang="scss" scoped>
	.content{
		margin: 24rpx 32rpx 0;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 24rpx;
		.picture{
			width: 100%;
			height: 240rpx;
			margin-bottom: 24rpx;
		
			img{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			margin-top: 24rpx;
		}
		// 报名状态
		.state{
			color: rgba(0, 185, 98, 1);
			font-size: 24rpx;
			margin-top: 60rpx;
		}
		.state2{
			color: rgba(153, 153, 153, 1);
		}
	}

</style>