<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>扫码溯源</title>
	<!-- ① 防 FOUC 样式 -->
	<style>
		.carousel-img:not(.active) {
			opacity: 0 !important;
			pointer-events: none;
		}
		#carousel {
			visibility: hidden;
		}
		#carousel.ready {
			visibility: visible;
		}
	</style>
</head>
<body style="background-color:#F0F0F0">
<div id="app">
	

	<div class="invalid">
<!--		<img style="border-radius: 10px;" src="/cem/static/img/wx.png" />-->
		<span>未查询到溯源信息</span>
	</div>
</div>
<script>
	const images = document.querySelectorAll('.carousel-img');
	const dots   = document.querySelectorAll('.dot');
	let current  = 0;

	function showSlide(index) {
		images.forEach(img => img.classList.remove('active'));
		dots.forEach(dot => dot.classList.remove('active'));
		images[index].classList.add('active');
		dots[index].classList.add('active');
		// const div = document.getElementById('carousel'); // 获取div元素
		// const width = div.offsetWidth; // 数值类型，单位为px（不含单位字符串
		// const Height = div.offsetHeight; // 数值类型，单位为px（不含单位字符串
		// console.log( width)
		// console.log( Height)
	}

	function changeSlide(direction) {
		current = (current + direction + images.length) % images.length;
		showSlide(current);
	}

	function goToSlide(index) {
		current = index;
		showSlide(current);
	}

	/* ---------- 滑动逻辑 ---------- */
	const carousel = document.getElementById('carousel');
	let startX = 0;
	let endX   = 0;

	carousel.addEventListener('touchstart', e => {
		startX = e.touches[0].clientX;
	});

	carousel.addEventListener('touchmove', e => {
		endX = e.touches[0].clientX;
	});

	carousel.addEventListener('touchend', () => {
		const diff = startX - endX;
		if (Math.abs(diff) > 50) {          // 滑动距离阈值
			diff > 0 ? changeSlide(1)         // 左滑 → 下一张
					: changeSlide(-1);       // 右滑 → 上一张
		}
	});

	/* ---------- 自动轮播 ---------- */
	setInterval(() => changeSlide(1), 3000);
	document.getElementById('carousel').classList.add('ready');
</script>
<style>
	#app {
		padding: 0 10px;
	}

	.mainDiv {
		width: 100%;
		padding-top: 20px;
	}
	.top {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 50px;
	}

	.top span {
		margin-top: 20px;
		width: 100%;
		text-align: center;
		font-size: 2em;
		height: 60px;
		line-height: 60px;
		border-radius: 10px;
	}

	.section-title {
		font-size: 2.5em;
        color: #1e88e5;
        margin-bottom: 15px;
		padding-left: 10px;
		border-left: 8px solid #1e88e5;
		font-weight: bold;
	}

	.basic {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 10px 0 10px 10px;
		margin-bottom: 20px;
	}

	.info-row {
		margin: 15px 0;
		padding: 10px 10px;
		font-size: 2em;
		color: #000;
		display: flex;
		align-items: center;
	}

	.info-row label {
		margin-right: 10px;
		display: inline-block;
		text-align: left;
	}

	.info-row span {
		margin-left: 10px;
		color: #333;
	}

	.divider {
		border: none;
		border-top: 1px solid #ccc;
		margin: 0 20px; /* 横线左右离边框各20像素 */
	}

	.invalid {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin: 20px 0;
	}

	.invalid span {
		width: 30%;
		text-align: center;
		font-size: 2em;
		height: 60px;
		line-height: 60px;
	}

	.carousel {
		position: relative;
		width: 100%;
		height: 500px;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.carousel-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		transition: opacity 1s ease-in-out;
	}

	.carousel-img.active {
		opacity: 1;
	}

	.arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0,0,0,0.5);
		color: white;
		border: none;
		font-size: 2em;
		padding: 10px 15px;
		cursor: pointer;
		z-index: 2;
	}

	.arrow.left {
		left: 10px;
	}

	.arrow.right {
		right: 10px;
	}

	.dots {
		position: absolute;
		bottom: 15px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 10px;
		z-index: 2;
	}

	.dot {
		width: 12px;
		height: 12px;
		background: rgba(255,255,255,0.6);
		border-radius: 50%;
		cursor: pointer;
	}

	.dot.active {
		background: white;
	}
    .btn-container {
        display: flex;
        justify-content: center;
        margin-bottom: 35px;
    }

    .btn {
        background-color: #1e88e5;
        color: white;
        text-decoration: none;
        border: none;
        border-radius: 50px;
        padding: 16px 90px;
        font-size: 2rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    }

    .btn:hover {
        background-color: #1e88e5;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
    }

    .btn:active {
        transform: translateY(0);
    }
</style>
</body>
</html>