Browse Source

培训报名

常志远 2 years ago
parent
commit
73cd013b5d

BIN
assets/img/md-file_download@1x.png


BIN
assets/img/trainingBackground.png


+ 11 - 1
pages.json

@@ -136,5 +136,15 @@
 		"navigationBarTitleText": "荆开零工驿站",
 		"enablePullDownRefresh": false
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {},
+	"condition" : { //模式配置,仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [
+			{
+				"name": "", //模式名称
+				"path": "", //启动页面,必选
+				"query": "" //启动参数,在页面的onLoad函数里面得到
+			}
+		]
+	}
 }

+ 156 - 1
pages/skillTraining/trainingRegistration.vue

@@ -1,6 +1,60 @@
 <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>
 
@@ -16,7 +70,108 @@
 		}
 	}
 </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>