个人招工页面

pages/recruit/reform.vue

@@ -1,6 +1,18 @@
 <template>
 	<view class="container">
-		<img class="top-banner" src="" alt="" />
+		<view class="wrapper" style="position: relative;">
+			<view class="top-title">在线提交招工需求</view>
+			<view class="tips">
+				<span>专属就业帮扶人</span>
+				<span>为您提供一对一撮合服务</span>
+			</view>
+			<!-- <img  src="../../static/img/index/bannerBg.png" alt="" /> -->
+			<view class="bottom">
+				<img src="../../static/img/safe_icon.png" style="width: 40rpx;margin: 0 20rpx" alt="" />
+				<span>招工快.干活好.纠纷少.隐私保护</span>
+			</view>
+		</view>
+		
 		<view class="form-wrapper">
 			<view class="require">您的招工需求</view>
 			<u--textarea v-model="value2" height="140" placeholder="请输入内容" count ></u--textarea>
@@ -47,9 +59,49 @@
 
 <style lang="scss">
 .container {
-	.top-banner {
+	.wrapper {
 		width: 100%;
 		height: 300rpx;
+		background: url(@/static/img/index/bannerBg.png) no-repeat center center;
+		background-size: 100% 100%;
+		.top-title {
+			font-size: 34rpx;
+			color: #372E33;
+			font-weight: bold;
+			position: absolute;
+			left: 20rpx;
+			top: 30rpx;
+		}
+		.tips {
+			position: absolute;
+			left: 20rpx;
+			top: 90rpx;
+			font-size: 26rpx;
+			color: #999;
+			display: flex;
+			flex-direction: column;
+			background-color: #E4F2FD;
+			padding: 15rpx;
+			border-radius: 10rpx;
+		}
+		.bottom{
+			position: absolute;
+			display: flex;
+			align-items: center;
+			justify-content: left;
+			color: #7C401E;
+			font-size: 28rpx;
+			left: 5%;
+			bottom: 0;
+			right: 5%;
+			height: 80rpx;
+			background: linear-gradient(to right, #FFEEDA, #FED38F);;
+			border-top-left-radius: 20rpx;
+			border-top-right-radius: 20rpx;
+		}
+	}
+	.top-banner {
+		
 	}
 	.form-wrapper {
 		padding: 20rpx;