jurong_circle_front_app/pages/finance/production.vue

<template>
	<view class="detail-container">
		<u-navbar :is-fixed="false" title="产品详情" :background="{background: 'transparent' }" :border-bottom="false"
			back-icon-color="#fff" title-color="#fff">
		</u-navbar>

		<!-- 产品头部信息 -->
		<view class="product-header">
			<view class="product-name">
				理财产品名称
			</view>
			<view class="product-date">
				开始时间：2025/09/13
			</view>
			<view class="profit-info">
				近期盈亏：XXXX
			</view>
		</view>

		<!-- 基本信息卡片 -->
		<view class="card">
			<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">按月结算，次月支付50%</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">
				产品需求<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 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>
			</view>
		</view>

		<!-- 产品动态 -->
		<view class="card">
			<view class="card-title">
				产品动态
			</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">xxx%</u-col>
				</u-row>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<u-button class="consult-btn" @click="handleConsult">立即咨询</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">

	import { onMounted, ref } from 'vue';
	import { getUserInfo } from '../../util/common';
	import { programAPI } from '../../api/program';
	import { onLoad } from '@dcloudio/uni-app'
	import { groupAPI } from '../../api/group';



	// 立即咨询 - 跳转到客服中心页面
	const handleConsult = () => {
		uni.navigateTo({
			url: '/pages/finance/service'
		});
	}

	onLoad((val) => {
		// 如果有传递产品ID，可以在这里加载具体产品数据
		if (val.productId) {
			// loadProductData(val.productId)
		}
	})
</script>

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

		// 产品头部信息
		.product-header {
			background: transparent;
			color: #fff;
			margin: 0 80rpx;
			
			.product-name {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				line-height: 1.4;
			}
			
			.product-date {
				font-size: 28rpx;
				margin-bottom: 15rpx;
				opacity: 0.9;
			}
			
			.profit-info {
				font-size: 28rpx;
				opacity: 0.9;
			}
		}

		// 卡片样式 - 调整为白色背景
		.card {
			margin: 20rpx 30rpx;
			background-color: #ffffff;
			padding: 30rpx;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

			.card-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 25rpx;
				padding-bottom: 15rpx;
				border-bottom: 2rpx solid #f0f0f0;
				
				span {
					color: #666;
					font-size: 28rpx;
					margin-left: 8rpx;
				}
			}

			.card-body {
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 25rpx;
				
				.sub-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					padding-bottom: 15rpx;
					border-bottom: 1rpx solid #e8e8e8;
					margin-bottom: 20rpx;
				}
			}

			.card-name {
				font-size: 28rpx;
				color: #666;
				font-weight: 400;
			}

			.card-value {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				text-align: right;
			}
		}

		// 底部按钮 - 调整为深蓝色
		.bottom-actions {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 20rpx 30rpx;
			border-top: 1rpx solid #f0f0f0;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
			
			.consult-btn {
				background: #1a5fd8;
				color: #fff;
				border: none;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				box-shadow: 0 4rpx 12rpx rgba(26, 95, 216, 0.3);
				
				&:active {
					background: #164db3;
					transform: translateY(1rpx);
				}
			}
		}
	}

	// 通用样式调整
	.u-m-b-20 {
		margin-bottom: 20rpx;
	}
</style>