预览图

教程

后台 – 自定义CSS样式中添加以下代码即可（代码已进行压缩）：

.side-nav{position:fixed;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:999}.nav-card{width:60px;height:60px;border-radius:20px;background:linear-gradient(135deg,#fff,#f0f2f5);box-shadow:0 8px 25px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-card:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 12px 35px rgba(79,70,229,.15)}.nav-card i{font-size:20px;color:#4b5563;transition:color .3s ease;position:relative;z-index:2}.card-vip{background:linear-gradient(135deg,#5b5fff,#4f46e5);z-index:10}.card-vip i{color:#fff}.card-vip:hover{box-shadow:0 12px 35px rgba(79,70,229,.3)}.mx-card-content{position:absolute;width:220px;padding:18px 20px;background:#fff;border-radius:16px;box-shadow:0 15px 30px rgba(0,0,0,.1);display:flex;align-items:center;gap:15px;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:-1;left:-240px;top:50%;transform:translateY(-50%)}.nav-card:hover .mx-card-content{opacity:1;visibility:visible;left:-230px}.content-arrow{position:absolute;right:-8px;top:50%;transform:translateY(-50%) rotate(45deg);width:16px;height:16px;background:linear-gradient(135deg,transparent 50%,#fff 50%);border-right:1px solid rgba(0,0,0,.05);border-top:1px solid rgba(0,0,0,.05);box-shadow:2px -2px 5px rgba(0,0,0,.03);z-index:1}.vip-content{flex-direction:column;align-items:flex-start;padding:0;overflow:hidden;background:0 0;box-shadow:none;left:-260px;width:240px}.vip-card{width:100%;background:#fff;border-radius:16px;box-shadow:0 15px 30px rgba(0,0,0,.1);overflow:hidden}.vip-header{padding:15px 20px;background:linear-gradient(135deg,#5b5fff,#4f46e5);color:#fff}.vip-title{font-size:14px;font-weight:600;margin-bottom:5px}.vip-subtitle{font-size:11px;opacity:.8}.vip-plans{width:100%;margin-bottom:15px}.vip-plan{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #e5e7eb}.vip-plan:last-child{border-bottom:none}.plan-name{font-size:13px;font-weight:500;color:#1f2937}.plan-price{display:flex;align-items:center;gap:8px}.plan-original{font-size:11px;color:#9ca3af;text-decoration:line-through}.plan-discount{font-size:14px;font-weight:600;color:#4f46e5}.plan-save{font-size:10px;color:#f59e0b;background:#fff7ed;padding:1px 4px;border-radius:3px}.vip-footer{padding:0 20px 15px}.vip-btn{width:100%;padding:8px 12px;background:linear-gradient(135deg,#5b5fff,#4f46e5);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease}.vip-btn:hover{opacity:.9;transform:translateY(-2px)}.card-donate{background:linear-gradient(135deg,#6ee7b7,#10b981)}.card-donate i{color:#fff}.card-donate:hover{box-shadow:0 12px 35px rgba(16,185,129,.3)}.donate-content{flex-direction:column;align-items:flex-start;padding:0;left:-260px;width:240px}.donate-card{width:100%;background:#fff;border-radius:16px;box-shadow:0 15px 30px rgba(0,0,0,.1);overflow:hidden}.donate-header{padding:15px 20px;background:linear-gradient(135deg,#6ee7b7,#10b981);color:#fff}.donate-title{font-size:14px;font-weight:600;margin-bottom:5px}.donate-subtitle{font-size:11px;opacity:.8}.donate-body{padding:15px 20px}.donate-options{width:100%;margin-bottom:15px}.donate-option{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #e5e7eb}.donate-option:last-child{border-bottom:none}.donate-icon{width:30px;height:30px;border-radius:50%;background:#ecfdf5;display:flex;align-items:center;justify-content:center;margin-right:10px}.donate-icon i{font-size:16px;color:#10b981}.donate-text h4{font-size:13px;font-weight:500;color:#1f2937}.donate-text p{font-size:11px;color:#6b7280}.donate-footer{padding:0 20px 15px}.donate-btn{width:100%;padding:8px 12px;background:linear-gradient(135deg,#6ee7b7,#10b981);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease}.donate-btn:hover{opacity:.9;transform:translateY(-2px)}.card-checkin{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.card-checkin i{color:#fff}.card-checkin:hover{box-shadow:0 12px 35px rgba(245,158,11,.3)}.checkin-content{flex-direction:column;align-items:center}.checkin-stats{width:100%;display:flex;justify-content:space-between;margin-bottom:10px}.checkin-count,.checkin-points{text-align:center}.checkin-count span,.checkin-points span{display:block;font-size:18px;font-weight:600;color:#1f2937}.checkin-count p,.checkin-points p{font-size:10px;color:#6b7280}.checkin-btn{width:100%;padding:8px 0;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease}.checkin-btn:hover{opacity:.9;transform:translateY(-2px)}.card-service{background:linear-gradient(135deg,#93c5fd,#3b82f6)}.card-service i{color:#fff}.card-service:hover{box-shadow:0 12px 35px rgba(59,130,246,.3)}.service-container{position:relative}.service-content{flex-direction:column;align-items:flex-start;padding:0;left:-260px;width:240px;position:absolute;top:50%;transform:translateY(-50%);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1}.service-card{width:100%;background:#fff;border-radius:16px;box-shadow:0 15px 30px rgba(0,0,0,.1);overflow:hidden}.service-header{padding:15px 20px;background:linear-gradient(135deg,#93c5fd,#3b82f6);color:#fff}.service-title{font-size:14px;font-weight:600;margin-bottom:5px}.service-subtitle{font-size:11px;opacity:.8}.service-body{padding:15px 20px}.service-options{width:100%}.service-option{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #e5e7eb;text-decoration:none;transition:all .3s ease}.service-option:last-child{border-bottom:none}.service-option:hover{background:#e0f2fe}.avatar-container{position:relative;width:40px;height:40px;margin-right:15px}.avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #e0f2fe}.online-dot{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#10b981;border:2px solid #fff;box-shadow:0 0 5px rgba(16,185,129,.5)}.option-icon{width:30px;height:30px;border-radius:50%;background:#e0f2fe;display:flex;align-items:center;justify-content:center;margin-right:12px}.option-icon i{font-size:16px;color:#3b82f6}.option-info{flex:1}.option-info h4{font-size:13px;font-weight:500;color:#1f2937}.option-info p{font-size:11px;color:#6b7280}.service-footer{padding:0 20px 15px;text-align:center}.service-pm-btn{width:100%;padding:10px 15px;background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(59,130,246,.4)}.service-pm-btn:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 6px 16px rgba(59,130,246,.5)}.service-pm-btn i{transition:transform .3s ease}.service-pm-btn:hover i:last-child{transform:translateX(5px)}.service-pm-btn span{margin:0 8px}.card-translate{background:linear-gradient(135deg,#fecdd3,#f87171)}.card-translate i{color:#fff}.card-translate:hover{box-shadow:0 12px 35px rgba(248,113,113,.3)}.translate-content{flex-direction:column;align-items:flex-start;padding:0;left:-260px;width:240px}.translate-card{width:100%;background:#fff;border-radius:16px;box-shadow:0 15px 30px rgba(0,0,0,.1);overflow:hidden}.translate-header{padding:15px 20px;background:linear-gradient(135deg,#fecdd3,#f87171);color:#fff}.translate-title{font-size:14px;font-weight:600;margin-bottom:5px}.translate-subtitle{font-size:11px;opacity:.8}.translate-body{padding:15px 20px}.translate-options{width:100%;margin-bottom:15px}.translate-option{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #e5e7eb;cursor:pointer;transition:all .3s ease}.translate-option:hover{background:#f9fafb}.translate-option:last-child{border-bottom:none}.translate-flag{width:24px;height:24px;border-radius:3px;overflow:hidden;margin-right:10px}.translate-flag img{width:100%;height:100%;object-fit:cover}.translate-text{flex:1;display:flex;justify-content:space-between;align-items:center}.translate-text span{font-size:13px;color:#1f2937}.translate-footer{padding:0 20px 15px}.translate-btn{width:100%;padding:8px 12px;background:linear-gradient(135deg,#fecdd3,#f87171);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease}.translate-btn:hover{opacity:.9;transform:translateY(-2px)}.card-top{width:50px;left:5px;height:50px;background:linear-gradient(135deg,#9ca3af,#4b5563);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s ease;z-index:100}.card-top.visible{opacity:1;visibility:visible}.card-top i{color:#fff}@media (max-width:768px){.side-nav{right:15px;bottom:80px;gap:10px}.nav-card i{font-size:18px}.card-vip,.card-donate,.card-checkin,.card-service,.card-translate{display:none}.card-top{display:flex !important;top:250px}.mx-card-content{left:-210px;width:190px;padding:12px 15px;border-radius:12px}.nav-card:hover .mx-card-content{left:-200px}.content-arrow{width:14px;height:14px;right:-7px}.content-text h3{font-size:13px;margin-bottom:5px}.content-text p{font-size:11px}.vip-plan{padding:8px 0}.plan-name{font-size:12px}.plan-original{font-size:10px}.plan-discount{font-size:13px}.plan-save{font-size:9px}.vip-btn{padding:6px 10px;font-size:11px}.vip-header{padding:12px 15px}.vip-title{font-size:13px}.vip-subtitle{font-size:10px}.vip-body{padding:12px 15px}.vip-footer{padding:0 15px 12px}.vip-content{left:-230px;width:210px}.donate-content{left:-230px;width:210px}.donate-title{font-size:13px}.donate-subtitle{font-size:10px}.donate-option{padding:8px 0}.donate-icon{width:26px;height:26px}.donate-icon i{font-size:14px}.donate-text h4{font-size:12px}.donate-text p{font-size:10px}.donate-btn{padding:6px 10px;font-size:11px}.translate-content{left:-230px;width:210px}.translate-title{font-size:13px}.translate-subtitle{font-size:10px}.translate-option{padding:8px 0}.translate-flag{width:20px;height:20px}.translate-text span{font-size:12px}.translate-btn{padding:6px 10px;font-size:11px}}.vip-container{position:relative}.vip-container:hover .vip-content{opacity:1;visibility:visible;left:-260px}.donate-container{position:relative}.donate-container:hover .donate-content{opacity:1;visibility:visible;left:-260px}.translate-container{position:relative}.translate-container:hover .translate-content{opacity:1;visibility:visible;left:-260px}.service-container{position:relative}.service-container:hover .service-content{opacity:1;visibility:visible;left:-260px}.tf-translate-container{position:relative;max-width:400px;margin:0 auto;box-shadow:0 4px 12px rgba(0,0,0,.1);border-radius:10px;overflow:hidden;background-color:#fff}.tf-nav-card{display:flex;align-items:center;justify-content:center;background-color:#f0f7ff;padding:18px 0;border-bottom:1px solid #e0e8f4}.tf-nav-card i{font-size:28px;color:#3b82f6}.tf-card-content{position:relative;padding:24px}.tf-content-arrow{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid #fff}.tf-translate-card{padding:0}.tf-translate-header{margin-bottom:24px}.tf-translate-title{font-size:20px;font-weight:600;color:#1e293b;margin-bottom:8px}.tf-translate-subtitle{font-size:14px;color:#64748b}.tf-translate-body{margin-bottom:24px}.tf-translate-options{display:flex;flex-direction:column;gap:16px}.tf-translate-option{display:flex;align-items:center;padding:16px;border-radius:8px;cursor:pointer;transition:all .2s ease;border:1px solid #e2e8f0;background-color:#fff}.tf-translate-option.active{background-color:#ecfdf5;border-color:#10b981}.tf-translate-option:hover:not(.active){background-color:#f8fafc}.tf-translate-flag{width:40px;height:40px;margin-right:16px;flex-shrink:0}.tf-translate-flag img{width:100%;height:100%;object-fit:contain}.tf-translate-text{flex-grow:1;display:flex;align-items:center;justify-content:space-between}.tf-translate-text span{font-size:15px;color:#1e293b;font-weight:500}.tf-translate-text i{font-size:18px}.tf-translate-footer{text-align:center}.tf-translate-btn{padding:14px 28px;background-color:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:500;transition:all .2s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}.tf-translate-btn:hover{background-color:#2563eb}.tf-translate-btn:disabled{background-color:#94a3b8;cursor:not-allowed}.tf-text-green-500{color:#10b981}.float-right{display:none}.card-backtop{background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}.card-backtop i{color:#fff}.card-backtop:hover{box-shadow:0 12px 35px rgba(139,92,246,.3)}.backtop-container{position:relative}.backtop-content{flex-direction:column;align-items:flex-start;padding:0;left:-260px;width:240px;position:absolute;top:50%;transform:translateY(-50%);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1}.backtop-card{width:100%;background:#fff;border-radius:16px;box-shadow:0 15px 30px rgba(0,0,0,.1);overflow:hidden}.backtop-header{padding:15px 20px;background:linear-gradient(135deg,#c4b5fd,#8b5cf6);color:#fff}.backtop-title{font-size:14px;font-weight:600;margin-bottom:5px}.backtop-subtitle{font-size:11px;opacity:.8}.backtop-footer{padding:15px 20px;text-align:center}.backtop-btn{width:100%;padding:8px 12px;background:linear-gradient(135deg,#c4b5fd,#8b5cf6);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease}.backtop-btn:hover{opacity:.9;transform:translateY(-2px)}.backtop-container:hover .backtop-content{opacity:1;visibility:visible;left:-260px}.ecyuan-navigation{position:absolute;top:50%;width:90%;left:5%;display:flex;justify-content:space-between;z-index:10;transform:translateY(-50%);pointer-events:none;opacity:0;transition:opacity 0.3s ease}.ecyuan-swiper-container:hover .ecyuan-navigation{opacity:1}.ecyuan-button-prev,.ecyuan-button-next{width:36px;height:36px;background:rgba(0,0,0,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:all 0.2s ease;position:relative}.ecyuan-button-prev:hover,.ecyuan-button-next:hover{background:rgba(0,0,0,0.6)}.ecyuan-button-prev::before,.ecyuan-button-next::before{content:'';display:block;width:12px;height:12px;border-left:2px solid #fff;border-bottom:2px solid #fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.ecyuan-button-next::before{transform:translate(-50%,-50%) rotate(-135deg)}

添加完CSS样式后，接下来在后台设置 – 自定义javascript代码中添加以下代码：

jQuery(document).ready(function($) {
    var $gotop = $('.gotop-item.gotops');
    var $checkinBtn = $('.checkin-btn');
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $gotop.fadeIn(300);
        } else {
            $gotop.fadeOut(300);
        }
    });
    $gotop.click(function() {
        $('html, body').animate({ scrollTop: 0 }, 800);
        return false;
    });
    $('.backtop-btn').click(function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, 800);
    });
});

添加完前两个代码之后，添加主代码，在后台设置 – 自定义底部HTML代码中添加代码：

<div class="side-nav">
    <div class="vip-container">
        <div class="nav-card card-vip"> <i class="fa fa-diamond"></i></div>
        <div class="mx-card-content vip-content">
            <div class="content-arrow"></div>
            <div class="vip-card">
                <div class="vip-header">
                    <div class="vip-title">VIP 会员优惠</div>
                    <div class="vip-subtitle">选择适合您的会员套餐</div>
                </div>
                <div class="vip-body">
                    <div class="vip-plans">
                        <div class="vip-plan">
                            <div class="plan-name">黄金月卡</div>
                            <div class="plan-price"> <span class="plan-original">¥19.9</span> <span class="plan-discount">¥9.9</span> <span class="plan-save">省¥10</span></div>
                        </div>
                        <div class="vip-plan">
                            <div class="plan-name">黄金季卡</div>
                            <div class="plan-price"> <span class="plan-original">¥60</span> <span class="plan-discount">¥25</span> <span class="plan-save">省¥35</span></div>
                        </div>
                        <div class="vip-plan">
                            <div class="plan-name">黑钻月卡</div>
                            <div class="plan-price"> <span class="plan-original">¥39.9</span> <span class="plan-discount">¥19.9</span> <span class="plan-save">省¥20</span></div>
                        </div>
                        <div class="vip-plan">
                            <div class="plan-name">黑钻季卡</div>
                            <div class="plan-price"> <span class="plan-original">¥120</span> <span class="plan-discount">¥55.9</span> <span class="plan-save">省¥64.1</span></div>
                        </div>
                    </div>
                </div>
           <div class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
    <a class="vip-btn" style="display:inline-block;text-decoration:none;cursor:pointer;">
        立即购买
    </a>
</div>
            </div>
        </div>
    </div>
    <div class="donate-container">
        <div class="nav-card card-donate"> <i class="fa fa-heart"></i></div>
        <div class="mx-card-content donate-content">
            <div class="content-arrow"></div>
            <div class="donate-card">
                <div class="donate-header">
                    <div class="donate-title">支持作者</div>
                    <div class="donate-subtitle">您的支持是我们更新的动力</div>
                </div>
                <div class="donate-body">
                    <div class="donate-options">
                        <div class="donate-option">
                            <div class="donate-icon"> <i class="fa fa-coffee"></i></div>
                            <div class="donate-text">
                                <h4>请喝杯咖啡</h4>
                                <p>小额支持，表达心意</p>
                            </div>
                        </div>
                        <div class="donate-option">
                            <div class="donate-icon"> <i class="fa fa-gift"></i></div>
                            <div class="donate-text">
                                <h4>赠送礼品</h4>
                                <p>更高级的支持方式</p>
                            </div>
                        </div>
                        <div class="donate-option">
                            <div class="donate-icon"> <i class="fa fa-diamond"></i></div>
                            <div class="donate-text">
                                <h4>成为赞助人</h4>
                                <p>长期支持，获取特权</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="donate-footer"> <button class="donate-btn">立即支持</button></div>
            </div>
        </div>
    </div>
    <div class="huliku-float-item"> <a class="initiate-checkin my-custom-checkin" href="javascript:;" form-action="user_checkin" ed-text="每日签到">
            <div class="nav-card card-checkin"> <i class="fa fa-calendar-check-o"></i>
                <div class="mx-card-content checkin-content">
                    <div class="content-arrow"></div>
                    <div class="checkin-stats">
                        <div class="checkin-count"> <span id="checkin-count">0</span>
                            <p>连续签到</p>
                        </div>
                        <div class="checkin-points"> <span id="checkin-points">0</span>
                            <p>积分</p>
                        </div>
                    </div> <button class="checkin-btn" id="checkin-btn">今日签到</button>
                </div>
            </div>
        </a></div>
    <div class="service-container">
        <div class="nav-card card-service"> <i class="fa fa-comments"></i></div>
        <div class="mx-card-content service-content">
            <div class="content-arrow"></div>
            <div class="service-card">
                <div class="service-header">
                    <div class="service-title">联系客服</div>
                    <div class="service-subtitle">我们随时为您提供帮助</div>
                </div>
                <div class="service-body">
                    <div class="service-options"> <a class="service-option">
                            <div class="avatar-container"> <img src="https://www.huijuf.com/wp-content/uploads/2025/05/汇聚访506-03.png" alt="客服头像" class="avatar"> <span class="online-dot"></span></div>
                            <div class="option-info">
                                <h4>客服专员</h4>
                                <p>下方立即与客服人员对话</p>
                            </div>
                        </a> <a class="service-option">
                            <div class="option-icon"> <i class="fa fa-envelope"></i></div>
                            <div class="option-info">
                                <h4>邮件支持</h4>
                                <p>mohan@huijuf.com</p>
                            </div>
                        </a></div>
                </div>
                <div class="service-footer"> <button data-height="550" data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1" class="but ml6 pw-1em jb-blue service-pm-btn" data-toggle="RefreshModal"> <i class="fa fa-paper-plane mr-2"></i> <span>发送私信给客服</span> <i class="fa fa-arrow-right ml-2"></i> </button></div>
            </div>
        </div>
    </div>
    <div class="backtop-container gotop-item gotops" style="display: none;">
        <div class="nav-card card-backtop"> 
            <i class="fa fa-arrow-up"></i>
            <div class="card-content backtop-content">
                <div class="content-arrow"></div>
                <div class="backtop-card">
                    <div class="backtop-header">
                        <div class="backtop-title">返回顶部</div>
                        <div class="backtop-subtitle">快速回到页面顶端</div>
                    </div>
                    <div class="backtop-footer"> 
                        <a href="javascript:void(0);" class="backtop-btn" style="display:inline-block;text-decoration:none;">
                            立即返回
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>