<!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: '';
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('./assets/bg1.png')"></div>
<div class="slide" style="background-image: url('./assets/bg2.png')"></div>
<div class="slide" style="background-image: url('./assets/bg1.png')"></div>
</div>
<div style='background-color:rgba(0, 0, 0, 0);width: 100%;height: 1280px;position: absolute;
top: 33.4%;'>
<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) {
//(去掉开头的'?')
const queryString = window.location.search.substring(1);
const params = queryString.split('&');
for (const param of params) {
const pair = param.split('=');
// 对参数名和值进行URL解码
const name = decodeURIComponent(pair[0]);
const value = pair.length > 1 ? decodeURIComponent(pair[1]) : '';
if (name === paramName) {
return value;
}
}
// 找不到目标参数返回
return 'C0GSLS';
}
// 创建API请求函数
async function fetchNewsData() {
const codeValue = getQueryParam('terminalCode');
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报纸" : '6寸照片',
image: module.coverImage || "./assets/group.png",
moduleUrl: `${module.moduleUrl}?terminalCode=${codeValue}&moduleCode=${module.moduleCode}`
}));
} else {
console.log("请求返回错误:", res.message);
return [];
}
})
.catch(error => {
console.error('API请求错误:', error);
return [];
});
}
// 优化初始化函数
async function init() {
try {
// 等待API返回数据
newspaperData = await fetchNewsData();
console.log("获取到的数据:", newspaperData);
// 确保在数据获取后再渲染
renderItems(newspaperData);
setupEventListeners();
setupJumpLinks();
// 启动轮播图(新增)
setupSlider();
} catch (error) {
console.error('初始化失败:', error);
// 使用空数组渲染结构
renderItems([]);
}
}
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, { passive: false });
let countdownTimer = null;
function showPopup() {
document.getElementById('popup').style.display = 'block';
let timeLeft = 120;
const countdownEl = document.getElementById('countdown');
countdownEl.textContent = `倒计时:${timeLeft} 秒`;
countdownTimer = setInterval(() => {
timeLeft--;
countdownEl.textContent = `倒计时:${timeLeft} 秒`;
if (timeLeft <= 0) {
hidePopup();
}
}, 1000);
}
// 修改后的渲染函数--判断长度渲染逻辑
function renderItems(data) {
const container = document.getElementById('newsContainer');
container.innerHTML = '';
// 获取box元素
const boxElement = container.closest('.box');
if (data.length === 0) {
// 没有数据时显示提示
container.innerHTML = `<div class="no-data">数据加载中,请稍后...</div>`;
return;
}
// 原有布局渲染逻辑保持不变
if (data.length === 4) {
// 当数组长度为4时,添加no-margin类
boxElement.classList.add('no-margin');
// 长度为4时的布局:全部为大盒子(.item)
data.forEach(item => {
container.appendChild(createItem(item));
});
}
else if (data.length === 5) {
// 其他情况下移除no-margin类
boxElement.classList.remove('no-margin');
// 长度为5时的布局:前3个大盒子,最后2个小盒子放在第三个大盒子位置上下排列
// 第一列(包含前2个大盒子)
const leftCol = document.createElement('div');
leftCol.className = 'layout-column';
leftCol.appendChild(createItem(data[0]));
leftCol.appendChild(createItem(data[1]));
container.appendChild(leftCol);
// 第二列(包含第三个大盒子和小盒子容器)
const rightCol = document.createElement('div');
rightCol.className = 'layout-column';
// 添加第三个大项目
rightCol.appendChild(createItem(data[2]));
// 创建小项目容器(包含第四和第五个项目)
const smallContainer = document.createElement('div');
smallContainer.className = 'small-items-container';
smallContainer.appendChild(createItem2(data[3]));
smallContainer.appendChild(createItem2(data[4]));
// 添加小项目容器到第二列
rightCol.appendChild(smallContainer);
// 将第二列添加到容器
container.appendChild(rightCol);
} else {
// 通用渲染方案 - 使用网格布局
const gridContainer = document.createElement('div');
gridContainer.className = 'box';
gridContainer.style.display = 'grid';
gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
gridContainer.style.gap = '36px';
data.forEach(item => {
// 根据位置决定渲染大项目或小项目
if (gridContainer.childElementCount < 2) {
gridContainer.appendChild(createItem(item));
} else {
gridContainer.appendChild(createItem2(item));
}
});
container.appendChild(gridContainer);
}
}
function hidePopup() {
document.getElementById('popup').style.display = 'none';
if (countdownTimer) clearInterval(countdownTimer);
}
// 为静态数据添加跳转功能
function setupJumpLinks() {
// 为所有按钮添加点击事件
document.querySelectorAll('.print-button').forEach(button => {
button.addEventListener('click', function (e) {
e.stopPropagation();
// 获取所在项目的data-moduleUrl属性
const container = this.closest('[data-module-url]');
if (container) {
const url = container.dataset.moduleUrl;
if (url && url !== 'undefined') {
window.location.href = url;
} else {
console.error('无效的跳转URL');
}
}
});
});
}
// 创建大项目(报纸头条)
function createItem(item) {
const itemElement = document.createElement('div');
itemElement.className = 'item';
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='avaiDiv'>
<span class="available">
<span class='sizelabie'>¥</span>${item.available}</span>
<span class='sizelabie'> / ${item.size}</span>
<div>
<span class="button print-button">点击体验</span>
</div>
</div>
`;
return itemElement;
}
// 创建小项目(自助打印)
function createItem2(item) {
const itemElement = document.createElement('div');
itemElement.className = 'item2';
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='avaiDiv'>
<span class="available">
<span class='sizelabie'>¥</span>${item.available}</span>
<span class='sizelabie'> / ${item.size}</span>
<div>
<div class="button2 print-button">点击体验</div>
</div>
</div>
`;
return itemElement;
}
// 事件监听处理
function setupEventListeners() {
document.getElementById('newsContainer').addEventListener('click', function (e) {
if (e.target.classList.contains('print-button')) {
const itemContainer = e.target.closest('[data-id]');
if (itemContainer) {
const itemId = itemContainer.dataset.id;
showPopup();
}
}
});
document.getElementById('popup-mask').onclick = hidePopup;
document.getElementById('popup-close').onclick = hidePopup;
}
// 新增轮播图设置函数
function setupSlider() {
const track = document.querySelector('.slide-track');
const slides = document.querySelectorAll('.slide');
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 = 'none';
currentIndex = 0;
track.style.transform = 'translateX(0)';
setTimeout(() => {
track.style.transition = 'transform 1.5s cubic-bezier(0.4, 0, 0.2, 1)';
}, 50);
}, 1500);
}
}
let slideInterval = setInterval(nextSlide, intervalTime);
track.addEventListener('mouseenter', () => clearInterval(slideInterval));
track.addEventListener('mouseleave', () => {
slideInterval = setInterval(nextSlide, intervalTime);
});
}
// 移除DOMContentLoaded中的测试按钮代码
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
把class="divP"的字体改为Alimama ShuHeiTi,其他包涵字体的class的样式字体改为
Alibaba PuHuiTi