@charset "UTF-8"; /* ========================================================================== 芯天下商城 · 移动端专属形态（≤768px） -------------------------------------------------------------------------- 约定： 1. 本文件所有规则一律包在 @media (max-width:768px) 内，≥769px 桌面零影响。 2. 本文件不是模板产物，后台「重新发布模板」不会覆盖它。 3. 移动端一律用 px，不用 rem —— 会员中心是 #new-html 的 rem 体系， style.css 在 641~800px 段把根字号压到 14vw，正文会塌到 7.4px。 4. 在 head 里必须排在 style.css 之后加载，靠加载顺序取覆盖优先级。 创建：2026-07-31 ========================================================================== */ :root{ --m-brand:#d12524; --m-brand-dark:#b01d1c; --m-brand-light:#fff1f0; --m-price:#e1251b; --m-text:#222; --m-text-2:#666; --m-text-3:#999; --m-line:#ececec; --m-bg:#f4f5f7; --m-card:#fff; --m-radius:12px; --m-topbar-h:52px; --m-tabbar-h:56px; --m-buycar-h:92px; /* 购物车吸底结算栏 .buycar1 高度 */ --m-safe-b:env(safe-area-inset-bottom,0px); --m-safe-t:env(safe-area-inset-top,0px); /* --- 2026-08-14 视觉精修新增（见第 13 节）：只增不改，PC 不受影响 --- */ /* 中文移动端字体栈。原先没声明，安卓/iOS 各渲染各的默认字体，是「不好看」的隐形来源 */ --m-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue", "Hiragino Sans GB","Microsoft YaHei",sans-serif; /* 语义间距（4pt 基准） */ --m-gap-xs:6px; --m-gap-sm:10px; --m-gap:14px; --m-gap-lg:18px; /* 阴影层级：1=卡片静置，2=吸底条/浮层 */ --m-shadow-1:0 1px 6px rgba(0,0,0,.05); --m-shadow-2:0 -2px 10px rgba(0,0,0,.06); } /* 双形态开关：桌面下移动 DOM 一律不渲染 */ .m-only{display:none !important;} @media (max-width:768px){ /* ========================================================================== 0. 基础重置与双形态切换 ========================================================================== */ .pc-only{display:none !important;} .m-only{display:block !important;} .m-only.m-flex{display:flex !important;} html{-webkit-text-size-adjust:100%;} body{ background:var(--m-bg); padding-bottom:calc(var(--m-tabbar-h) + var(--m-safe-b)) !important; -webkit-font-smoothing:antialiased; } /* 会员中心走 rem 体系，移动端强制回 px，避免根字号塌陷影响 */ #new-html body, #new-html table td{font-size:14px;line-height:1.5;} *{-webkit-tap-highlight-color:transparent;} /* 面包屑、桌面页脚服务条在移动端不占地方 */ .locat, .footer_fixed .index03{display:none;} .footer_fixed{position:static !important;box-shadow:none !important;} .footer_fixed_h{display:none;} /* 购买咨询悬浮块（后台「版权」字段输出的 HTML，代码里搜不到）会挡住 TabBar */ .fix-bar{display:none !important;} /* ========================================================================== 1. 移动端顶栏 ========================================================================== */ .m-topbar{ position:sticky;top:0;z-index:50; background:#fff; border-bottom:1px solid var(--m-line); padding-top:var(--m-safe-t); } .m-topbar .m-topbar-row{ display:flex;align-items:center;gap:10px; padding:8px 12px; } /* 非商品查询页：顶栏透明不占位（内容顶到最上、不留白）、去 logo，仅左上返回键浮于页面（半透明圆+白图标） */ .m-topbar.m-topbar-ghost{position:fixed;top:0;left:0;right:0;background:transparent !important;border-bottom:none !important;z-index:50;} .m-topbar.m-topbar-ghost .m-topbar-row{padding:6px 12px;justify-content:flex-start;} .m-topbar.m-topbar-ghost .m-logo,.m-topbar.m-topbar-ghost .m-search{display:none !important;} .m-topbar.m-topbar-ghost .m-back{display:flex !important;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.3);align-items:center;justify-content:center;} .m-topbar.m-topbar-ghost .m-back svg{stroke:#fff;} /* 各非商品页顶部留返回键浮位（避免遮头像/标题）；border-box 下需 height:auto 否则压缩内容 */ .person-center .top-one,.commom-title.one-title,.inquiry03 .inquiry_box,.person-center:not(:has(.top-one)) .commom-title:not(.menu-title):not(.mobile-menu),.inquiry04 .title1:first-child{padding-top:44px !important;height:auto !important;} .m-back{ flex:0 0 auto;width:28px;height:34px; display:none;align-items:center;justify-content:center; } .m-back.show{display:flex;} .m-back svg{width:22px;height:22px;stroke:#333;} .m-logo{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:#fff;border-radius:6px;padding:3px 8px;} .m-logo img{height:26px;width:auto;} .m-logo .m-logo-name{font-size:16px;font-weight:800;white-space:nowrap;letter-spacing:.5px;} .m-search{ flex:1 1 auto;min-width:0;display:flex;align-items:center; background:#fff;border:1px solid var(--m-line);border-radius:20px;height:36px;padding:0 5px 0 11px; } .m-search svg{width:16px;height:16px;flex:0 0 auto;} .m-search input{ flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent; font-size:16px;color:#333;padding:0 8px;height:34px; } .m-search input::placeholder{color:#bbb;font-size:14px;} .m-search .m-search-go{ flex:0 0 auto;background:var(--m-brand);color:#fff;border:0; height:26px;padding:0 13px;border-radius:16px;font-size:13px;font-weight:600; } .m-icon-btn{ flex:0 0 auto;width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.18);border:0;padding:0; } .m-icon-btn svg{width:19px;height:19px;} /* 原桌面头部与占位在移动端不显示 */ .header,.nav_height{display:none !important;} /* ========================================================================== 2. 底部 TabBar ========================================================================== */ .m-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:60; background:#fff;border-top:1px solid var(--m-line); display:flex;padding-bottom:var(--m-safe-b); box-shadow:0 -1px 8px rgba(0,0,0,.05); } .m-tabbar a{ flex:1 1 0;text-align:center;padding:6px 0 5px; color:#9aa0a6;font-size:11px;line-height:1.3; display:flex;flex-direction:column;align-items:center;gap:2px; position:relative;text-decoration:none; } .m-tabbar a svg{width:22px;height:22px;} .m-tabbar a.active{color:var(--m-brand);font-weight:600;} .m-tabbar .m-tab-mid{ width:46px;height:46px;border-radius:50%; background:var(--m-brand);color:#fff;margin-top:-16px; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 10px rgba(209,37,36,.35); } .m-tabbar .m-tab-mid svg{width:24px;height:24px;} .m-tab-badge{ position:absolute;top:2px;left:50%;margin-left:6px; min-width:16px;height:16px;padding:0 4px; background:var(--m-brand);color:#fff;border-radius:8px; font-size:10px;line-height:16px;font-weight:600; } /* ========================================================================== 3. 通用组件：区块标题 / 卡片 / 按钮 / 吸底条 / 空态 ========================================================================== */ .m-sec-title{ display:flex;align-items:center;gap:8px; padding:14px 14px 8px;font-size:15px;font-weight:800;color:#222; } .m-sec-title::before{content:"";width:4px;height:15px;background:var(--m-brand);border-radius:2px;} .m-sec-title .m-count{font-size:12px;color:var(--m-text-3);font-weight:500;} .m-panel{ background:var(--m-card);border-radius:var(--m-radius); box-shadow:0 1px 6px rgba(0,0,0,.05); margin:0 10px 10px;padding:12px; } .m-panel-title{font-size:14px;font-weight:700;color:#333;margin-bottom:10px;} .m-btn{ display:flex;align-items:center;justify-content:center; min-height:44px;border-radius:8px;font-size:15px;font-weight:700; border:0;text-decoration:none; } .m-btn-primary{background:var(--m-brand);color:#fff;} .m-btn-ghost{background:var(--m-brand-light);color:var(--m-brand);border:1px solid #ffd2cf;} .m-btn-plain{background:#f5f5f5;color:#666;} .m-btn:active{filter:brightness(.96);} .m-btn[disabled],.m-btn.disabled{background:#e6e6e6;color:#aaa;border-color:#e6e6e6;} /* 吸底操作条（购物车 / 结算 / 详情页共用） */ .m-bottom-bar{ position:fixed;left:0;right:0;bottom:calc(var(--m-tabbar-h) + var(--m-safe-b)); z-index:55;background:#fff;border-top:1px solid var(--m-line); display:flex;align-items:center;gap:10px;padding:8px 12px; box-shadow:0 -2px 10px rgba(0,0,0,.06); } .m-bottom-bar .m-bb-sum{flex:1 1 auto;min-width:0;font-size:12px;color:var(--m-text-2);} .m-bottom-bar .m-bb-sum b{display:block;font-size:18px;color:var(--m-price);font-weight:800;} .m-bottom-bar .m-btn{flex:0 0 auto;padding:0 22px;} /* 页面若有吸底条，正文再让开一层 */ .m-has-bottom-bar{padding-bottom:calc(var(--m-tabbar-h) + 60px + var(--m-safe-b)) !important;} /* 购物车页：内容区撑到结算栏上方，消除中间空白 #uiapp 撑高到「视口 − tabbar − buycar − safe」；内容长时 min-height 不限高，自然滚动。 （2026-08-14：13.2 隐藏了 .footer_fixed 版权行，故不再减那 46px） */ @media (max-width:768px){ body.m-cart-fix{padding-bottom:calc(var(--m-tabbar-h) + var(--m-buycar-h) + var(--m-safe-b)) !important;} body.m-cart-fix #uiapp{min-height:calc(100vh - var(--m-topbar-h) - var(--m-tabbar-h) - var(--m-buycar-h) - var(--m-safe-b));} } .m-empty{text-align:center;color:var(--m-text-3);font-size:14px;padding:50px 20px;} .m-empty svg{width:56px;height:56px;margin:0 auto 12px;color:#dcdcdc;display:block;} /* ========================================================================== 4. 商品卡片（首页 / 搜索页 / 详情页订购区共用） ========================================================================== */ .m-cards{padding:0 10px 14px;} .m-card{ background:var(--m-card);border-radius:var(--m-radius); box-shadow:0 1px 6px rgba(0,0,0,.05); padding:12px;margin-bottom:10px; } .m-card-model{ display:flex;align-items:flex-start;justify-content:space-between;gap:8px; font-size:15px;font-weight:700;color:#1a1a1a;word-break:break-all;line-height:1.35; } .m-card-model a{color:#1a1a1a;text-decoration:none;} .m-card-tag{ flex:0 0 auto;font-size:11px;color:var(--m-brand); background:var(--m-brand-light);border:1px solid #ffd9d6; padding:1px 7px;border-radius:10px;font-weight:600;margin-top:2px;white-space:nowrap; } .m-card-meta{ display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0; font-size:12px;color:var(--m-text-2); } .m-card-meta b{color:#333;font-weight:600;} .m-card-meta .m-stock b{color:#1a9e4b;} .m-card-meta .m-stock.m-out b{color:#bbb;} /* 阶梯价 */ .m-price-block{ background:linear-gradient(180deg,#fff7f6,#fff); border:1px solid #ffe2df;border-radius:10px; padding:9px 10px;margin:4px 0 10px; } .m-price-block .m-ph{ display:flex;align-items:center;justify-content:space-between; font-size:12px;color:var(--m-text-3);margin-bottom:6px; } .m-price-block .m-ph .m-more{color:var(--m-brand);font-weight:600;} .m-price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px;} .m-price-grid .m-pg{ display:flex;align-items:baseline;justify-content:space-between; font-size:12px;color:var(--m-text-2); padding:2px 6px;border-radius:6px; } .m-price-grid .m-pg.cur{background:var(--m-brand-light);} .m-price-grid .m-pg .m-qty{color:#555;} .m-price-grid .m-pg .m-val{color:var(--m-price);font-weight:800;font-size:14px;} .m-price-grid .m-pg .m-val small{font-size:10px;font-weight:600;} /* 数量步进器 */ .m-qty-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;} .m-stepper{display:flex;align-items:center;border:1px solid var(--m-line);border-radius:8px;overflow:hidden;} .m-stepper button{ width:36px;height:36px;border:0;background:#fafafa;font-size:18px;color:#555; display:flex;align-items:center;justify-content:center;padding:0; } .m-stepper button:active{background:#eee;} .m-stepper input{ width:52px;height:36px;border:0; border-left:1px solid var(--m-line);border-right:1px solid var(--m-line); text-align:center;font-size:16px;color:#333;outline:0; -moz-appearance:textfield; } .m-stepper input::-webkit-outer-spin-button, .m-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .m-qty-row .m-mpq{font-size:12px;color:var(--m-text-3);text-align:right;} /* 主操作按钮 */ .m-acts{display:flex;gap:8px;} .m-acts .m-btn{flex:1 1 0;min-height:44px;font-size:14px;} /* 副操作行：询价 / 规格属性 / 规格书 */ .m-sub-acts{ display:flex;align-items:center;justify-content:space-between;gap:10px; flex-wrap:wrap; margin-top:9px;padding-top:9px;border-top:1px dashed #f0f0f0; font-size:12px;color:var(--m-text-2); } .m-sub-acts span, .m-sub-acts a{display:flex;align-items:center;gap:4px;min-height:26px;text-decoration:none;} .m-sub-acts svg{width:14px;height:14px;} /* 询价按钮：独立整行大按钮（参考 desktop index.html，用项目设计语言） */ .m-sub-acts .m-xunjia{ width:100%;height:42px;margin-top:4px;justify-content:center; background:linear-gradient(135deg,#fff3f3,#ffe9e9); color:var(--m-brand);border:1.5px solid var(--m-brand); font-weight:800;font-size:14px;gap:6px;border-radius:var(--m-radius); box-shadow:0 2px 6px rgba(209,37,36,.12); } .m-sub-acts .m-xunjia svg{width:18px;height:18px;} .m-sub-acts .m-doc{width:100%;text-align:center;color:var(--m-text-2);} .m-sub-acts .m-doc a{color:var(--m-text-2);} .m-sub-acts .m-doc img{width:14px;height:14px;} /* 规格属性折叠 */ .m-spec{ margin-top:8px;font-size:12px;color:var(--m-text-2);line-height:1.6; max-height:36px;overflow:hidden;position:relative; } .m-spec.open{max-height:none;} .m-spec-toggle{font-size:12px;color:var(--m-brand);margin-top:4px;display:inline-block;} /* 详情页：单一价格（非阶梯价） */ .m-price-one{font-size:20px;font-weight:800;color:var(--m-price);} /* 详情页移动卡片沿用全站 .numpage 结构（bottom.html 里已有 jQuery 加减委托）， 这里把它画成和首页 .m-stepper 一样的样子 */ .m-card .numpage{display:flex;align-items:center;border:1px solid var(--m-line);border-radius:8px;overflow:hidden;width:auto;} .m-card .numpage .num_prev, .m-card .numpage .num_next{ width:36px;height:36px;background:#fafafa;color:#555;font-size:18px; display:flex;align-items:center;justify-content:center;cursor:pointer;border:0; } .m-card .numpage .num{border-left:1px solid var(--m-line);border-right:1px solid var(--m-line);} .m-card .numpage .num input{ width:52px;height:36px;border:0;text-align:center;font-size:16px;color:#333;outline:0; -moz-appearance:textfield;background:#fff; } .m-card .numpage .num input::-webkit-outer-spin-button, .m-card .numpage .num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} /* ========================================================================== 4b. 产品详情页 ========================================================================== */ /* 三个大 tab 横滑 */ .hbox3 .tabs4{ display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding:10px 12px;background:#fff;border-bottom:1px solid var(--m-line); -webkit-overflow-scrolling:touch; } .hbox3 .tabs4::-webkit-scrollbar{display:none;} .hbox3 .tabs4 .tab{ flex:0 0 auto;background:#f5f6f8;color:#444;font-size:14px; padding:8px 16px;border-radius:18px;white-space:nowrap;margin:0;border:0; min-height:36px;display:flex;align-items:center; } .hbox3 .tabs4 .tab.cur{background:var(--m-brand);color:#fff;font-weight:700;} /* 参数/特点/应用 三个小 tab */ .hbox3 .tabs5{ display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 12px 4px; } .hbox3 .tabs5::-webkit-scrollbar{display:none;} .hbox3 .tabs5 .tab{ flex:0 0 auto;font-size:13px;padding:6px 12px;border-radius:14px; background:#f5f6f8;color:#666;margin:0;border:0;white-space:nowrap; } .hbox3 .tabs5 .tab.cur{background:var(--m-brand-light);color:var(--m-brand);font-weight:600;} /* 参数表：列数由分类 SpecConfig 动态决定，用 data-label 转成两列对照 */ .m-spec-table{overflow:visible;margin:0 10px 12px;background:#fff;border-radius:var(--m-radius);padding:4px 12px;} .m-spec-table table{display:block;width:auto;} .m-spec-table thead{display:none;} .m-spec-table tbody, .m-spec-table tbody tr{display:block;width:auto;} .m-spec-table tbody td{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px; padding:10px 0;border:0;border-bottom:1px solid #f2f2f2; text-align:right;white-space:normal;word-break:break-all;font-size:13px;color:#333; width:auto;height:auto; } .m-spec-table tbody tr td:last-child{border-bottom:0;} .m-spec-table tbody td::before{ content:attr(data-label);flex:0 0 38%;color:var(--m-text-3);text-align:left;font-size:13px; } /* 技术文档是外部富文本，无法卡片化，保留横滚 */ .hbox3_section .htable2:not(.m-spec-table){ overflow-x:auto;-webkit-overflow-scrolling:touch; margin:0 10px 12px;background:#fff;border-radius:var(--m-radius);padding:10px 12px; } .pro01 .hbox2, .pro02 .w1380, .pro01 .w1380{width:auto;padding:0;} .pro01 .hbox2{display:block;} .pro01 .hbox2 .left, .pro01 .hbox2 .right{width:auto;float:none;padding:0 14px;} .pro01 .tit{font-size:18px;padding-top:12px;} .pro01 .desc{font-size:13px;color:var(--m-text-2);} .editor.fs16{padding:0 14px;font-size:14px;line-height:1.7;} .editor.fs16 img{max-width:100%;height:auto;} /* ========================================================================== 4c. 购物车 ========================================================================== */ .inquiry03 .w1380, .hbox4{width:auto;padding:0;} .inquiry_box{padding:12px 14px 0;} .inquiry_box .inquiry_tit{font-size:17px;} .discount_wrap{padding:8px 14px 0;display:flex;flex-wrap:wrap;gap:6px;} .m-cart-card .m-cart-head{display:flex;align-items:flex-start;gap:10px;} .m-cart-card .m-cart-head .m-card-model{flex:1 1 auto;min-width:0;} .m-cart-card .select_act{flex:0 0 auto;margin-top:2px;} .m-cart-del{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#bbb;margin:-4px -6px 0 0;} .m-cart-del svg{width:18px;height:18px;} .m-cart-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:10px;padding-top:10px;border-top:1px dashed #f0f0f0; } .m-cart-price{text-align:right;font-size:12px;color:var(--m-text-2);line-height:1.6;} .m-cart-price .m-unit{display:block;} .m-cart-price b{font-size:16px;color:var(--m-price);font-weight:800;} /* 底部结算条：直接把购物车页的 .buycar1 变成吸底条，不新建 DOM。 注意限定在 .inquiry03（购物车）内 —— 结算页 .inquiry04 里的同名容器 还装着优惠券/代金券/金额明细，不能整体吸底。 */ .inquiry03 .buycar1{ position:fixed;left:0;right:0;bottom:calc(var(--m-tabbar-h) + var(--m-safe-b)); z-index:55;background:#fff;border-top:1px solid var(--m-line); display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0; box-shadow:0 -2px 10px rgba(0,0,0,.06); } .inquiry03 .buycar1 .left, .inquiry03 .buycar1 .right{width:auto;float:none;margin:0;padding:0;} .inquiry03 .buycar1 .left{flex:0 0 auto;} .inquiry03 .buycar1 .right{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;} .inquiry03 .buycar1 .all_select{display:flex;align-items:center;gap:6px;margin:0;} .inquiry03 .buycar1 .all_tit{font-size:13px;color:#333;white-space:nowrap;} .inquiry03 .buycar1 .all_tit span{margin-left:8px;color:var(--m-text-3);} .inquiry03 .buycar1 .buy_box{display:flex;flex-direction:column;align-items:flex-end;margin:0;} .inquiry03 .buycar1 .buy_box .buy_item:first-child{display:none;} /* 「小计」与「共计」重复，移动端只留共计 */ .inquiry03 .buycar1 .buy_box .buy_item{display:flex;align-items:baseline;gap:4px;margin:0;} .inquiry03 .buycar1 .buy_box .buy_tit{font-size:12px;color:var(--m-text-2);} .inquiry03 .buycar1 .buy_box .buy_price{font-size:18px;color:var(--m-price);} .inquiry03 .buycar1 .buy_box1{margin:0;} .inquiry03 .buycar1 .buy_btn{ min-width:96px;height:44px;line-height:44px;padding:0 20px;margin:0; background:var(--m-brand);color:#fff;border-radius:8px;text-align:center; font-size:15px;font-weight:700; } /* 有吸底条的页面，正文要多让开一层：页面自己给 body 加 .m-has-bottom-bar */ /* ========================================================================== 4d. 结算页 ========================================================================== */ .inquiry04 .w1380, .hbox7{width:auto;padding:0;} .inquiry04 .title1{padding:14px 14px 6px;} .inquiry04 .title1_tit{font-size:16px;} /* 收货地址 / 支付方式 / 配送方式 / 商品清单 / 发票 各自成卡 */ .inquiry04 .address, .inquiry04 .pay_boxs .pay_box, .inquiry04 .htable5, .inquiry04 .bills .bill{ background:#fff;border-radius:var(--m-radius);margin:0 10px 10px;padding:2px 0 10px; box-shadow:0 1px 6px rgba(0,0,0,.05); } .inquiry04 .pay_boxs{display:block;} .inquiry04 .address .addre{display:block;padding:0 12px;} .inquiry04 .address .addre_box{padding:8px 0;} .inquiry04 .address .addre_btns{justify-content:flex-end;gap:10px;padding-top:6px;border-top:1px dashed #f0f0f0;} .inquiry04 .addre_btn{min-height:36px;display:flex;align-items:center;padding:0 10px;} .inquiry04 .list3{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px;box-sizing:border-box;} .inquiry04 .pay_boxs .list3{padding-top:0;} .inquiry04 .list3 .item{ flex:0 0 calc(50% - 4px);width:calc(50% - 4px);max-width:calc(50% - 4px); box-sizing:border-box;min-width:0;margin:0; display:flex;align-items:center;gap:8px;padding:10px; border:1px solid var(--m-line);border-radius:8px;min-height:52px; } .inquiry04 .list3 .item .tem_tit{margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .inquiry04 .list3 .item.cur::before{border-width:16px 16px 0 0;} /* 桌面那个 24px 角标在小卡片上太大 */ .inquiry04 .list3 .item.cur{border-color:var(--m-brand);background:var(--m-brand-light);} .inquiry04 .list3 .item .icon{width:24px;height:24px;flex:0 0 auto;} .inquiry04 .list3 .item .icon img{width:100%;height:100%;object-fit:contain;} .inquiry04 .list3 .item .tem_tit{font-size:13px;} .inquiry04 .bills{display:block;} .inquiry04 .bills .bill_tit{padding:12px 12px 6px;font-size:15px;} .inquiry04 .bills .bill_main{padding:0 12px 4px;} .inquiry04 .tabs6{display:block;} .inquiry04 .tabs6_list{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;} .inquiry04 .tabs6_list .tab{display:flex;align-items:center;gap:6px;min-height:38px;margin:0;} .inquiry04 .bill_input textarea{width:100%;min-height:76px;font-size:16px;padding:10px;border:1px solid var(--m-line);border-radius:8px;} /* 优惠券 / 代金券 / 金额明细：竖排，不吸底 */ .inquiry04 .buycar1{display:block;margin:0;padding:0;background:transparent;border:0;} .inquiry04 .buycar1 .left, .inquiry04 .buycar1 .right{width:auto;float:none;margin:0;} .inquiry04 .coupons_box{ background:#fff;border-radius:var(--m-radius);margin:0 10px 10px;padding:12px; box-shadow:0 1px 6px rgba(0,0,0,.05); } .inquiry04 .coupons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .inquiry04 .coupons .coupon{margin:0;font-size:12px;padding:6px 10px;} .inquiry04 .coplis.small{max-height:none;height:auto;min-height:0;} /* 桌面靠固定高度裁切，移动端放开 */ .inquiry04 .coplis:empty{display:none;} /* 没有代金券时不留一大片空白 */ .inquiry04 .coplis:empty + .coupons_all{display:none;} .inquiry04 .copli{width:100%;margin:0 0 8px;} .inquiry04 .buycar1 .right .buy_box{ background:#fff;border-radius:var(--m-radius);margin:0 10px 10px;padding:12px; box-shadow:0 1px 6px rgba(0,0,0,.05); } .inquiry04 .buy_item{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 8px;} .inquiry04 .buy_item:last-child{margin-bottom:0;} .inquiry04 .buy_tit{font-size:13px;color:var(--m-text-2);} .inquiry04 .buy_ctit{font-size:14px;} .inquiry04 .buy_price{font-size:20px;} .inquiry04 .buy_tishi{display:flex;align-items:center;gap:8px;padding:0 14px 14px;font-size:12px;} .inquiry04 .buy_tishi .act{flex:0 0 auto;} /* ========================================================================== 4e. 会员中心通用（所有 Member/ 页面） ========================================================================== */ .person-center .w1380{width:100%;max-width:100%;padding:0;} .person-center .left{display:none !important;} /* 左侧菜单移动端不用，入口收进「我的」页九宫格 */ .mobile-menu{display:none !important;} .person-center .right{width:100% !important;flex:0 0 100% !important;max-width:100% !important;min-height:0 !important;margin:0;} .person-center .account-info{width:100% !important;max-width:100% !important;} .person-center .right-commom{padding:0;} .member_location,.locat_member{display:none;} .commom-title.one-title{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 14px;margin:0;border-radius:0;background:#fff; } .commom-title.one-title h3{font-size:16px;} .commom-title.one-title .search{flex:0 0 auto;display:flex;align-items:center;} .commom-title.one-title .search .input input{height:34px;font-size:16px;width:120px;} .bd10{border-radius:0;} .pages{padding:14px 0 4px;} .pages .el-pagination{text-align:center;} /* ========================================================================== 4f. 我的订单：把三列表格重排成一单一卡（纯 CSS，不动 HTML） ========================================================================== */ .orders-content .menu-title{ display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px; padding:10px 12px;background:#fff;border-bottom:1px solid var(--m-line);margin:0; } .orders-content .menu-title::-webkit-scrollbar{display:none;} .orders-content .menu-title a{ flex:0 0 auto;padding:7px 14px;border-radius:16px;background:#f5f6f8; font-size:13px;white-space:nowrap;margin:0;min-height:34px; display:flex;align-items:center;justify-content:center; } .orders-content .menu-title a.on{background:var(--m-brand-light);color:var(--m-brand);font-weight:600;} .orders-content .menu-title a::after{display:none;} .order-tabls{padding:10px;background:var(--m-bg);} .order-item{ background:#fff;border-radius:var(--m-radius);margin:0 0 10px; box-shadow:0 1px 6px rgba(0,0,0,.05);overflow:hidden; } .order-item .table{overflow:visible;} .order-item table, .order-item thead, .order-item tbody, .order-item tr, .order-item th, .order-item td{display:block;width:auto;} .order-item thead tr{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px; padding:10px 12px;background:#fafafa;border-bottom:1px solid #f0f0f0; } .order-item thead th{padding:0;border:0;font-weight:400;text-align:left;} .order-item thead .left-th{flex:1 1 auto;min-width:0;font-size:12px;color:var(--m-text-2);} .order-item thead .left-th span{display:block;word-break:break-all;} .order-item thead .middle{display:none;} .order-item thead .right-th{flex:0 0 auto;text-align:right;font-size:13px;} .order-item tbody td{padding:10px 12px;border:0;border-bottom:1px solid #f7f7f7;} .order-item tbody td:last-child{border-bottom:0;} .order-item .order-info dl{margin:0;} .order-item .order-info dd{padding:0 0 8px;margin:0;} .order-item .order-info dd:last-child{padding-bottom:0;} .order-item .order-info h3{font-size:14px;font-weight:700;word-break:break-all;} .order-item .order-info p{font-size:12px;color:var(--m-text-2);margin-top:2px;} .order-item td.cor666{font-size:13px;color:#333;} .order-item td.cor666 p{display:inline;font-size:12px;color:var(--m-text-3);} .order-item .actions{ display:flex !important;flex-direction:row !important;flex-wrap:wrap; align-items:center;justify-content:flex-start;gap:8px; } .order-item .grey-btn{ min-height:36px;line-height:34px;padding:0 14px;margin:0; font-size:13px;white-space:nowrap;border-radius:18px; } .order-item .el-statistic{display:inline-block;} .order-item .el-statistic .con span{font-size:13px !important;} /* ========================================================================== 4g. 我的（会员中心首页） ========================================================================== */ .person-center .account-info{padding:0;} /* 顶部用户卡：红色渐变，紧接顶栏 */ .account-info .top-one{ display:flex;align-items:center;gap:12px; background:linear-gradient(135deg,var(--m-brand),#e8534f); border-radius:0;padding:18px 14px 22px;margin:0; } .account-info .top-one .avatar{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#fff;} .account-info .top-one .avatar img{width:100%;height:100%;object-fit:cover;} .account-info .top-one .user-txt{flex:1 1 auto;min-width:0;} .account-info .top-one .h3{font-size:17px;color:#fff;word-break:break-all;} .account-info .top-one p{font-size:13px;color:rgba(255,255,255,.85);margin-top:4px;} .account-info .top-one .edit-user{position:absolute;right:0;top:0;width:36px;height:36px;} /* 订单状态四宫格：上移压在渐变卡上，做成一张浮起的白卡 */ .orders-and-coupon{background:transparent;box-shadow:none;padding:0;border-radius:0;} .my-orders{ background:#fff;border-radius:var(--m-radius);margin:-12px 10px 10px; box-shadow:0 1px 6px rgba(0,0,0,.06);padding:4px 0 10px;position:relative;z-index:2; } .my-orders .commom-title{padding:10px 12px 4px;margin:0;} .my-orders .commom-title h3{font-size:15px;} .orders-state{display:flex;flex-wrap:nowrap;} .orders-state .state-icon{ flex:1 1 0;min-width:0;padding:8px 2px;margin:0; display:flex;flex-direction:column;align-items:center;gap:4px; font-size:12px;color:var(--m-text-2);position:relative; } .orders-state .state-icon figure{margin:0;} .orders-state .state-icon img{width:24px;height:24px;} .orders-state .state-icon .num{ position:absolute;top:2px;left:50%;margin-left:6px; min-width:16px;height:16px;padding:0 4px;background:var(--m-brand);color:#fff; border-radius:8px;font-size:10px;line-height:16px;text-align:center; } /* 优惠券横滑 ⚠️ 以下规则必须全部限定在 .my-coupons 作用域内 —— 它是「个人中心」专有容器。 独立优惠券页(Member/Coupons.aspx)也用 .coupons-list/.coupon 这套类名， 不加前缀会把独立页 8 张券也压成横滑、只能看到 1.4 张（2026-08-14 踩过）。 独立页的纵向列表样式见第 14 节。 */ .my-coupons{ background:#fff;border-radius:var(--m-radius);margin:0 10px 10px;padding:4px 0 12px; box-shadow:0 1px 6px rgba(0,0,0,.05); } .my-coupons .commom-title{padding:10px 12px 4px;margin:0;} .my-coupons .commom-title h3{font-size:15px;} .my-coupons .coupons-list{ display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; gap:10px;padding:4px 12px; } .my-coupons .coupons-list::-webkit-scrollbar{display:none;} .my-coupons .coupons-list:empty{display:none;} .my-coupons:has(.coupons-list:empty){display:none;} /* 一张券都没有时整块收起 */ .my-coupons .coupons-list .coupon{ flex:0 0 78%;width:78%;margin:0;min-height:0; border:1px solid var(--m-line);border-radius:10px;overflow:hidden; } .my-coupons .coupons-list .coupon .price{flex:0 0 38%;padding:10px 6px;} .my-coupons .coupons-list .coupon .price strong{font-size:24px;} .my-coupons .coupons-list .coupon .introduce{flex:1 1 auto;min-width:0;padding:10px;} .my-coupons .coupons-list .coupon h4{font-size:13px;} .my-coupons .coupons-list .coupon .state-btn{min-height:32px;padding:0 10px;font-size:12px;margin-top:6px;} /* 功能入口九宫格 */ .m-my-extra{ background:#fff;border-radius:var(--m-radius);margin:0 10px 10px;padding:12px; box-shadow:0 1px 6px rgba(0,0,0,.05); } .m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;} .m-grid a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:14px 4px;font-size:12px;color:#444;text-decoration:none;border-radius:8px; min-height:72px;text-align:center; } .m-grid a:active{background:#fafafa;} .m-grid a svg{width:24px;height:24px;color:var(--m-brand);} .m-logout{margin-top:12px;} /* ========================================================================== 5. 筛选：chip 行 + 底部半屏抽屉 ========================================================================== */ .m-filter-chips{ display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding:10px 12px;background:#fff;border-bottom:1px solid var(--m-line); -webkit-overflow-scrolling:touch; } .m-filter-chips::-webkit-scrollbar{display:none;} .m-chip{ flex:0 0 auto;display:flex;align-items:center;gap:4px; background:#f5f6f8;color:#444;border:1px solid transparent; font-size:13px;padding:7px 12px;border-radius:18px;white-space:nowrap; min-height:34px; } .m-chip svg{width:12px;height:12px;opacity:.5;} .m-chip.active{background:var(--m-brand-light);color:var(--m-brand);border-color:#ffd2cf;font-weight:600;} .m-chip.active svg{opacity:1;} .m-chip-badge{ background:var(--m-brand);color:#fff;border-radius:9px; font-size:10px;padding:0 5px;min-width:16px;height:16px;line-height:16px;text-align:center; } /* 已选条件行 */ .m-filter-selected{ display:flex;gap:6px;overflow-x:auto;scrollbar-width:none; padding:8px 12px;background:#fff;border-bottom:1px solid var(--m-line); font-size:12px;align-items:center; } .m-filter-selected::-webkit-scrollbar{display:none;} .m-filter-selected .m-sel{ flex:0 0 auto;display:flex;align-items:center;gap:4px; background:#f5f6f8;color:#666;padding:4px 8px;border-radius:12px;white-space:nowrap; } .m-filter-selected .m-sel i{font-style:normal;color:#bbb;font-size:14px;line-height:1;} .m-filter-selected .m-clear-all{flex:0 0 auto;margin-left:auto;color:var(--m-brand);white-space:nowrap;padding-left:8px;} /* 抽屉 */ .m-sheet-mask{ position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100; display:flex;align-items:flex-end;justify-content:center; } .m-sheet{ background:#fff;width:100%;border-radius:16px 16px 0 0; display:flex;flex-direction:column;max-height:72vh; animation:m-sheet-up .25s ease; } @keyframes m-sheet-up{from{transform:translateY(100%);}to{transform:translateY(0);}} .m-sheet-head{ flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; padding:14px 16px 10px;border-bottom:1px solid var(--m-line); } .m-sheet-head .m-sheet-title{font-size:16px;font-weight:800;color:#222;} .m-sheet-head .m-sheet-close{font-size:24px;color:#bbb;line-height:1;padding:0 4px;} .m-sheet-search{flex:0 0 auto;padding:10px 16px 0;} .m-sheet-search input{ width:100%;height:38px;border:1px solid var(--m-line);border-radius:8px; padding:0 12px;font-size:16px;color:#333;outline:0;background:#fafafa; } .m-sheet-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 16px 12px;} .m-sheet-opts{display:flex;flex-wrap:wrap;gap:8px;} .m-sheet-opts label{ display:flex;align-items:center;justify-content:center; min-height:38px;padding:6px 12px;border-radius:8px; background:#f5f6f8;color:#444;font-size:13px; border:1px solid transparent;word-break:break-all;text-align:center; } .m-sheet-opts label.active{background:var(--m-brand-light);color:var(--m-brand);border-color:#ffd2cf;font-weight:600;} .m-sheet-opts label input{position:absolute;opacity:0;width:0;height:0;} .m-sheet-tools{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px;font-size:13px;} .m-sheet-tools a{color:var(--m-brand);} .m-sheet-tools .m-hint{color:var(--m-text-3);font-size:12px;} .m-sheet-foot{ flex:0 0 auto;display:flex;gap:10px;padding:10px 16px calc(10px + var(--m-safe-b)); border-top:1px solid var(--m-line); } .m-sheet-foot .m-btn{flex:1 1 0;} .m-sheet-foot .m-btn-plain{flex:0 0 34%;} /* 抽屉内的滑块（电压/电流） */ .m-sheet-body .el-slider{padding:0 6px;margin-top:6px;} .m-range-inputs{display:flex;align-items:center;gap:10px;margin-top:10px;} .m-range-inputs input{ flex:1 1 0;width:0;height:38px;border:1px solid var(--m-line);border-radius:8px; padding:0 10px;font-size:16px;color:#333;outline:0;text-align:center; } .m-range-readout{text-align:center;color:var(--m-text-2);font-size:12px;margin-top:8px;} /* 移动端 body 用 overflow-x:clip 覆盖 style.css 的 hidden： overflow-x:hidden 会强制 overflow-y 变 auto，使 body 成为 sticky 滚动容器， 但 body 自身不滚动，导致顶部分类 .tabs1 的 sticky 相对 body 而非视口 → 吸顶失效。 clip 不触发该转换，overflow-y 保持 visible，sticky 正常吸顶。 */ @media (max-width:768px){ body{overflow-x:clip;} } /* 顶部分类横滑（对齐 desktop index.html：白/灰容器 + 胶囊 tab） */ .index01 .w1380, .index02 .w1380{width:auto;padding:0;} .hbox1{padding-left:0;padding-right:0;} /* 一级分类：白底容器 + 浅灰胶囊，选中红底白字；滚动超 78px 后 JS 加 .m-cat-fixed 固定吸顶 （模拟 sticky，绕开 .hbox1 父盒仅 169px 高、sticky 区间太窄的限制） */ .hbox1 .tabs1{ display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none; padding:9px 12px;background:#fff;border-bottom:1px solid var(--m-line); -webkit-overflow-scrolling:touch; } .hbox1 .tabs1.m-cat-fixed{position:fixed;left:0;right:0;top:var(--m-topbar-h);z-index:20;} .hbox1.m-cat-holder{padding-top:48px;} .hbox1 .tabs1::-webkit-scrollbar{display:none;} .hbox1 .tabs1 .tab{ flex:0 0 auto;padding:6px 14px;border-radius:18px;background:#f2f3f5;color:#444; font-size:13px;font-weight:600;white-space:nowrap;margin:0;border:0; min-height:30px;display:flex;align-items:center; } .hbox1 .tabs1 .tab.cur{background:var(--m-brand);color:#fff;} /* 二级分类：浅灰容器 + 白底带边胶囊，选中红边红字浅红底 */ .hbox1 .tabs2{ display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none; padding:7px 12px;background:#fafafa;border-bottom:1px solid var(--m-line); -webkit-overflow-scrolling:touch; } .hbox1 .tabs2::-webkit-scrollbar{display:none;} .hbox1 .tabs2 .tab{ flex:0 0 auto;padding:4px 12px;border-radius:15px;background:#fff; border:1px solid var(--m-line);color:#555; font-size:12px;white-space:nowrap;margin:0;min-height:26px;display:flex;align-items:center; } .hbox1 .tabs2 .tab.cur{border-color:var(--m-brand);color:var(--m-brand);background:#ffe9e9;font-weight:600;} /* 三级分类小标题 */ .oist01 .cpt{padding:12px 14px 4px;font-size:14px;} /* 问题1：一二级分类选中态在上方 tabs1/tabs2 已高亮，下方 .title 标题冗余，移动端隐藏（三级 .cpt 保留） */ .list1 .item > .title{display:none !important;} /* 问题2：在线订购页产品卡片字段改两列网格——库存/封装第一行，包装/DC 第二行（scope .list1 不影响搜索/详情页卡片） */ .list1 .m-card-meta{display:grid;grid-template-columns:auto auto;row-gap:6px;column-gap:14px;} /* ========================================================================== 6. 服务承诺条（搜索框下方，五等分一行显示全，不横滑） ========================================================================== */ .m-services{ display:flex;background:#fff;overflow-x:auto;scrollbar-width:none; border-top:1px solid var(--m-line);border-bottom:1px solid var(--m-line); -webkit-overflow-scrolling:touch; } .m-services::-webkit-scrollbar{display:none;} .m-services .m-s{ flex:1 1 0;min-width:0;text-align:center; padding:10px 4px;border-right:1px solid #f3f3f3; } .m-services .m-s img{width:22px;height:22px;margin:0 auto 4px;display:block;} .m-services .m-s svg{width:22px;height:22px;margin:0 auto 4px;display:block;color:var(--m-brand);} .m-services .m-s .m-t{font-size:11px;font-weight:600;color:#333;line-height:1.25;} .m-services .m-s .m-d{font-size:10px;color:var(--m-text-3);transform:scale(.92);} /* 页脚版权 */ .footer_fixed footer{padding:14px 12px calc(14px + var(--m-safe-b));} .footer_fixed footer .w1380{width:auto;padding:0;} .footer_fixed .copy_right{text-align:center;font-size:11px;line-height:1.9;} /* 移动端只保留版权一行：隐藏菜单链接、备案及中间的「·」分隔，只显示版权 span */ @media (max-width:768px){ .footer_fixed .copy_right{font-size:0;line-height:1.6;padding:0;} .footer_fixed .copy_right > span:first-of-type{font-size:11px;display:inline-block;} } /* ========================================================================== 7. 全站弹窗 / 表单 / 触控目标 ========================================================================== */ .el-dialog{width:92% !important;margin:8vh auto 0 !important;} .el-dialog__body{padding:16px !important;} .el-dialog__header{padding:14px 16px !important;} .el-row > .el-col-8{width:100% !important;} /* 省市区三列强制单列 */ .el-message-box{width:88% !important;} .el-select,.el-input,.el-cascader{width:100% !important;} input,select,textarea{font-size:16px;} /* 防 iOS 聚焦自动放大 */ input[type=checkbox],input[type=radio]{width:18px;height:18px;} input.ab{width:100% !important;height:100% !important;} /* 自定义 radio/checkbox 覆盖整个可点击区域，不被上面的 18px 覆盖 */ /* 自定义 radio 选中态（style.css 原规则在 @media min-width:1201px 内，移动端不生效，此处补齐）*/ .radio input:checked + p span{border-color:#D12524;} .radio input:checked + p span::after{opacity:1;} button,.pointer,a.base_btn{min-height:auto;} /* Toast */ .m-toast{ position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9); background:rgba(0,0,0,.8);color:#fff;padding:10px 18px;border-radius:10px; font-size:14px;z-index:200;opacity:0;pointer-events:none;transition:.18s; max-width:76%;text-align:center; } .m-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);} /* ========================================================================== 8. 通用补充：富文本图片 / el-col 堆叠 ========================================================================== */ .editor{overflow-x:auto;-webkit-overflow-scrolling:touch;word-break:break-word;} .editor img,.editor iframe,.editor video{max-width:100% !important;height:auto !important;} .editor table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100% !important;} .notice-content img,.notice-row img,.about-us-content img,.row-content img{max-width:100%;height:auto;} .el-row>[class*="el-col-"]{width:100% !important;} /* 省市区等 el-col 移动端全堆叠 */ /* ========================================================================== 9. 表单页：Login / Register / Forget / MemberInfo / ChangePassword ========================================================================== */ .land01{padding:0;background:radial-gradient(ellipse 130% 55% at 50% 0%, var(--m-brand-light) 0%, transparent 58%), var(--m-bg);} .land01 .w1380{width:100%;max-width:100%;padding:0;} .land01 .hbox6{display:block;} .land01 .hbox6 .left{display:none !important;} /* 隐藏左侧装饰图 */ .land01 .hbox6 .right{width:100% !important;} .land01 .hbox6_main{padding:36px 20px 28px !important;margin:32px 16px 20px !important;background:var(--m-card);border-radius:var(--m-radius);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.07);box-sizing:border-box;} .land01 .inquiry_tit{padding:0 0 16px;font-size:16px;} .land01 .form2 .item{height:48px;flex-direction:row;align-items:stretch;padding:0 14px;background:var(--m-card);border:1px solid var(--m-line);border-radius:10px;margin-bottom:14px;transition:border-color .2s,box-shadow .2s;} .land01 .form2 .item .lable{display:flex !important;align-items:center;width:auto;margin:0 8px 0 0;font-size:13px;color:var(--m-text-2);flex:0 0 auto;line-height:1.4;} .land01 .form2 .item .input{flex:1;width:100%;margin:0;padding:0;border:0;display:flex;align-items:center;} .land01 .form2 .item .input input{display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;font-size:16px;outline:none;text-align:left;box-sizing:border-box;} .land01 .form2 .item .input input::placeholder{color:transparent !important;} .land01 .form2 .item:focus-within{border-color:var(--m-brand);background:var(--m-card);box-shadow:0 0 0 3px color-mix(in srgb, var(--m-brand) 12%, transparent);} .land01 .form2 .item.code .input{display:flex;gap:8px;align-items:center;} .land01 .form2 .item.code .input input{flex:1;} .land01 .form2 .item.code .code_btn{flex:0 0 auto;width:auto !important;height:44px;font-size:13px;white-space:nowrap;background:var(--m-brand-light);color:var(--m-brand);border-radius:8px;font-weight:500;border:0;padding:0 12px;display:flex;align-items:center;justify-content:center;} .land01 .form_btns{flex-direction:column;gap:10px;padding:0 !important;} .land01 .form_btn1,.land01 .form_btn2,.land01 .form_box button{width:100%;min-height:44px;font-size:15px;border-radius:10px;line-height:44px;} .land01 .form_rule,.land01 .rule_tit{font-size:13px;} .land01 .forget{font-size:13px;} .land01 .login-logo img{height:42px;margin:0 auto 14px;display:block;} /* === 登录/注册移动端 UI 增强 === */ /* 安全区：卡片底部留出 home indicator */ .land01 .hbox6_main{padding-bottom:calc(32px + var(--m-safe-b)) !important;} /* 登录页冗余标题容器整体隐藏（inquiry_box 内仅一个 inquiry_tit 才隐藏，注册页双 Tab 不受影响） */ .land01 .inquiry_box:has(.inquiry_tit:only-of-type){display:none !important;} .land01 .inquiry_box .inquiry_tit:only-of-type{display:none !important;} /* 注册页 Tab 胶囊化（iOS 分段控件风格） */ .land01 .inquiry_box{display:flex !important;gap:0;background:#eef0f2;border-radius:10px;padding:3px;margin-bottom:20px;} .land01 .inquiry_box .inquiry_tit{flex:1;text-align:center !important;padding:9px 0 !important;font-size:15px !important;border-radius:8px;color:var(--m-text-2);font-weight:500;transition:background .2s,color .2s;display:block !important;line-height:1.4;} .land01 .inquiry_box .inquiry_tit.cur{background:var(--m-card);color:var(--m-brand);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08);} .land01 .inquiry_box .inquiry_tit.cur::before{display:none;} /* 登录页按钮主次区分 */ .land01 .form_btn1.cur{background:linear-gradient(135deg,var(--m-brand),var(--m-brand-dark)) !important;color:#fff !important;box-shadow:0 4px 12px color-mix(in srgb, var(--m-brand) 30%, transparent);border:0 !important;} .land01 .form_btns .form_btn1:not(.cur){background:#fff !important;color:var(--m-brand) !important;border:1px solid var(--m-brand) !important;} .land01 .form_btn2.cur{background:linear-gradient(135deg,var(--m-brand),var(--m-brand-dark)) !important;color:#fff !important;box-shadow:0 4px 12px color-mix(in srgb, var(--m-brand) 30%, transparent);border:0 !important;} /* 协议复选框对齐 + 品牌色 */ .land01 .form_rule{display:flex !important;align-items:flex-start;gap:8px;margin:6px 0 4px !important;padding:0 !important;} .land01 .form_rule input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin:3px 0 0 !important;accent-color:var(--m-brand);} .land01 .form_rule .rule_tit{flex:1;line-height:1.4;font-size:12px;color:var(--m-text-2);white-space:nowrap;} .land01 .form_rule .rule_tit a{color:var(--m-brand);} /* forget 链接右对齐 */ .land01 .forget{text-align:right;margin:0 0 16px !important;font-size:13px;} .land01 .forget a{color:var(--m-text-2);} /* 按钮点击反馈（:active 下沉 + 次按钮填充浅红） */ .land01 .form_btn1.cur:active,.land01 .form_btn2.cur:active{transform:translateY(1px);box-shadow:0 2px 6px color-mix(in srgb, var(--m-brand) 24%, transparent);} .land01 .form_btns .form_btn1:not(.cur):active{background:var(--m-brand-light) !important;} /* MemberInfo / ChangePassword */ .user-form{flex-direction:column !important;} .user-form .avatar{width:100% !important;margin:0 0 16px;text-align:center;} .user-form .avatar img{width:80px;height:80px;border-radius:50%;} .user-form .form{width:100% !important;} .user-form .form .item{height:auto;flex-direction:column;align-items:stretch;padding:8px 0;} .user-form .form .item .lable{width:auto;margin-bottom:6px;font-size:14px;} .user-form .form .item .input input, .user-form .form .item .input select, .user-form .form .item .input textarea{width:100%;height:44px;font-size:16px;} /* ========================================================================== 10. 列表页 ========================================================================== */ /* Collects — 3 列表卡片化 */ .my-collect .address-table, .my-collect thead, .my-collect tbody, .my-collect tr, .my-collect th, .my-collect td{display:block;} .my-collect thead{display:none;} .my-collect tbody tr{ display:block;margin:0 0 10px;background:#fff; border-radius:10px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.05); } .my-collect tbody td{padding:10px 12px;border-bottom:1px solid #f0f0f0;} .my-collect tbody td:last-child{border-bottom:0;} /* Coupons — 单列 */ .coupons-list .coupon{width:100%;margin:0 0 10px;} /* Notice */ .notice-content{padding:0;} .notice-row{background:#fff;margin:0 0 10px;border-radius:10px;overflow:hidden;padding:12px;box-shadow:0 1px 6px rgba(0,0,0,.05);} .notice-row dl{margin:0;} .notice-row dt{font-size:14px;font-weight:600;margin-bottom:6px;} .notice-row dd{font-size:13px;color:var(--m-text-2);} /* MyVoucher — 单列 */ .coplis .copli{width:100% !important;margin:0 0 10px;} /* VoucherUsage — 4 列 div 表卡片化 */ .deducts .deduct{display:block !important;} .deducts .deduct.deduct1{display:none;} /* 隐藏表头行 */ .deducts .deduct .td{display:block;width:100% !important;padding:6px 12px;border-bottom:1px solid #f0f0f0;font-size:13px;} .deducts .deduct .td2{word-break:break-all;} .deducts .deduct .td:last-child{border-bottom:0;} /* ========================================================================== 11. 复杂页面：OrderInfo / Task / IWantAQuote ========================================================================== */ /* OrderInfo — 顶部区域紧凑化 + 信息块堆叠 + 9 列明细表卡片化 */ .express-content{flex-direction:column !important;padding:8px 0 !important;} .express-content .express-state{width:100% !important;min-height:0 !important;height:auto !important;padding:10px 14px !important;} .express-content .order-state{width:100% !important;padding:10px 14px !important;justify-content:flex-start !important;min-height:0 !important;height:auto !important;} .express-content .order-state .status{font-size:16px !important;margin-top:4px;} .express-content .order-state .order-number{font-size:12px !important;line-height:1.6;} .my-info{flex-direction:column !important;} .my-info dl{width:100% !important;margin:0 0 12px;} .settle-accounts-info{padding:12px;} /* 9 列订单明细表 → 卡片化（纯 CSS :nth-child 加列名，不改 HTML）*/ .express-addresses .address-table.line-sm, .express-addresses .address-table.line-sm thead, .express-addresses .address-table.line-sm tbody, .express-addresses .address-table.line-sm tr, .express-addresses .address-table.line-sm th, .express-addresses .address-table.line-sm td{display:block;} .express-addresses .address-table.line-sm thead{display:none;} .express-addresses .address-table.line-sm tbody tr{ display:block;margin:0 0 10px;background:#fff;border-radius:10px;overflow:hidden; padding:10px 14px;box-shadow:0 1px 6px rgba(0,0,0,.05); } .express-addresses .address-table.line-sm tbody td{ padding:7px 0;border-bottom:1px solid #f0f0f0;font-size:13px; display:flex;align-items:flex-start;gap:6px;word-break:break-all; } .express-addresses .address-table.line-sm tbody td:last-child{border-bottom:0;} .express-addresses .address-table.line-sm tbody td::before{ color:var(--m-text-3);font-size:12px;white-space:nowrap;flex:0 0 64px; } .express-addresses .address-table.line-sm tbody td:nth-child(1)::before{content:"型号：";} .express-addresses .address-table.line-sm tbody td:nth-child(2)::before{content:"数量：";} .express-addresses .address-table.line-sm tbody td:nth-child(3)::before{content:"封装：";} .express-addresses .address-table.line-sm tbody td:nth-child(4)::before{content:"包装：";} .express-addresses .address-table.line-sm tbody td:nth-child(5)::before{content:"Date code：";} .express-addresses .address-table.line-sm tbody td:nth-child(6)::before{content:"规格属性：";} .express-addresses .address-table.line-sm tbody td:nth-child(7)::before{content:"规格书：";} .express-addresses .address-table.line-sm tbody td:nth-child(8)::before{content:"单价：";} .express-addresses .address-table.line-sm tbody td:nth-child(9)::before{content:"小计：";} .express-addresses .address-table.line-sm tbody td:empty{display:none;} .pay_boxs .list3 .item{flex:0 0 calc(50% - 4px) !important;width:calc(50% - 4px) !important;max-width:calc(50% - 4px) !important;box-sizing:border-box;} /* Task — 6 列地址表卡片化（:not(.line-sm) 区分 OrderInfo 的 9 列表） */ .express-addresses .address-table:not(.line-sm), .express-addresses .address-table:not(.line-sm) thead, .express-addresses .address-table:not(.line-sm) tbody, .express-addresses .address-table:not(.line-sm) tr, .express-addresses .address-table:not(.line-sm) th, .express-addresses .address-table:not(.line-sm) td{display:block;} .express-addresses .address-table:not(.line-sm) thead{display:none;} .express-addresses .address-table:not(.line-sm) tbody tr{ display:block;margin:0 0 10px;background:#fff; border-radius:10px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.05); } .express-addresses .address-table:not(.line-sm) tbody td{padding:8px 12px;border-bottom:1px solid #f0f0f0;} .express-addresses .address-table:not(.line-sm) tbody td:last-child{border-bottom:0;} .add-address{width:100%;} /* IWantAQuote — 4 列询价表卡片化 */ .inquiry01 .htable3,.inquiry01 .htable3 thead,.inquiry01 .htable3 tbody, .inquiry01 .htable3 tr,.inquiry01 .htable3 th,.inquiry01 .htable3 td{display:block;} .inquiry01 .htable3 thead{display:none;} .inquiry01 .htable3 tbody td{white-space:normal;padding:10px 12px;border-bottom:1px solid #f0f0f0;} .inquiry01 .htable3 .remark textarea{width:100% !important;} .inquiry01 .htable3 .delate{width:auto !important;} .inquiry01 .htable3 .numpage{display:inline-flex;} .inquiry02 .hbox5_main{display:block;} .inquiry02 .hbox5_main .left{width:100% !important;} .inquiry02 .hbox5_main .right{display:none;} /* 隐藏右侧装饰图 */ .inquiry02 .form1 .item{height:auto;flex-direction:column;align-items:stretch;padding:8px 0;} .inquiry02 .form1 .item .lable{width:auto;margin-bottom:6px;font-size:14px;} .inquiry02 .form1 .item .input input, .inquiry02 .form1 .item .input select{width:100%;height:44px;font-size:16px;} /* ========================================================================== 12. 内容页：AboutUs / PrivacyStatement / TermsOfUse / ExportControlStatement / ContactCustomerService ========================================================================== */ .info01{padding:0;} .info01 .single{padding:0;} .info01 .editor,.about-us-content .editor,.row-content .editor{ padding:14px;font-size:15px;line-height:1.7; } .corporate-culture{flex-direction:column !important;} .corporate-culture > div{width:100% !important;} } /* end @media (max-width:768px) */ /* ========================================================================== 参数筛选(chip行)与商品卡片之间间距收紧 桌面 .index01/.hbox1 的 pb、.oist01 的 mt、.oitem 的 pt、.cpt 的 mb 在移动端累计 120px 空白，整体收起。 ========================================================================== */ @media (max-width:768px){ body.index .index01{padding-bottom:0 !important;} body.index .index01 .hbox1{padding-bottom:0 !important;} body.index .list1 .oist01{margin-top:0 !important;} /* ⚠️ .oitem 自己的 margin-top:30px 才是这段间隔的大头 —— 初版只收了它的 padding-top，漏了 margin-top，所以 chip 行与分类标题之间一直空着 46px。 */ body.index .list1 .oitem{margin-top:0 !important;padding-top:0 !important;} body.index .list1 .cpt{padding-top:8px !important;margin-bottom:8px !important;} } /* ========================================================================== 问题3：个人中心"我的订单"标题行右侧"全部订单"入口（移动端） commom-title 已加 j-sb 两端对齐，此处仅美化链接文字 ========================================================================== */ @media (max-width:768px){ .person-center .orders-all{font-size:13px;color:var(--m-text-2);font-weight:500;white-space:nowrap;text-decoration:none;} .person-center .orders-all::after{content:' ›';margin-left:2px;color:var(--m-text-3);} } /* ========================================================================== 13. 视觉精修（2026-08-14） -------------------------------------------------------------------------- 起因：功能层做完后「像移动端但不好看」。实机截 6 页诊断出三类硬伤： ① 旧页面没接上 mobile.css 的组件体系（最刺眼：订单页按钮无形态） ② 桌面页脚 .footer_fixed 漏进移动端（灰版权条 + 死空白） ③ 缺字体栈/语义间距/阴影层级，红色四种用途全平涂无层次 本节全部为追加规则，不改动上方既有规则，靠层叠顺序覆盖。 ========================================================================== */ @media (max-width:768px){ /* -------------------------------------------------------------------------- 13.1 订单页操作按钮实体化 桌面 .grey-btn 本体有描边+底色(style.css:665)，但 .grey-opacity(668) 把两者 清成透明，靠 :hover(811-813) 才恢复 —— 移动端没有 hover，于是永远是裸文字散排。 这里在移动端把描边和底色还回来，变成描边胶囊按钮。 -------------------------------------------------------------------------- */ .person-center .actions .grey-btn.grey-opacity{ background:#fff; border:1px solid #dcdcdc; color:var(--m-text); border-radius:18px; min-height:34px;height:auto; padding:0 14px; font-size:13px; min-width:0; /* 桌面 min-width:.7rem 在 rem 塌陷下会过宽 */ letter-spacing:0; } /* 主操作（去支付 / 上传·重传·查看凭证）红实心，与次要操作拉开层级 */ .person-center .actions .grey-btn.m-act-primary{ background:var(--m-brand); border-color:var(--m-brand); color:#fff; font-weight:600; } .person-center .actions .grey-btn:active{filter:brightness(.95);} /* 按钮行右对齐 —— 原 j-center 在换行时会让末个按钮("开票")孤零零掉到第二行左侧 */ .person-center .actions.f-colu{ flex-direction:row !important; flex-wrap:wrap; justify-content:flex-end !important; gap:8px; } /* -------------------------------------------------------------------------- 13.2 清掉桌面页脚残留 .footer_fixed 里的