/* ============================================================ store 模板 PC 端适配样式（新增文件） 仅当视口宽度 >= 992px 时生效，手机端（<992px）完全不受影响 使用说明：在模板各页面 中于 index.css 之后引入： ============================================================ */ @media (min-width: 992px) { /* ---------- 全局重置 ---------- */ html { font-size: 40px !important; } /* 固定 rem 基准，阻止移动端 JS 按视口缩放 */ html { height: auto !important; /* 解除 foxui.css html{height:100%} 高度锁死 */ min-height: 100%; overflow: visible !important; } body { max-width: none !important; background: transparent !important; /* 原 #f0f2f5 灰色盖住了 html 上的 bj.png 背景图，改为透明透出 */ position: static !important; height: auto !important; /* 解除 foxui.css body{height:100% !important} 高度锁死 */ min-height: 100vh; overflow: visible !important; } #body { max-width: none !important; } /* 轮播容器：保留 foxui 必需的 overflow:hidden（裁剪横向排列的轮播 item）， 仅解除高度膨胀，避免其吞并/遮挡快捷入口、公告、搜索、分类区域 */ .fui-swipe { height: auto !important; } /* ---------- PC 顶部导航（需在页面 body 内放置 .pc-header 结构） ---------- */ .pc-header { display: block !important; background: #1b2a4a; color: #fff; position: sticky; top: 0; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .pc-header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 60px; } .pc-logo { font-size: 20px; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: 1px; } .pc-logo:hover { color: #ffd75e; } .pc-nav { display: flex; gap: 8px; } .pc-nav a { color: #cfd8ec; font-size: 14px; text-decoration: none; padding: 6px 14px; border-radius: 4px; transition: all .2s; } .pc-nav a:hover { color: #fff; background: rgba(255,255,255,.12); } .pc-nav a.pc-nav-active { color: #ffd75e; } /* ---------- 页面主体内容容器：PC 下放宽至 1200px 居中 ---------- */ .fui-page-group, .fui-page, .fui-content { max-width: none !important; left: auto !important; } /* 内容容器：覆盖 foxui 运行时 JS 按移动端容器计算的 width/right 内联值 （线上 .fui-content 被内联 width:895px + right:0 推成 left:305px， 左侧形成 305px 空白带）。显式 left:0 + right:0 + width:auto 拉伸占满 1200px 父容器，消除左侧空白带；!important 压过内联普通样式 */ .fui-content { left: 0 !important; right: 0 !important; width: auto !important; } .fui-page-group { position: relative !important; /* 解除 foxui.css position:absolute 脱离文档流 */ left: auto !important; top: auto !important; height: auto !important; /* 解除 foxui.css height:100% 高度塌缩 */ min-height: 100vh; overflow: visible !important; /* 解除自身 overflow:hidden 裁剪内容 */ width: 1200px; margin: 20px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.06); } /* 隐藏移动端底部导航栏 */ .fui-navbar { display: none !important; } /* ---------- 首页 ---------- */ /* 轮播图：限宽居中、限高 */ .fui-swipe { max-width: 1200px; margin: 0 auto; } .fui-swipe .fui-swipe-wrapper .fui-swipe-item img { max-height: 420px; object-fit: cover; border-radius: 12px; } /* 公告条限宽 */ .fui-notice { max-width: 1200px; margin: 0 auto; } /* 快捷入口（平台公告/永久导航/下单必看/问题解答）横向铺开 */ .default-items > div[style*="width:100%;display:flex"] { max-width: 1200px; margin: 0 auto; } /* 搜索栏：PC 下居中加宽 */ .fui-searchbar { max-width: 720px; margin: 0 auto; } /* 分类图标：由 Swiper 横向滑动改为多列网格 */ .device { max-width: 1200px; margin: 0 auto; } .device .swiper-container { overflow: visible !important; } .device .swiper-wrapper { transform: none !important; display: flex !important; flex-wrap: wrap !important; transition: none !important; } .device .swiper-slide { width: 100% !important; /* 实际结构：4 个分类同处一个 slide，需占满整行 */ margin-bottom: 10px; } .device .swiper-pagination { display: none !important; } .device .content-slide { display: flex; flex-wrap: wrap; } .device .content-slide .get_cat { width: 25%; /* 4 个分类一行 */ box-sizing: border-box; text-align: center; margin-bottom: 12px; } .device .get_cat .mbg { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .device .get_cat .icon-title { width: 100% !important; white-space: normal !important; /* 解除文字截断 */ overflow: visible !important; text-align: center; margin-top: 6px; } /* 排序栏 */ .goods_sort { max-width: 1200px; margin: 0 auto; } /* 商品网格：PC 端居中限宽，与排序栏一致，避免超宽屏卡片过大/比例失控 */ .fui-goods-group.block.three { max-width: 1200px; margin: 0 auto; } .fui-goods-group.block.three .fui-goods-item { width: 25% !important; } /* PC端每行商品数量：由后台"PC端商品每行显示数量"配置驱动（pc-cols-4/5/6/7） */ .fui-goods-group.block.pc-cols-4 .fui-goods-item { width: 25% !important; } .fui-goods-group.block.pc-cols-5 .fui-goods-item { width: 20% !important; } .fui-goods-group.block.pc-cols-6 .fui-goods-item { width: 16.6667% !important; } .fui-goods-group.block.pc-cols-7 .fui-goods-item { width: 14.2857% !important; } /* 商品卡片整体比例协调： 1) 图片区由固定 8rem(320px) 高度改为随宽度等比正方形，任何列数下比例一致 （覆盖 index.php 内联 CSS 的 height:8rem，用 !important 保证生效）； 2) 文字区紧凑，商品名最多两行省略； 3) 列数越多（5/6/7）卡片内边距与字号越小，避免拥挤。 */ .fui-goods-group.block .fui-goods-item { padding: .4rem; } .fui-goods-group.block .fui-goods-item .image { position: relative; height: auto !important; /* 覆盖 index.php 中 PC 端固定 height:8rem */ padding-bottom: 100% !important; /* 正方形比例，随列数自适应 */ overflow: hidden; border-radius: 6px; background: #fff; } .fui-goods-group.block .fui-goods-item .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .fui-goods-group.block .fui-goods-item .detail { padding: .3rem .1rem 0; } .fui-goods-group.block .fui-goods-item .detail .name { font-size: .7rem; line-height: 1.2; height: 1.68rem; /* 两行 */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .fui-goods-group.block .fui-goods-item .detail .minprice { font-size: .7rem; } /* 5/6/7 列：进一步收紧，保证卡片比例协调不拥挤 */ .fui-goods-group.block.pc-cols-5 .fui-goods-item { padding: .35rem; } .fui-goods-group.block.pc-cols-6 .fui-goods-item, .fui-goods-group.block.pc-cols-7 .fui-goods-item { padding: .3rem; } .fui-goods-group.block.pc-cols-5 .fui-goods-item .detail .name, .fui-goods-group.block.pc-cols-6 .fui-goods-item .detail .name, .fui-goods-group.block.pc-cols-7 .fui-goods-item .detail .name { font-size: .6rem; height: 1.44rem; } .fui-goods-group.block.pc-cols-6 .fui-goods-item .detail .name, .fui-goods-group.block.pc-cols-7 .fui-goods-item .detail .name { font-size: .55rem; height: 1.32rem; } /* 6/7 列时压缩库存行，减少文字区高度，改善整体比例 */ .fui-goods-group.block.pc-cols-6 .fui-goods-item .detail > div:nth-child(2), .fui-goods-group.block.pc-cols-7 .fui-goods-item .detail > div:nth-child(2) { height: .55rem !important; line-height: .55rem !important; font-size: .5rem !important; margin-top: .1rem !important; } /* 页脚 */ .footer { max-width: 1200px; margin: 0 auto; } /* ---------- 商品详情页 buy.php ---------- */ /* 顶部渐变区加高，商品图与信息左右分栏 */ .pro_content { height: auto !important; /* 高度随内容自适应，不再固定 320px 裁切高图 */ min-height: 320px; padding: 40px 20px; box-sizing: border-box; margin-bottom: 1rem !important; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(130deg, #00F5B2, #1FC3FF, #00dbde) !important; } .pro_content .list_item_box { top: 0 !important; /* 归零移动端 top:53px 偏移，消除卡片错位与两侧渐变竖条感 */ width: 100%; } .bor_detail { display: flex !important; align-items: center; gap: 40px; background: rgba(255,255,255,.95); border-radius: 12px; padding: 24px 30px; width: 90%; max-width: 1000px; box-shadow: 0 6px 24px rgba(0,0,0,.12); margin: 0 auto !important; /* 修正 detail.css .list_item_box 内 margin:0 10px 导致的左偏 */ } .bor_detail .thumb { flex: 0 0 320px; width: 320px; max-width: 100%; text-align: center; } /* 主图容器：覆盖 detail.css .pro_content .list_item_box .bor_detail 的 overflow:hidden（线上该容器仅 141px 高裁掉主图下方，仅露 31%）， 显式 height:auto 让容器随主图高度自适应、overflow:visible 不裁切， 主图完整显示；高特异性 + !important 确保压过 detail.css */ .pro_content .list_item_box .bor_detail { height: auto !important; overflow: visible !important; } /* 商品主图：detail.css 的 .pro_content .list_item_box .thumb img 规则（width/height:50px 列表缩略图） 会误伤主商品图，此处提升特异性并强制 auto 恢复原图比例； 解除 max-height 限高（原 280px），高图按原比例完整显示、居中、不裁切不溢出 */ .pro_content .list_item_box .bor_detail .thumb img { width: auto !important; height: auto !important; max-height: none !important; max-width: 100% !important; margin: 0 auto !important; display: block; object-fit: contain; } .bor_detail .pro_right { flex: 1; text-align: left; } /* 下单弹窗 PC 化 */ .picker-modal, #paymentmethod, .fui-mask ~ .picker-modal { max-width: 640px !important; left: 50% !important; margin-left: -320px !important; border-radius: 12px; } .picker-modal .option-picker { max-width: 640px; margin: 0 auto; } /* ===== buy.php 下半区（商品说明区 + 底部按钮区）PC 适配 ===== */ /* 商品说明容器：PC 宽屏下宽度自适应（不再呈手机窄条），左右留白对称、内边距增大 */ .content_friends { margin: 0 30px 30px; padding: 22px 24px 24px; width: auto; } .content_friends .top_tit { left: 44px; top: -12px; font-size: 16px; padding: 0 18px; } /* 商品说明正文：PC 下字号与行距加大，阅读舒适 */ .content_friends .hd_intro { padding: 0 8px 8px; font-size: 15px; color: #555; line-height: 30px; } /* 产品宣传图区（无类名内联样式容器）：与商品说明区对齐留白 */ .fui-content > div[style*="margin: 0 10px 10px"] { margin: 0 30px 30px !important; } /* 底部操作栏：1200px 居中固定底部，与页面容器对齐，充分利用水平空间 */ .assemble-footer.footer { left: 0; right: 0; margin: 0 auto; max-width: 1200px; width: 100%; line-height: 20px; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, .08); } /* 底部按钮内部元素：PC 下字号与间距调整（覆盖移动端 rem 放大规则） */ .assemble-footer.footer .wid { font-size: 16px; padding: 14px 0; } .assemble-footer.footer .wid .icon { font-size: 24px !important; } .assemble-footer.footer .wid p { font-size: 16px; } .assemble-footer.footer .wid.all p { font-size: 14px !important; margin-top: 4px; } .assemble-footer.footer .y_buy { font-size: 16px !important; } .assemble-footer.footer .y_buy p { font-size: 16px; margin-top: 4px; } .assemble-footer.footer .y_buy .pay_price { font-size: 18px; font-weight: 600; } /* 底部三按钮宽度比例：覆盖 buy.php 内联 width:25%!important / width:50%（移动端比例）， PC 端返回/分享固定 160px 两端对称，购买按钮 flex 占满剩余空间（1200px 容器下约 880px）， 图标/文字垂直居中、整体高度协调；仅 @media(min-width:992px) 内生效，手机端零影响 */ .assemble-footer.footer a.left { width: 160px !important; flex: 0 0 160px; display: flex; align-items: center; justify-content: center; } .assemble-footer.footer a.middle { width: auto !important; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .assemble-footer.footer a.left, .assemble-footer.footer a.middle { min-height: 72px; text-decoration: none; } /* 底部操作栏为 fixed 定位，给内容容器底部增加留白，避免商品说明/宣传图被遮挡 */ .fui-content:has(.assemble-footer.footer) { padding-bottom: 130px !important; } /* ---------- 订单查询页 query.php ---------- */ #body { max-width: none !important; } .fui-searchbar { max-width: 720px; margin: 0 auto; } .fui-tab { max-width: 1200px; margin: 10px auto; } /* ---------- 购物车页 cart.php ---------- */ .gwcbox, .headerbox { max-width: 1200px; margin: 0 auto; } /* ---------- 客服页 kf.php ---------- */ .chat-wrapper { max-width: 900px; margin: 20px auto; } .chat-container { height: 640px !important; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.12); } /* ---------- 结算/订单页（cartorder.php / order.php 已 PC 友好，仅统一背景） ---------- */ .layui-container { max-width: 1200px !important; } /* 宽屏通用：隐藏移动端返回/头部元素（各页面如已放置 .pc-header 则覆盖） */ .fui-header { display: none !important; } .fui-header ~ .fui-content { padding-top: 0 !important; } /* ---------- PC 端回到顶部按钮 ---------- */ .pc-backtop { position: fixed; /* 商品容器(1200px)居中，left 公式与容器 margin:0 auto 同参照（可视区）， 按钮左缘 = 容器右缘 + 10px，不受滚动条宽度影响； 窄视口(<约1258px)下 min() 回退为贴屏幕右缘 58px（右缘距屏 10px） */ left: min(calc(max(0px, (100vw - 1200px) / 2) + 1210px), calc(100vw - 58px)); bottom: 90px; z-index: 9999; width: 48px; height: 48px; display: flex; /* 基础布局 flex；显隐交给页面内联 JS（滚动>400px 设 flex，否则 none），不设 !important 以免覆盖内联 none 导致按钮常显 */ align-items: center; justify-content: center; background: #1492fb; /* 醒目的主题蓝 */ border-radius: 50%; box-shadow: 0 4px 14px rgba(20, 146, 251, .45); text-decoration: none; transition: transform .2s, background .2s; } .pc-backtop svg { display: block; } .pc-backtop:hover { background: #0d7fe0; transform: translateY(-2px); } /* ---------- 隐藏 PC 顶部导航中的购物车与在线客服（对所有页面生效） ---------- */ .pc-nav a[href*="mod=cart"] { display: none !important; } .pc-nav a[href*="mod=kf"] { display: none !important; } /* ---------- 修复 PC 端搜索框 placeholder 显示不全 ---------- foxui.css 给 .center 搜索框的 placeholder 固定了 width:100px 且 text-align:center； 手机端字号小（约14px）能放下，PC 端 html 基准被固定为 40px 后 输入框字号放大到 0.7rem=28px，placeholder 文字（如"输入关键字"≈140px） 超过 100px，居中溢出被 input 裁剪——首页右侧裁掉末字、订单查询页左侧裁字。 此处解除固定宽度并将 PC 端搜索框字号恢复为 14px，文字完整显示。 */ .fui-searchbar .searchbar.center .search { font-size: 14px !important; } .fui-searchbar .searchbar.center .search::-webkit-input-placeholder { width: auto !important; max-width: none !important; font-size: 14px !important; text-align: center; } .fui-searchbar .searchbar.center .search::-moz-placeholder { width: auto !important; max-width: none !important; font-size: 14px !important; text-align: center; } .fui-searchbar .searchbar.center .search:-ms-input-placeholder { width: auto !important; max-width: none !important; font-size: 14px !important; text-align: center; } .fui-searchbar .searchbar.center .search::placeholder { width: auto !important; max-width: none !important; font-size: 14px !important; text-align: center; } /* ---------- 修复订单查询页搜索按钮被输入框遮挡（"搜"字不显示） ---------- 根因：query.php 在 .search-input 上内联 margin-right:5px，覆盖了 foxui 的 .searchbar.searchbar-active .searchbar-cancel + .search-input { margin-right:2.2rem } 让位规则，白色输入框向右延伸约 37px 盖住右侧绝对定位按钮的左半部分， 视觉上"搜索"只剩"索"字。 修复：!important 强制让位 + 按钮 z-index 置顶双保险。 */ .fui-searchbar .searchbar.searchbar-active .searchbar-cancel + .search-input { margin-right: 2.2rem !important; } .fui-searchbar .searchbar .searchbar-cancel { z-index: 20; } }