大数跨境
首页
>
HTML优惠券组件｜一套代码同时兼容PC与移动端，开箱即用
>

HTML优惠券组件｜一套代码同时兼容PC与移动端，开箱即用

HTML优惠券组件｜一套代码同时兼容PC与移动端，开箱即用 wordpress知识
2026-09-04
9

电商项目通用优惠券 HTML 组件实战

在电商类项目中，优惠券是高频业务组件。本文分享一套经过实际业务打磨的优惠券 HTML 组件，支持 PC 与移动端自适应，内置多主题及多状态样式，代码开箱即用。

核心特性

  • 多端适配：PC 端采用网格自动填充，卡片多列平铺并带有悬停上浮效果；移动端自动切换为单列布局，字号与高度智能缩放，确保内容不拥挤。
  • 状态丰富：内置过期、已使用状态逻辑。对应状态下卡片整体置灰，右上角通过旋转印章标记状态，操作按钮自动禁用。
  • 风格多样：提供多种渐变主题色，同时包含简约白底版本，适用于浅色页面及商务风格场景。

PC 端效果图

移动端效果图

完整代码实现

以下代码包含完整的 HTML 结构与 CSS 样式，无第三方依赖，可直接复制运行。

<!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 {
            background-color: #f5f6f8;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            padding: 40px 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .coupon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 20px;
            margin-bottom:15px;
        }

        .coupon {
            position: relative;
            display: flex;
            height: 140px;
            border-radius: 10px;
            overflow: hidden;
            color: #fff;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .coupon:hover {
            transform: translateY(-2px);
        }

        .coupon-theme-red {
            background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
            box-shadow: 0 4px 12px rgba(255, 77, 79, 0.25);
        }

        .coupon-theme-orange {
            background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
            box-shadow: 0 4px 12px rgba(250, 140, 22, 0.25);
        }

        .coupon-theme-purple {
            background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
            box-shadow: 0 4px 12px rgba(114, 46, 209, 0.25);
        }

        .coupon-theme-blue {
            background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);
        }

        .coupon::after {
            content: "";
            position: absolute;
            left: 130px;
            top: 12px;
            bottom: 12px;
            width: 0;
            border-left: 1px dashed rgba(255, 255, 255, 0.4);
            z-index: 1;
        }

        .coupon-left {
            width: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .coupon-amount {
            display: flex;
            align-items: baseline;
            font-weight: 700;
            line-height: 1;
        }

        .coupon-amount .currency {
            font-size: 18px;
            margin-right: 2px;
        }

        .coupon-amount .value {
            font-size: 40px;
        }

        .coupon-amount .unit {
            font-size: 16px;
            margin-left: 2px;
        }

        .coupon-condition {
            font-size: 12px;
            opacity: 0.9;
            margin-top: 8px;
        }

        .coupon-right {
            flex: 1;
            padding: 18px 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-width: 0;
        }

        .coupon-info {
            flex: 1;
        }

        .coupon-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .coupon-desc {
            font-size: 12px;
            opacity: 0.85;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .coupon-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .coupon-validity {
            font-size: 11px;
            opacity: 0.75;
        }

        .coupon-btn {
            background: #fff;
            border: none;
            border-radius: 14px;
            padding: 5px 14px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
            flex-shrink: 0;
        }

        .coupon-btn:hover {
            opacity: 0.9;
        }

        .coupon-theme-red .coupon-btn { color: #ff4d4f; }
        .coupon-theme-orange .coupon-btn { color: #fa8c16; }
        .coupon-theme-purple .coupon-btn { color: #722ed1; }
        .coupon-theme-blue .coupon-btn { color: #1890ff; }

        .coupon-claimed .coupon-btn {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            cursor: default;
        }

        .coupon-expired {
            background: linear-gradient(135deg, #bfbfbf 0%, #d9d9d9 100%) !important;
            box-shadow: none !important;
            color: #8c8c8c;
        }

        .coupon-expired::after {
            border-left-color: rgba(0, 0, 0, 0.12);
        }

        .coupon-expired .coupon-btn {
            background: #f0f0f0;
            color: #bfbfbf;
            cursor: not-allowed;
        }

        .coupon-expired .coupon-amount,
        .coupon-expired .coupon-name,
        .coupon-expired .coupon-desc {
            color: #8c8c8c;
        }

        .coupon-used {
            background: linear-gradient(135deg, #d9d9d9 0%, #e8e8e8 100%) !important;
            box-shadow: none !important;
            color: #999;
        }

        .coupon-used::after {
            border-left-color: rgba(0, 0, 0, 0.1);
        }

        .coupon-used .coupon-btn {
            background: #f5f5f5;
            color: #bfbfbf;
            cursor: default;
        }

        .coupon-stamp {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%) rotate(-15deg);
            border: 2px solid currentColor;
            border-radius: 6px;
            padding: 4px 10px;
            font-size: 14px;
            font-weight: 700;
            opacity: 0.5;
            z-index: 2;
            letter-spacing: 2px;
        }

        .coupon-horizontal {
            height: 100px;
        }

        .coupon-horizontal .coupon-left {
            width: 110px;
        }

        .coupon-horizontal::after {
            left: 110px;
        }

        .coupon-horizontal .coupon-amount .value {
            font-size: 32px;
        }

        .coupon-horizontal .coupon-right {
            padding: 14px 14px;
        }

        .coupon-horizontal .coupon-name {
            font-size: 14px;
        }

        .coupon-horizontal .coupon-desc {
            -webkit-line-clamp: 1;
        }

        .coupon-minimal {
            background: #fff !important;
            color: #333 !important;
            border: 1px solid #eee;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        }

        .coupon-minimal::after {
            border-left-color: #eee;
        }

        .coupon-minimal .coupon-amount {
            color: #ff4d4f;
        }

        .coupon-minimal .coupon-condition {
            color: #999;
        }

        .coupon-minimal .coupon-name {
            color: #333;
        }

        .coupon-minimal .coupon-desc {
            color: #999;
        }

        .coupon-minimal .coupon-validity {
            color: #bbb;
        }

        .coupon-minimal .coupon-btn {
            background: #ff4d4f;
            color: #fff;
        }

        @media (max-width: 480px) {
            body {
                padding: 20px 12px;
            }

            .coupon-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .coupon {
                height: 120px;
            }

            .coupon-left {
                width: 110px;
            }

            .coupon::after {
                left: 110px;
            }

            .coupon-amount .value {
                font-size: 32px;
            }

            .coupon-right {
                padding: 14px 12px;
            }

            .coupon-name {
                font-size: 14px;
            }

            .coupon-desc {
                font-size: 11px;
            }

            .coupon-btn {
                padding: 4px 12px;
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="coupon-grid">
            <div class="coupon coupon-theme-red">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">50</span>
                    </div>
                    <div class="coupon-condition">满 200 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">全场通用券</div>
                        <div class="coupon-desc">全店商品可用，不与其他活动叠加</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">有效期至 2026-12-31</span>
                        <button class="coupon-btn">立即领取</button>
                    </div>
                </div>
            </div>

            <div class="coupon coupon-theme-orange">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="value">8.5</span>
                        <span class="unit">折</span>
                    </div>
                    <div class="coupon-condition">无门槛</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">新人专享折扣券</div>
                        <div class="coupon-desc">首次下单用户专享，全场商品通用</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">领取后 7 天内有效</span>
                        <button class="coupon-btn">立即领取</button>
                    </div>
                </div>
            </div>

            <div class="coupon coupon-theme-purple">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">100</span>
                    </div>
                    <div class="coupon-condition">满 500 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">数码品类券</div>
                        <div class="coupon-desc">仅限数码家电类目使用，部分商品除外</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">有效期至 2026-10-31</span>
                        <button class="coupon-btn">立即领取</button>
                    </div>
                </div>
            </div>

            <div class="coupon coupon-theme-blue">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">20</span>
                    </div>
                    <div class="coupon-condition">无门槛</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">会员日专享券</div>
                        <div class="coupon-desc">每月会员日专属，全场通用无门槛</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">仅限每月 18 日使用</span>
                        <button class="coupon-btn">立即领取</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="coupon-grid">
            <div class="coupon coupon-theme-red coupon-claimed">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">50</span>
                    </div>
                    <div class="coupon-condition">满 200 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">全场通用券</div>
                        <div class="coupon-desc">全店商品可用，不与其他活动叠加</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">有效期至 2026-12-31</span>
                        <button class="coupon-btn" disabled>已领取</button>
                    </div>
                </div>
            </div>

            <div class="coupon coupon-theme-orange coupon-claimed">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="value">8.5</span>
                        <span class="unit">折</span>
                    </div>
                    <div class="coupon-condition">无门槛</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">新人专享折扣券</div>
                        <div class="coupon-desc">首次下单用户专享，全场商品通用</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">领取后 7 天内有效</span>
                        <button class="coupon-btn" disabled>已领取</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="coupon-grid">
            <div class="coupon coupon-expired">
                <div class="coupon-stamp">已过期</div>
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">30</span>
                    </div>
                    <div class="coupon-condition">满 100 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">限时促销券</div>
                        <div class="coupon-desc">618 活动专属，已超过使用期限</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">已于 2026-06-20 过期</span>
                        <button class="coupon-btn" disabled>已失效</button>
                    </div>
                </div>
            </div>

            <div class="coupon coupon-used">
                <div class="coupon-stamp">已使用</div>
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">80</span>
                    </div>
                    <div class="coupon-condition">满 300 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">品类满减券</div>
                        <div class="coupon-desc">订单号：2026081500123，已使用</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">使用时间 2026-08-15</span>
                        <button class="coupon-btn" disabled>已使用</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="coupon-grid">
            <div class="coupon coupon-horizontal coupon-theme-red">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">15</span>
                    </div>
                    <div class="coupon-condition">满 99 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">每日签到券</div>
                        <div class="coupon-desc">连续签到 7 天获得，全场通用</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">3 天内有效</span>
                        <button class="coupon-btn">去使用</button>
                    </div>
                </div>
            </div>

            <div class="coupon coupon-horizontal coupon-theme-blue">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="value">9</span>
                        <span class="unit">折</span>
                    </div>
                    <div class="coupon-condition">满 200 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">服饰品类券</div>
                        <div class="coupon-desc">仅限服装鞋包类目，换季清仓专用</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">有效期至 2026-09-30</span>
                        <button class="coupon-btn">去使用</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="coupon-grid">
            <div class="coupon coupon-minimal">
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">25</span>
                    </div>
                    <div class="coupon-condition">满 150 可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">食品生鲜券</div>
                        <div class="coupon-desc">仅限食品饮料、生鲜水果类目使用</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">有效期至 2026-11-30</span>
                        <button class="coupon-btn">立即领取</button>
                    </div>
                </div>
            </div>

            <div class="coupon coupon-minimal coupon-expired">
                <div class="coupon-stamp">已过期</div>
                <div class="coupon-left">
                    <div class="coupon-amount">
                        <span class="currency">¥</span>
                        <span class="value">10</span>
                    </div>
                    <div class="coupon-condition">无门槛</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-info">
                        <div class="coupon-name">新人见面礼</div>
                        <div class="coupon-desc">新用户注册即送，已过期未使用</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-validity">已于 2026-07-01 过期</span>
                        <button class="coupon-btn" disabled>已失效</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

使用说明与扩展

主题切换

通过修改根元素的类名即可切换不同渐变颜色：

  • 红色主题：coupon-theme-red
  • 橙色主题：coupon-theme-orange
  • 紫色主题：coupon-theme-purple
  • 蓝色主题：coupon-theme-blue

状态控制

  • 已领取：增加类名 coupon-claimed，并将按钮添加 disabled 属性。
  • 已过期：增加类名 coupon-expired，并在容器内添加 <div class="coupon-stamp">已过期</div>。
  • 已使用：增加类名 coupon-used，并在容器内添加 <div class="coupon-stamp">已使用</div>。

尺寸与风格切换

  • 紧凑小券：增加 coupon-horizontal 类名。
  • 简约白底：增加 coupon-minimal 类名。

后端渲染与适配

该组件无第三方依赖，采用原生 CSS 与 HTML 编写。在后端循环输出时，仅需动态替换金额、名称、描述、有效期等文本内容，并根据业务逻辑追加对应的状态类名即可。组件内置媒体查询（Media Query），可自动适配手机浏览器，适用于 Vue、React、PHP 等各类项目。

#html 优惠券 #css 响应式 #前端实战 #H5 组件 #电商

【声明】内容源于网络
0
0
wordpress知识
各类跨境出海行业相关资讯
内容 341
粉丝 0
wordpress知识 各类跨境出海行业相关资讯
总阅读8.8k
粉丝0
内容341