hhrs/pages/venue/venue.vue

<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-header">
				<view class="nav-back" @click="goBack">
					<text class="back-icon">&#xe600;</text>
				</view>
				<text class="nav-title">文旅场馆</text>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-area">
			<view class="search-bar">
				<text class="search-icon">&#xe610;</text>
				<input class="search-input" v-model="keyword" placeholder="请搜索场馆名" confirm-type="search" @confirm="onSearch" />
				<view class="search-btn" @click="onSearch">搜索</view>
			</view>
		</view>

		<!-- 场馆列表 -->
		<view class="list-area">
			<view class="venue-card" v-for="item in list" :key="item.id" @click="goDetail(item)">
				<image class="card-img" :src="item.image" mode="aspectFill" />
				<view class="card-info">
					<text class="card-name">{{ item.name }}</text>
					<text class="card-category">{{ item.category }}</text>
					<text class="card-address">{{ item.address }}</text>
				</view>
				<view class="card-distance">
					<text class="distance-icon">&#xe609;</text>
					<text class="distance-text">{{ item.distance }}km</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 44,
			keyword: '',
			list: [
				{
					id: 1,
					name: '怀化黄岩白马风景区',
					category: '景区',
					address: '怀化市鹤城区万达广场 C 区501',
					image: 'https://aliyunoss.hn12301.net/hhrs/hhrs_venue1.png',
					distance: '1.4'
				},
				{
					id: 2,
					name: '穿岩山国家森林公园景区',
					category: '景区',
					address: '怀化市鹤城区万达广场 C 区501',
					image: 'https://aliyunoss.hn12301.net/hhrs/hhrs_venue2.png',
					distance: '1.4'
				}
			]
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		goDetail(item) {
			uni.navigateTo({ url: '/pages/venue/detail?id=' + item.id })
		},
		onSearch() {
			// TODO: 调用搜索接口
		}
	}
}
</script>

<style>
.page {
	min-height: 100vh;
	background-color: #f2f2f7;
}

.nav-bar {
	background-color: #ffffff;
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-header {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.nav-back {
	position: absolute;
	left: 14px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 20px;
	color: #1a1818;
}

.nav-title {
	font-size: 16px;
	font-weight: 500;
	color: #1a1818;
}

.search-area {
	background-color: #ffffff;
	padding: 6px 12px;
}

.search-bar {
	display: flex;
	align-items: center;
	height: 44px;
	background-color: #ffffff;
	border: 1px solid #f2f2f7;
	border-radius: 100px;
	padding: 4px 8px;
	gap: 12px;
}

.search-icon {
	font-size: 18px;
	color: #8e8e93;
}

.search-input {
	flex: 1;
	font-size: 16px;
	color: #333;
}

.search-btn {
	background-color: #0088ff;
	color: #ffffff;
	font-size: 14px;
	padding: 4px 10px;
	border-radius: 50px;
	white-space: nowrap;
}

.list-area {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.venue-card {
	display: flex;
	align-items: flex-end;
	background-color: #ffffff;
	border: 1px solid #f2f2f7;
	border-radius: 6px;
	padding: 24px 12px;
	gap: 12px;
	box-shadow: 0 2px 3px #f2f2f7;
}

.card-img {
	width: 75px;
	height: 75px;
	border-radius: 6px;
	flex-shrink: 0;
}

.card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.card-name {
	font-size: 16px;
	font-weight: 500;
	color: #000000;
}

.card-category {
	font-size: 14px;
	color: #727272;
	margin-top: 8px;
}

.card-address {
	font-size: 14px;
	color: #727272;
	margin-top: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.card-distance {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.distance-icon {
	font-size: 12px;
	color: #727272;
}

.distance-text {
	font-size: 12px;
	color: #727272;
}
</style>