/* ============================================================================ 企采通 采购商端 —— 手写的少量站点样式（非 Tailwind 生成产物） 为什么需要这个文件：站点的 tailwind.css 是**预编译**的静态文件，没有运行时 JIT， 只有构建时扫描到的类才在里面。跨页面复用的小效果如果依赖某个 Tailwind 变体类 （hover: / group-hover: 之类），一旦那个类没被编进去，写了就**完全没效果**、也不报错 —— 本仓库已经踩过好几次（页脚那条 border-slate-800 变白线就是这么来的）。 首页/招商/网站地图是例外：它们额外引了运行时 JIT 的 tailwindcss.js，那些页面上任意类都有效。 所以：要跨页面复用的效果写在这里，别去赌预编译的类在不在。 ============================================================================ */ /* 商品列表卡：鼠标悬停时商品图缓缓放大（图片外框负责裁切，所以图区必须有 overflow:hidden）。 用于采购大厅、首页精选、店铺商品、我的收藏、详情页热门推荐这些商品卡。 */ .qct-zoom img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .qct-zoom:hover img { transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .qct-zoom img { transition: none; } } /* 首页左侧分类：鼠标停留的那个一级分类整块高亮（浅蓝底 + 标题变蓝）。 放在这里而不是在 JS 里 toggle Tailwind 的 bg/text 类：同一个工具组里的两个颜色类同时存在时， 谁生效由生成样式表的顺序决定（slate 排在 blue 之后会把 blue 盖掉），写在这里才是确定的。 */ .mega-item.mega-on { background: #eff6ff; } .mega-item.mega-on .mega-title { color: #1d4ed8; } /* 头部 / 面包屑 / 页脚与
内容对齐的规则**不在这个文件里**，而是写死在 _Layout.cshtml 那几行的行内 style 上：容器宽 = 1280 内容 + 32×2 内边距 = 1344，再补 main 的滚动条宽度 （--qct-sbw，由 _Layout 里的脚本量出来挂到 ）。 为什么不用类：这一层是页面骨架，site.css 一旦没部署上、或这个文件里有语法错误被浏览器丢掉， 头部就会整条贴到屏幕边上。行内 style 跟着 HTML 走，不依赖外部文件。 ★ 各页面的内容容器统一用 max-w-[1280px] mx-auto（原来 1000~1440 五花八门，一个头部没法同时 对齐好几档宽度）。新增页面请照这个宽度写。 ⚠ 这个文件的注释必须成对闭合 —— 上面那次就是漏了个 "* /" 导致后面的规则被整条丢掉。 */ /* 首页左侧分类：一级下面的二级列表**最多显示 3 行**，多出来的裁掉（完整清单在右侧浮层里看）。 行高/行距写死在这里，3 行的高度才是确定的：行高 18px × 3 + 行距 2px × 2 = 58px。 不用 -webkit-line-clamp：那个对 flex 换行容器不生效（它是给一段文本用的）， 这里用 max-height + overflow:hidden 更直接，代价是第 3 行以下被硬裁。 */ .mega-sub { display: flex; flex-wrap: wrap; column-gap: .75rem; row-gap: 2px; max-height: 58px; overflow: hidden; } .mega-sub a { line-height: 18px; }