WenWuGuanJia/index_fenbao/XuanJiangYuan/index.vue

<template>
	<view class="box">
		<u-navbar title="厦门文物跑" :placeholder="true" bgColor="#ffe1b8" autoBack></u-navbar>
		<view class="ban">
			<view @click="goSignup" class="" style="margin-bottom: 30rpx">
				<u-swiper :list="bannerlist" imgMode="aspectFill" :height="150" :autoplay="true" :circular="true"></u-swiper>
			</view>
			<!-- 报名按钮 -->
			<view class="bm_box" @click="goSignup">
				<view class="">
					<view class="bm_js">文物跑，聆听历史的声音</view>
					<view class="bm_js2">跑出文化 跑出健康、跑出生态、跑出...</view>
				</view>
				<view class="goto">立即报名</view>
			</view>
			<!-- 简介 -->
			<view class="ld">活动简介</view>
			<view class="jj_box">
				厦门文物跑活动旨在打造一场具有文化认同感的跑步之旅，号召公众关注及保护珍贵文物古迹，用脚步丈量城市历史，打造全民守护历史记忆的社会正能量。迎着第一缕曙光，从各自文物游线路起点出发，按照规划路线，跑..
			</view>
			<!-- 亮点 -->
			<view class="ld">活动亮点</view>
			<view class="list_box">
				<view class="list_item" v-for="item in 4" :key="item">
					<img
						style="width: 100%; height: 200rpx; border-radius: 10rpx"
						src="https://img2.baidu.com/it/u=443975182,626431415&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=418"
					/>
					<view class="item_tit">专属路线</view>
				</view>
			</view>
			<!-- 优秀讲员 -->
			<view class="xjy" @click="gdxjyBtn">
				<view class="ld">优秀宣讲员</view>
				<view class="gd">更多</view>
			</view>
			<view class="list_box">
				<view @click="xqBtn" class="list_item" v-for="item in 4" :key="item">
					<img
						style="width: 100%; height: 200rpx; border-radius: 10rpx"
						src="https://img2.baidu.com/it/u=443975182,626431415&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=418"
					/>
					<view class="item_name">徐有群</view>
				</view>
			</view>
			<!-- 优秀讲员 -->
			<view class="xjy">
				<view class="ld">精彩回顾</view>
				<view class="gd">更多</view>
			</view>
			<scroll-view scroll-x enable-flex class="scroll-view_H" type="list">
				<view class="goods-item" v-for="item in 6" :key="item">
					<image class="img" style="" src="http://t13.baidu.com/it/u=2921758692,2069247658&fm=224&app=112&f=JPEG?w=500&h=500" />
					<view style="margin-left: 20rpx">
						<view>故事</view>
						<view class="gs_js">精彩瞬间</view>
					</view>
				</view>
			</scroll-view> 
			<!-- 底部logo -->
			<view class="btm_box"> 
				<view class="">
					<image src="/static/img/wx.png" class="btn_img" />
					<image src="/static/img/wx1.png" class="btn_img" />
					<image src="/static/img/wx2.png" class="btn_img" />
					
					
				</view>
				<view class="">
					@ 2025 厦门文物管家 保留所有权利
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	onLoad(option) {
		that = this;
	},
	data() {
		return {
			bannerlist: ['https://img2.baidu.com/it/u=443975182,626431415&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=418']
		};
	},
	/* 页面触底 */
	onReachBottom() {
		console.log('触底了');
	},
	methods: {
		// 报名
		goSignup() {
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/bm_page'
			});
		},
		// 更多讲员
		gdxjyBtn() {
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/XuanJiangYuan'
			});
		},

		xqBtn() {
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/xjy_XiangQing'
			});
		}
	}
};
</script>

<style>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: 100%;
}

.ban {
	position: relative;
	width: 92%;
	margin: auto;
}
.bm_box {
	position: absolute;
	display: flex;
	width: 100%;
	top: 200rpx;
	justify-content: space-around;
}
.bm_js {
	font-size: 30rpx;
	color: #ffe1b8;
}
.bm_js2 {
	font-size: 26rpx;
	color: #ffe1b8;
}
.goto {
	width: 150rpx;
	height: 70rpx;
	line-height: 70rpx;
	color: #ffffff;
	text-align: center;
	border-radius: 10rpx;
	background-color: #fb5903;
}
.ld {
	font-size: 30rpx;
	font-weight: 700;
	margin-bottom: 20rpx;
}
.list_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30rpx;
}
.list_item {
	width: 330rpx;
	height: 270rpx;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	background-color: #ffe1b8;
}
.item_tit {
	margin-top: 8rpx;
	margin-left: 20rpx;
}
.jj_box {
	margin-top: 20rpx;
	font-size: 28rpx;
	height: 230rpx;
	overflow: scroll;
}
.item_name {
	text-align: center;
	margin-top: 8rpx;
}
.xjy {
	display: flex;
	margin-bottom: 20rpx;
	justify-content: space-between;
}
.xjy .gd {
	width: 110rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-top: -2rpx;
	text-align: center;
	border-radius: 30rpx;
	color: #ffffff;
	background-color: #f47a1a;
}
.good-hot {
	padding: 16rpx;
}

.scroll-view_H {
	width: 100%;
	white-space: nowrap;
	height: 480rpx;
	flex-direction: row;
}
..scroll-view_H {
	white-space: nowrap; /* 确保子元素在同一行显示 */
	width: 100%; /* 设置 scroll-view 的宽度 */
}

.scroll-view_H .goods-item {
	display: inline-block; /* 使用 inline-block 确保子元素在同一行显示 */
	width: 450rpx;
	height: 400rpx;
	border-radius: 10rpx;
	flex-direction: column;
	background-color: #ffe1b8;
	margin-right: 20rpx; /* 添加右边距，最后一个子元素的右边距为 0 */
}

.scroll-view_H .goods-item:last-child {
	margin-right: 0;
}

.goods-item .img {
	width: 100%;
	height: 300rpx;
	border-radius: 10rpx;
}

.gs_js {
	font-size: 28rpx;
	color: #aba89a;
	margin-top: 10rpx;
}
.btm_box{
	text-align: center;
	font-size: 26rpx;
}
.btn_img{
	
	width: 40rpx;
	height: 40rpx;
}
</style>