yunshengtai-uniapp/pages/demandHall/supplyHall/index.vue

<template>
	<view class="supplyHall-page">
		<!-- 导航栏 -->
		<view class="navigation-box">
			<view class="search-box acea-row row-middle" >
				<image src="../../../static/images/search-icon.png" mode=""></image>
				<input type="text" value="" placeholder="请输入相关关键词"/>
				<view class="search acea-row row-center-wrapper">搜一下</view>
			</view>
			<view class="resource-tabs acea-row">
			  <view  :class="'tab ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">需求广场</view>
				<view  :class="'tab ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">供应广场</view>
				<view class="screen-box acea-row row-between-wrapper" >
				 <!-- <view class="screen-result">
				    {{choseCagetory}}
				    <text v-if="choseCagetory != '' && choseBusiness != ''">-</text>
				    {{choseBusiness}}
				  </view> -->
				  <view class="screen acea-row row-middle">
				    <text>筛选</text>
				    <image src="/static/images/home/screen.png"></image>
				  </view>
				</view>
			</view>
			
		</view>
		<view class="supplyHall-box" >
			<view class="resource-box" v-if="active == 1" >
				<!-- 个人 -->
				<view class="personal-list" v-for="(item,index) in 2" :key="index">
					<image src="../../../static/images/backhome.png" mode="" class="lable-img"></image>
					<view class="user-info acea-row row-middle">
						<image src="../../../static/images/cart.png" mode="" class="head-img"></image>
						<view class="user-name">大老虎</view>
						<view class="user-address">武汉</view>
						<view class="user-price">￥20,000</view>
					</view>
					<view class="supply-con">李先生需要景区方面资源，洽谈相关合作</view>
					<view class="supply-screen acea-row">
						<view class="tag-item-b tag">商务合作</view>
						<view class="tag-item-y tag">场地租赁</view>
					</view>
					<view class="time-end">2021.8.30截止报名</view>
					<view class="todetails">查看详情</view>
				</view>
				<!-- 企业 -->
				<view class="enterprise-list">
					<image src="../../../static/images/act-time.png" mode="" class="lable-img"></image>
					<view class="title-h">招聘前端工程师若干名</view>
					<view class="enterprise-price">2K-10K</view>
					<view class="supply-screen acea-row">
						<view class="tag-item-y tag">网站建设</view>
						<view class="tag-item-p tag">APP开发</view>
						<view class="time-end-t">2021.8.30截止报名</view>
					</view>
					<view class="user-info acea-row row-middle">
						<image src="../../../static/images/cart.png" mode="" class="head-logo"></image>
						<view class="user-name">湖北知音动漫有限公司</view>
					</view>
					<view class="todetails">查看详情</view>
				</view>
			</view>
			<view class="company-box" v-if="active == 2">
				<view class="personal-list">
					<image src="../../../static/images/backhome.png" mode="" class="lable-img"></image>
					<view class="user-info acea-row row-middle">
						<image src="../../../static/images/cart.png" mode="" class="head-img"></image>
						<view class="user-name">大老虎</view>
						<view class="user-address">武汉</view>
						<view class="user-price">￥20,000</view>
					</view>
					<view class="supply-con">李先生需要景区方面资源，洽谈相关合作</view>
					<view class="supply-screen acea-row">
						<view class="tag-item-b tag">商务合作</view>
						<view class="tag-item-y tag">场地租赁</view>
					</view>
					<view class="time-end">2021.8.30截止报名</view>
					<view class="todetails">查看详情</view>
				</view>
				<view class="enterprise-list">
					<image src="../../../static/images/act-time.png" mode="" class="lable-img"></image>
					<view class="enterprise-con acea-row">
						<view><image src="../../../static/images/home/menu6.png" class="enterprise-img"></image></view>
						<view class="content-right">
							<view>APP开发平台搭建外卖小程序返现H5定制一站式解决</view>
							<view class="supply-screen acea-row">
								<view class="tag-item-b tag">商务合作</view>
								<view class="tag-item-y tag">场地租赁</view>
							</view>
							<view class="user-price">￥20,000</view>
						</view>
					</view>
					<view class="user-info acea-row row-middle">
						<image src="../../../static/images/cart.png" mode="" class="head-logo"></image>
						<view class="user-name">湖北知音动漫有限公司</view>
					</view>
					<view class="todetails">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      active: '1',
			}
		},
		methods:{
			tabClick(e) {
				this.setData({
					active: e.currentTarget.dataset.i,
				}) 
			},
			
		}
	}
</script>

<style>
 .supplyHall-page{
	 width: 100%;
	 min-height: 100vh;
	 background: #F5F5F5;
	 font-size: 28rpx;
 }
 /* 导航栏 */
 .navigation-box{
	 width: 100%;
	 height: auto;
	 background: #fff;
	 padding-top: 20rpx;
 }
 .search-box{
 	 width: 670rpx;
 	 height: 68rpx;
 	 border: 2rpx solid #FF5100;
 	 border-radius: 8rpx;
	 margin: 0 auto;
 }
 .search-box image{
 	 width: 35rpx;
 	 height: 35rpx;
 	 margin: 0 29rpx 0 52rpx;
 }
 .search{
 	 margin-left: auto;
 	 width: 132rpx;
 	 height: 68rpx;
 	 background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%);
 	 border-radius: 8rpx;
 	 color: #fff;
 }
 .resource-tabs{
   width: 100%;
   padding-top: 10rpx;
   background: #fff;
   border-bottom: 2rpx solid #EEEEEE;
	 padding-left: 20rpx;
 }
 .tab{
   width: 150rpx;
   padding: 26rpx 0;
   font-size: 32rpx;
   color: #BFBFBF;
   position: relative;
   font-weight: 500;
	 text-align: center;
	 margin-left: 115rpx;
 }
 .tab::after{
   display: block;
   content: '';
   width: 80rpx;
   height: 8rpx;
   border-radius: 8rpx;
   background: #FF5100;
   position: absolute;
   bottom: 0rpx;
   left: 50%;
   margin-left: -40rpx;
   opacity: 0;
   transform:scaleX(0);
   transition: all .2s ease,opacity .15s ease;
 }
 .tab-a{
	 color: #FF5100;
 }
 .tab-a::after{
   opacity: 1;
   transform: scaleX(1);
 }
 
 .screen-box{
   height: 94rpx;
   padding: 0 38rpx;
   color: #666;
   background: #fff;
	 margin-left: auto;
 }
 .screen-result{
   color: #FF5100;
 }
 .screen image{
   width: 27rpx;
   height: 27rpx;
   margin-left: 6rpx;
 }
 .supplyHall-box{
	 width: 670rpx;
	 margin: 0 auto;
 }
 .resource-box{
	 width: 100%;
 }
 /* 个人 */
 .personal-list{
	 width: 100%;
	 border-radius: 12rpx;
	 background: #FFF;
	 position: relative;
	 margin-top: 34rpx;
 }
 .lable-img{
	 width: 60rpx;
	 height: 32rpx;
	 background: #FFFFFF;
	 border-radius: 12rpx;
 }
 .user-info{
	 margin: 8rpx 0 0rpx 20rpx;
	 padding-bottom: 16rpx;
 }
 .head-img{
	 width: 64rpx;
	 height: 64rpx;
 }
 .user-name{
	 height: 40rpx;
	 color: #1D1D1D;
	 margin: 0 10rpx 0 16rpx;
 }
 .user-address{
	 width: 80rpx;
	 height: 28rpx;
	 line-height: 28rpx;
	 background: #FF5100;
	 border-radius: 16rpx;
	 font-size: 24rpx;
	 color: #FFFFFF;
	 text-align: center;
 }
 .user-price{
	 position: absolute;
	 right: 58rpx;
	 height: 40rpx;
	 color: #FF5100;
 }
 .supply-con{
	 height: 40rpx;
	 color: #1D1D1D;
	 margin: 0 0 16rpx 20rpx;
 }
 .supply-screen{
	 margin: 8rpx 0 12rpx 20rpx;
 }
 .tag{
	 width: 112rpx;
	 height: 36rpx;
	 border-radius: 4rpx;
	 font-size: 20rpx;
	 margin-right: 8rpx;
	 text-align: center;
 }
 .tag-item-b{
	 border: 1rpx solid #3A9EFA;
	 color: #3A9EFA;
 }
 .tag-item-y{
	 border: 1px solid #FFAA00;
	 color: #FFAA00;	 
 }
 .tag-item-p{
	 color: #FC9367;
	 border: 1px solid #FC9367;
 }
 .time-end{
	 height: 34rpx;
	 font-size: 24rpx;
	 color: #707070;
	 margin-left: 20rpx;
	 padding-bottom: 65rpx;
 }
 .todetails{
	 width: 148rpx;
	 height: 44rpx;
	 line-height: 44rpx;
	 background: linear-gradient(141deg, #FFA782 0%, #FF6D31 100%);
	 border-radius: 8rpx;
	 position: absolute;
	 right: 18rpx;
	 bottom: 38rpx;
	 text-align: center;
	 color: #fff;
 }

 /* 企业 */
 .enterprise-list{
	 width: 670rpx;
	
	 background: #FFFFFF;
	 margin: 0 auto;
	 margin-top: 32rpx;
	 border-radius: 12rpx;
	 position: relative;
 }
 .title-h{
	 width: 456rpx;
	 height: 44rpx;
	 font-size: 32rpx;
	 color: #1D1D1D;
	 margin: 0rpx 0 5rpx 24rpx;
 }
 .enterprise-price{
	 height: 40rpx;
	 font-size: 28rpx;
	 color: #FF5100;
	 margin-left: 24rpx;
 }
 .head-logo{
	 width: 72rpx;
	 height: 72rpx;
 }
 .time-end-t{
	 position: absolute;
	 right: 15rpx;
	 height: 34rpx;
	 font-size: 24rpx;
	 color: #707070;
 }
 .enterprise-con{
	 width: 100%;
	 height: 192rpx;
	 margin: 6rpx 20rpx 10rpx 20rpx;
 }
 .enterprise-img{
	 width: 150rpx;
	 height: 192rpx;
	 margin-right: 30rpx;
 }
 .content-right{
	 width: 456rpx;
	 position: relative;
 }
 .content-right>.supply-screen{
	 margin: 16rpx 0 20rpx 0;
 }
 .content-right>.user-price{
	 left: 0;
 }
</style>