<!DOCTYPE html>
<html lang="zh-CN">
<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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* 头部区域 */
.breadcumb-area {
background: linear-gradient(90deg, #059c0b, #17ff20);
padding: 80px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.breadcumb-area::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,128L48,128C96,128,192,128,288,138.7C384,149,480,171,576,170.7C672,171,768,149,864,138.7C960,128,1056,128,1152,128C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
}
.breadcumb-area h2 {
font-size: 3rem;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
position: relative;
z-index: 1;
}
/* 代金券卡片区域 */
.voucher-section {
padding: 60px 0 40px;
}
.section-header {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.section-header h2 {
font-size: 2.2rem;
color: #059c0b;
display: inline-block;
padding: 10px 30px;
background: white;
border-radius: 50px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
position: relative;
}
.section-header h2::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: #17ff20;
border-radius: 2px;
}
.voucher-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.voucher-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
position: relative;
}
.voucher-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.voucher-header {
background: linear-gradient(90deg, #059c0b, #17ff20);
color: white;
padding: 20px;
text-align: center;
}
.voucher-header h3 {
font-size: 1.4rem;
margin-bottom: 5px;
}
.voucher-body {
padding: 25px;
}
.voucher-detail {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed #eee;
}
.voucher-label {
font-weight: 600;
color: #666;
}
.voucher-value {
font-weight: 700;
color: #333;
}
.voucher-amount {
text-align: center;
margin: 20px 0;
font-size: 1.8rem;
font-weight: 800;
color: #ff5722;
}
.voucher-amount span {
font-size: 1rem;
color: #888;
}
.voucher-action {
text-align: center;
margin-top: 20px;
}
.btn-get {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(90deg, #059c0b, #17ff20);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 10px rgba(5, 156, 11, 0.3);
}
.btn-get:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(5, 156, 11, 0.4);
}
.btn-disabled {
background: #d0d0d0;
cursor: not-allowed;
box-shadow: none;
}
.btn-disabled:hover {
transform: none;
box-shadow: none;
}
.ribbon {
position: absolute;
top: 15px;
right: -30px;
padding: 5px 35px;
background: #ff5722;
color: white;
font-weight: 600;
transform: rotate(45deg);
font-size: 0.9rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* 分页样式 */
.pagination {
display: flex;
justify-content: center;
margin: 40px 0;
}
.pagination ul {
display: flex;
list-style: none;
background: white;
border-radius: 50px;
padding: 10px 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
color: #333;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.pagination a:hover, .pagination .active a {
background: #059c0b;
color: white;
}
/* 活动说明区域 */
.instruction-section {
background: white;
border-radius: 20px;
padding: 50px;
margin: 60px 0;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.instruction-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, #059c0b, #17ff20);
}
.instruction-content h2 {
color: #059c0b;
font-size: 1.8rem;
margin: 25px 0 15px;
position: relative;
padding-left: 20px;
}
.instruction-content h2::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #17ff20;
}
.instruction-content p {
margin-bottom: 20px;
font-size: 1.1rem;
color: #555;
line-height: 1.8;
padding-left: 20px;
}
.instruction-content .highlight {
background: rgba(5, 156, 11, 0.1);
padding: 15px 20px;
border-radius: 10px;
border-left: 4px solid #17ff20;
margin: 20px 0;
}
.btn-use {
display: inline-block;
padding: 14px 35px;
background: linear-gradient(90deg, #ff5722, #ff8a65);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
margin-top: 20px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 87, 34, 0.3);
}
.btn-use:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 87, 34, 0.4);
}
/* 动画效果 */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
/* 响应式设计 */
@media (max-width: 768px) {
.voucher-container {
grid-template-columns: 1fr;
}
.breadcumb-area h2 {
font-size: 2.2rem;
}
.instruction-section {
padding: 30px 20px;
}
}
</style>
</head>
<body>
<!-- 头部区域 -->
<div class="breadcumb-area">
<div class="container">
<div class="row">
<div class="col-md-12 txtc text-center ccase">
<div class="brpt floating">
<h2>代金券活动</h2>
</div>
</div>
</div>
</div>
</div>
<!-- 代金券卡片区域 -->
<div class="voucher-section">
<div class="container">
<div class="section-header">
<h2>代金券领取</h2>
</div>
<div class="voucher-container">
<!-- 代金券卡片示例 -->
<div class="voucher-card">
<div class="ribbon">热销</div>
<div class="voucher-header">
<h3>新用户专享礼包</h3>
</div>
<div class="voucher-body">
<div class="voucher-detail">
<span class="voucher-label">状态：</span>
<span class="voucher-value">未领取</span>
</div>
<div class="voucher-detail">
<span class="voucher-label">有效期：</span>
<span class="voucher-value">15天后过期</span>
</div>
<div class="voucher-detail">
<span class="voucher-label">到期时间：</span>
<span class="voucher-value">2023-12-31</span>
</div>
<div class="voucher-amount">
￥50 <span>满200元可用</span>
</div>
<div class="voucher-action">
<a href="javascript:;" class="btn-get">立即领取</a>
</div>
</div>
</div>
<div class="voucher-card">
<div class="voucher-header">
<h3>双十二狂欢券</h3>
</div>
<div class="voucher-body">
<div class="voucher-detail">
<span class="voucher-label">状态：</span>
<span class="voucher-value">已领取</span>
</div>
<div class="voucher-detail">
<span class="voucher-label">有效期：</span>
<span class="voucher-value">3天后过期</span>
</div>
<div class="voucher-detail">
<span class="voucher-label">到期时间：</span>
<span class="voucher-value">2023-12-15</span>
</div>
<div class="voucher-amount">
￥100 <span>满500元可用</span>
</div>
<div class="voucher-action">
<a href="javascript:;" class="btn-get btn-disabled">已领取</a>
</div>
</div>
</div>
<div class="voucher-card">
<div class="ribbon">推荐</div>
<div class="voucher-header">
<h3>年终感恩回馈</h3>
</div>
<div class="voucher-body">
<div class="voucher-detail">
<span class="voucher-label">状态：</span>
<span class="voucher-value">未领取</span>
</div>
<div class="voucher-detail">
<span class="voucher-label">有效期：</span>
<span class="voucher-value">30天后过期</span>
</div>
<div class="voucher-detail">
<span class="voucher-label">到期时间：</span>
<span class="voucher-value">2024-01-15</span>
</div>
<div class="voucher-amount">
￥200 <span>满1000元可用</span>
</div>
<div class="voucher-action">
<a href="javascript:;" class="btn-get">立即领取</a>
</div>
</div>
</div>
</div>
<div class="pagination">
<ul>
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
<!-- 活动说明区域 -->
<div class="instruction-section">
<div class="container">
<div class="instruction-content">
<h2>代金券活动说明</h2>
<p>每一批活动中，每个用户只能领取一张代金券，请领取后在对应的时间使用，过期代金券失效。</p>
<div class="highlight">
<p><i class="fas fa-gift"></i> 代金券在有效期内可用于指定商品或服务</p>
<p><i class="fas fa-gift"></i> 每张代金券都有最低消费金额限制</p>
<p><i class="fas fa-gift"></i> 代金券不可兑换现金，不可转让</p>
</div>
<h2>如何使用代金券</h2>
<p>在个人中心 → 商业授权购买页面中，您可以在结算时选择使用已领取的代金券。</p>
<h2>使用规则</h2>
<p>1. 代金券仅限单次使用，不找零、不兑现</p>
<p>2. 代金券不可与其他优惠活动同时使用</p>
<p>3. 使用代金券的订单如发生退款，代金券不予退还</p>
<a href="#" class="btn-use">立即使用代金券</a>
</div>
</div>
</div>
<script>
// 模拟代金券领取功能
document.querySelectorAll('.btn-get').forEach(button => {
if (!button.classList.contains('btn-disabled')) {
button.addEventListener('click', function() {
const card = this.closest('.voucher-card');
card.querySelector('.voucher-detail .voucher-value').textContent = '已领取';
card.querySelector('.voucher-amount').innerHTML = '￥80 <span>满300元可用</span>';
this.textContent = '已领取';
this.classList.add('btn-disabled');
// 显示领取成功消息
alert('代金券领取成功！您可以在个人中心查看并使用。');
});
}
});
// 模拟原有JS功能
function get_activity(id) {
console.log('领取代金券ID: ' + id);
// 这里可以添加AJAX请求
alert('代金券ID ' + id + ' 领取成功！');
}
</script>
</body>
</html>需支付 5元 阅读剩余内容
