YZProjectCloud/yanzhu-ui-app/pages_loader/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="">
							<u-avatar :src="avatarsrc"></u-avatar>
						</view>
						<view class="" style="display: flex;align-items: center;justify-content: space-between;flex: 1;line-height: 40rpx;margin-left: 10rpx;">
							<view class="" style="font-size: 14px;">
								<view class="">
									张先生
								</view>
								<view class="">
									<text>25岁</text>
									<text style="margin: 0 20rpx;">本科</text>
									<text>三年</text>
								</view>
							</view>
							<view class="">
								<u-button type="success" :plain="true" shape="circle" text="沟通" style="width: 150rpx;"></u-button>
							</view>
						</view>
					</view>
					<view style="line-height: 60rpx;font-size: 14px;">
						百易信息技术  ·  JAVA开发工程师
					</view>
				</view>
				<view style="height: 30rpx;">

				</view>
			</scroll-view>
		</view>
		<tabBar :value='0' :identity='1'></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 + 44;
		},
		methods: {
			toRelease(){
				uni.navigateTo({
					url:'/pages_loader/pages/release'
				})
			},
			// 去详情
			todeil(val){
				uni.navigateTo({
					url:'/pages_loader/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>