init

components/recruitment.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view id="recruitment">
 		<view style="z-index: 999;">
 			<u-navbar title="求职中心" :is-back="false">
 				<view class="slot-wrap"><image src="/static/search.png" class="search"></image></view>
@@ -11,26 +11,48 @@
 					<view style="height: 100%;border-radius: 8px;overflow: hidden;"><image src="../static/rank_bg.png" mode="" style="width: 100%;height: 100%;"></image></view>
 				</swiper-item>
 			</swiper>
-			<view style="margin-top: 20rpx;">
+			<view style="margin: 31rpx 35rpx 24rpx">
 				<u-row gutter="16">
 					<u-col span="1">
 						<view style="padding: 5rpx;"><image src="/static/select.png" class="arr-icon" @click="show = false"></image></view>
 					</u-col>
 					<u-col span="11">
 						<view>
-							
+							<u-subsection
+								@change="sectionChange"
+								height="54"
+								button-color="rgba(47,67,121,0.6)"
+								bg-color="#F8F9FF"
+								active-color="#FFFFFF"
+								inactive-color="#636A75"
+								:list="tab_list"
+								:current="current"
+							></u-subsection>
 						</view>
 					</u-col>
 				</u-row>
 			</view>
+			<view class="boxsize" v-for="(item, index) in 8" :key="index">
+				<view class="dis_flexs">
+					<view class="imgboxs"><image style="width: 100%; height: 100%;" src="/static/avatar1.png" mode=""></image></view>
+					<view style="flex: 1;">
+						<view class="headTits">中正次时代建筑集团</view>
+						<view class="lisz">
+							<view class="bqB">广州</view>
+							<view class="bqB">广州</view>
+						</view>
+					</view>
+				</view>
+				<view class="tnsz">
+					<view class="litns">董事长秘书</view>
+					<view class="litns">董事长秘书</view>
+					<view class="moreLs">•••</view>
+				</view>
+			</view>
 		</scroll-view>
 		<u-popup v-model="show">
 			<view style="width: 600rpx"><view class="popup_t1">选择你需要的</view></view>
 		</u-popup>
-	<view style="position: relative;">
-			<u-subsection :list="tab_list1" :current="current2" button-color="rgba(47,67,121,0.6)" @change="sectionChange"></u-subsection>
-	</view>
-		
 	</view>
 </template>
 
@@ -39,21 +61,17 @@ export default {
 	name: 'recruitment',
 	data() {
 		return {
-			colorBgc: 'red',
 			windowHeight: 0,
 			show: false,
-			tab_list1: [
+			tab_list: [
 				{
-					name: '课程A'
+					name: '找岗位'
 				},
 				{
-					name: '刷题'
-				},
-				{
-					name: '重点考点'
+					name: '找企业'
 				}
 			],
-			current2: 0
+			current: 0
 		};
 	},
 	mounted() {
@@ -65,8 +83,8 @@ export default {
 		scroll(e) {},
 		scrollTolower() {},
 		sectionChange(index) {
-			this.current2 = index;
-		},
+			this.current = index;
+		}
 	}
 };
 </script>
@@ -100,4 +118,70 @@ export default {
 	color: #131b31;
 	margin: 100rpx;
 }
+.boxsize {
+	border-radius: 32rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
+	margin: 0rpx 35rpx 24rpx;
+	padding: 22rpx 20rpx;
+}
+.dis_flexs {
+	display: flex;
+	margin-bottom: 24rpx;
+}
+.dis_flexs > .imgboxs {
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 24rpx;
+	overflow: hidden;
+	margin-right: 24rpx;
+}
+.headTits {
+	font-size: 30rpx;
+	font-weight: bold;
+	color: #2a4174;
+	margin-bottom: 26rpx;
+}
+.lisz {
+	display: flex;
+	align-items: center;
+}
+.lisz > .bqB {
+	border-radius: 16rpx;
+	background-color: #f2f6ff;
+	padding: 0rpx 22rpx;
+	text-align: center;
+	height: 32rpx;
+	line-height: 32rpx;
+	margin-right: 8rpx;
+	font-size: 20rpx;
+	color: #636a75;
+}
+.tnsz {
+	display: flex;
+	align-items: center;
+}
+.litns {
+	padding: 0rpx 15rpx;
+	margin-right: 24rpx;
+	border-radius: 16rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	background-color: #32467b;
+	color: #fff;
+	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(47, 67, 121, 0.05);
+	font-size: 26rpx;
+	font-weight: bold;
+}
+.moreLs {
+	border-radius: 16rpx;
+	font-size: 26rpx;
+	font-weight: bold;
+	color: #32467b;
+	border: 1rpx solid #32467b;
+	padding: 0rpx 11rpx;
+	height: 48rpx;
+	letter-spacing: 1rpx;
+	line-height: 40rpx;
+}
 </style>

pages/index/index.vue

@@ -4,7 +4,7 @@
 		<recruitment v-show="current == 1" ref="recruitment"></recruitment>
 		<my v-show="current == 2" ref="refMy"></my>
 
-		<u-tabbar v-model="current" :list="list" active-color="#2F4379" :before-switch="beforeSwitch"></u-tabbar>
+		<u-tabbar v-model="current" :safe-area-inset-bottom="true" :list="list" active-color="#2F4379" :before-switch="beforeSwitch"></u-tabbar>
 	</view>
 </template>