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">蜂蜜供应商</view>
					<view class="label">A轮</view>
					<view class="title-s">优质的供应源、多元化的土地使用、快速扩张的能力、稳定的分销渠道</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>
		<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 class="detials-box">
			<view class="title acea-row row-middle">
				<image src="../../../static/images/shu.png" mode=""></image>项目详情
			</view>
			<view>所属区域：武汉</view>
			<view>项目详情：融资方的合作标准</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 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">蜂蜜供应商</view>
						<view class="line1">优质的供应源，多元化的土地sssssssssssss</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;
		padding: 20rpx 40rpx 0 40rpx;

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

			.content-left {
				width: 536rpx;

				.title {
					width: 208rpx;
					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;
				}
			}
		}

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

	}

	.category-box {
		.tag {
			width: 112rpx;
			height: 36rpx;
			border-radius: 4rpx;
			font-size: 20rpx;
			margin-right: 5rpx;
			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;
		top: -48rpx;
		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: 384rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		font-weight: 400;
		color: #343434;
		padding: 24rpx 0 0 32rpx;
	}

	.detials-box view {
		margin-bottom: 22rpx;
	}

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

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

	.mask-box {
		width: 750rpx;
		height: 384rpx;
		background: #fff;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.01);
		filter: blur(6rpx);
		position: fixed;
		top: 390rpx;
	}

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

	.recommend-box .title {
		margin-left: 32rpx;
	}

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

	.update-box {
		width: 670rpx;
		height: 48rpx;
		color: #FF6D31;
		font-size: 24rpx;
		margin-bottom: 26rpx;
		margin-left: 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;
	}

	.update-icon 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;
	}
	.recommend-list:nth-child(1){
		margin-left: 32rpx;
	}
	.recommend-list image {
		width: 392rpx;
		height: 194rpx;
		border-radius: 12rpx 12rpx 0 0;
	}

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