feiniao-youwei-uniapp/pages/tabBar/home/subPages/sourceReport.vue

<template>
	<view class="source-report">
		<view class="source-content">
			<view class="source-box">

				<view class="steps">
					<view class="steps-list">
						<view class="steps-item" :class="{ active: activeIndex == index }"
							v-for="(item, index) in steps" :key="index">
							<view class="name">{{ item }}</view>
							<view class="dot"></view>
						</view>
					</view>
				</view>
				<!-- 位置 -->
				<view class="position-wrap">
					<view class="address">
						<image class="location-img" src="/static/home/adress-icon.png" mode=""></image>
						<span>荔枝博览园(江埔街道江埔街环市东路1280号广州市从化区)</span>
					</view>
				</view>
				<!-- 关闭，下一页 -->
				<view class="footer-btn">
					<div class="btn-item pre" v-show="activeIndex!==0" @click="hanldePrev">上一页</div>
					<view class="btn-item close" @click="goBack">关闭</view>
					<view class="btn-item next" v-show="activeIndex!==5" @click="hanldeNext">下一页</view>
				</view>
			</view>
		</view>
		<view class="report-info">
			<swiper ref="swiperRef" :indicator-dots="true" :autoplay="false" :interval="3000" style="height: 100vh"
				:current="activeIndex">
				<swiper-item>
					<view class="item-content">

						<video v-if="url" :src="url" object-fit="cover" ref="myVideo" :show-fullscreen-btn="false"
							:autoplay="true" class="mp4" loop muted controls @canplay="onVideoReady">
						</video>
						<view class="mp4-title">
							<span>在线赏园</span>
							<view class="text">科学定义好吃，数字评估生态</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<up-image class="img-dom" width="100%"
							src="https://birdseye-img-ali-cdn.sysuimars.com//farmTeamImg/1749100102865.png"
							mode="widthFix"></up-image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content" v-if="activeIndex === 2">
						<banner-two-vue></banner-two-vue>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<banner-three-vue></banner-three-vue>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<banner-four-vue></banner-four-vue>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<banner-five-vue></banner-five-vue>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import bannerTwoVue from '../components/bannerTwo.vue';
	import bannerThreeVue from '../components/bannerThree.vue';
	import bannerFourVue from '../components/bannerFour.vue';
	import bannerFiveVue from '../components/bannerFive.vue';
	import {
		ref,
	} from 'vue';


	const activeIndex = ref(0)
	const steps = ["美景", "果园", "环境", "气象", "农事", "生态"];
	const url = ref("https://birdseye-img-ali-cdn.sysuimars.com//fineView/1749132292921.mp4")

	const myVideo = ref(null);
	const onVideoReady = () => {
		myVideo.value.play();
	};

	const swiperRef = ref(null);

	function hanldeNext() {
		activeIndex.value++
	}
	
	function hanldePrev() {
		activeIndex.value--
	}
	
	function goBack() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.source-report {
		height: 100vh;
		width: 100%;
		overflow: hidden;
		position: relative;
		color: #fff;

		.source-content {
			position: absolute;
			z-index: 2;
			width: 100%;
			height: 100vh;
			pointer-events: none;

			.source-box {
				position: relative;
				width: 100%;
				height: 100%;
			}

			.steps {
				padding: 24rpx 8rpx;
				width: 100%;
				font-size: 13px;
				box-sizing: border-box;

				.line {
					background: rgba(255, 255, 255, 0.18);
					width: 100%;
					height: 1.5px;
				}

				.steps-list {
					display: flex;
					justify-content: space-between;
					width: 100%;
					border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
				}

				.steps-item {
					flex: 1;
					margin-bottom: -4.5px;

					.name {
						text-align: center;
						background: #035197;
						border-radius: 20px;
						padding: 3px;
						width: 54px;
						margin: 0 auto 8px;
						font-size: 12px;
					}

					.dot {
						width: 8px;
						height: 8px;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						margin: auto;
						position: relative;

						&::before {
							content: "";
							position: absolute;
							left: -2px;
							top: -2px;
							width: 12px;
							height: 12px;
							background: rgba(255, 255, 255, 0.3);
							border-radius: 50%;
						}
					}

					&.active {
						.name {
							background-image: linear-gradient(45deg, #ffd887, #ed9e1e);
						}

						.dot {
							background: #ffd489;
						}
					}
				}
			}

			.position-wrap {
				z-index: 2;
				position: absolute;
				bottom: 110px;
				left: 12px;
				width: calc(100% - 24px);
				display: flex;
				flex-direction: column;
				align-items: center;

				.address {
					width: 100%;
					color: #f0d09c;
					padding: 10px 0;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 5px;
					box-sizing: border-box;
					display: flex;
					font-size: 13px;
					align-items: center;
					justify-content: center;

					.location-img {
						width: 17px;
						height: 19px;
						margin-right: 4px;
					}
				}
			}

			.footer-btn {
				position: absolute;
				z-index: 2;
				padding: 0 12px;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				left: auto;
				right: 0;
				bottom: 86px;

				.btn-item {
					font-size: 14px;
					color: #FFFFFF;
					padding: 7px 18px;
					width: 80px;
					box-sizing: border-box;
					border-radius: 25px;
					border: 1px solid rgba(255, 255, 255, 0.3);
					text-align: center;
					font-weight: 500;
					background: rgba(0, 0, 0, 0.6);
					pointer-events: all;
				}

				.pre {
					position: absolute;
					left: 12px;
				}

				.close {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}

				.next {
					position: absolute;
					left: auto;
					right: 12px;
				}

				.save {
					color: #ff8400;
				}
			}
		}

		.report-info {
			.item-content {
				height: 100vh;
				width: 100%;

				.mp4 {
					width: 100%;
					height: 100%;
					object-fit: cover;

					::v-deep {
						.uni-video-video {
							object-fit: cover !important;
						}
					}
				}

				.mp4-title {
					position: absolute;
					top: 62px;
					left: 24px;
					font-size: 45px;

					span {
						font-family: "jiangxizhuokai";
					}

					.text {
						margin-top: 4px;
						font-size: 16px;
					}
				}
			}
		}
	}
</style>