/* ========================================================================== 参考站主题在本站的补充样式 /assets/red/css/red-extra.css 参考站的 CSS 管整体外观（头部、轮播、卡片、页脚）， 这里只补参考站没有、但本站要用的东西： toast 提示、商品卡片、查询/投诉结果、帮助中心折叠面板。 ========================================================================== */ /* 全站 SVG 图标的基础尺寸：1em 跟着字号走，颜色用 currentColor 跟文字 */ .ico-svg{ display:inline-block;width:1em;height:1em; vertical-align:-.125em;flex:none; } /* --------------------------------------------------------------------------- 字体图标 /assets/font/iconfont.* 红色主题不加载站点原来的 style.css，而 @font-face 和 .df-i 都写在那边， 于是前台 这种（底部导航、后台「移动底部菜单」 选的图标）没有字体可用，显示成豆腐块/空白——这里补一份。 字体在 /assets/font/，本文件在 /assets/red/css/，所以要往上退两级。 */ @font-face{ font-family:"df-iconfont"; src:url("../../font/iconfont.woff2") format("woff2"), url("../../font/iconfont.woff") format("woff"), url("../../font/iconfont.ttf") format("truetype"); font-weight:normal;font-style:normal;font-display:swap; } .df-i{ font-family:"df-iconfont" !important; font-style:normal;font-weight:normal;line-height:1;display:inline-block;vertical-align:middle; speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } /* main.js 的轻提示。红色主题不加载站点原来的 style.css，这里补一份 */ .toast{ position:fixed;left:50%;top:38%;transform:translate(-50%,-10px);z-index:99999; background:rgba(20,32,42,.92);color:#fff;padding:11px 20px;border-radius:8px;font-size:14.5px; opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;max-width:80vw;text-align:center; } .toast.show{opacity:1;transform:translate(-50%,0);} /* 勾 / 叉用 SVG 图标（mask 上色），不用字符 */ .toast.ok::before,.toast.err::before{ content:"";display:inline-block;width:1em;height:1em; vertical-align:-.15em;margin-right:.2em;background:currentColor; } .toast.ok::before{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.9 5.2 12.5l1.5-1.5 2.9 2.9 7.4-7.4 1.5 1.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.9 5.2 12.5l1.5-1.5 2.9 2.9 7.4-7.4 1.5 1.5z'/%3E%3C/svg%3E") center/contain no-repeat; } .toast.err::before{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12 5 6.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12 5 6.4z'/%3E%3C/svg%3E") center/contain no-repeat; } /* 首页有自己的回顶按钮，main.js 那个就不出来了 */ .to-top{display:none!important;} /* ---------- 首页：通栏里的搜索 ---------- */ .fk-hero-search{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center;} .fk-hero-search input{ flex:1;min-width:200px;max-width:400px;height:46px;padding:0 18px; border:1px solid rgba(255,255,255,.55);border-radius:999px; background:rgba(255,255,255,.16);color:#fff;font-size:15px;outline:none; } .fk-hero-search input::placeholder{color:rgba(255,255,255,.82);} .fk-hero-search input:focus{background:rgba(255,255,255,.26);} .fk-hero-search button{ height:46px;padding:0 28px;border:0;border-radius:999px;background:#fff; color:#2155FF;font-size:15px;font-weight:600;cursor:pointer; } /* ---------- 首页：商品卡片（版式照抄店铺页 .goods-item，见 /store/0.html） ---------- 类名挂在 .fk-security-card.is-goods 上（首页只有 home-refresh.css，没有 style.css）， 尺寸、间距、配色跟 style.css 里的 .goods-item 保持一致。 */ .fk-security-card.is-goods{ position:relative;overflow:hidden;display:flex;flex-direction:column; padding:0;text-align:left;text-decoration:none;color:inherit; /* 描边比店铺页的 #E8EDF1 略深一档，卡片轮廓更清楚 */ border:1px solid var(--line,#DCE3E9);border-radius:var(--radius,8px); background:var(--card,#FFFFFF); box-shadow:0 6px 18px rgba(36,83,160,.05); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; } .fk-security-card.is-goods:hover{ border-color:var(--c1,#215DFF);transform:translateY(-2px);box-shadow:0 6px 24px rgba(20,40,60,.10); } /* 图：顶部通铺，4:3 等比裁切，悬停放大——跟店铺页一致 */ .fk-security-card.is-goods .gd-pic{position:relative;background:#EEF2F5;overflow:hidden;} .fk-security-card.is-goods .gd-pic img{ width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block; margin:0;border-radius:0;background:none;transition:transform .35s ease; } .fk-security-card.is-goods:hover .gd-pic img{transform:scale(1.04);} .fk-security-card.is-goods .gd-pic .ph{ width:100%;height:auto;aspect-ratio:4/3;margin:0;border-radius:0; background:#EEF2F5;color:#B6C4CE; display:flex;align-items:center;justify-content:center;font-size:26px; } /* 左上角状态角标 */ .fk-security-card.is-goods .gd-badges{position:absolute;left:8px;top:8px;z-index:2;display:flex;gap:5px;} .fk-security-card.is-goods .gd-badge{ padding:2px 7px;border-radius:3px;font-size:11.5px;line-height:17px; color:#fff;background:var(--c1,#215DFF); } .fk-security-card.is-goods .gd-badge.hot{background:#D93A2B;} .fk-security-card.is-goods .gd-badge.rec{background:#B8862B;} .fk-security-card.is-goods .gd-badge.out{background:#8798A6;} /* 右上角收藏心：跟 .goods-item 那颗（style.css）同一套外观（黑底 20% 的圆片）， 只是首页这套卡片是另一套类名，得在这儿再写一遍 */ .fk-security-card.is-goods .gd-fav{ position:absolute;right:8px;top:8px;z-index:3; width:22px;height:22px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(0,0,0,.2);color:#D8E0E6; box-shadow:0 1px 3px rgba(20,40,60,.12);cursor:pointer; transition:color .16s,background .16s,transform .16s; } .fk-security-card.is-goods .gd-fav .ico-svg{width:15px;height:15px;display:block;} .fk-security-card.is-goods .gd-fav .ico-on{display:none;} .fk-security-card.is-goods .gd-fav.on{color:#FF5A5A;} .fk-security-card.is-goods .gd-fav.on .ico-off{display:none;} .fk-security-card.is-goods .gd-fav.on .ico-on{display:block;} .fk-security-card.is-goods .gd-fav:hover{color:#FF5A5A;background:rgba(0,0,0,.34);transform:scale(1.1);} /* 文字区：标题两行截断，价格行压到底部 */ .fk-security-card.is-goods .gd-info{padding:11px 12px 12px;flex:1;display:flex;flex-direction:column;} .fk-security-card.is-goods .gd-nm{ margin:0;font-size:13.5px;line-height:1.5;font-weight:400;height:41px; overflow:hidden;color:var(--text,#1B2733); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .fk-security-card.is-goods .gd-meta{ margin-top:auto;padding-top:9px;display:flex;align-items:flex-end;gap:8px; } .fk-security-card.is-goods .gd-price{ color:var(--c-price,#D93A2B);font-size:19px;font-weight:700;line-height:1.1; } .fk-security-card.is-goods .gd-price small{font-size:12px;font-weight:400;} .fk-security-card.is-goods .gd-origin{ color:var(--muted,#8798A6);font-size:12.5px;text-decoration:line-through; } .fk-security-card.is-goods .gd-stock{ margin-left:auto;display:inline-flex;align-items:center;gap:4px; font-size:12.5px;line-height:1.6;white-space:nowrap; } .fk-security-card.is-goods .gd-stock::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--ok,#2E7D5B); } .fk-security-card.is-goods .gd-stock.on{color:var(--ok,#2E7D5B);} .fk-security-card.is-goods .gd-stock.low{color:var(--warn,#B8862B);} .fk-security-card.is-goods .gd-stock.low::before{background:var(--warn,#B8862B);} .fk-security-card.is-goods .gd-stock.off{color:var(--muted,#8798A6);} .fk-security-card.is-goods .gd-stock.off::before{background:#C3CED6;} .fk-goods-more{text-align:center;margin-top:26px;} /* 「查看全部商品」：描边 + 文字 + 悬停底色都跟着后台主色走，别写死蓝色 */ .fk-goods-more a{ display:inline-block;padding:11px 30px;border-radius:999px;border:1px solid var(--c1,#2155FF); color:var(--c1,#2155FF);font-size:15px;text-decoration:none; } .fk-goods-more a:hover{background:var(--c1,#2155FF);color:#fff;} /* ---------- 首页「精选商品」的排法 ---------- 跟着 conf.json 的两项走，后台「模板配置」里改： · 「商品列表列数」1~6 → 这里的 gc1~gc6，选 1 是一行一个的列表模式 · 「商品缩略图比例」→ 容器上的 --gd-ratio（4/3、16/9…） 只在电脑上生效：窄屏本来就只剩一两列，再按这里的列数排会挤成一团。 */ @media (min-width:1081px){ .fk-goods-grid.gc1{grid-template-columns:minmax(0,1fr);} .fk-goods-grid.gc2{grid-template-columns:repeat(2,minmax(0,1fr));} .fk-goods-grid.gc3{grid-template-columns:repeat(3,minmax(0,1fr));} .fk-goods-grid.gc4{grid-template-columns:repeat(4,minmax(0,1fr));} .fk-goods-grid.gc5{grid-template-columns:repeat(5,minmax(0,1fr));} .fk-goods-grid.gc6{grid-template-columns:repeat(6,minmax(0,1fr));} /* 列数选 1 = 列表模式：图在左、文字在右，一行一个 */ .fk-goods-grid.gc1 .fk-security-card.is-goods{ flex-direction:row;align-items:center;gap:16px;padding:12px;min-height:0; } .fk-goods-grid.gc1 .fk-security-card.is-goods .gd-pic{width:132px;flex:0 0 132px;} .fk-goods-grid.gc1 .fk-security-card.is-goods .gd-info{padding:0;} .fk-goods-grid.gc1 .fk-security-card.is-goods .gd-nm{height:auto;-webkit-line-clamp:1;} } /* 首页商品的缩略图比例：跟着后台选的 --gd-ratio 走（.fk-goods-grid 上带）， 要放在上面「图：4:3 等比裁切」那两条之后，才能盖掉那个 4/3 */ .fk-goods-grid .fk-security-card.is-goods .gd-pic img, .fk-goods-grid .fk-security-card.is-goods .gd-pic .ph{aspect-ratio:var(--gd-ratio,4/3);} /* 数据面板里的单位 */ .fk-stat-unit{font-size:15px;font-weight:600;margin-left:2px;} /* ---------- 查询 / 投诉：结果卡片 ---------- */ .rq-panel{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(23,43,77,.07);padding:22px 24px;} .rq-item{border:1px solid #E7ECF0;border-radius:10px;padding:16px 18px;margin-bottom:14px;background:#fff;} .rq-item:last-child{margin-bottom:0;} .rq-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .rq-no{ font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;color:#1E2B3C;font-weight:600; word-break:break-all; } .rq-tag{padding:2px 9px;border-radius:999px;font-size:12.5px;line-height:1.7;background:#EEF2F5;color:#5A6B7A;} .rq-tag.wait{background:#FFF4E0;color:#B8791B;} .rq-tag.ok{background:#E7F7EE;color:#1F9254;} .rq-tag.err{background:#FDECEC;color:#C0392B;} /* 商品名 + 左侧缩略图 */ .rq-goods{display:flex;align-items:center;gap:12px;} .rq-img{ width:52px;height:52px;flex:0 0 52px;border-radius:8px;object-fit:cover; background:#F2F5F8;border:1px solid #E7ECF0; } .rq-goods .rq-gn{margin-top:0;min-width:0;} .rq-gn{margin-top:8px;font-size:15px;color:#1E2B3C;font-weight:600;} .rq-meta{margin-top:6px;font-size:13px;color:#8A97A3;display:flex;gap:16px;flex-wrap:wrap;} .rq-card{ margin-top:12px;background:#1E2B3C;border:1px solid #0F1A26;border-radius:8px;padding:12px 14px; white-space:pre-wrap;word-break:break-all; font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.9;color:#fff;letter-spacing:.3px; } .rq-ops{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;} .rq-btn-sm{ display:inline-block;padding:6px 14px;border-radius:6px;border:1px solid #D9E1E8; font-size:13.5px;color:#5A6B7A;background:#fff;cursor:pointer;text-decoration:none; } .rq-btn-sm:hover{border-color:#2155FF;color:#2155FF;} .rq-btn-sm.blue{background:#2155FF;border-color:#2155FF;color:#fff;} .rq-btn-sm.blue:hover{background:#1B47D8;color:#fff;} .rq-empty{text-align:center;color:#8A97A3;font-size:14.5px;padding:26px 0;} /* 通栏里的下拉 + 输入框 */ .rq-input-group{display:flex;gap:10px;max-width:640px;margin:26px auto 0;} .rq-input-group select{ height:46px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.18);color:#fff;font-size:15px;outline:none; } .rq-input-group select option{color:#1E2B3C;} .rq-input-group input{ flex:1;height:46px;padding:0 16px;border-radius:8px; border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.16); color:#fff;font-size:15px;outline:none; } .rq-input-group input::placeholder{color:rgba(255,255,255,.82);} .rq-input-group button{ height:46px;padding:0 26px;border:0;border-radius:8px;background:#fff;color:#2155FF; font-size:15px;font-weight:600;cursor:pointer; } .rq-extra{max-width:640px;margin:12px auto 0;} .rq-extra input,.rq-extra textarea,.rq-extra select{ width:100%;height:44px;padding:0 14px;border:1px solid #D9E1E8;border-radius:8px; font-size:14.5px;color:#1E2B3C;background:#fff;outline:none;box-sizing:border-box; } .rq-extra textarea{height:auto;padding:12px 14px;line-height:1.7;resize:vertical;} .rq-extra input:focus,.rq-extra textarea:focus,.rq-extra select:focus{border-color:#2155FF;} .rq-row{margin-bottom:14px;} .rq-lab{display:block;margin-bottom:6px;font-size:14px;color:#5A6B7A;} .rq-tips{margin-top:22px;color:#5A6B7A;font-size:14px;line-height:2;} .rq-tips a{color:#2155FF;text-decoration:none;} /* ---------- 查询 / 投诉：其余小组件 ---------- */ .rq-h{font-size:18px;color:#1E2B3C;margin:0 0 14px;} .rq-h .step{color:#2155FF;font-size:14px;margin-right:6px;} .oq-cnt{font-size:13.5px;color:#8A97A3;margin-left:8px;font-weight:400;} .rq-ok{text-align:center;padding:30px 0;} .rq-ok .ok-ico{ width:64px;height:64px;border-radius:50%;background:#E7F7EE;color:#1F9254; font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px; } .rq-ok .ok-t{font-size:19px;color:#1E2B3C;font-weight:700;} .rq-ok .ok-s{margin-top:10px;color:#5A6B7A;font-size:14.5px;line-height:1.9;} .rq-ok .ok-s a{color:#2155FF;text-decoration:none;} .rq-ok .ok-code{font-family:ui-monospace,Menlo,Consolas,monospace;color:#2155FF;font-weight:600;} .rq-warn{list-style:none;margin:12px 0 0;padding:0;column-count:2;column-gap:30px;} .rq-warn li{color:#5A6B7A;font-size:14px;line-height:2.1;padding-left:14px;position:relative;} .rq-warn li::before{ content:"";position:absolute;left:0;top:.95em;width:6px;height:6px;border-radius:50%;background:#E0413F; } /* ---------- 帮助中心 ---------- */ .rq-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;} .rq-tab{ border:1px solid #DFE6EE;background:#fff;color:#5A6B7A;font-size:14px; height:34px;padding:0 16px;border-radius:18px;cursor:pointer; } .rq-tab:hover{color:#2155FF;border-color:#2155FF;} .rq-tab.is-active{background:#2155FF;border-color:#2155FF;color:#fff;} .rq-pane{display:none;} .rq-pane.is-active{display:block;} .rq-qa{border:1px solid #EEF2F6;border-radius:10px;margin-bottom:10px;overflow:hidden;} .rq-q{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 16px;cursor:pointer;font-size:15px;color:#1E2B3C; } .rq-q:hover{color:#2155FF;} .rq-q .arrow{color:#8A97A3;transition:transform .2s ease;} .rq-qa.open .rq-q .arrow{transform:rotate(90deg);} .rq-a{display:none;border-top:1px solid #EEF2F6;padding:14px 16px;} .rq-qa.open .rq-a{display:block;} .rq-a .in{color:#5A6B7A;font-size:14.5px;line-height:1.9;} .rq-a .in p{margin:0 0 8px;} .rq-a .in img{max-width:100%;height:auto;} .fk-faq-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;} .fk-faq-tabs button{ padding:8px 18px;border-radius:999px;border:1px solid #D9E1E8;background:#fff; color:#5A6B7A;font-size:14.5px;cursor:pointer; } .fk-faq-tabs button.on{background:#2155FF;border-color:#2155FF;color:#fff;} .fk-faq-list{display:none;} .fk-faq-list.on{display:block;} .fk-faq-item{border-bottom:1px solid #EEF2F5;} .fk-faq-q{ display:flex;align-items:center;gap:12px;padding:16px 4px;cursor:pointer; font-size:15.5px;color:#1E2B3C;font-weight:600; } .fk-faq-q .arrow{margin-left:auto;color:#A9B4BE;transition:transform .2s;} .fk-faq-item.open .fk-faq-q .arrow{transform:rotate(90deg);} .fk-faq-a{display:none;padding:0 4px 18px;color:#5A6B7A;font-size:14.5px;line-height:1.95;} .fk-faq-a p{margin:0 0 10px;} .fk-faq-a img{max-width:100%;height:auto;} .fk-faq-empty{padding:30px 4px;color:#8A97A3;font-size:14.5px;} @media (max-width:768px){ .rq-panel{padding:16px 14px;} .rq-input-group{flex-wrap:wrap;} .rq-input-group select{flex:1;} .rq-meta{gap:10px;} } /* ============================================================ * 公共页头/页脚挂件（所有 include header.php/footer.php 的页面通用） * 与 home-refresh.css 中同名规则保持一致；该文件只在首页加载， * 服务页（订单查询/投诉/帮助等）靠这里拿到同款样式，避免页脚错乱。 * ============================================================ */ /* 无障碍跳转链接：默认视觉隐藏，键盘 Tab 聚焦时才出现 */ .fk-skip-link{ position:fixed;z-index:1000;top:8px;left:16px;padding:8px 14px;border-radius:6px; color:#fff;background:#1A4CDB; opacity:0;pointer-events:none;transform:translateY(-150%) !important; transition:opacity .2s,transform .2s; } .fk-skip-link:focus-visible{opacity:1;pointer-events:auto;transform:translateY(0) !important;} /* 页脚（footer.fk-footer.fk-footer2，主题色 #215DFF） */ .fk-footer2{padding:44px 0 46px;color:#fff;background:#10131A;} /* 顶边那条渐变：主色 → 辅色 → 辅色淡版，方向跟后台「渐变方向」走 */ .fk-footer2::before{background:linear-gradient(var(--c-dir,90deg),var(--c1,#215DFF) 0%,var(--c2,#5B86FF) 55%,var(--c1-line,#9DB8FF) 100%);} .fk-footer2 a{color:#A9AFBD;font-size:13px;transition:color .2s;} .fk-footer2 a:hover{color:#fff;} .fk-footer2 .footer-inner{ width:min(1320px,calc(100% - 48px));margin:0 auto; display:grid;grid-template-columns:1fr auto auto;gap:64px;align-items:center; } .fk-footer2 .footer-left{align-self:start;} /* * flex-wrap + 靠左排。 * 这里必须显式写 justify-content：店铺页 / 商品详情页还会加载旧主题的 style.css， * 里面有一条裸的 .footer-nav{justify-content:center}，会把这排链接顶到中间。 * （首页只加载 home-refresh.css，没有那条规则，看着就正常。） */ .fk-footer2 .footer-nav{ display:flex;flex-wrap:wrap;justify-content:flex-start; gap:8px 30px;margin:0;padding:0;list-style:none; } /* 前缀跟第一个链接之间不需要整份 30px 的列间距，负 margin 抵消掉一部分，实际留 12px */ .fk-footer2 .nav-label{font-size:14px;color:#8E99AB;white-space:nowrap;margin-right:-18px;} .fk-footer2 .nav-link{ display:inline-block;background:none;border:none;padding:0;font-family:inherit; font-size:14px;color:#E8ECF3;text-decoration:none;cursor:pointer;transition:color .2s ease; } .fk-footer2 .nav-link:hover{color:var(--c1,#215DFF);} .fk-footer2 .copyright{margin:26px 0 0;font-size:14px;color:#C6CDD9;} .fk-footer2 .legal{margin:10px 0 0;font-size:12px;line-height:1.8;color:#6E7889;} /* 备案号 + 公安备案 并排一行，公安备案带图标 */ .fk-footer2 .legal-beian{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;} .fk-footer2 .legal-beian a{display:inline-flex;align-items:center;gap:6px;color:#6E7889;text-decoration:none;} .fk-footer2 .legal-beian a:hover{color:#E8ECF3;} .fk-footer2 .legal-beian img{width:16px;height:16px;display:block;flex:0 0 auto;} .fk-footer2 .footer-col{text-align:center;} .fk-footer2 .phone-icon{ display:flex;align-items:center;justify-content:center; width:46px;height:46px;margin:0 auto;border-radius:50%; background:rgba(var(--c1-rgb,33,93,255),.14);color:var(--c1,#215DFF); } .fk-footer2 .hotline{margin:12px 0 0;font-size:22px;font-weight:700;letter-spacing:1px;color:#fff;} .fk-footer2 .hours{margin:6px 0 0;font-size:13px;color:#8A94A6;} .fk-footer2 .qr-col{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:28px;text-align:center;} .fk-footer2 .qr-item{flex:0 0 auto;} .fk-footer2 .qr-box{ width:96px;height:96px;margin:0 auto;padding:6px;border-radius:10px; background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.35); } .fk-footer2 .qr-box svg, .fk-footer2 .qr-box img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px;} .fk-footer2 .qr-title{margin:12px 0 0;font-size:13px;color:#C6CDD9;} /* 顶部渐变分隔条只在 ≥768px 出现，与首页 home-refresh.css 行为一致 */ @media (min-width:768px){ .fk-footer2{position:relative;} .fk-footer2::before{content:"";position:absolute;top:0;right:0;left:0;height:4px;} .fk-footer2 a{font-size:14px;} } @media (max-width:980px){ .fk-footer2 .footer-inner{grid-template-columns:1fr 1fr;gap:40px 32px;} .fk-footer2 .footer-left{grid-column:1 / -1;align-self:center;text-align:center;} .fk-footer2 .footer-nav{justify-content:center;} } @media (max-width:767px){ .fk-footer2{padding:36px 16px calc(38px + 64px);text-align:center;} .fk-footer2 .footer-inner{width:100%;grid-template-columns:1fr;gap:32px;} .fk-footer2 .footer-nav{justify-content:center;gap:8px 20px;} .fk-footer2 .nav-label{margin-right:-8px;} /* 窄屏列间距本来是 20px */ .fk-footer2 .hotline{font-size:20px;} } /* ============================================================ * 顶部导航：后台「主题设置」配出来的二级菜单 * * header.php 里的一级菜单按下来的小面板，原来只在首页样式表 home-refresh.css 里 * 有一份，帮助中心、订单查询这些页面不加载它，二级菜单就没有样式。 * 这里补一份（header.php 每个页面都会加载本文件）。 * 选择器带 .fk-header 前缀，压得住服务页 service-pages.css 里那条 .fk-nav a 的 padding。 * ========================================================== */ .fk-header .fk-nav .fk-nav-item{position:relative;display:inline-flex;align-items:center;} .fk-header .fk-nav .fk-nav-item.has-sub>a::after{content:" ▾";} .fk-header .fk-nav .fk-nav-item>.fk-subnav{ position:absolute;top:100%;left:50%;z-index:60; min-width:148px;padding:6px;transform:translateX(-50%); border:1px solid #E8EDF5;border-radius:10px;background:#fff; box-shadow:0 14px 34px rgba(20,40,80,.14); display:none;flex-direction:column; } .fk-header .fk-nav .fk-nav-item:hover>.fk-subnav{display:flex;} .fk-header .fk-nav .fk-nav-item>.fk-subnav a{ padding:9px 14px;border-radius:7px; color:#51555D;font-size:13.5px;font-weight:500;white-space:nowrap; } .fk-header .fk-nav .fk-nav-item>.fk-subnav a::after{display:none;} .fk-header .fk-nav .fk-nav-item>.fk-subnav a:hover{color:#1A4CDB;background:#F4F7FF;} /* -------------------------------------------------------------------------- * 电脑端（≥1081px）主导航：悬停 / 选中的下横线 * * 鼠标移到菜单上 → 文字下方从中间往两边伸出一条主色渐变横线； * 当前所在的栏目（a.is-active）那条线固定亮着，一眼看出在哪个栏目。 * * 横线用 ::before：带子菜单的一级项，::after 已经被那个「▾」占了，不能抢。 * 服务页（查询 / 投诉 / 卡密 / 帮助 / 单页，header 上带 .service-shared-header） * 也要有这条线，只是它的导航项比首页高，线要往上提一点，见本段末尾那条。 * 只在电脑端断点里写，窄屏 / 手机仍走原来那套（home-refresh.css 的 ::after 短线）。 * ----------------------------------------------------------------------- */ @media (min-width: 1081px){ /* 一级项：给横线留个定位基准（两个选择器分别管普通链接和带子菜单那一组） */ .fk-header .fk-nav > a, .fk-header .fk-nav .fk-nav-item > a{ position:relative; display:inline-flex;align-items:center; padding:10px 14px; color:#575B65;font-size:15px;font-weight:600;line-height:1; transition:color .22s var(--fk-ease,cubic-bezier(.22,1,.36,1)); } /* 横线本体：默认缩到 0 看不见，左右各留 14px（跟内边距对齐，正好在文字下方） */ .fk-header .fk-nav > a::before, .fk-header .fk-nav .fk-nav-item > a::before{ content:"";display:block; position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--c1,#215DFF),var(--c1-dark,#1A4CDB)); transform:scaleX(0);transform-origin:center; opacity:0; transition:transform .26s var(--fk-ease,cubic-bezier(.22,1,.36,1)),opacity .2s ease; } /* 悬停：线伸出来，文字跟着变主色 */ .fk-header .fk-nav > a:hover, .fk-header .fk-nav .fk-nav-item > a:hover{ color:var(--c1-dark,#1A4CDB); } .fk-header .fk-nav > a:hover::before, .fk-header .fk-nav .fk-nav-item > a:hover::before{ transform:scaleX(1);opacity:1; } /* 选中（当前栏目）：线固定住，文字主色加粗 */ .fk-header .fk-nav > a.is-active, .fk-header .fk-nav .fk-nav-item > a.is-active{ color:var(--c1-dark,#1A4CDB);font-weight:700; } .fk-header .fk-nav > a.is-active::before, .fk-header .fk-nav .fk-nav-item > a.is-active::before{ transform:scaleX(1);opacity:1; } /* 有子菜单的项：鼠标移到二级面板上时，一级那条线要留着，不然会一闪一闪 */ .fk-header .fk-nav .fk-nav-item:hover > a{ color:var(--c1-dark,#1A4CDB); } .fk-header .fk-nav .fk-nav-item:hover > a::before{ transform:scaleX(1);opacity:1; } /* 二级菜单里某项是当前页（/page/1.html 这类单页）时，一级项的横线固定住： 不然鼠标一移开就没了，看不出当前在哪个栏目 */ .fk-header .fk-nav .fk-nav-item.sub-active > a{ color:var(--c1-dark,#1A4CDB); } .fk-header .fk-nav .fk-nav-item.sub-active > a::before{ transform:scaleX(1);opacity:1; } /* 服务页的导航项高 45px（首页那套是 35px），文字垂直居中， 横线按 bottom:2px 摆会离文字十几像素，看着不像「文字的下划线」，这里往上提。 只挪位置：hover / 选中的文字颜色仍由 service-pages.css 那两条（权重更高）管着。 */ .service-page .service-shared-header .fk-nav > a::before, .service-page .service-shared-header .fk-nav .fk-nav-item > a::before{ bottom:10px; } } /* 手机端菜单里的二级项：缩进一点，看着像子项 */ .fk-mobile-menu a.is-sub,.service-mobile-menu a.is-sub{ padding-left:26px;color:#7A8592;font-size:13px; } /* 菜单展开时把整条 header 抬到最上层。 原因：.fk-header 是 sticky + z-index:100（home-refresh.css），它自成一个层叠上下文， 所以里面 .fk-mobile-menu 写的 z-index:180 只在 header 内部算数，跟外面比整条 header 只有 100。 商品列表页的筛选条 .sort-bar 是 sticky + z-index:150（style.css），150 > 100， 菜单就被筛选条压住了。这里只在菜单打开的那一刻抬高（由 header.php 的脚本加 class）， 平时保持 100，不影响弹窗(.modal 900)和轻提示(.toast 9999)。 */ .fk-header.is-menu-open{z-index:2000;} /* 图标 symbol 的定义容器：只定义不显示 */ svg.fk-icon-defs{position:absolute;width:0;height:0;overflow:hidden;} /* 首页移动端「快捷服务」卡片（template/default/index.php 的 .fk-mobile-service-grid）。 原来那格图标位是用汉字顶的（查 / 诉 / 问 / 我），现在换成真图标 + 文字放大一号。 home-refresh.css 在 max-width:767px 里写的 .fk-mobile-service-grid a > span 带 font-size/font-weight 那套汉字排版，这里用带 class 的选择器压过去。 */ @media (max-width:767px){ .fk-mobile-service-grid a > span.fk-msv-ico{font-size:0;line-height:0;} .fk-mobile-service-grid a > span.fk-msv-ico > svg{ display:block;width:19px;height:19px; fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;overflow:visible; } /* 卡片文字：12px → 14px */ .fk-mobile-service-grid a > strong.fk-msv-txt{font-size:14px;} } /* 手机端页脚只留「版权 / 备案」两行。 友情链接、客服电话、二维码那套在窄屏上要占一整屏，入口又跟底部 Tab 重复，收掉； 版权和备案是必须露出来的，所以把这几行留下。 手机上不再用那一整块酷黑底（#10131A），改成白底 + 一条浅分隔线， 跟上面白色内容区连成一片，黑色太重、把页面压得像两截。 选择器都带 body 前缀：home-refresh.css 在 red-extra.css 之后加载， 同权重下它会赢，加个 body 把权重抬过去（不然后面那堆 padding / margin 改不动）。 */ @media (max-width:767px){ /* 手机上的页脚（版权 + 备案）只在首页出，其它页面整块收掉。 底部本来就压着固定 Tab，再留一截页脚就是白白多出一屏空白。 */ body .fk-footer2.fk-footer2--m-hide{display:none;} body .fk-footer2{ padding:22px 16px calc(26px + 64px); color:#5A6472;background:#FFFFFF; border-top:1px solid rgba(16,19,26,.08); } body .fk-footer2 .footer-inner{display:block;} /* 友情链接 / 客服电话 / 二维码 / 宣传语（.legal 里只有备案那条要留） */ body .fk-footer2 .footer-nav, body .fk-footer2 .footer-col, body .fk-footer2 .qr-col, body .fk-footer2 .legal:not(.legal-beian){display:none;} body .fk-footer2 .copyright{margin:0;font-size:13px;color:#5A6472;} /* 备案 + 公安备案：手机上也要并排一行。 nowrap 保证不换行；每个 加 min-width:0 让它能被压缩， 号太长时在自己内部折行，也不会把整行撑出横向滚动条。 */ body .fk-footer2 .legal-beian{ margin:10px 0 0; display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0 14px; } body .fk-footer2 .legal-beian a{ display:inline-flex;align-items:center;gap:5px; flex:0 1 auto;min-width:0;margin:0;font-size:12px;color:#7A8494;text-decoration:none; } body .fk-footer2 .legal-beian a:hover{color:var(--c1,#2B6CFF);} } /* 手机端右下角浮动按钮：客服（上）+ 回顶部（下）。 PC 那套右侧悬浮条 .float-rail 只在 ≥1081px 显示（float-rail.css 开头就是 display:none）， 手机上压根没有，所以另外补这两颗：圆形 46px，钉在右下角。 bottom 叠了 64px：底部 Tab（.fk-mobile-nav）是 fixed + 64px 高，不抬高会被它压住。 z-index 160：高于 header(100) 和侧栏，低于弹窗 .modal(900) / .toast(9999)， 弹窗弹出时按钮不抢戏。 */ .fk-m-float{ display:none;position:fixed;right:14px;z-index:160; bottom:calc(64px + env(safe-area-inset-bottom) + 14px); flex-direction:column;gap:10px; } .fk-m-float__btn{ display:flex;align-items:center;justify-content:center; width:46px;height:46px;padding:0;border:0;border-radius:50%; color:#FFFFFF;background:var(--c1,#2B6CFF); box-shadow:0 6px 16px rgba(24,40,77,.3); text-decoration:none;-webkit-tap-highlight-color:transparent; transition:transform .15s ease; } .fk-m-float__btn:active{transform:scale(.94);} .fk-m-float__btn svg{width:22px;height:22px;} /* 客服那颗用自带字体图标 \e63a（dialogue 对话气泡），白色；之前的电话 SVG 已换掉 */ .fk-m-float__btn .df-i{font-size:24px;color:#FFFFFF;line-height:1;} /* 回顶部做深灰，跟上面那颗主题色的客服区分开 */ .fk-m-float__btn--top{background:rgba(24,40,77,.8);} .fk-m-float__btn.is-hidden{display:none;} /* 「库存告急」：PC 那颗在 .float-rail 里（≥1081px 才显示），手机上补这一颗。 红色渐变 + 红色呼吸光晕，跟蓝色客服、深灰回顶部一眼区分开； 右上角白底红字的角标写告急件数，跟 PC 那颗同一个口径（99 以上显示 99+）。 */ .fk-m-float__btn--stock{ position:relative; background:linear-gradient(180deg,#FF6A4D 0%,#D92E20 100%); box-shadow:0 6px 16px rgba(217,46,32,.4); animation:mfPulseRed 2s ease-in-out infinite; } /* 图标是 里的 svg（stroke 用 currentColor）：前台头部那条 .fk-page a{color:inherit} 权重比 .fk-m-float__btn 高，会把描边染成正文色，这里抬一级固定成白色 */ .fk-m-float .fk-m-float__btn--stock svg{width:22px;height:22px;stroke:#FFFFFF;} .fk-m-float .fk-m-float__badge{ position:absolute;top:-2px;right:-2px; min-width:17px;height:17px;padding:0 4px;box-sizing:border-box; border-radius:9px;background:#FFFFFF;color:#D92E20; font-size:10.5px;font-style:normal;font-weight:600;line-height:17px;text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.25); } @keyframes mfPulseRed{ 0%{box-shadow:0 0 0 0 rgba(217,46,32,.5);} 70%{box-shadow:0 0 0 12px rgba(217,46,32,0);} 100%{box-shadow:0 0 0 0 rgba(217,46,32,0);} } @media (max-width:767px){ .fk-m-float{display:flex;} } /* 商品详情页手机端购买条（.gd-actions，见 assets/css/mobile.css：fixed + z-index:400）。 这一行现在是商城常见那套排布：首页 / 客服 两个图标入口（图标在上文字在下， 跟底部导航一个长相）+ 查订单 + 立即购买，四条并排，所以底部导航整条收掉 （has-buybar 是商品详情页自己在