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

<template>
	<view class="business-page">
		<!-- 搜索 -->
		<view class="search-box acea-row row-middle">
			<image src="../../../static/images/search-icon.png" mode="" class="search-icon"></image>
			<input type="text" value="" placeholder="请输入相关关键词" />
			<view class="search acea-row row-center-wrapper">搜一下</view>
		</view>
		<!-- 供需大厅 企业服务 项目投融 -->
		<view class="acea-row row-around pa40">
			<view class="img1">
				<image src="../../../static/images/business-img1.png" @tap="toSupplyHall"></image>
			</view>
			<view class="img2 acea-row row-column-between">
				<image src="../../../static/images/business-img2.png" @tap="toEnterpriseServer"></image>
				<image src="../../../static/images/business-img3.png" @tap="toDemoInvestment"></image>
			</view>
		</view>

		<!-- 商业简报 -->
		<view class="news-box acea-row row-middle">
			<image src="../../../static/images/business-news.png" class="news-img"></image>
			<view>
				<view class="news-con acea-row row-middle">
					<image src="../../../static/images/hot-icon.png"></image>2021中国酒店与商用厨具行业品牌盛即将召开
				</view>
				<view class="news-con acea-row row-middle">
					<image src="../../../static/images/rem-icon.png"></image>2021如何具有商业思维？
				</view>
			</view>
		</view>

		<!-- 优质企业 -->
		<view class="company-box">
			<view class="title-con acea-row">
				<image src="../../../static/images/business-title1.png" class="title-img"></image>
				<view class="update-icon acea-row row-center-wrapper">
					<image src="../../../static/images/update-icon.png" mode=""></image>换一批
				</view>
			</view>
			<scroll-view class="scroll-view_H acea-row" scroll-x="true">
				<view class="company-list" v-for="(item,index) in 6">
					<view class="title">楚象科技有限公司</view>
					<view class="category-box acea-row">
						<view class="tag-item-b tag">持续盈利</view>
						<view class="tag-item-y tag">财务规范</view>
						<view class="tag-item-p tag">零负债</view>
					</view>
					<view class="title-s">以领先科技，致力于推动客户成功</view>
					<view class="acea-row">
						<image src="../../../static/images/business-img1.png" class="company-logo"></image>
						<view class="todetails">了解详情</view>
					</view>

				</view>
			</scroll-view>
		</view>

		<!-- 推荐服务 -->
		<view class="service-box">
			<view class="title-con acea-row row-middle">
				<image src="../../../static/images/business-title2.png" class="title-img"></image>
				<image src="../../../static/images/fabu-close.png" class="toadd" @tap="toAuthentication"></image>
			</view>
			<view class="service-top acea-row row-between">
				<view class="service-nub-left acea-row row-column-between">
					<view class="tips">我要开发小程序</view>
					<view class="tips-item">最快一个月进入测试阶段</view>
					<image src="../../../static/images/business-img1.png" mode=""></image>
				</view>
				<view class="acea-row row-between service-nub-right">
					<view class="acea-row row-center-wrapper module-nub">
						<view class="tips">我要H5定制</view>
						<view class="tips-item">最快半个月进入测试阶段</view>
					</view>
					<view class="module-box  acea-row row-center-wrapper">
						<view class="tips">装修服务</view>
						<view class="tips-item">房屋装修</view>
					</view>
					<view class="module-box acea-row row-center-wrapper">
						<view class="tips">装修服务</view>
						<view class="tips-item">房屋装修</view>
					</view>
				</view>
			</view>
			<view class="service-bottom acea-row row-between">
				<view class="module-box bg-red acea-row row-center-wrapper">
					<view class="tips">装修服务</view>
					<view class="tips-item">房屋装修</view>
				</view>
				<view class="module-box bg-blue acea-row row-center-wrapper">
					<view class="tips">装修服务</view>
					<view class="tips-item">房屋装修</view>
				</view>
				<view class="module-box bg-yellow acea-row row-center-wrapper">
					<view class="tips">装修服务</view>
					<view class="tips-item">房屋装修</view>
				</view>
				<view class="tolearn acea-row row-center-wrapper">装修服务</view>
			</view>
		</view>

		<!-- 优质项目 -->
		<view class="project-box">
			<image src="../../../static/images/business-title3.png" class="title-img"></image>
			<view class="project-list acea-row" v-for="(item,index) in 3">
				<image src="../../../static/images/business-img1.png" mode="" class="project-img"></image>
				<view class="right-con acea-row row-column-between">
					<view class="acea-row row-middle title">
						<image src="../../../static/images/new-icon.png" mode="" class="new-icon">
						</image>
						<view class="title-h">富硒产品</view>
					</view>
					<view class="title-s line1">农业项目、国家扶贫、乡村振兴、国家红利</view>
					<view class="category-box acea-row">
						<view class="tag-item-y tag">持续盈利</view>
						<view class="tag-item-b tag">财务规范</view>
						<view class="tag-item-p tag">零负债</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			// 供需大厅
			toSupplyHall(e){
				// let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/demandHall/supplyHall/index"
				})
			},
			// 企业服务
			toEnterpriseServer(e){
				uni.navigateTo({
					url:"/pages/demandHall/enterpriseServer/index"
				})
			},
			// 项目投融
			toDemoInvestment(e){
				uni.navigateTo({
					url:"/pages/demandHall/demoInvestment/index"
				})
			},
			// 认证
			toAuthentication(e){
				uni.navigateTo({
					url:"/pages/release/index2"
				})
			}
		},
		
	}
</script>

<style lang="less">
	.business-page {
		width: 100%;
		height: auto;
		background: #fff;
		font-size: 24rpx;
		margin-bottom: 100rpx;
	}

	// 搜索
	.search-box {
		width: 670rpx;
		height: 68rpx;
		border: 2rpx solid #FF5100;
		border-radius: 8rpx;
		margin: 24rpx auto;

		.search-icon {
			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;
		}
	}

	// 供需大厅 企业服务 项目投融
	.pa40 {
		padding: 0 35rpx;

		.img1 {
			width: 312rpx;
			height: 208rpx;
		}

		.img1 image {
			width: 312rpx;
			height: 208rpx;
		}

		.img2 {
			width: 342rpx;
			height: 208rpx;
		}

		.img2 image {
			width: 342rpx;
			height: 96rpx;
		}
	}

	// 商业简报
	.news-box {
		width: 670rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		margin: 32rpx auto;
		color: #6E6E6E;

		.news-img {
			width: 64rpx;
			height: 78rpx;
			margin-left: 18rpx;
		}

		.news-con {
			margin-bottom: 6rpx;
		}

		.news-con image {
			width: 32rpx;
			height: 34rpx;
			margin: 0 26rpx 0 40rpx;
		}
	}

	// 优质企业
	.title-con {
		padding: 0 40rpx;
	}

	.title-img {
		width: 134rpx;
		height: 46rpx;
	}

	.company-box {
		height: 380rpx;

		.update-icon {
			width: 118rpx;
			height: 48rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
			border-radius: 24rpx;
			font-size: 20rpx;
			line-height: 26rpx;
			color: #666666;
			margin-left: auto;
		}

		.update-icon image {
			width: 26rpx;
			height: 26rpx;
			background: rgba(0, 0, 0, 0);
			margin-right: 10rpx;
		}

		.scroll-view_H {
			width: 100%;
			height: 330rpx;
			white-space: nowrap;

			.company-list {
				width: 408rpx;
				height: 304rpx;
				background: #FFFFFF;
				box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
				border-radius: 12rpx;
				padding: 16rpx 24rpx;
				display: inline-block;
				margin: 15rpx 32rpx 0 0rpx;
				
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #4A4A4A;
					margin: 5rpx 0 10rpx 0;
				}

				.category-box {
					.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;
					}
				}

				.title-s {
					font-weight: 400;
					color: #6E6E6E;
					margin: 16rpx 0 10rpx 0;
				}

				.company-logo {
					width: 176rpx;
					height: 128rpx;
				}

				.todetails {
					width: 148rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: linear-gradient(315deg, #FF6D31 0%, #FFC2AA 100%);
					border-radius: 12rpx;
					text-align: center;
					color: #fff;
					margin-left: auto;
					margin-top: auto;
				}
			}
		}
		.company-list:nth-child(1){
			margin-left: 40rpx;
		}
	}

	// 推荐服务
	.service-box {
		width: 100%;
		height: 496rpx;

		.toadd {
			width: 88rpx;
			height: 88rpx;
			margin-left: auto;
			transform: rotate(45deg);
		}

		.service-top {
			padding: 0 40rpx;
			height: 272rpx;
			margin: 8rpx 0 16rpx 0;

			.service-nub-left {
				width: 344rpx;
				height: 272rpx;
				background: #FFF3DC;
				border-radius: 12rpx;
				padding: 14rpx 24rpx;
			}

			.service-nub-left image {
				width: 288rpx;
				height: 162rpx;
			}

			.service-nub-right {
				width: 310rpx;
				height: 272rpx;

				.module-nub {
					width: 310rpx;
					height: 128rpx;
					background: #FFEFE8;
					border-radius: 12rpx;
					padding: 18rpx 0 32rpx 0;
				}
			}
		}

		.service-bottom {
			padding: 0 40rpx;
			height: 112rpx;

			.tolearn {
				width: 70rpx;
				height: 112rpx;
				background: #FFE4D8;
				border-radius: 12rpx;
				color: #FF7636;
				font-size: 20rpx;
				writing-mode: tb-rl;
			}
		}
	}

	.module-box {
		width: 184rpx;
		height: 112rpx;
		border-radius: 12rpx;
		padding: 16rpx 0 14rpx 0;
	}

	.bg-red {
		background: #FDE9DE;
	}

	.bg-blue {
		background: #E5F1FF;
	}

	.bg-yellow {
		background: #FEFADF;
	}

	.tips {
		font-size: 28rpx;
		font-weight: 600;
		color: #4A4A4A;
	}

	.tips-item {
		font-weight: 400;
		color: #636363;
	}

	.service-nub-left .tips,
	.module-nub .tips {
		color: #FF7636;
	}

	.service-top .module-box {
		width: 144rpx;
		height: 128rpx;
		background: rgba(245, 249, 255, 0.82);
		border-radius: 12rpx;
	}


	// 优质项目
	.project-box {
		width: 100%;
		height: 610rpx;

		.project-list {
			width: 100%;
			height: 180rpx;
			padding: 26rpx 40rpx;
			border-bottom: 1rpx solid #DCDCDC;

			.project-img {
				width: 128rpx;
				height: 128rpx;
				margin-right: 32rpx;
			}

			.right-con {
				.title {
					font-weight: 800;
					height: 35rpx;
					line-height: 35rpx;

					.new-icon {
						width: 48rpx;
						height: 24rpx;
						margin-right: 8rpx;

						.title-h {
							color: #1D1D1D;
						}
					}
				}

				.title-s {
					width: 450rpx;
					height: 34rpx;
					font-size: 24rpx;
					color: #707070;
				}

				.category-box {
					.tag {
						width: 112rpx;
						height: 36rpx;
						line-height: 33rpx;
						border-radius: 4rpx;
						font-size: 20rpx;
						margin-right: 16rpx;
						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;
					}
				}
			}
		}
	}

	.project-box .title-img {
		margin: 35rpx 0 -15rpx 40rpx;
	}
</style>