290 lines
8.0 KiB
HTML
290 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>修养套餐商品图</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
background: #1a1a2e;
|
||
font-family: 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
.product-card {
|
||
width: 800px;
|
||
height: 1000px;
|
||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
||
border-radius: 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* 装饰性光晕元素 */
|
||
.glow-circle {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(60px);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.glow-1 {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: #60a5fa;
|
||
top: -100px;
|
||
left: -100px;
|
||
}
|
||
|
||
.glow-2 {
|
||
width: 250px;
|
||
height: 250px;
|
||
background: #a78bfa;
|
||
top: -50px;
|
||
right: -80px;
|
||
}
|
||
|
||
.glow-3 {
|
||
width: 200px;
|
||
height: 200px;
|
||
background: #ec4899;
|
||
bottom: 100px;
|
||
right: -50px;
|
||
}
|
||
|
||
/* 内容容器 */
|
||
.content {
|
||
position: relative;
|
||
z-index: 10;
|
||
padding: 60px 50px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 图标容器 */
|
||
.icons-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
margin: 40px 0 50px 0;
|
||
gap: 20px;
|
||
}
|
||
|
||
.icon-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
backdrop-filter: blur(10px);
|
||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.icon-label {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 主标题 */
|
||
.main-title {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
color: white;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* 折扣信息 */
|
||
.discount-info {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 30px;
|
||
margin: 30px 0;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.discount-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.discount-text {
|
||
color: white;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.discount-value {
|
||
color: #fbbf24;
|
||
font-size: 42px;
|
||
font-weight: bold;
|
||
text-shadow: 0 2px 10px rgba(251, 191, 36, 0.5);
|
||
}
|
||
|
||
.plus-sign {
|
||
color: #fbbf24;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
/* 底部说明 */
|
||
.validity-info {
|
||
margin-top: auto;
|
||
text-align: center;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 16px;
|
||
padding: 20px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
/* 图片元素 */
|
||
.visual-elements {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 20px 0;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
.element-card {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
padding: 15px 25px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
backdrop-filter: blur(5px);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.element-icon {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.element-text {
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="product-card">
|
||
<!-- 装饰性光晕 -->
|
||
<div class="glow-circle glow-1"></div>
|
||
<div class="glow-circle glow-2"></div>
|
||
<div class="glow-circle glow-3"></div>
|
||
|
||
<div class="content">
|
||
<!-- 主标题 -->
|
||
<div class="main-title">修养套餐</div>
|
||
|
||
<!-- 商品相关图标 -->
|
||
<div class="icons-container">
|
||
<div class="icon-item">
|
||
<div class="icon">🏨</div>
|
||
<div class="icon-label">酒店住宿</div>
|
||
</div>
|
||
<div class="icon-item">
|
||
<div class="icon">🚁</div>
|
||
<div class="icon-label">无人机</div>
|
||
</div>
|
||
<div class="icon-item">
|
||
<div class="icon">⚽</div>
|
||
<div class="icon-label">足球</div>
|
||
</div>
|
||
<div class="icon-item">
|
||
<div class="icon">📚</div>
|
||
<div class="icon-label">研学</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 折扣信息 -->
|
||
<div class="discount-info">
|
||
<div class="discount-item">
|
||
<div class="discount-text">酒店住宿</div>
|
||
<div class="discount-value">6.6折</div>
|
||
</div>
|
||
|
||
<div class="plus-sign">+</div>
|
||
|
||
<div class="discount-item">
|
||
<div class="discount-text">无人机足球、穿越、研学</div>
|
||
<div class="discount-value">8.8折</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商品元素展示 -->
|
||
<div class="visual-elements">
|
||
<div class="element-card">
|
||
<div class="element-icon">💆</div>
|
||
<div class="element-text">修养放松</div>
|
||
</div>
|
||
<div class="element-card">
|
||
<div class="element-icon">🎮</div>
|
||
<div class="element-text">穿越体验</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 有效期说明 -->
|
||
<div class="validity-info">
|
||
购买有效期3个月，激活有效期24小时
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 可以添加一些动画效果
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const icons = document.querySelectorAll('.icon');
|
||
icons.forEach((icon, index) => {
|
||
icon.style.animation = `float 3s ease-in-out ${index * 0.2}s infinite`;
|
||
});
|
||
});
|
||
|
||
// 添加浮动动画
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
</body>
|
||
</html>
|