WenWuGuanJia/index_fenbao/XuanJiangYuan/bm_page.vue

<template>
	<view class="box">
		<u-navbar title="翔安澳洲线" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
		<view class="ban">
			<view class="" style="margin-bottom: 30rpx">
				<u-swiper :list="bannerlist" imgMode="aspectFill" :height="180" :autoplay="true" :circular="true"></u-swiper>
			</view>
			<!--  -->
			<view class="xq_tit">荻花洲起点 - 澳头终点 澳洲线介绍</view>
			<view class="xq_js">落日余晖千百态，浏江古渡荻花洲。傍晚海风习习的海滩上，露营的家庭、玩沙的孩童、拍夕阳的情侣，都为惬意的海湾悠闲添上了几分松弛感。</view>
			<!-- 报名 -->
			<view @click="goRegister" class="bm_btn">立即报名</view>
			<view class="ld">活动详情</view>
			<view class="hd_xq">
				<div>
					<text>活动时间:</text>
					<text>2024年12月18日</text>
				</div>
				<div>
					<text>活动起点:</text>
					<text>翔安区荻花洲</text>
				</div>
				<div>
					<text>报名费用:</text>
					<text>免费</text>
				</div>
				<div style="margin-bottom: 40rpx">
					<text>活动流程:</text>
					<text>...</text>
				</div>
			</view>
			<view class="ld">活动日程</view>
			<view class="rc_box">
				<view style="margin-top: 8rpx">
					<u-icon name="clock" color="#57bdc3" size="12"></u-icon>
				</view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">起跑时间</view>
					<view class="star_time">8:00 AM</view>
				</view>
			</view>
			<!--  -->
			<view class="rc_box">
				<view class="yuan"></view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">路线站点</view>
					<view class="star_time">沿途站点</view>
				</view>
			</view>
			<!--  -->
			<view class="rc_box">
				<view class="yuan"></view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">文物讲解</view>
					<view class="star_time">每个站点的文物讲解</view>
				</view>
			</view>
			<!--  -->
			<view class="rc_box">
				<view style="margin-top: 8rpx">
					<u-icon name="clock" color="#57bdc3" size="12"></u-icon>
				</view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">终点庆祝</view>
					<view class="star_time">8:00 AM</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerlist: ['https://img2.baidu.com/it/u=443975182,626431415&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=418']
		};
	},
	methods: {
		goRegister() {
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/xq_page'
			});
		}
	}
};
</script>

<style>
.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 {
	width: 92%;
	margin: auto;
}
.xq_tit {
	color: black;
	font-size: 32rpx;
	font-weight: 700;
}
.xq_js {
	color: black;
	font-size: 28rpx;
	margin-top: 10rpx;
	line-height: 40rpx;
	height: 160rpx;
	overflow: scroll;
}
.bm_btn {
	width: 100%;
	height: 80rpx;
	font-size: 30rpx;
	line-height: 80rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 10rpx;
	background-color: #fb5a02;
	margin-bottom: 60rpx;
}
.ld {
	font-size: 30rpx;
	font-weight: 700;
	margin-bottom: 20rpx;
}
.hd_xq {
	color: black;
	line-height: 40rpx;
	font-size: 26rpx;
}
.rc_box {
	display: flex;
	margin-left: 10rpx;
	margin-top: 20rpx;
}
.star_time {
	color: #928f8f;
	font-size: 26rpx;
	line-height: 45rpx;
}
.yuan {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	margin-top: 10rpx;
	border: 2rpx solid #57bdc3;
}
</style>