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

<template>
	<view class="project-page">
		<view class="content">
			<view class="acea-row content-box">
				<view class="content-left acea-row row-middle">
					<view class="title line1">蜂蜜供应商</view>
					<view class="label">A轮</view>
					<view class="title-s line2">优质的供应源、多元化的土地使用、快速扩张的能力、稳定的分销渠道</view>
				</view>
				<image src="../../../static/images/home/menu6.png"></image>
			</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="region acea-row row-middle">
				<view class="regin-box br1">
					<view class="title-l">项目领域</view>
					<view class="title-m">农业</view>
				</view>
				<view class="regin-box">
					<view class="title-l">融资金额</view>
					<view class="title-m">200万元-300万元</view>
				</view>
			</view>
		</view>
		<view class="detials-box">
			<view class="pa20">
				<view class="title acea-row row-middle">
					<image src="../../../static/images/shu.png" mode=""></image>项目详情
				</view>
				<view>所属区域：武汉</view>
				<view class="detail-con">项目详情：融资方的合作标准封锁地带</view>
			</view>
			<view class="mask-box acea-row row-center-wrapper">
				<view class="acea-row row-center-wrapper mask-con">
					<view class="con">投资方认证后可查看项目详情</view>
					<view class="authentication-btn">立即认证</view>
				</view>
			</view>
		</view>

		<view class="recommend-box">
			<view class="title acea-row row-middle">
				<image src="../../../static/images/shu.png" mode=""></image>项目推荐
			</view>
			<view class="update-box acea-row row-middle">
				<view>今日已更新7个</view>
				<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="recommend-list acea-row" v-for="(item,index) in 3">
					<image src="../../../static/images/business-img1.png" mode=""></image>
					<view class="recommend-bottom acea-row row-column-between">
						<view class="title-item line1">蜂蜜供应商</view>
						<view class="line1">优质的供应源，多元化的土地</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>
				</view>
			</scroll-view>

		</view>
		<view class="footer">
			<view class="toContact">联系项目方</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	.project-page {
		width: 100%;
		height: 100vh;
		background: #F8F8F8;
	}


	.content {
		width: 100%;
		height: 284rpx;
		background: #fff;
		position: relative;
		margin-bottom: 90rpx;
		padding: 20rpx 40rpx 0 40rpx;

		.content-box {
			width: 670rpx;
			height: 130rpx;
			margin-bottom: 25rpx;

			image {
				width: 128rpx;
				height: 128rpx;
				margin-left: auto;
			}

			.content-left {
				width: 536rpx;

				.title {
					width: auto;
					max-width: 280rpx;
					height: 52rpx;
					font-size: 36rpx;
					margin-right: 22rpx;
					font-weight: bold;
					color: #343434;
				}

				.label {
					width: 110rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					background: #FF5100;
					border-radius: 4rpx;
					color: #fff;
				}

				.title-s {
					width: 536rpx;
					height: 68rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #707070;
				}
			}
		}
	}

	.category-box {
		width: 100%;
		height: 36rpx;
		overflow: hidden;

		.tag {
			width: auto;
			padding: 0 10rpx;
			height: 36rpx;
			line-height: 34rpx;
			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;
		}
	}

	.region {
		width: 670rpx;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx;
		position: relative;
		bottom: -21rpx;
		margin: 0 auto;

		.regin-box {
			width: 50%;
			height: 80rpx;
			text-align: center;

			.title-l {
				font-weight: 400;
				color: #707070;
				margin-bottom: 6rpx;
			}

			.title-m {
				font-size: 28rpx;
				font-weight: 600;
				color: #FF5100;
			}
		}
		.br1 {
			border-right: 1rpx solid #E9E9E9;
		}
	}

	.detials-box {
		width: 750rpx;
		height: auto;
		min-height: 384rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		font-weight: 400;
		color: #343434;
		position: relative;

		.pa20 {
			width: 100%;
			height: 100%;
			padding: 24rpx 32rpx 10rpx 32rpx;
			filter: blur(6rpx);
			view {
				margin-bottom: 15rpx;
			}

			.detail-con {
				width: 100%;
				height: auto;
				overflow: hidden;
			}
		}

		.mask-box {
			width: 750rpx;
			height: 100%;
			background: rgba(255,255,255,0.7);
			box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.01);
			position: absolute;
			top: 0;

			.mask-con {
				width: 484rpx;
				height: 136rpx;
				z-index: 9999;

				.con {
					font-size: 36rpx;
					font-weight: 600;
					color: #FF5100;
					margin-bottom: 20rpx;
				}

				.authentication-btn {
					width: 148rpx;
					height: 52rpx;
					background: linear-gradient(315deg, #FF6D31 0%, #FFC2AA 100%);
					border-radius: 12rpx;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 52rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}

	.title {
		height: 52rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #343434;

		image {
			width: 18rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}

	.recommend-box {
		width: 750rpx;
		height: 528rpx;
		background: #FFFFFF;
		margin: 32rpx 0;
		padding: 24rpx 0 0 0rpx;

		.title {
			margin-left: 32rpx;
		}

		.update-box {
			width: auto;
			height: 48rpx;
			color: #FF6D31;
			font-size: 24rpx;
			margin: 0rpx 32rpx 26rpx 32rpx;

			.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;

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

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

			.recommend-list {
				width: 392rpx;
				background: #FFFFFF;
				box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
				border-radius: 12rpx;
				font-size: 24rpx;
				color: #707070;
				display: inline-block;
				margin: 0 32rpx 0 0rpx;

				image {
					width: 392rpx;
					height: 194rpx;
					border-radius: 12rpx 12rpx 0 0;
				}
			}

			.recommend-list:nth-child(1) {
				margin-left: 32rpx;
			}

			.recommend-bottom {
				height: 130rpx;
				padding: 0 16rpx 15rpx 24rpx;

				.title-item {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D1D1D;
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 132rpx;
		background: #FFFFFF;
		padding: 32rpx 32rpx 0 0;

		.toContact {
			width: 223rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background: linear-gradient(144deg, #FFA782 0%, #FF5100 100%);
			border-radius: 38rpx;
			margin-left: auto;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>