2025-09-17

项目详情

pages.json

@@ -10,7 +10,8 @@
 		{
 			"path": "pages/home/index",
 			"style": {
-				"navigationBarTitleText": "主页"
+				"navigationBarTitleText": "主页",
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -48,9 +49,10 @@
 			}
 		},
 		{
-			"path": "pages/program/programDetail/programDetail",
+			"path": "pages/program/programDetail",
 			"style": {
-				"navigationBarTitleText": "项目详情"
+				"navigationBarTitleText": "项目详情",
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/home/index.vue

@@ -1,10 +1,165 @@
 <template>
-	<Tabbar></Tabbar>
+	<view class="message-container">
+		<!-- 固定背景的容器 -->
+		<view class="background-container"></view>
+
+		<!-- 可滚动的内容区域 -->
+		<view class="content-container" :style="'height:'+height+'px'">
+
+			<u-swiper :list="list" name="url" height="324"></u-swiper>
+
+			<view class="menu-list">
+				<swiper class="swiper">
+					<swiper-item>
+						<u-grid :col="4">
+							<u-grid-item>
+								<u-icon name="photo" :size="46"></u-icon>
+								<view class="grid-text">图片</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="lock" :size="46"></u-icon>
+								<view class="grid-text">锁头</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="hourglass" :size="46"></u-icon>
+								<view class="grid-text">沙漏</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="hourglass" :size="46"></u-icon>
+								<view class="grid-text">沙漏</view>
+							</u-grid-item>
+						</u-grid>
+					</swiper-item>
+					<swiper-item>
+						<u-grid :col="4">
+							<u-grid-item>
+								<u-icon name="photo" :size="46"></u-icon>
+								<view class="grid-text">图片</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="lock" :size="46"></u-icon>
+								<view class="grid-text">锁头</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="hourglass" :size="46"></u-icon>
+								<view class="grid-text">沙漏</view>
+							</u-grid-item>
+						</u-grid>
+					</swiper-item>
+				</swiper>
+
+				<view class="indicator-dots">
+					<view class="indicator-dots-item indicator-dots-active">
+					</view>
+					<view class="indicator-dots-item">
+					</view>
+					<view class="indicator-dots-item">
+					</view>
+				</view>
+			</view>
+
+		</view>
+
+		<Tabbar id="tabbarId"></Tabbar>
+	</view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
+	import { ref, computed, getCurrentInstance } from 'vue';
+	import {
+		onReady
+	} from '@dcloudio/uni-app';
+	import { onReady as onUniReady } from '@dcloudio/uni-app';
+	const instance = getCurrentInstance();
+
+	const height = ref(0)
+
+	const loadHeight = () => {
+		uni.getSystemInfo({
+			success(res) {
+				let screenHeight = res.screenHeight
+				uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
+					height.value = screenHeight - data.height
+				}).exec()
+			}
+		})
+	}
+
+	const list = [
+		{ url: '/static/banner/1.png' },
+		{ url: '/static/banner/2.png' },
+		{ url: '/static/banner/3.png' },
+	]
+
+	onUniReady(() => {
+		loadHeight()
+	})
 </script>
 
 <style lang="scss" scoped>
+	.message-container {
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		overflow: hidden;
+		/* 防止容器本身滚动 */
 
+		/* 固定背景 */
+		.background-container {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
+			z-index: 1;
+			/* 确保背景在内容下方 */
+		}
+
+		/* 内容滚动区域 */
+		.content-container {
+			position: relative;
+			z-index: 2;
+			/* 确保内容在背景上方 */
+			width: 100%;
+			overflow-y: scroll;
+			height: 100%;
+			// padding: 32rpx;
+
+			.menu-list {
+
+				.swiper {
+					height: 170rpx;
+
+					.grid-text {
+						font-size: 28rpx;
+						margin-top: 4rpx;
+						color: $u-type-info;
+					}
+				}
+
+
+				.indicator-dots {
+					// margin-top: 40rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+				.indicator-dots-item {
+					background-color: $u-tips-color;
+					height: 6px;
+					width: 6px;
+					border-radius: 10px;
+					margin: 0 3px;
+				}
+
+				.indicator-dots-active {
+					background-color: $u-type-primary;
+				}
+			}
+		}
+	}
 </style>

pages/program/program.vue

@@ -10,10 +10,13 @@
 				<view class="search">
 					<u-search :show-action="false" placeholder="输入项目名称、企业名称" v-model="keyword"></u-search>
 				</view>
-				<u-dropdown>
-					<u-dropdown-item class="u-dropdown" v-model="areaFilter" title="区域筛选" :options="areaOptions"></u-dropdown-item>
-					<u-dropdown-item class="u-dropdown" v-model="timeFilter" title="时间筛选" :options="timeOptions"></u-dropdown-item>
-					<u-dropdown-item class="u-dropdown" v-model="typeFilter" title="类型筛选" :options="typeOptions"></u-dropdown-item>
+				<u-dropdown :duration="0">
+					<u-dropdown-item class="u-dropdown" v-model="areaFilter" title="区域筛选"
+						:options="areaOptions"></u-dropdown-item>
+					<u-dropdown-item class="u-dropdown" v-model="timeFilter" title="时间筛选"
+						:options="timeOptions"></u-dropdown-item>
+					<u-dropdown-item class="u-dropdown" v-model="typeFilter" title="类型筛选"
+						:options="typeOptions"></u-dropdown-item>
 				</u-dropdown>
 			</view>
 
@@ -133,7 +136,7 @@
 	}
 	const handleDetail = (item) => {
 		uni.navigateTo({
-			url: '/pages/program/programDetail/programDetail'
+			url: '/pages/program/programDetail'
 		})
 	}
 
@@ -231,6 +234,7 @@
 							leading-trim: NONE;
 							line-height: 100%;
 							letter-spacing: -2%;
+							color: #000;
 							margin-bottom: 10rpx;
 						}
 
@@ -242,17 +246,18 @@
 							leading-trim: NONE;
 							line-height: 100%;
 							letter-spacing: -2%;
+							color: #000;
 							margin-bottom: 10rpx;
 						}
 
 						.program-introduction {
 							font-family: Work Sans;
 							font-weight: 400;
-							font-style: Regular;
 							font-size: 20rpx;
 							leading-trim: NONE;
 							line-height: 100%;
 							letter-spacing: -2%;
+							color: #000;
 							margin-bottom: 10rpx;
 
 							/* 关键样式 */

pages/program/programDetail.vue

@@ -0,0 +1,504 @@
+<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" @click="handleOpen">立刻融</u-button></u-col>
+		</u-row>
+
+
+		<u-modal v-model="showWarning" border-radius="20" ref="warningRef" :mask-close-able="true"
+			:show-confirm-button="false" :show-title="false">
+			<view class="slot-content">
+				<image class="dialog-icon" src="/static/icon/ring.png" mode=""></image>
+				<image @click="handleClose" class="dialog-close" src="/static/icon/close.png" mode=""></image>
+				<view class="dialog-title">温馨提示</view>
+				<view class="dialog-content">
+					<view>请务必仔细核对您的投资所选项目，以免发生误选</view>
+					<u-checkbox v-model="is_agree" style="margin-top: 20rpx;" icon-size="25" :label-disabled="true"
+						label-size="20">
+						<div @click="openFile">协议内容《协议123》</div>
+					</u-checkbox>
+					<view class="err-msg" v-if="showErrMsg">
+						请先勾选协议内容
+					</view>
+				</view>
+				<u-button @click="handleChose" type="primary" shape="circle" class="dialog-btn">确认选择</u-button>
+			</view>
+		</u-modal>
+
+		<u-modal v-model="showFile" border-radius="20" :show-confirm-button="false" :show-title="false">
+			<view class="file-content">
+				<view class="file-title">
+					协议内容
+				</view>
+				<scroll-view class="file-main" scroll-y="true">
+					<view class="text">
+						在您同意前述协议并开始使用我们的服务之前，我们恳请您仔细阅读以下核心约定条款的摘要。本摘要旨在帮助您更好地理解您的权利和义务，但最终法律效力以完整的《用户协议》和《隐私政策》文本为准。<br />
+						1. 账户与注册<br />
+						您承诺注册时提供真实、准确、完整的信息，并及时更新。您应对您的账户安全和所有活动承担全部责任。<br />
+						2. 用户行为规范<br />
+						您同意遵守所有适用的法律法规，并承诺不会利用我们的服务进行任何非法、侵权或违反公序良俗的活动。<br />
+						禁止的行为包括但不限于：传播病毒、发送垃圾信息、侵犯他人知识产权、进行未经授权的广告或推销、干扰服务的正常运行等。<br />
+						3. 隐私与数据保护<br />
+						我们将严格按照《隐私政策》收集、使用、存储和保护您的个人信息。您的个人信息可能用于：提供和优化服务、与您沟通、进行安全验证、以及根据政策进行的内部分析与广告推送。<br />
+						我们可能会使用Cookies和类似技术来提升您的用户体验。<br />
+						在法律法规要求或为提供服务所必需的情况下，您的信息可能会被分享给我们的关联公司或可信的第三方合作伙伴。<br />
+						4. 知识产权<br />
+						服务中包含的所有内容（包括但不限于文本、图形、logo、软件、音频、视频等）的知识产权均归我们或我们的许可方所有。<br />
+						在遵守协议条款的前提下，我们授予您有限的、非排他的、不可转让的许可，以使用我们提供的服务。<br />
+						5. 免责声明与责任限制<br />
+						服务将按“现状”和“可用”提供。我们不承诺服务绝对无中断、及时、安全或无误。<br />
+						在法律允许的最大范围内，我们不对因使用服务而导致的任何间接、偶然、特殊或后果性损害承担责任。<br />
+						6. 协议的变更与终止<br />
+						我们保留随时修改《用户协议》和《隐私政策》的权利。变更将通过适当渠道（如网站公告、邮件通知等）公布。若您在新条款生效后继续使用服务，即表示您接受变更后的协议。<br />
+						您或我们均有权根据协议规定终止服务。<br />
+						7. 适用法律与争议解决<br />
+						本协议的解释与执行均适用中华人民共和国法律。<br />
+						因本协议引起的或与之相关的任何争议，双方应首先尝试友好协商解决；协商不成的，任何一方均有权将争议提交至本协议签订地（通常为公司住所地）有管辖权的人民法院诉讼解决。<br />
+						8. 其他<br />
+						如果您是未成年人，请在法定监护人的陪同下阅读并判断是否同意本协议。<br />
+					</view>
+				</scroll-view>
+				<view class="btn-group">
+					<u-button @click="handleDisagree" class="btn" style="background: #CADBFF;" hover-class="none"
+						shape="circle">不同意</u-button>
+					<u-button @click="handleAgreeFile" class="btn" style="background: #7B99FF;" hover-class="none"
+						shape="circle">同意并继续</u-button>
+				</view>
+			</view>
+		</u-modal>
+
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue';
+
+	// 立刻融 弹窗
+	const showWarning = ref(false)
+	const showErrMsg = ref(false)
+	const is_agree = ref(false)
+
+	// 立刻融 打开弹窗
+	const handleOpen = () => {
+		is_agree.value = false
+		showErrMsg.value = false
+		showWarning.value = true
+	}
+
+	// 立刻融 关闭弹窗
+	const handleClose = () => {
+		showWarning.value = false
+		showErrMsg.value = false
+		is_agree.value = false
+	}
+
+	// 立刻融 确认选择
+	const handleChose = () => {
+		if (!is_agree.value) {
+			console.log("change");
+			showErrMsg.value = true
+			return
+		}
+		// TODO 同意协议
+		showWarning.value = false
+	}
+
+	const showFile = ref(false)
+
+	// 打开协议弹窗
+	const openFile = () => {
+		showFile.value = true
+		showWarning.value = false
+	}
+
+	// 不同意协议
+	const handleDisagree = () => {
+		showFile.value = false
+		showWarning.value = true
+	}
+
+	// 同意协议
+	const handleAgreeFile = () => {
+		is_agree.value = true
+		showFile.value = false
+		showWarning.value = true
+	}
+</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;
+			}
+		}
+
+		// 提示框
+		.slot-content {
+			height: 420rpx;
+			background: radial-gradient(118.57% 118.57% at 50% -18.57%, rgba(255, 255, 255, 0) 0%, #FFFFFF 61.13%),
+				linear-gradient(270deg, #65D1FF 5.45%, #FF68DE 108.14%);
+
+			.dialog-icon {
+				width: 181rpx;
+				height: 142rpx;
+				transform: translate(26rpx, -48rpx);
+				// translate: 26rpx;
+			}
+
+			.dialog-close {
+				width: 28rpx;
+				height: 28rpx;
+				position: absolute;
+				top: 14rpx;
+				right: 28rpx;
+			}
+
+			.dialog-title {
+				font-family: SF Pro;
+				font-weight: 700;
+				font-style: Expanded Bold;
+				font-size: 32rpx;
+				leading-trim: NONE;
+				line-height: 48rpx;
+				letter-spacing: 10%;
+				-webkit-text-stroke: 4rpx transparent;
+				background: #fff;
+				-webkit-background-clip: text;
+				position: absolute;
+				top: 54rpx;
+				left: 0;
+				right: 0;
+				text-align: center;
+				color: linear-gradient(180deg, #2A2A2A 0%, #737373 59.62%, #2A2A2A 100%);
+			}
+
+			.dialog-content {
+				padding: 0 80rpx;
+				font-family: Work Sans;
+				font-weight: 700;
+				font-style: Regular;
+				font-size: 26rpx;
+				leading-trim: NONE;
+				line-height: 40rpx;
+				letter-spacing: 4%;
+
+				.err-msg {
+					margin-top: 10rpx;
+					font-family: Work Sans;
+					font-weight: 100;
+					font-style: Thin;
+					font-size: 16rpx;
+					leading-trim: NONE;
+					line-height: 100%;
+					letter-spacing: -2%;
+					color: #FF5B5B;
+
+				}
+			}
+
+			.dialog-btn {
+				margin-top: 20rpx;
+				width: 168rpx;
+				height: 54rpx;
+				font-size: 26rpx;
+			}
+		}
+
+		// 协议
+		.file-content {
+			background: linear-gradient(180deg, #CADBFF 0%, #FFFFFF 100%);
+			padding: 16rpx 32rpx 32rpx;
+
+			.file-title {
+				font-family: SF Pro;
+				font-weight: 700;
+				font-style: Expanded Bold;
+				font-size: 24rpx;
+				leading-trim: NONE;
+				line-height: 48rpx;
+				letter-spacing: 10%;
+				-webkit-text-stroke: 8rpx transparent;
+				font-style: italic;
+				background: #fff;
+				-webkit-background-clip: text;
+				text-align: center;
+				color: linear-gradient(180deg, #2A2A2A 0%, #737373 59.62%, #2A2A2A 100%);
+			}
+
+			.file-main {
+				margin-top: 10rpx;
+				// padding: 20rpx;
+				background-color: #fff;
+				height: 262rpx;
+				border-radius: 10rpx;
+
+				.text {
+					margin: 10rpx 20rpx;
+					font-family: Work Sans;
+					font-weight: 700;
+					font-style: Regular;
+					font-size: 12rpx;
+					leading-trim: NONE;
+					line-height: 20rpx;
+					letter-spacing: 4%;
+				}
+			}
+
+			.btn-group {
+				margin-top: 20rpx;
+				display: flex;
+
+				.btn {
+					height: 24rpx;
+					padding: 4rpx 20rpx;
+
+					font-family: Work Sans;
+					font-weight: 700;
+					font-style: Regular;
+					font-size: 12rpx;
+					leading-trim: NONE;
+					line-height: 20rpx;
+					letter-spacing: 4%;
+					color: #fff;
+				}
+
+			}
+		}
+	}
+</style>

pages/program/programDetail/programDetail.vue

@@ -1,13 +0,0 @@
-<template>
-	<view>
-
-	</view>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>