<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>拍拍印</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
/* 新增滑动轮播关键样式 */
.container {
overflow: hidden;
position: relative;
width: 100vw;
height: 100vh;
}
.slide-track {
display: flex;
width: 100%;
height: 100vh;
transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
/* 平滑过渡效果 */
}
.slide {
flex: 1 0 100vw;
/* 每张占满视口宽度 */
background-size: cover;
background-position: center;
}
/* 无限循环关键技巧） */
.slide-track::before,
.slide-track::after {
content: &
#39;&
#39;;
flex: 100vw;
/* 复制首尾图片实现无缝 */
background-image: inherit;
}
.content {
position: absolute;
top: 35.5%;
left: 4.2%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.box {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 两列 */
gap: 36px;
margin-left: 22px;
margin-top: -20px;
}
.box.no-margin {
margin-top: 0 !important;
}
.item {
background-color:
#B13627;
border-radius: 50px;
width: 455px;
height: 512px;
}
.item2 {
background-color:
#B13627;
border-radius: 40px;
width: 455px;
margin-top: 20px;
}
.topDiv {
width: 100%;
height: 172px;
}
.divP {
width: 70%;
height: 86px;
background-color:
#00000000;
color:
#ffffff;
font-size: 64px;
font-weight: 700;
letter-spacing: 2px;
margin-left: 25px;
}
.divP2 {
width: 240px;
height: 48px;
background-color:
#ffffff;
color:
#000;
font-size: 24px;
letter-spacing: 2px;
margin-left: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-top: -50px;
border-radius: 25px
}
.bottomDiv {
position: relative;
/* 使子元素的绝对定位相对于此元素 */
height: 307px;
/* 确保容器有确定的高度 */
}
.butDiv,
.butDiv2 {
position: absolute;
left: 20px;
bottom: 20px;
/* 放置在底部 */
width: calc(100% - 40px);
/* 宽度减去左右边距 */
z-index: 10;
/* 确保它在图片上方 */
margin-top: 0;
/* 移除之前的margin-top */
}
/* 调整报纸头条部分 */
.item .butDiv {
margin-top: 0;
top: auto;
/* 重置顶部位置 */
bottom: 20px;
/* 放置在底部 */
margin-left: 0;
/* 移除左外边距 */
}
/* 修改斑马日报和自助打印的按钮位置 */
.item2 .butDiv2 {
position: absolute;
width: calc(100% - 40px);
bottom: 20px;
top: -80px;
margin-top: 0;
margin-left: 0;
}
/* 调整按钮在卡片内的位置 */
.button,
.button2 {
margin-top: -13px;
margin-left: 265px;
position: static;
/* 按钮使用默认定位 */
}
/* 调整顶部区域避免重叠 */
.topDiv {
margin-top: -30px;
/* 适当上移 */
z-index: 5;
/* 确保在butDiv之上 */
}
/* 调整斑马日报和自助打印高度 */
.item2 {
position: relative;
/* 确保绝对定位元素有参考点 */
height: 236px;
}
.bottomDiv img {
width: 100%;
height: 100%;
}
.butDiv {
width: 415px;
height: 93px;
background-color:
#ffffff;
border-radius: 47px;
margin-top: 185px;
margin-left: 20px;
}
.butDiv2 {
width: 415px;
height: 93px;
background-color:
#ffffff;
border-radius: 47px;
margin-top: 0px;
margin-left: 20px;
}
.avaiDiv {
width: 220px;
height: 73px;
margin-top: 16px;
margin-left: 8px;
}
.available {
font-size: 38px;
margin-left: 30px;
align-self: center;
color:
#303030;
font-weight: 700;
}
.sizelabie {
font-size: 20px;
color:
#606060;
}
.button {
width: 140px;
height: 73px;
background-color:
#000;
border-radius: 50px;
margin-top: -60px;
margin-left: 255px;
display: flex;
align-items: center;
justify-content: center;
color:
#ffffff;
font-size: 25px;
}
.button2 {
width: 140px;
height: 73px;
background-color:
#000;
border-radius: 50px;
margin-top: -65px;
margin-left: 255px;
display: flex;
align-items: center;
justify-content: center;
color:
#ffffff;
font-size: 25px;
}
/* 弹窗样式 */
#popup {
display: none;
}
#popup-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
#popup-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background: white;
border-radius: 10px;
padding: 40px;
text-align: center;
width: 70%;
}
#popup-content img {
width: 60%;
height: 60%;
padding: 40px 0;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
}
#popup-close {
font-size: 40px;
font-weight: bold;
color:
#000;
cursor: pointer;
user-select: none;
}
#countdown {
font-size: 26px;
color:
#000;
text-align: right;
}
.title {
text-align: center;
font-size: 40px;
color:
#000;
}
/* 新增小项目容器样式 */
.small-items-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-top: 20px;
}
/* 修改小项目宽度为100% */
.item2 {
background-color:
#B13627;
border-radius: 40px;
width: 100%;
/* 从固定宽度改为100% */
height: 236px;
/* 移除原来的margin-bottom */
}
</style>
</head>
<body>
<div class="container">
<div class="slide-track">
<div class="slide" style="background-image: url(&
#39;./assets/bg1.png&
#39;)"></div>
<div class="slide" style="background-image: url(&
#39;./assets/bg2.png&
#39;)"></div>
<div class="slide" style="background-image: url(&
#39;./assets/bg1.png&
#39;)"></div>
</div>
<div style=&
#39;background-color:rgba(0, 0, 0, 0);width: 100%;height: 1280px;position: absolute;
top: 33.4%;&
#39;>
<img src="./assets/img.png" style="width: 100%;">
</div>
<div class="content">
<div class="box" id="newsContainer">
<!-- <div class="item">
<div class="topDiv">
<p class="divP">报纸头条</p>
<p class="divP2">人人都是大明星</p>
</div>
<div class="bottomDiv">
<img src="./assets/group.png" alt="">
<div class="butDiv">
<span >16/18</span>
<div class="button">点击体验
</div>
</div>
</div> -->
<!-- <div style="margin-top: -29px;">
<div class="item2">
<div class="topDiv">
<p class="divP">斑马日报</p>
</div>
<div>
<div class="butDiv2">
<span>16/18</span>
<div class="button2">点击体验
</div>
</div>
</div>
</div>
<div class="item2">
<div class="topDiv">
<p class="divP">自助打印</p>
</div>
<div>
<div class="butDiv2">
<span>16/18</span>
<div class="button2">点击体验
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
<!-- 弹窗结构 -->
<div id="popup">
<div id="popup-mask"></div>
<div id="popup-content">
<div class="popup-header">
<div id="popup-close">×</div>
<div id="countdown">倒计时：120 秒</div>
</div>
<p class="title">微信扫码解锁自助打印</p>
<img src="https://files.vchoo.net/memento/pro/34/webresource/0524893c-b50e-43bf-a0a4-0c4593aa16ac.png"
alt="二维码" />
</div>
</div>
</div>
<script>
let newspaperData = []
// 获取当前页面的URL参数值
function getQueryParam(paramName) {
//（去掉开头的&
#39;?&
#39;）
const queryString = window.location.search.substring(1);
const params = queryString.split(&
#39;&&
#39;);
for (const param of params) {
const pair = param.split(&
#39;=&
#39;);
// 对参数名和值进行URL解码
const name = decodeURIComponent(pair[0]);
const value = pair.length > 1 ? decodeURIComponent(pair[1]) : &
#39;&
#39;;
if (name === paramName) {
return value;
}
}
// 找不到目标参数返回
return &
#39;C0GSLS&
#39;;
}
// 创建API请求函数
async function fetchNewsData() {
const codeValue = getQueryParam(&
#39;terminalCode&
#39;);
return fetch(`http://192.168.8.117:5175/api/v1/Common/GetModules?terminalCode=${codeValue}`, {
method: "get",
headers: { "Content-Type": "application/json" },
})
.then(response => response.json())
.then(res => {
if (res.code === 200) {
// .slice(0, 4) 截取
return res.data.slice(0, 4).map(module => ({
id: module.id,
title: module.moduleName,
subtitle: module.moduleDesc,
available: module.photoOriginalPrice,
size: module.printType == 2 ? "A3报纸" : &
#39;6寸照片&
#39;,
image: module.coverImage || "./assets/group.png",
moduleUrl: `${module.moduleUrl}?terminalCode=${codeValue}&moduleCode=${module.moduleCode}`
}));
} else {
console.log("请求返回错误:", res.message);
return [];
}
})
.catch(error => {
console.error(&
#39;API请求错误:&
#39;, error);
return [];
});
}
// 优化初始化函数
async function init() {
try {
// 等待API返回数据
newspaperData = await fetchNewsData();
console.log("获取到的数据:", newspaperData);
// 确保在数据获取后再渲染
renderItems(newspaperData);
setupEventListeners();
setupJumpLinks();
// 启动轮播图（新增）
setupSlider();
} catch (error) {
console.error(&
#39;初始化失败:&
#39;, error);
// 使用空数组渲染结构
renderItems([]);
}
}
document.addEventListener(&
#39;touchstart&
#39;, function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, { passive: false });
let countdownTimer = null;
function showPopup() {
document.getElementById(&
#39;popup&
#39;).style.display = &
#39;block&
#39;;
let timeLeft = 120;
const countdownEl = document.getElementById(&
#39;countdown&
#39;);
countdownEl.textContent = `倒计时：${timeLeft} 秒`;
countdownTimer = setInterval(() => {
timeLeft--;
countdownEl.textContent = `倒计时：${timeLeft} 秒`;
if (timeLeft <= 0) {
hidePopup();
}
}, 1000);
}
// 修改后的渲染函数--判断长度渲染逻辑
function renderItems(data) {
const container = document.getElementById(&
#39;newsContainer&
#39;);
container.innerHTML = &
#39;&
#39;;
// 获取box元素
const boxElement = container.closest(&
#39;.box&
#39;);
if (data.length === 0) {
// 没有数据时显示提示
container.innerHTML = `<div class="no-data">数据加载中，请稍后...</div>`;
return;
}
// 原有布局渲染逻辑保持不变
if (data.length === 4) {
// 当数组长度为4时，添加no-margin类
boxElement.classList.add(&
#39;no-margin&
#39;);
// 长度为4时的布局：全部为大盒子（.item）
data.forEach(item => {
container.appendChild(createItem(item));
});
}
else if (data.length === 5) {
// 其他情况下移除no-margin类
boxElement.classList.remove(&
#39;no-margin&
#39;);
// 长度为5时的布局：前3个大盒子，最后2个小盒子放在第三个大盒子位置上下排列
// 第一列（包含前2个大盒子）
const leftCol = document.createElement(&
#39;div&
#39;);
leftCol.className = &
#39;layout-column&
#39;;
leftCol.appendChild(createItem(data[0]));
leftCol.appendChild(createItem(data[1]));
container.appendChild(leftCol);
// 第二列（包含第三个大盒子和小盒子容器）
const rightCol = document.createElement(&
#39;div&
#39;);
rightCol.className = &
#39;layout-column&
#39;;
// 添加第三个大项目
rightCol.appendChild(createItem(data[2]));
// 创建小项目容器（包含第四和第五个项目）
const smallContainer = document.createElement(&
#39;div&
#39;);
smallContainer.className = &
#39;small-items-container&
#39;;
smallContainer.appendChild(createItem2(data[3]));
smallContainer.appendChild(createItem2(data[4]));
// 添加小项目容器到第二列
rightCol.appendChild(smallContainer);
// 将第二列添加到容器
container.appendChild(rightCol);
} else {
// 通用渲染方案 - 使用网格布局
const gridContainer = document.createElement(&
#39;div&
#39;);
gridContainer.className = &
#39;box&
#39;;
gridContainer.style.display = &
#39;grid&
#39;;
gridContainer.style.gridTemplateColumns = &
#39;repeat(2, 1fr)&
#39;;
gridContainer.style.gap = &
#39;36px&
#39;;
data.forEach(item => {
// 根据位置决定渲染大项目或小项目
if (gridContainer.childElementCount < 2) {
gridContainer.appendChild(createItem(item));
} else {
gridContainer.appendChild(createItem2(item));
}
});
container.appendChild(gridContainer);
}
}
function hidePopup() {
document.getElementById(&
#39;popup&
#39;).style.display = &
#39;none&
#39;;
if (countdownTimer) clearInterval(countdownTimer);
}
// 为静态数据添加跳转功能
function setupJumpLinks() {
// 为所有按钮添加点击事件
document.querySelectorAll(&
#39;.print-button&
#39;).forEach(button => {
button.addEventListener(&
#39;click&
#39;, function (e) {
e.stopPropagation();
// 获取所在项目的data-moduleUrl属性
const container = this.closest(&
#39;[data-module-url]&
#39;);
if (container) {
const url = container.dataset.moduleUrl;
if (url && url !== &
#39;undefined&
#39;) {
window.location.
href = url;
} else {
console.error(&
#39;无效的跳转URL&
#39;);
}
}
});
});
}
// 创建大项目（报纸头条）
function createItem(item) {
const itemElement = document.createElement(&
#39;div&
#39;);
itemElement.className = &
#39;item&
#39;;
itemElement.dataset.id = item.id;
itemElement.dataset.moduleUrl = item.moduleUrl; // 添加跳转URL
itemElement.innerHTML = `
<div class="topDiv print-button">
<p class="divP">${item.title}</p>
<p class="divP2">${item.subtitle}</p>
</div>
<div class="bottomDiv print-button">
<img src="${item.image}" alt="${item.title}">
<div class="butDiv">
<div class=&
#39;avaiDiv&
#39;>
<span class="available">
<span class=&
#39;sizelabie&
#39;>￥</span>${item.available}</span>
<span class=&
#39;sizelabie&
#39;> / ${item.size}</span>
<div>
<span class="button print-button">点击体验</span>
</div>
</div>
`;
return itemElement;
}
// 创建小项目（自助打印）
function createItem2(item) {
const itemElement = document.createElement(&
#39;div&
#39;);
itemElement.className = &
#39;item2&
#39;;
itemElement.dataset.id = item.id;
itemElement.dataset.moduleUrl = item.moduleUrl; // 添加跳转URL
itemElement.innerHTML = `
<div class="topDiv print-button">
<p class="divP">${item.title}</p>
</div>
<div class="bottomDiv print-button">
<div class="butDiv2">
<div class=&
#39;avaiDiv&
#39;>
<span class="available">
<span class=&
#39;sizelabie&
#39;>￥</span>${item.available}</span>
<span class=&
#39;sizelabie&
#39;> / ${item.size}</span>
<div>
<div class="button2 print-button">点击体验</div>
</div>
</div>
`;
return itemElement;
}
// 事件监听处理
function setupEventListeners() {
document.getElementById(&
#39;newsContainer&
#39;).addEventListener(&
#39;click&
#39;, function (e) {
if (e.target.classList.contains(&
#39;print-button&
#39;)) {
const itemContainer = e.target.closest(&
#39;[data-id]&
#39;);
if (itemContainer) {
const itemId = itemContainer.dataset.id;
showPopup();
}
}
});
document.getElementById(&
#39;popup-mask&
#39;).
onclick = hidePopup;
document.getElementById(&
#39;popup-close&
#39;).
onclick = hidePopup;
}
// 新增轮播图设置函数
function setupSlider() {
const track = document.querySelector(&
#39;.slide-track&
#39;);
const slides = document.querySelectorAll(&
#39;.slide&
#39;);
let currentIndex = 0;
const intervalTime = 5000;
// 确保至少有2张幻灯片
if (slides.length < 2) return;
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
track.style.transform = `translateX(-${currentIndex * 100}%)`;
if (currentIndex === slides.length - 1) {
setTimeout(() => {
track.style.transition = &
#39;none&
#39;;
currentIndex = 0;
track.style.transform = &
#39;translateX(0)&
#39;;
setTimeout(() => {
track.style.transition = &
#39;transform 1.5s cubic-bezier(0.4, 0, 0.2, 1)&
#39;;
}, 50);
}, 1500);
}
}
let slideInterval = setInterval(nextSlide, intervalTime);
track.addEventListener(&
#39;mouseenter&
#39;, () => clearInterval(slideInterval));
track.addEventListener(&
#39;mouseleave&
#39;, () => {
slideInterval = setInterval(nextSlide, intervalTime);
});
}
// 移除DOMContentLoaded中的测试按钮代码
document.addEventListener(&
#39;DOMContentLoaded&
#39;, init);
</script>
</body>
</html>
把class="divP"的字体改为Alimama ShuHeiTi,其他包涵字体的class的样式字体改为
Alibaba PuHuiTi
本文介绍如何使用JavaScript处理HTML中的链接点击事件，防止默认行为并确保页面不发生跳转。提供了两种常见实现方式：通过返回false阻止默认行为和使用javascript:void(0)作为href属性。
扫一扫
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
