Jingde-town-wechat-uniapp/pages_order/service/applyRelic.vue

<template>
	<view class="apply">

		<navbar title="申请遗迹" leftClick @leftClick="$utils.navigateBack" />
		<view class="top-img">
			<image src="../static/applyRelic/jdz.png" mode="aspectFill" style="width: 100%; height: 100%;"></image>
		</view>

		<view class="middle-box">
			<view class="middle-img">
				<view>
					<image src="../static/applyRelic/2.png" mode="aspectFill" />
				</view>
				<view>
					<image src="../static/applyRelic/2.png" mode="aspectFill" />
				</view>
				<view>
					<image src="../static/applyRelic/2.png" mode="aspectFill" />
				</view>
			</view>
			<view class="middle-font">
				<view>
					申请历程
				</view>
				<view>
					申遗缘由
				</view>
				<view>
					遗产价值
				</view>
			</view>
		</view>

		<view class="apply-list">
			<uv-list  @scrolltolower="scrolltolower">
				<uv-list-item 
				title="景德镇：保护文化遗产，复兴千年瓷都" 
				note="2024-09-01"
				border="true"
				v-for="(item,index) in 10" :key="index"
				>
					<template #footer>
						<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10rpx" width="240rpx"
							height="160rpx" />
					</template>
				</uv-list-item>
			</uv-list>
		</view>
		<tabber />
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.apply {

		.top-img {
			height: 380rpx;
		}

		.middle-box {
			display: flex;
			position: relative;
			height: 220rpx;
			align-items: center;
			justify-content: space-around;
			background-color: #fff;

			.middle-img {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;

				view {
					width: 160rpx;
					height: 160rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.middle-font {
				position: absolute;
				display: flex;
				width: 100%;
				justify-content: space-around;

				view {
					width: 60rpx;
					color: #FFFDF6;
					font-weight: 600;
				}
			}
		}

		.apply-list {
			width: 94%;
			margin-left: 3%;
			/deep/ .uv-list-item{
				background-color: #FFFDF6 !important;
			}
		}
	}
</style>