jp-zeroWorkerStation/pages/index/index.vue

<template>
	<view>
		<u-navbar back-text="荆开零工驿站"  :background="background" :back-text-style="backColor"></u-navbar>



		<!-- 头部 -->
		<view class="top">
			<!-- 搜索框 -->
			<view class="search">
				<u-search placeholder="请输入找工关键字" v-model="keyword" :show-action="false"></u-search>
			</view>

		</view>
		<!-- 幻灯片 -->
		<view class="swiper">
			<u-swiper :list="list"></u-swiper>

		</view>
		<!-- 功能区 -->
		<view class="function">
			<view class="function-item">
				<view class="icon-box">

					<view class="icon">
						<img src="../../assets/img/riFill-cloud-fill@1x.png" alt="">

					</view>

				</view>
				<view class="item-text">
					共享用工
				</view>
			</view>
			<view class="function-item">
				<view class="icon-box icon-box2">

					<view class="icon">
						<img src="../../assets/img/riFill-heart-2-fill@1x.png" alt="">
					</view>

				</view>
				<view class="item-text">
					爱心驿站
				</view>
			</view>
			<view class="function-item">
				<view class="icon-box icon-box3">

					<view class="icon">
						<img src="../../assets/img/riFill-contacts-book-2-fill@1x.png" alt="">
					</view>

				</view>
				<view class="item-text">
					零工驿站
				</view>
			</view>
			<view class="function-item">
				<view class="icon-box icon-box4">
			
					<view class="icon">
						<img src="../../assets/img/riFill-tools-fill@1x.png" alt="">
					</view>
			
				</view>
				<view class="item-text">
					技能培训
				</view>
			</view>
			<view class="function-item">
				<view class="icon-box icon-box5">

					<view class="icon">
						<img src="../../assets/img/riFill-newspaper-fill@1x.png" alt="">
					</view>

				</view>
				<view class="item-text">
					政策发布
				</view>
			</view>


		</view>
		
		<!-- 标签 -->
		<view class="tabs">
			<view class="title">
				<u-tabs bg-color="#F0F0F2" :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			   <view class="more">
			   	更多
				<u-icon name="arrow-right"></u-icon>
			   </view>
			
			</view>
			<!-- 卡片 -->
			<view class="classify-card">
				<view class="item" v-for="item in 3">
					<view class="content-1">
						<!-- 职位 -->
						<view class="position">
							摄影助理
						</view>
						<!-- 薪水 -->
						<view class="salary">
							200元/天
						</view>
					</view>
					<view class="content-2">
						<!-- 标签 -->
						<view class="tag">
							<view class="tag-item">
								个人
							</view>
							<view class="tag-item">
								日结
							</view>
						</view>
						<!-- 日期 -->
						<view class="date">
							2023-06-01
						</view>
					</view>
					<view class="content-3">
						<view class="issuer">
							李先生
						</view>
						 <view class="address">
						 	锦佳酒店
						 </view>
					</view>
				</view>
				
			</view>
			
		</view>
		<tabbar  ref="mytabbar"
		:current="0"></tabbar>
	</view>



</template>

<script>
	import tabbar from "../../components/Tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				keyword: '',
				// 导航栏背景
				background: {
					backgroundColor: '#2795FD',
				},
				backColor: {
					color: '#ffffff'
				},
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
					tabList: [{
									name: '最新'
								}, {
									name: '日结'
								}, {
									name: '周结',
									
								},{
									name:'月结'
								}],
								
             current:0
			}
		},
		onLoad() {

		},
		methods: {
        change(index) {
        				this.current = index;
        			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>
<style scoped lang="scss">
	/deep/.u-navbar {
		.u-icon--right {
			display: none !important;
		}
	}

	// 头部
	.top {
 
		// 搜索框
		.search {
			background-color: rgba(39, 149, 253, 1);
			padding: 16rpx 32rpx;

		}

	}

	// 功能区
	.function {
		background-color: #fff;
		padding: 32rpx 46rpx;
		display: flex;
		justify-content: space-between;

		.function-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon-box {
				width: 96rpx;
				height: 96rpx;
				background-color: rgba(240, 233, 255, 1);
				text-align: center;
				border-radius: 999px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.icon-box2 {
				background-color: rgba(255, 234, 230, 1);
			}

			.icon-box3 {
				background-color: rgba(227, 246, 255, 1);
			}

			.icon-box4 {
				background-color: rgba(255, 242, 224, 1);
			}
			.icon-box5 {
				background-color: rgba(221, 247, 238, 1);
			}


			.icon {
				width: 48rpx;
				height: 48rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.item-text {
				color: rgba(51, 51, 51, 1);
				margin-top: 8rpx;
				font-family: 'PingFang Medium';
			}
		}
	}

// 标签
.tabs{
	margin-top: 32rpx;
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 24rpx;
		/deep/.u-tabs{
			width: 400rpx;
		}
		.more{
			color: rgba(119, 119, 119, 1);
		}
	}
	.classify-card{
		background-color: #fff;
		.item{
			padding: 24rpx 0;
			margin: 0 32rpx;
			border-bottom: 1px solid #F0F0F2;
			.content-1{
				display: flex;
				justify-content: space-between;
				align-items: center;
				// 职位
				.position{
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					font-family: 'PingFang Medium';
				}
				// 薪水
				.salary{
					color: rgba(255, 61, 0, 1);
					font-size: 32rpx;
					font-family: 'PingFang Medium';
				}
			}
		
		    .content-2{
				margin-top: 12rpx;
				display: flex;
				justify-content: space-between;
				// 标签
				.tag{
					display: flex;
					.tag-item{
						width: 64rpx;
						height: 36rpx;
						line-height: 36rpx;
						border-radius: 8rpx;
						background-color: rgba(241, 241, 247, 1);
						color: rgba(129, 127, 153, 1);
						font-size: 24rpx;
						text-align: center;
						margin-right: 12rpx;
					}
				}
				// 日期
				.date{
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
				}
			}
		
		    .content-3{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.issuer{
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
				}
				.address{
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
				}
			}
		
		}
	}
}

</style>