子比侧边栏活动推荐+倒计时小美化，图片+高度自定义，倒计时自定义，多卡片单独倒计时，倒计时结束自动禁链接！其他功能自行美化！

<style>
.zibi_sidebar_custom_activity_card_unique {
    width: 100%;
    min-height: 340px;
    margin: 0 0 20px 0;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}
.zibi_sidebar_custom_activity_card_unique:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.zibi_sidebar_custom_corner_tag_unique {
    position: absolute;
    top: 12px;
    right: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #333;
    backdrop-filter: blur(2px);
    z-index: 3;
    white-space: nowrap;
}

.zibi_sidebar_custom_corner_tag_unique i {
    color: #ff5722;
}

.zibi_sidebar_custom_content_unique {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.7);
}

.zibi_sidebar_custom_content_unique h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.zibi-activity-link {
    color: #ffffff;
    text-decoration: none;
}
.zibi-activity-link:hover {
    color: #ff5722;
}

.zibi-activity-link.disabled {
    pointer-events: none;
    color: #999 !important;
    cursor: default;
}

.zibi_sidebar_custom_content_unique p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    function updateCountdown() {
        document.querySelectorAll('.zibi-countdown').forEach(el => {
            try {
                const endTime = Date.parse(el.dataset.end.replace(/-/g, '/'));
                const now = Date.now();
                const diff = endTime - now;
                const link = el.closest('.zibi_sidebar_custom_activity_card_unique').querySelector('.zibi-activity-link');

                if (diff <= 0) {
                    el.textContent = '活动已结束';
                    link.classList.add('disabled');
                    return;
                }

                // 计算天/时/分/秒
                const day = Math.floor(diff / 86400000);
                const hour = Math.floor((diff % 86400000) / 3600000);
                const min = Math.floor((diff % 3600000) / 60000);
                const sec = Math.floor((diff % 60000) / 1000);

                el.textContent = `${day}天 ${hour.toString().padStart(2,'0')}:${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;
                link.classList.remove('disabled');
            } catch (e) {
                el.textContent = '时间设置错误';
            }
        });
    }
    updateCountdown();
    setInterval(updateCountdown, 1000);
});
</script>

<!-- ===================== 活动卡片1 ===================== -->
<div class="zibi_sidebar_custom_activity_card_unique" style="background-image: url('https://picsum.photos/600/400');">
    <div class="zibi_sidebar_custom_corner_tag_unique">
        <i class="fa fa-clock-o"></i>
        <span class="zibi-countdown" data-end="2026-4-21 23:59:59">加载中...</span>
    </div>
    <div class="zibi_sidebar_custom_content_unique">
        <h4>
            <a href="https://www.330b.com" class="zibi-activity-link" target="_blank">限时活动</a>
        </h4>
        <p>限时活动开启了！！</p>
    </div>
</div>

<!-- ===================== 活动卡片2（复制即用） ===================== -->
<!--
<div class="zibi_sidebar_custom_activity_card_unique" style="background-image: url('你的图片链接');">
    <div class="zibi_sidebar_custom_corner_tag_unique">
        <i class="fa fa-clock-o"></i>
        <span class="zibi-countdown" data-end="2025-10-01 18:00:00">加载中...</span>
    </div>
    <div class="zibi_sidebar_custom_content_unique">
        <h4>
            <a href="你的链接" class="zibi-activity-link" target="_blank">第二个活动标题</a>
        </h4>
        <p>多卡片独立倒计时，互不干扰</p>
    </div>
</div>
-->

版权声明

站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。