<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品详情与歌曲信息</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 基础重置与变量定义 */
:root {
--primary-color: #5E72E4;
--primary-light: #7B8FF8;
--primary-extra-light: #F0F3FF;
--secondary-color: #11CDEF;
--success-color: #2DCE89;
--warning-color: #FB6340;
--gray-50: #F8F9FA;
--gray-100: #F1F3F9;
--gray-200: #E9ECEF;
--gray-300: #DEE2E6;
--gray-400: #CED4DA;
--gray-500: #ADB5BD;
--gray-600: #6C757D;
--gray-700: #495057;
--gray-800: #343A40;
--gray-900: #212529;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.35s ease;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #2c3e50;
font-size: 2.5rem;
margin-bottom: 10px;
}
.header p {
color: #7f8c8d;
font-size: 1.1rem;
}
.open-modal-btn {
display: block;
margin: 0 auto 40px;
background-color: #3498db;
color: white;
border: none;
padding: 15px 40px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.open-modal-btn:hover {
background-color: #2980b9;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}
.open-modal-btn i {
margin-right: 8px;
}
/* 弹窗样式 */
.uniquecode {
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 999998;
width: 100%;
height: 100%;
}
.uniquecode .content {
padding: 0 16px;
font-size: 16px;
background: #FFFFFF;
border-radius: 12px;
width: 1100px;
margin: auto;
justify-content: center;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
overflow: hidden;
max-height: 90vh;
}
.uniquecode .content .hr {
font-weight: 600;
font-size: 20px;
text-align: center;
padding: 20px 0;
position: relative;
margin: 0;
background-color: #f8f9fa;
border-bottom: 1px solid #eee;
color: #2c3e50;
}
.popupclose-common {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.Uniquetitle {
flex-wrap: wrap;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
padding: 15px 0;
padding-left: 15px;
padding-right: 15px;
border-radius: 8px;
margin-top: 15px;
}
#unique_code, #item_no {
font-weight: 600;
font-size: 15px;
}
.cartinfoform {
margin-bottom: 30px;
padding: 0 15px;
}
._1frageme1 {
display: flex;
border: 1px solid #eaeaea;
align-items: center;
margin: 0;
padding: 15px;
border-bottom: none;
transition: background-color 0.2s ease;
}
._1frageme1:last-of-type {
border-bottom: 1px solid #eaeaea;
}
._1frageme1 label {
width: 220px;
font-weight: 600;
color: #2c3e50;
flex-shrink: 0;
font-size: 15px;
border-right: 1px solid #eaeaea;
padding-right: 15px;
margin-right: 15px;
}
.c_1fragemly {
flex-grow: 1;
color: #555;
font-size: 15px;
line-height: 1.5;
}
.uniquecode .content .three-popup {
max-height: 630px;
overflow-y: auto;
padding: 15px;
max-width: 900px;
margin: auto;
}
.popupmasking {
position: fixed;
width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .5);
border-radius: 4px;
z-index: -1;
}
.img_content {
max-width: 80px;
border-radius: 6px;
border: 1px solid #ddd;
transition: transform 0.3s ease;
cursor: pointer;
}
.img_content:hover {
transform: scale(1.05);
}
/* 新增歌曲信息样式 */
.songs-container {
margin-top: var(--spacing-sm);
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--gray-200);
}
.songs-header {
display: flex;
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid var(--gray-200);
font-weight: 600;
color: var(--gray-800);
font-size: 0.875rem;
letter-spacing: 0.3px;
}
.song-row {
display: flex;
padding: var(--spacing-md) var(--spacing-lg);
align-items: center;
transition: background-color var(--transition-fast);
border-bottom: 1px solid var(--gray-100);
}
.song-row:last-child {
border-bottom: none;
}
.song-row:hover {
background-color: var(--primary-extra-light);
}
.song-col {
flex: 1;
padding: 0 var(--spacing-sm);
}
.song-col.song {
flex: 1.5;
font-weight: 600;
color: var(--gray-900);
}
.song-col.artist {
flex: 1.2;
color: var(--gray-700);
}
.song-col.duration {
flex: 0.8;
color: var(--gray-700);
}
.song-col.link {
flex: 1.2;
}
.spotify-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
background-color: #1DB954;
color: white;
text-decoration: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
transition: all var(--transition-fast);
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 60px;
justify-content: center;
white-space: nowrap;
}
.spotify-link:hover {
background-color: #1ED760;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(29, 185, 84, 0.3);
}
/* 音乐链接悬停效果 */
.songs-header a:hover {
color: var(--primary-color);
text-decoration: underline;
}
.spotify-link i {
font-size: 14px;
}
.songs-title {
display: flex;
align-items: center;
margin-bottom: var(--spacing-sm);
}
.songs-title i {
color: var(--primary-color);
margin-right: var(--spacing-sm);
font-size: 1.125rem;
background-color: var(--primary-extra-light);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.songs-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
color: white;
font-size: 0.75rem;
padding: 2px 10px;
border-radius: 12px;
margin-left: var(--spacing-sm);
font-weight: 600;
height: 22px;
white-space: nowrap;
}
/* 响应式设计 */
@media (max-width: 1150px) {
.uniquecode .content {
width: 95%;
max-width: 95%;
}
}
@media (max-width: 768px) {
.uniquecode .content {
width: 98%;
padding: 0 10px;
}
._1frageme1 {
flex-direction: column;
align-items: flex-start;
}
._1frageme1 label {
width: 100%;
margin-bottom: 8px;
border-right: none;
padding-right: 0;
margin-right: 0;
}
.c_1fragemly {
width: 100%;
}
.songs-header, .song-row {
flex-wrap: wrap;
}
.song-col {
flex: 1 0 50%;
margin-bottom: var(--spacing-sm);
}
.song-col.link {
flex: 1 0 100%;
margin-top: var(--spacing-xs);
}
.song-col.artist {
border-right: none;
}
.songs-header .song-col.artist {
border-right: none;
}
.header h1 {
font-size: 2rem;
}
}
/* 滚动条样式 */
.three-popup::-webkit-scrollbar {
width: 8px;
}
.three-popup::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.three-popup::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.three-popup::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* 徽章样式 */
.song-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
color: white;
font-size: 0.75rem;
padding: 2px 10px;
border-radius: 12px;
margin-left: var(--spacing-sm);
font-weight: 600;
height: 22px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>商品详情展示</h1>
<p>点击下方按钮查看商品详细信息及相关歌曲</p>
</div>
<button class="open-modal-btn" id="openModalBtn">
<i class="fas fa-eye"></i> 查看商品详情
</button>
<div id="item_detail_wap" class="uniquecode three-level-popup item_detail_wap">
<div class="content">
<div class="hr">
Design Details & History
<span id="closeDetail" class="popupclose-common">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.70204 8.26336C10.0993 8.66064 10.0993 9.30476 9.70204 9.70204C9.30477 10.0993 8.66066 10.0993 8.26338 9.70204L0.350727 1.78932C-0.0465488 1.39204 -0.0465482 0.747921 0.350728 0.350641C0.748004 -0.0466385 1.39212 -0.0466385 1.78939 0.350641L9.70204 8.26336Z" fill="#676767"></path>
<path d="M1.73662 9.64936C1.33934 10.0466 0.695233 10.0466 0.297957 9.64936C-0.0993191 9.25208 -0.099319 8.60796 0.297957 8.21068L8.21061 0.297959C8.60789 -0.0993202 9.252 -0.0993196 9.64927 0.29796C10.0465 0.69524 10.0465 1.33936 9.64927 1.73664L1.73662 9.64936Z" fill="#676767"></path>
</svg>
</span>
</div>
<div class="three-popup">
<div class="Uniquetitle">
<span id="unique_code">Unique Code：X260113101410113</span>
<span id="item_no">Item No.：BXT0P967X18</span>
</div>
<ul class="cartinfoform">
<li class="_1frageme1" id="engraving_l">
<label>Engraving Info.</label>
<div class="c_1fragemly" id="engraving">
<div style="display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px;">
<div style="color: #ff6b6b; font-size: 13px; margin-top: 1px; flex-shrink: 0;">
<i class="fas fa-info-circle"></i>
</div>
<div style="flex: 1;">
<div style="font-weight: 500; color: #ff6b6b; font-size: 0.8125rem; line-height: 22px;">
<span style="font-weight: 600; color: #e53935;">Note:</span> The numbers below (1:, 2:, 3:) are line indicators only and will not be engraved.
</div>
</div>
</div>
1:Who You Share it With 2:Layup 3:02:22
</div>
</li>
<!-- 新增歌曲信息部分 -->
<li class="_1frageme1" id="songs_l">
<label>
<div class="songs-title">
<div>Songs Information, (3) songs</div>
</div>
</label>
<div class="c_1fragemly songs-container" id="songs_info">
<div class="songs-header" >
<div style="font-size: 0.875rem; line-height: 1.6; color: var(--gray-700);">
<div style="display: flex; align-items: flex-start; margin-bottom: 12px;">
<div style="display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: var(--gray-100); color: var(--gray-700); border-radius: 8px; font-size: 0.8125rem; font-weight: 600; margin-right: 16px; flex-shrink: 0; border: 1px solid var(--gray-200);">1</div>
<div style="flex: 1;">
<div style=" display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Song:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">Who You Share it With</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Artist:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">Layup</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Duration:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">02:22</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">URL:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;"> <a href="https://open.spotify.com/track/7l6XHYUM41rlb31dUoG]fg" target="_blank"
style="color: var(--gray-600); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease;">
open.spotify.com/track/0VjIjW4GlUZAMYd2vXMi3b
</a></span>
</div>
</div>
</div>
</div>
</div>
<div class="songs-header" >
<div style="font-size: 0.875rem; line-height: 1.6; color: var(--gray-700);">
<div style="display: flex; align-items: flex-start; margin-bottom: 12px;">
<div style="display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: var(--gray-100); color: var(--gray-700); border-radius: 8px; font-size: 0.8125rem; font-weight: 600; margin-right: 16px; flex-shrink: 0; border: 1px solid var(--gray-200);">2</div>
<div style="flex: 1;">
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Song:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">Blinding Lights</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Artist:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">The Weeknd</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Duration:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">03:20</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">URL:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;"> <a href="https://open.spotify.com/track/7l6XHYUM41rlb31dUoG]fg" target="_blank"
style="color: var(--gray-600); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease;">
open.spotify.com/track/7l6XHYUM41rlb31dUoG]fg
</a></span>
</div>
</div>
</div>
</div>
</div>
<div class="songs-header" >
<div style="font-size: 0.875rem; line-height: 1.6; color: var(--gray-700);">
<div style="display: flex; align-items: flex-start; margin-bottom: 12px;">
<div style="display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: var(--gray-100); color: var(--gray-700); border-radius: 8px; font-size: 0.8125rem; font-weight: 600; margin-right: 16px; flex-shrink: 0; border: 1px solid var(--gray-200);">3</div>
<div style="flex: 1;">
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Song:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">Stay</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Artist:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">The Kid LAROI & Justin Bieber</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">Duration:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;">02:21</span>
</div>
<div style="display: flex; align-items: center;">
<span style="font-weight: 600; color: var(--gray-600); font-size: 0.8125rem; letter-spacing: 0.3px; text-align: left; flex-shrink: 0;">URL:</span>
<span style="font-weight: 500; color: var(--gray-700); margin-left: 8px; font-size: 0.875rem;"> <a href="https://open.spotify.com/track/5PjdY0CekZdXuOcZ1k7OVx" target="_blank"
style="color: var(--gray-600); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease;">
open.spotify.com/track/5PjdY0CekZdXuOcZ1k7OVx
</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="_1frageme1" id="preview_l">
<label>Preview photo, (1) picture</label>
<div class="c_1fragemly" style="width: 62%;" id="preview_p">
<img class="img_content" data-image="图片放大" style="max-width: 80px;" src="https://sunzi-cn.maiyuan.online/mirror/sunzi-us-east/archive/designer/20260112/5652f545-1dee-4f4f-90f9-7a9be82756b1.webp">
</div>
</li>
<li class="_1frageme1" id="production_l">
<div style="display: flex;flex-direction: column;" class="is_show_note_content">
<label style="width: 100%;">Front production photo, (1) picture</label>
<div class="is_show_note" style="display:none;font-weight: 700;color: #ed2626;">(Note: the finished product includes sleeves)</div>
</div>
<div class="c_1fragemly" style="width: 62%;" id="production_p">
<img class="img_content" data-image="图片放大" style="max-width: 80px;" src="https://oss-cn.staticmeow.com/archive/process/20260113/07b4ab3a-357c-4712-8843-86cdef0bd675.png">
</div>
</li>
<li class="_1frageme1" id="original_l">
<label>Original photo, (1) picture</label>
<div class="c_1fragemly" style="width: 62%;" id="original_p">
<img class="img_content" data-image="图片放大" style="max-width: 80px;" src="https://sunzi-cn.maiyuan.online/mirror/sunzi-us-east/archive/designer/20260112/ba96045e-19b2-4278-8985-2c75f0f8461a-0.jpeg">
</div>
</li>
<li class="_1frageme1" id="operation_record_content">
<label>Operation Record</label>
<div class="operation_Record c_1fragemly" style="display: flex;flex-direction: column" id="operation_record">
<div>Temporarily None</div>
</div>
</li>
</ul>
</div>
</div>
<div class="popupmasking"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const openModalBtn = document.getElementById('openModalBtn');
const closeDetailBtn = document.getElementById('closeDetail');
const itemDetailWap = document.getElementById('item_detail_wap');
const popupMasking = document.querySelector('.popupmasking');
// 页面加载时自动显示弹窗并禁用背景滚动
itemDetailWap.style.display = 'block';
document.body.style.overflow = 'hidden';
// 打开弹窗
openModalBtn.addEventListener('click', function() {
itemDetailWap.style.display = 'block';
document.body.style.overflow = 'hidden';
});
// 关闭弹窗
closeDetailBtn.addEventListener('click', function() {
itemDetailWap.style.display = 'none';
document.body.style.overflow = 'auto';
});
// 点击遮罩层关闭弹窗
popupMasking.addEventListener('click', function() {
itemDetailWap.style.display = 'none';
document.body.style.overflow = 'auto';
});
// 添加微交互效果
const songRows = document.querySelectorAll('.song-row');
songRows.forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'translateX(4px)';
this.style.transition = 'transform 0.2s ease';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'translateX(0)';
});
});
// 添加标签点击效果
const tags = document.querySelectorAll('.tag');
tags.forEach(tag => {
tag.addEventListener('click', function() {
this.style.backgroundColor = 'var(--primary-color)';
this.style.color = 'white';
setTimeout(() => {
this.style.backgroundColor = '';
this.style.color = '';
}, 300);
});
});
// 为所有图片添加点击放大功能（简化版本）
const images = document.querySelectorAll('.img_content');
images.forEach(img => {
img.addEventListener('click', function() {
const src = this.src;
const imgViewer = document.createElement('div');
imgViewer.style.position = 'fixed';
imgViewer.style.top = '0';
imgViewer.style.left = '0';
imgViewer.style.width = '100%';
imgViewer.style.height = '100%';
imgViewer.style.backgroundColor = 'rgba(0,0,0,0.8)';
imgViewer.style.zIndex = '999999';
imgViewer.style.display = 'flex';
imgViewer.style.justifyContent = 'center';
imgViewer.style.alignItems = 'center';
const imgElement = document.createElement('img');
imgElement.src = src;
imgElement.style.maxWidth = '90%';
imgElement.style.maxHeight = '90%';
imgElement.style.borderRadius = '8px';
imgElement.style.boxShadow = '0 10px 30px rgba(0,0,0,0.5)';
imgViewer.appendChild(imgElement);
imgViewer.addEventListener('click', function() {
document.body.removeChild(imgViewer);
});
document.body.appendChild(imgViewer);
});
});
});
</script>
</body>
</html>
index.html
md
README.md
index.html