jurong_circle_front_app/pages/program/programDetail.vue

<template>
	<view class="detail-contrainer">
		<u-navbar title="项目详情" :background="{background: 'transparent' }" :border-bottom="false" back-icon-color="#fff"
			title-color="#fff">
			<template v-slot:right>
				<image class="collection" src="/static/icon/Bookmark.png" mode=""></image>
			</template>
		</u-navbar>

		<view class="head-text">
			<view class="text-name">
				xxxx工程
			</view>
			<view class="text-date">
				起止时间：2025/09/13-202512/12
			</view>
			<view class="text-progress">
				项目进度
				<u-line-progress :show-percent="false" class="progress-line" active-color="#65AD72" height="8"
					:percent="70"></u-line-progress>
				1980/2505
			</view>
		</view>

		<view class="card u-m-t-10">
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">所在地</u-col>
				<u-col span="6" class="card-value">浙江-杭州</u-col>
			</u-row>
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">详细地址</u-col>
				<u-col span="6" class="card-value">xx区xx路xxx号</u-col>
			</u-row>
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">联系人</u-col>
				<u-col span="6" class="card-value">xxx</u-col>
			</u-row>
			<u-row class="u-m-b-20">
				<u-col span="6" class="card-name">结算方式</u-col>
				<u-col span="6" class="card-value">按月结算 次月支付60%</u-col>
			</u-row>
			<u-row>
				<u-col span="6" class="card-name">项目企业</u-col>
				<u-col span="6" class="card-value">xxxx公司</u-col>
			</u-row>
		</view>

		<view class="card">
			<view class="card-title">
				<view class="icon">
					<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
				</view>
				项目需求<span>（4）</span>
			</view>
			<view class="card-body">
				<u-row class="sub-title u-m-b-20">
					<u-col span="12">需求名称</u-col>
				</u-row>
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">规格</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">限价</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">时间</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
				<u-row>
					<u-col span="6" text-align="left" class="card-name">其他要求</u-col>
					<u-col span="6" class="card-value">详情</u-col>
				</u-row>
			</view>
		</view>


		<view class="card">
			<view class="card-title">
				<view class="icon">
					<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
				</view>
				投资动态
			</view>
			<view class="card-body">
				<u-row class="u-m-b-20">
					<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
					<u-col span="6" class="card-value">2025-09-13</u-col>
				</u-row>
				<u-row>
					<u-col span="6" text-align="left" class="card-name">参与单位</u-col>
					<u-col span="6" class="card-value">5家</u-col>
				</u-row>
			</view>
		</view>

		<u-row justify="flex-end" class="u-m-r-40 btn-group">
			<u-col span="3"><u-button class="btn" type="primary">聊一聊</u-button></u-col>
			<u-col span="3"><u-button class="btn" type="success">立刻融</u-button></u-col>
		</u-row>

	</view>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
	.detail-contrainer {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);

		.collection {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.head-text {
			color: #fff;
			margin: 0 80rpx;

			.text-name {
				font-family: SF Pro;
				font-weight: 400;
				font-style: Regular;
				font-size: 32rpx;
				leading-trim: NONE;
				line-height: 52rpx;
				letter-spacing: 0%;
			}

			.text-date {
				font-family: SF Pro;
				font-weight: 400;
				font-style: Regular;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 52rpx;
				letter-spacing: 0%;
			}

			.text-progress {
				font-family: SF Pro;
				font-weight: 30;
				font-style: Expanded Ultralight;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 52rpx;
				letter-spacing: 0%;

				display: flex;
				align-items: center;
				white-space: nowrap;

				.progress-line {
					margin: 0 10rpx;
				}
			}
		}

		.card {
			margin: 0 40rpx 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.card-title {
				display: flex;
				align-items: center;
				font-family: Work Sans;
				font-weight: 400;
				font-style: Regular;
				font-size: 24rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #000;

				.icon {
					width: 38rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				span {
					font-family: Work Sans;
					font-weight: 400;
					font-style: Regular;
					font-size: 24rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
					color: #8F8F8F;
				}
			}

			.card-body {
				margin-top: 20rpx;
				background: #E9EEF8;
				border-radius: 16rpx;
				padding: 20rpx;

				.sub-title {
					font-family: Inter;
					font-weight: 600;
					font-style: Semi Bold;
					font-size: 24rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: 0%;

				}
			}

			.card-name {
				font-family: Work Sans;
				font-weight: 400;
				font-style: Regular;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #8F8F8F;
			}

			.card-value {
				font-family: Work Sans;
				font-weight: 400;
				font-style: Regular;
				font-size: 20rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #2A2A2A;
			}
		}

		.btn-group {
			font-family: Work Sans;
			font-weight: 400;
			font-style: Regular;
			font-size: 28rpx;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: -2%;

			.btn {
				height: 56rpx;
			}
		}
	}
</style>