YZProjectCloud/yanzhu-ui-app/pages/index.vue

<template>
	<view class="work-container">
		<homebar titlenav="职位"></homebar>
		<view>
	<!-- 		<view class="" style="margin: 20rpx;display: flex;align-items: center;">
				<u--input prefixIcon="search" shape="circle" placeholder="请输入关键字">
					<template slot="suffix">
						<u-button shape="circle" text="搜索" type="success"
							style="width: 150rpx;height: 60rpx;"></u-button>
					</template>
				</u--input>
				<text style="margin: 0 10rpx;" @click="toRelease">发职位</text>
			</view> -->
			<view class="">
				<u-tabs :list="tabList" @click="tabClick" :activeStyle="{
								fontSize: '20px',
								color:'#000000'
					        }" :inactiveStyle="{
					            fontSize: '20px',
					        }"></u-tabs>
				<view>
					<u-tabs :list="tabListof" lineWidth="0" :activeStyle="{
					            color: '#000000',
								fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" :inactiveStyle="{
					            color: '#606266',
					            transform: 'scale(1)'
					        }" itemStyle="height: 34px;">
						<view slot="right" style="padding-right: 20rpx;" @tap="$u.toast('插槽被点击')">
							筛选
						</view>
					</u-tabs>
				</view>
			</view>
			<scroll-view :style="{height:`calc( 100vh - ${safeAreaInsetsTop + 100}px)`}" scroll-y="true"
				refresher-enabled="true" :refresher-triggered='triggered' @refresherpulling="onPulling"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
				<view class="item_class" @click="todeil({id:0})">
					<view class="" style="display: flex;align-items: center;">
						<view class="" style="display: flex;align-items: center;justify-content: space-between;flex: 1;line-height: 60rpx;margin-left: 10rpx;">
							<view class="" style="font-size: 14px;">
								<view class="">
									Java开发工程师 日结
								</view>
								<view class="">
									
								</view>
							</view>
							<view class="">
								400/天
							</view>
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view class="" style="display: flex;align-items: center;justify-content: space-between;flex: 1;line-height: 60rpx;margin-left: 10rpx;">
							<view class="" style="font-size: 14px;">
								<view class="">
									公司名称 20人以下
								</view>
								<view class="" style="display: flex;">
									<view class="">
										<u-tag text="本科" plain size="mini"></u-tag>
									</view>
									<view class="" style="margin: 0 30rpx;">
										<u-tag text="5年经验" plain size="mini"></u-tag>
									</view>
									<view class="">
										<u-tag text="JAVA" plain size="mini"></u-tag>
									</view>
								</view>
							</view>
							<view class="">
								<u-button type="primary" :plain="true" shape="circle" text="沟通" style="width: 150rpx;"></u-button>
							</view>
						</view>
						
					</view>
					<view class="" style="margin: 20rpx 0;">
						招聘要求：xxxxxxxxxxxxxx
					</view>
					<view style="line-height: 60rpx;font-size: 14px;display: flex;justify-content: space-between">
						<view class="" style="display: flex;">
							<u-avatar :src="avatarsrc" size="30"></u-avatar>
							<view class="" style="margin-left: 20rpx;">
								张先生
							</view>
						</view>
						<view class="">
							工作地址
						</view>
					</view>
				</view>
				<view style="height: 30rpx;">

				</view>
			</scroll-view>
		</view>
		<tabBar :value='0' :identity='0'></tabBar>
	</view>

</template>

<script>
	import tabBar from "@/components/tabbar.vue"
	import config from '@/config.js'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				safeAreaInsetsTop: 0,
				triggered: false,
				avatarsrc:'/static/nav.png',
				tabList: [{
					name: 'JAVA',
				}, {
					name: '前端开发',
				}],
				tabListof: [{
					name: '推荐',
				}, {
					name: '附近',
				}],
			}
		},
		onShow() {
			this.safeAreaInsetsTop = uni.getSystemInfoSync().safeAreaInsets.top + 50 + 44;
		},
		methods: {
			// toRelease(){
			// 	uni.navigateTo({
			// 		url:'/pages_loader/pages/release'
			// 	})
			// },
			// 去详情
			todeil(val){
				uni.navigateTo({
					url:'/pages/listdeil/index?id=' + val.id
				})
			},
			//顶部tab切换
			tabClick(e) {
				console.log(e, '顶部tab切换');
			},
			getlist() {
				this.triggered = false
			},
			//下拉刷新
			onRefresh() {
				this.triggered = true
				this.getlist();
			},
			//开始结束下拉的函数
			onRestore() {
				this.triggered = 'restore'; // 关闭动画
			},
			//下拉过程的函数
			onPulling() {

			},
			onAbort() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fcfeff;
	}

	.work-container {
		height: 100vh;
		// padding: 0 20rpx;
		font-size: 30rpx;
		overflow: hidden;
		background-size: 100%;
		background-repeat: no-repeat;

		.item_class {
			margin: 40rpx 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			box-shadow: 0px 0px 8px rgba(38, 38, 38, 0.08);
		}
	}
</style>