zz--front/components/recruitment.vue

<template>
	<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>
			</u-navbar>
		</view>
		<scroll-view scroll-y="true" @scroll="scroll" style="padding-top: 20rpx;" :style="'height: ' + windowHeight + 'px;'" @scrolltolower="scrollTolower">
			<swiper class="swiper" :autoplay="true" previous-margin="15px" next-margin="15px" :circular="true">
				<swiper-item v-for="(item, index) in 4" :key="index" style="padding: 0px 5px;box-sizing: border-box;">
					<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: 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>
</template>

<script>
export default {
	name: 'recruitment',
	data() {
		return {
			windowHeight: 0,
			show: false,
			tab_list: [
				{
					name: '找岗位'
				},
				{
					name: '找企业'
				}
			],
			current: 0
		};
	},
	mounted() {
		this.windowHeight = uni.getSystemInfoSync().windowHeight - 120;
		console.log(this.windowHeight);
	},
	methods: {
		init() {},
		scroll(e) {},
		scrollTolower() {},
		sectionChange(index) {
			this.current = index;
		}
	}
};
</script>

<style scoped>
.search {
	width: 40rpx;
	height: 40rpx;
	margin-left: 30rpx;
}
.slot-wrap {
	display: flex;
	align-items: center;
}
.tests {
	background-color: #00ffff;
	margin-bottom: 20rpx;
}
.swiper {
	height: 329rpx;
}
.arr-icon {
	width: 40rpx;
	height: 40rpx;
}
.popup_t1 {
	height: 29rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	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>