优源库博客
优源库官网-免费教程源码-插件模板-软件工具下载平台-互联网开发者资源库
开启精彩搜索

热门搜索

20252026文章ID美化网页代码

  • 7

    会员总数

  • 75

    文章总数

  • 9596

    浏览总数

  • 2

    今日发布

  • 66天

    稳定运行

  • 波浪
  • 波浪
  • 波浪
  • 波浪
优源
Blog
优源
Blog
优源
Blog
优源
Blog
优源
Blog
优源
Blog
雪花效果控制
联系饺子
右侧悬浮导航修复版 右侧悬浮导航 - 修复版 :root { --primary-color: #3b82f6; --primary-hover: #2563eb; --text-primary: #334155; --text-secondary: #64748b; --bg-light: #f8fafc; --shadow-sm: 0 2px 8px rgba(0,0,0,.05); --shadow-md: 0 5px 15px rgba(0,0,0,.08); --btn-gradient: linear-gradient(145deg, #ffffff, #f5f5f5); --btn-hover-gradient: linear-gradient(145deg, #f8fafc, #eff6ff); }< .comfortable-nav{ position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:9999; display:none; flex-direction:column; gap:12px; padding:10px 0; } /* 桌面端显示 */ @media (min-width:768px) { .comfortable-nav { display:flex; } } /* 手机端显示（当启用时） */ .comfortable-nav.show-mobile { display: flex !important; } .nav-item{ width:52px; height:52px; border-radius:18px; background: var(--btn-gradient); box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #f0f0f0; background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.8) 0%, rgba(245,245,245,0.1) 100%); } .nav-item:hover{ background: var(--btn-hover-gradient); transform:translateX(-6px) translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.1); border-color: rgba(59, 130, 246, 0.2); } .comfortable-nav .nav-item.service-item { width:52px !important; height:52px !important; border-radius:18px !important; background: linear-gradient(145deg, #ffffff, #f5f5f5) !important; background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.8) 0%, rgba(245,245,245,0.1) 100%) !important; border: 1px solid #f0f0f0 !important; box-shadow:0 2px 8px rgba(0,0,0,.05) !important; margin: 0 !important; padding: 0 !important; } .comfortable-nav .nav-item.service-item:hover { background: var(--btn-hover-gradient) !important; transform:translateX(-6px) translateY(-2px) !important; box-shadow:0 6px 16px rgba(0,0,0,.1) !important; border-color: rgba(59, 130, 246, 0.2) !important; } .nav-icon{ font-size:22px; color:var(--text-secondary); transition:all .2s ease; } .nav-item:hover .nav-icon{ color:var(--primary-color); } .nav-tooltip{ position:absolute; right:60px; top:50%; transform:translateY(-50%); background-color:var(--text-primary); color:#fff; padding:8px 16px; border-radius:10px; font-size:13px; white-space:nowrap; opacity:0; pointer-events:none; transition:all .25s ease; box-shadow:0 4px 12px rgba(0,0,0,.12); } .nav-tooltip::after{ content:''; position:absolute; top:50%; right:-4px; transform:translateY(-50%); width:8px; height:8px; background-color:var(--text-primary); transform: translateY(-50%) rotate(45deg); } .nav-item:hover .nav-tooltip{ opacity:1; right:58px; } .vip-item-right{ width:56px; height:56px; border-radius:18px; background: linear-gradient(135deg, var(--primary-color), #60a5fa); position:relative; box-shadow:0 8px 20px rgba(59,130,246,.35); z-index:2; border:none; background-image: none; } .vip-item-right .nav-icon{ color:#fff; font-size:24px; position:relative; z-index:2; } .vip-pulse{ position:absolute; width:100%; height:100%; border-radius:18px; background-color:rgba(59,130,246,.4); animation:pulse 2s infinite ease-in-out; z-index:1; } @keyframes pulse{ 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} } .vip-panel{ position:absolute; right:75px; top:50%; transform:translateY(-50%); background-color:#fff; border-radius:14px; box-shadow:var(--shadow-md); width:290px; padding:22px; opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.4,0,.2,1); } .vip-panel::after{ content:''; position:absolute; top:50%; right:-8px; transform:translateY(-50%) rotate(45deg); width:16px; height:16px; background-color:#fff; box-shadow:3px -3px 8px rgba(0,0,0,.08); z-index:-1; } .vip-item-right:hover .vip-panel{ opacity:1; pointer-events:all; transform: translateY(-50%) translateX(-8px); } .vip-panel h4{ color:var(--text-primary); font-size:17px; margin-bottom:14px; font-weight:600; display:flex; align-items:center; gap:8px; } .vip-benefits{margin-bottom:20px} .vip-benefit{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-secondary); margin-bottom:10px; padding:4px 0; } .vip-benefit i{ color:var(--primary-color); font-size:16px; } .vip-pricing{ background-color:var(--bg-light); border-radius:12px; padding:16px; margin-bottom:20px; border:1px solid rgba(59,130,246,0.1); } .vip-price .current{ font-size:24px; font-weight:700; color:var(--primary-color); } .vip-cta{ width:100%; padding:12px 0; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; box-shadow:0 4px 12px rgba(59,130,246,.2); } .vip-cta:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(59,130,246,.3); color:#fff; } .qrcode-panel{ position:absolute; right:70px; top:50%; transform:translateY(-50%); background-color:#fff; border-radius:14px; box-shadow:var(--shadow-md); width:230px; padding:22px; text-align:center; opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.4,0,.2,1); } .qrcode-panel::after{ content:''; position:absolute; top:50%; right:-8px; transform:translateY(-50%) rotate(45deg); width:16px; height:16px; background-color:#fff; box-shadow:3px -3px 8px rgba(0,0,0,.08); z-index:-1; } .nav-item:hover .qrcode-panel{ opacity:1; pointer-events:all; transform: translateY(-50%) translateX(-8px); } .qrcode-container{ background-color:#fff; border-radius:12px; padding:14px; display:inline-block; box-shadow:var(--shadow-sm); margin-bottom:16px; border:1px solid rgba(0,0,0,0.05); } .qrcode-img{ width:140px; height:140px; border-radius:8px; } .qrcode-title{ color:var(--text-primary); font-size:15px; font-weight:600; margin-bottom:8px; } .service-item{position:relative} .service-status{ position:absolute; top:-4px !important; right:-4px !important; background-color:#10b981; color:#fff; font-size:11px; padding:2px 6px !important; border-radius:14px; font-weight:600; white-space:nowrap; z-index:2; animation:pulseOnline 2s infinite; box-shadow:0 2px 6px rgba(16,185,129,.2); } @keyframes pulseOnline{ 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} } .backtop-item{ border-radius:18px; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); opacity:0; visibility:hidden; transition:all .3s ease; border-color:transparent; background-image: none; } .backtop-item .nav-icon{color:#fff} .backtop-item:hover{ background: linear-gradient(135deg, var(--primary-hover), #1d4ed8); border-color:transparent; } .backtop-item.visible{ opacity:1; visibility:visible; } .checkin-link,.service-button{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; position:relative; text-decoration:none; border-radius: inherit; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } .fullscreen-item.active{ background: var(--btn-hover-gradient); border-color: rgba(59, 130, 246, 0.3); } /* 手机端显示导航（修复版，默认隐藏） */ @media (max-width:767px){ .comfortable-nav { display: none; flex-direction: column; gap: 8px; right: 10px; padding: 8px 0; position: fixed; top: 50%; transform: translateY (-50%); z-index: 9999; } .comfortable-nav.show-mobile { display: flex !important; } .comfortable-nav .nav-item { width: 44px; height: 44px; border-radius: 14px; } .comfortable-nav .vip-item-right { width: 48px; height: 48px; } .comfortable-nav .nav-tooltip { right: 52px; font-size: 12px; padding: 6px 12px; } .comfortable-nav .vip-panel, .comfortable-nav .qrcode-panel { width: 200px; right: 60px; padding: 16px; } /* 手机端管理员设置按钮显示 */ .comfortable-nav .admin-settings-item { display: flex !important; } } /* 管理员设置按钮 */ .admin-settings-item { background: linear-gradient (145deg, #f59e0b, #f97316) !important; border-color: rgba (249, 115, 22, 0.2) !important; display: none !important; } .admin-settings-item .nav-icon { color: #fff !important; } .admin-settings-item:hover { background: linear-gradient(145deg, #f97316, #ea580c) !important; border-color: rgba(234, 88, 12, 0.3) !important; } .admin-settings-item.show-admin { display: flex !important; } /* 弹窗样式 */ .settings-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier (0.4, 0, 0.2, 1); } .settings-modal.active { opacity: 1; pointer-events: all; } .settings-modal-content { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); border-radius: 28px; width: 95%; max-width: 960px; max-height: 90vh; overflow-y: auto; padding: 0; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 100px rgba(59, 130, 246, 0.15); transform: translateY(40px) scale(0.9); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .settings-modal.active .settings-modal-content { transform: translateY(0) scale(1); } .settings-modal-content::-webkit-scrollbar { width: 0; height: 0; display: none; } .settings-modal-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); padding: 16px 28px; border-radius: 28px 28px 0 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; } .settings-modal-header::before { content: ''; position: absolute; top: -100%; right: -100%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20%, -20%); } } .settings-modal-title { font-size: 20px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); position: relative; z-index: 1; } .settings-modal-title i { font-size: 22px; animation: spin 4s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .settings-modal-close { position: absolute; top: 12px; right: 20px; background: rgba(255, 255, 255, 0.25); border: 2px solid rgba(255, 255, 255, 0.4); font-size: 18px; color: #fff; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .settings-modal-close:hover { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-50%) rotate(90deg) scale(1.15); } /* 头部按钮容器 */ .settings-modal-actions { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; margin-right: 60px; } .settings-modal-body { padding: 20px 28px; background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%); overflow: hidden; } .settings-card { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border-radius: 20px; padding: 20px; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .settings-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea, #764ba2, #f093fb); opacity: 0.8; } /* 设置项分组容器 */ .settings-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9; } .settings-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .settings-section-title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .settings-section-title i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; } .settings-section:nth-child(1) .settings-section-title i { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; } .settings-section:nth-child(2) .settings-section-title i { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; } .settings-section:nth-child(3) .settings-section-title i { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; } .settings-section:nth-child(4) .settings-section-title i { background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: #fff; } .settings-section:nth-child(5) .settings-section-title i { background: linear-gradient(135deg, #ec4899, #f472b6); color: #fff; } .settings-section:nth-child(6) .settings-section-title i { background: linear-gradient(135deg, #06b6d4, #22d3ee); color: #fff; } /* 设置项网格布局 */ .settings-grid { display: grid; grid-template-columns: repeat (3, 1fr); gap: 12px; } /* VIP 单行横排布局 */ .settings-grid.vip-grid { display: flex; gap: 12px; flex-wrap: nowrap; overflow: visible; } .settings-grid.vip-grid .settings-form-group { flex: 1; min-width: 0; } .settings-form-group { margin-bottom: 0; } .settings-form-label { display: block; font-size: 12px; color: #475569; margin-bottom: 6px; font-weight: 600; } .settings-form-input { width: 100%; padding: 8px 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 13px; color: #334155; transition: all 0.3s ease; background: #fff; } .settings-form-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* 手机版显示开关样式 */ .mobile-toggle-wrapper { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; } .mobile-toggle-label { font-size: 13px; font-weight: 600; color: #475569; flex: 1; } .mobile-toggle-switch { position: relative; width: 48px; height: 26px; background: #cbd5e1; border-radius: 13px; cursor: pointer; transition: background 0.3s ease; } .mobile-toggle-switch.active { background: linear-gradient(135deg, #10b981, #34d399); } .mobile-toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .mobile-toggle-switch.active::after { transform: translateX(22px); } .settings-btn { padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .settings-btn-cancel { background: rgba(255, 255, 255, 0.15); color: #fff; border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .settings-btn-cancel:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .settings-btn-save { background: rgba(255, 255, 255, 0.95); color: #667eea; border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .settings-btn-save:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); background: #fff; } @media (max-width: 768px) { .settings-modal-body { padding: 16px; } .settings-modal-header { padding: 16px 20px; flex-wrap: wrap; } .settings-modal-actions { margin-right: 50px; gap: 8px; } .settings-card { padding: 16px; } .settings-grid { grid-template-columns: 1fr; gap: 10px; } .settings-grid.vip-grid { display: flex; flex-direction: row; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .settings-grid.vip-grid .settings-form-group { min-width: 140px; } .settings-form-input { padding: 10px 12px; font-size: 12px; } .settings-btn { padding: 8px 16px; font-size: 13px; } } 永久会员新春钜惠 微信QQ客服一对一 源码永久免费升级 大量专属精品源码 免费下载全站资源 ¥118 ¥298 永久会员 · 立省180元 立即开通 每日签到 在线 在线客服 打赏我们 扫码关注公众号 获取更多最新源码或模板 公众号二维码 展开全屏 返回顶部 右侧导航设置 取消 保存设置 签到按钮 图标类名 链接地址 提示文字 在线客服 图标类名 状态文字 提示文字 打赏按钮 图标类名 链接地址 提示文字 二维码 图标类名 二维码图片URL 二维码标题 二维码描述 提示文字 VIP按钮 图标类名 VIP价格 原价 开通链接 手机版设置 在手机版显示导航栏 (function() { 'use strict'; const adminSettingsBtn = document.getElementById('adminSettingsBtn'); const settingsModal = document.getElementById('settingsModal'); const closeSettingsModal = document.getElementById('closeSettingsModal'); const cancelSettingsBtn = document.getElementById('cancelSettingsBtn'); const saveSettingsBtn = document.getElementById('saveSettingsBtn'); const mobileToggle = document.getElementById('mobileToggle'); const navContainer = document.querySelector('.comfortable-nav'); // 手机版显示开关事件 if (mobileToggle) { mobileToggle.addEventListener('click', function() { this.classList.toggle('active'); }); } // 只有按钮存在才绑定事件 if (adminSettingsBtn) { adminSettingsBtn.addEventListener('click', function() { settingsModal.classList.add('active'); document.body.style.overflow = 'hidden'; }); } function closeModal() { settingsModal.classList.remove('active'); document.body.style.overflow = ''; } if (closeSettingsModal) closeSettingsModal.addEventListener('click', closeModal); if (cancelSettingsBtn) cancelSettingsBtn.addEventListener('click', closeModal); settingsModal.addEventListener('click', function(e) { if (e.target === settingsModal) closeModal(); }); document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && settingsModal.classList.contains('active')) closeModal(); }); if (saveSettingsBtn) { saveSettingsBtn.addEventListener('click', function() { document.getElementById('checkinIcon').className = 'fa ' + document.getElementById('inputCheckinIcon').value + ' nav-icon'; document.getElementById('checkinLink').href = document.getElementById('inputCheckinLink').value; document.getElementById('checkinTooltip').textContent = document.getElementById('inputCheckinTooltip').value; document.getElementById('serviceIcon').className = 'fa ' + document.getElementById('inputServiceIcon').value + ' nav-icon'; document.getElementById('serviceStatus').textContent = document.getElementById('inputServiceStatus').value; document.getElementById('serviceTooltip').textContent = document.getElementById('inputServiceTooltip').value; document.getElementById('rewardIcon').className = 'fa ' + document.getElementById('inputRewardIcon').value + ' nav-icon'; document.getElementById('rewardLink').href = document.getElementById('inputRewardLink').value; document.getElementById('rewardTooltip').textContent = document.getElementById('inputRewardTooltip').value; document.getElementById('qrcodeIcon').className = 'fa ' + document.getElementById('inputQrcodeIcon').value + ' nav-icon'; document.getElementById('qrcodeImage').src = document.getElementById('inputQrcodeImage').value; document.getElementById('qrcodeTitle').textContent = document.getElementById('inputQrcodeTitle').value; document.getElementById('qrcodeDesc').textContent = document.getElementById('inputQrcodeDesc').value; document.getElementById('qrcodeTooltip').textContent = document.getElementById('inputQrcodeTooltip').value; document.querySelector('.vip-item-right .nav-icon').className = 'fa ' + document.getElementById('inputVipIcon').value + ' nav-icon'; document.querySelector('.vip-price .current').textContent = document.getElementById('inputVipPrice').value; document.querySelector('.vip-price .original').textContent = document.getElementById('inputVipOriginalPrice').value; document.querySelector('.vip-cta').href = document.getElementById('inputVipLink').value; const toast = document.createElement('div'); toast.style.cssText = 'position:fixed;top:24px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#10b981,#34d399);color:#fff;padding:18px 36px;border-radius:16px;font-size:16px;font-weight:700;box-shadow:0 8px 28px rgba(16,185,129,0.4);z-index:999999;'; toast.innerHTML = '设置保存成功！'; document.body.appendChild(toast); setTimeout(function() { toast.remove(); }, 2500); setTimeout(closeModal, 500); saveSettingsToLocalStorage(); }); } function saveSettingsToLocalStorage() { const settings = { checkinIcon: document.getElementById('inputCheckinIcon').value, checkinLink: document.getElementById('inputCheckinLink').value, checkinTooltip: document.getElementById('inputCheckinTooltip').value, serviceIcon: document.getElementById('inputServiceIcon').value, serviceStatus: document.getElementById('inputServiceStatus').value, serviceTooltip: document.getElementById('inputServiceTooltip').value, rewardIcon: document.getElementById('inputRewardIcon').value, rewardLink: document.getElementById('inputRewardLink').value, rewardTooltip: document.getElementById('inputRewardTooltip').value, qrcodeIcon: document.getElementById('inputQrcodeIcon').value, qrcodeImage: document.getElementById('inputQrcodeImage').value, qrcodeTitle: document.getElementById('inputQrcodeTitle').value, qrcodeDesc: document.getElementById('inputQrcodeDesc').value, qrcodeTooltip: document.getElementById('inputQrcodeTooltip').value, vipIcon: document.getElementById('inputVipIcon').value, vipPrice: document.getElementById('inputVipPrice').value, vipOriginalPrice: document.getElementById('inputVipOriginalPrice').value, vipLink: document.getElementById('inputVipLink').value, showMobile: mobileToggle.classList.contains('active') }; localStorage.setItem('navSettings', JSON.stringify(settings)); // 应用手机版显示设置 if (settings.showMobile) { navContainer.classList.add('show-mobile'); } else { navContainer.classList.remove('show-mobile'); } } function loadSettingsFromLocalStorage() { // 默认设置 const defaultSettings = { checkinIcon: 'fa-calendar-check-o', checkinLink: 'javascript:;', checkinTooltip: '每日签到', serviceIcon: 'fa-comments-o', serviceStatus: '在线', serviceTooltip: '在线客服', rewardIcon: 'fa-gift', rewardLink: '/dashang', rewardTooltip: '打赏我们', qrcodeIcon: 'fa-qrcode', qrcodeImage: 'https://www.yykbk.com/wp-content/uploads/2025/03/35.jpg', qrcodeTitle: '扫码关注公众号', qrcodeDesc: '获取更多最新源码或模板', qrcodeTooltip: '公众号二维码', vipIcon: 'fa-diamond', vipPrice: '¥118', vipOriginalPrice: '¥298', vipLink: '/vip-2', showMobile: false // 手机端默认关闭 }; const savedSettings = localStorage.getItem('navSettings'); const settings = savedSettings ? { ...defaultSettings, ...JSON.parse(savedSettings) } : defaultSettings; document.getElementById('inputCheckinIcon').value = settings.checkinIcon; document.getElementById('inputCheckinLink').value = settings.checkinLink; document.getElementById('inputCheckinTooltip').value = settings.checkinTooltip; document.getElementById('inputServiceIcon').value = settings.serviceIcon; document.getElementById('inputServiceStatus').value = settings.serviceStatus; document.getElementById('inputServiceTooltip').value = settings.serviceTooltip; document.getElementById('inputRewardIcon').value = settings.rewardIcon; document.getElementById('inputRewardLink').value = settings.rewardLink; document.getElementById('inputRewardTooltip').value = settings.rewardTooltip; document.getElementById('inputQrcodeIcon').value = settings.qrcodeIcon; document.getElementById('inputQrcodeImage').value = settings.qrcodeImage; document.getElementById('inputQrcodeTitle').value = settings.qrcodeTitle; document.getElementById('inputQrcodeDesc').value = settings.qrcodeDesc; document.getElementById('inputQrcodeTooltip').value = settings.qrcodeTooltip; document.getElementById('inputVipIcon').value = settings.vipIcon; document.getElementById('inputVipPrice').value = settings.vipPrice; document.getElementById('inputVipOriginalPrice').value = settings.vipOriginalPrice; document.getElementById('inputVipLink').value = settings.vipLink; document.getElementById('checkinIcon').className = 'fa ' + settings.checkinIcon + ' nav-icon'; document.getElementById('checkinLink').href = settings.checkinLink; document.getElementById('checkinTooltip').textContent = settings.checkinTooltip; document.getElementById('serviceIcon').className = 'fa ' + settings.serviceIcon + ' nav-icon'; document.getElementById('serviceStatus').textContent = settings.serviceStatus; document.getElementById('serviceTooltip').textContent = settings.serviceTooltip; document.getElementById('rewardIcon').className = 'fa ' + settings.rewardIcon + ' nav-icon'; document.getElementById('rewardLink').href = settings.rewardLink; document.getElementById('rewardTooltip').textContent = settings.rewardTooltip; document.getElementById('qrcodeIcon').className = 'fa ' + settings.qrcodeIcon + ' nav-icon'; document.getElementById('qrcodeImage').src = settings.qrcodeImage; document.getElementById('qrcodeTitle').textContent = settings.qrcodeTitle; document.getElementById('qrcodeDesc').textContent = settings.qrcodeDesc; document.getElementById('qrcodeTooltip').textContent = settings.qrcodeTooltip; document.querySelector('.vip-item-right .nav-icon').className = 'fa ' + settings.vipIcon + ' nav-icon'; document.querySelector('.vip-price .current').textContent = settings.vipPrice; document.querySelector('.vip-price .original').textContent = settings.vipOriginalPrice; document.querySelector('.vip-cta').href = settings.vipLink; // 应用手机版显示设置 if (mobileToggle) { if (settings.showMobile) { mobileToggle.classList.add('active'); navContainer.classList.add('show-mobile'); } else { mobileToggle.classList.remove('active'); navContainer.classList.remove('show-mobile'); } } } loadSettingsFromLocalStorage(); // 返回顶部 const backtopBtn = document.querySelector('.backtop-item'); function checkScroll() { if (window.scrollY > 300) backtopBtn.classList.add('visible'); else backtopBtn.classList.remove('visible'); } checkScroll(); window.addEventListener('scroll', checkScroll); backtopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // VIP跳转 const vipItem = document.querySelector('.vip-item-right'); if (vipItem) vipItem.addEventListener('click', function() { window.location.href = '/svip'; }); // 全屏 const fullscreenBtn = document.querySelector('.fullscreen-item'); const fullscreenIcon = document.getElementById('fullscreen-icon'); const fullscreenTooltip = document.getElementById('fullscreen-tooltip'); function requestFullscreen(element) { if (element.requestFullscreen) return element.requestFullscreen(); if (element.webkitRequestFullscreen) return element.webkitRequestFullscreen(); if (element.msRequestFullscreen) return element.msRequestFullscreen(); } function exitFullscreen() { if (document.exitFullscreen) return document.exitFullscreen(); if (document.webkitExitFullscreen) return document.webkitExitFullscreen(); if (document.msExitFullscreen) return document.msExitFullscreen(); } function getFullscreenElement() { return document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement; } function updateFullscreenState() { if (getFullscreenElement()) { fullscreenIcon.className = 'fa fa-compress nav-icon'; fullscreenTooltip.textContent = '退出全屏'; } else { fullscreenIcon.className = 'fa fa-expand nav-icon'; fullscreenTooltip.textContent = '展开全屏'; } } updateFullscreenState(); fullscreenBtn.addEventListener('click', function() { if (!getFullscreenElement()) requestFullscreen(document.documentElement); else exitFullscreen(); }); document.addEventListener('fullscreenchange', updateFullscreenState); document.addEventListener('webkitfullscreenchange', updateFullscreenState); document.addEventListener('MSFullscreenChange', updateFullscreenState); })();