dsh
f81d41c5ca
站点：纯静态 HTML + CSS + 原生 JS，零框架零构建
页面：首页 / 合作品牌 / 荣誉资质 / 客户案例 / 关于我们
内容：
- site/ 站点本体（含已压缩 webp 图片，约 4.8 MB）
- deploy/ Docker Compose / Caddy / Apache 部署配置
- _tools/ 开发自检脚本与部署脚本
- Dockerfile 自建 nginx 镜像方案
- README.md 项目文档
设计：品牌黄 #ffc107 + 白，深蓝仅用于页脚；菜单长期置顶；
交互动效只加在关键词与区块级元素上。
素材说明：原始素材（背景图/老网站/方案/荣誉资质/合作品牌，约 290 MB）
未纳入版本控制，站点使用的是 site/assets 内已处理压缩的图片。
39 lines
1.6 KiB
JavaScript
39 lines
1.6 KiB
JavaScript
// 固定高度方案下，每个品牌 logo 的最终渲染尺寸
|
||
const LOGOS = [
|
||
['Ruijie 锐捷', 320, 54], ['CISCO', 132, 70], ['H3C', 178, 46], ['Microsoft', 207, 44],
|
||
['vmware', 166, 40], ['CITRIX', 132, 53], ['JUNIPER', 166, 46], ['Radware', 265, 46]
|
||
];
|
||
|
||
// 首页品牌条：4 列网格，容器 max-width 1320 - 两侧 24px，列间距 16px
|
||
function tileWidth(viewport, wrapMax, gutter, gap, cols) {
|
||
const inner = Math.min(viewport, wrapMax) - gutter * 2;
|
||
return (inner - gap * (cols - 1)) / cols;
|
||
}
|
||
|
||
const SCENARIOS = [
|
||
['宽屏 1600px', 1600, 1320, 24, 16, 4, 56, 20],
|
||
['笔记本 1440px', 1440, 1320, 24, 16, 4, 56, 20],
|
||
['小笔记本 1200px', 1200, 1320, 24, 16, 4, 56, 20]
|
||
];
|
||
|
||
for (const [label, vw, wrapMax, gutter, gap, cols, h, pad] of SCENARIOS) {
|
||
const tw = tileWidth(vw, wrapMax, gutter, gap, cols);
|
||
const innerW = tw - pad * 2;
|
||
console.log('== ' + label + '：卡片 ' + tw.toFixed(0) + 'px，内容区 ' +
|
||
innerW.toFixed(0) + '×' + (132 - pad * 2) + 'px，logo 高 ' + h + 'px ==');
|
||
console.log(' ' + '品牌'.padEnd(14) + '渲染尺寸'.padEnd(12) + '状态');
|
||
let clamped = 0;
|
||
for (const [name, nw, nh] of LOGOS) {
|
||
let w = h * nw / nh;
|
||
const over = w > innerW;
|
||
if (over) { w = innerW; clamped++; }
|
||
const rh = over ? innerW * nh / nw : h;
|
||
console.log(' ' + name.padEnd(14) +
|
||
(Math.round(w) + 'x' + Math.round(rh)).padEnd(12) +
|
||
(over ? '受宽度限制，高度被压到 ' + Math.round(rh) + 'px' : '满高 ' + h + 'px'));
|
||
}
|
||
console.log(' → ' + (clamped ? clamped + ' 个受宽度限制' : '全部等高 56px，视觉完全统一'));
|
||
console.log('');
|
||
}
|
||
|