jurong_circle_front_app/pages/program/program.vue

<template>
	<view class="message-container">
		<!-- 固定背景的容器 -->
		<view class="background-container"></view>

		<!-- 可滚动的内容区域 -->
		<view class="content-container" :style="'height:'+height+'px'">

			<view class="searchFilter">
				<view class="search">
					<u-search :show-action="false" placeholder="输入项目名称、企业名称" v-model="keyword"></u-search>
				</view>
				<u-dropdown>
					<u-dropdown-item v-model="areaFilter" title="区域筛选" :options="areaOptions"></u-dropdown-item>
					<u-dropdown-item v-model="timeFilter" title="时间筛选" :options="timeOptions"></u-dropdown-item>
					<u-dropdown-item v-model="typeFilter" title="类型筛选" :options="typeOptions"></u-dropdown-item>
				</u-dropdown>
			</view>

			<view class="program-list">
				<view class="program-item" v-for="item in programList" @click="handleDetail(item)">
					<view class="program-avatar">
						<image style="width: 100%;height: 100%;border-radius: 50%;" src="/static/ceshi_avatar.jpg"
							mode=""></image>
					</view>
					<view class="program-info">
						<view class="program-name">
							{{item.programName}}
						</view>
						<view class="company-name">
							{{item.companyName}}
						</view>
						<view class="program-address">
							项目地点：{{item.programAddress}}
						</view>
						<view class="program-contact">
							项目联系人：{{item.contact}}
						</view>
						<view class="program-introduction">
							项目简介：{{item.introduction}}
						</view>
					</view>
				</view>

			</view>

		</view>

		<Tabbar id="tabbarId"></Tabbar>
	</view>
</template>

<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 keyword = ref('')
	const areaFilter = ref('')
	const timeFilter = ref('')
	const typeFilter = ref('')

	const areaOptions = [
		{
			label: '默认排序',
			value: 1,
		},
		{
			label: '距离优先',
			value: 2,
		},
		{
			label: '价格优先',
			value: 3,
		}]
	const timeOptions = [
		{
			label: '默认排序',
			value: 1,
		},
		{
			label: '距离优先',
			value: 2,
		},
		{
			label: '价格优先',
			value: 3,
		}]
	const typeOptions = [
		{
			label: '默认排序',
			value: 1,
		},
		{
			label: '距离优先',
			value: 2,
		},
		{
			label: '价格优先',
			value: 3,
		}]

	// 列表
	const programList = ref([])

	const mockData = () => {
		for (var i = 0; i < 20; i++) {
			programList.value.push({
				programName: "项目名称" + (i + 1),
				companyName: "公司名称" + (i + 1),
				programAddress: "xx省xx市xxx区",
				contact: "联系人" + (i + 1),
				introduction: "在 Vue 3 + TypeScript 中使用 v-for=item in Range(1,20)报错，是因为 JavaScript/TypeScript 中没有内置 Range 函数（这是 Python 中的语法）。需要自己实现一个范围生成函数，并在模板中使用。"
			})
		}
	}
	const handleDetail = (item) => {
		uni.navigateTo({
			url: '/pages/program/programDetail/programDetail'
		})
	}

	onUniReady(() => {
		loadHeight()
		mockData()
	})
</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: #F0F3FF;
			z-index: 1;
			/* 确保背景在内容下方 */
		}

		/* 内容滚动区域 */
		.content-container {
			position: relative;
			z-index: 2;
			/* 确保内容在背景上方 */
			width: 100%;
			overflow-y: scroll;
			height: 100%;

			.searchFilter {
				background-color: #fff;
				padding: 60rpx 42rpx 0;
			}

			.program-list {
				margin-top: 20rpx;

				.program-item {
					background-color: #fff;
					padding: 20rpx 42rpx;
					margin-bottom: 20rpx;

					display: flex;

					.program-avatar {
						width: 20%;
						width: 100rpx;
						height: 100rpx;
					}

					.program-info {
						width: 80%;
						margin-left: 20rpx;

						.program-name {
							font-family: SF Pro;
							font-weight: 400;
							font-style: Regular;
							font-size: 32rpx;
							leading-trim: NONE;
							line-height: 48rpx;
							letter-spacing: 0%;
							margin-bottom: 10rpx;
						}

						.company-name {
							font-family: Work Sans;
							font-weight: 400;
							font-size: 26rpx;
							leading-trim: NONE;
							line-height: 100%;
							letter-spacing: -2%;
							margin-bottom: 10rpx;
						}

						.program-address {
							font-family: Work Sans;
							font-weight: 300;
							font-style: Light;
							font-size: 24rpx;
							leading-trim: NONE;
							line-height: 100%;
							letter-spacing: -2%;
							margin-bottom: 10rpx;
						}

						.program-contact {
							font-family: Work Sans;
							font-weight: 300;
							font-style: Light;
							font-size: 20rpx;
							leading-trim: NONE;
							line-height: 100%;
							letter-spacing: -2%;
							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%;
							margin-bottom: 10rpx;

							/* 关键样式 */
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 超出隐藏 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}
					}
				}
			}
		}
	}
</style>