站点:纯静态 HTML + CSS + 原生 JS,零框架零构建
页面:首页 / 合作品牌 / 荣誉资质 / 客户案例 / 关于我们
内容:
- site/ 站点本体(含已压缩 webp 图片,约 4.8 MB)
- deploy/ Docker Compose / Caddy / Apache 部署配置
- _tools/ 开发自检脚本与部署脚本
- Dockerfile 自建 nginx 镜像方案
- README.md 项目文档
设计:品牌黄 #ffc107 + 白,深蓝仅用于页脚;菜单长期置顶;
交互动效只加在关键词与区块级元素上。
素材说明:原始素材(背景图/老网站/方案/荣誉资质/合作品牌,约 290 MB)
未纳入版本控制,站点使用的是 site/assets 内已处理压缩的图片。
86 lines
4.5 KiB
JavaScript
86 lines
4.5 KiB
JavaScript
// 提亮风格:把「灰蒙蒙」的几个成因逐条改掉
|
||
// 1. 浅灰描边统一换成更清晰的 --line
|
||
// 2. 首屏 / 内页页头的白色遮罩减弱,让图片更透、更亮
|
||
// 3. 按钮描边加重
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
|
||
const CSS = path.join(__dirname, '..', 'site', 'assets', 'css', 'main.css');
|
||
let css = fs.readFileSync(CSS, 'utf8');
|
||
const before = css;
|
||
const log = [];
|
||
|
||
function sub(from, to, label, expect) {
|
||
const count = css.split(from).length - 1;
|
||
if (count === 0) { log.push(' !! 未找到: ' + label); return; }
|
||
if (expect !== undefined && count !== expect) {
|
||
log.push(' ~ ' + label + '(实际 ' + count + ' 处,预期 ' + expect + ')');
|
||
} else {
|
||
log.push(' OK ' + label + '(' + count + ' 处)');
|
||
}
|
||
css = css.split(from).join(to);
|
||
}
|
||
|
||
// ---- 1. 描边统一 ----
|
||
sub('border: 1px solid var(--ink-100);', 'border: 1px solid var(--line);', '卡片/元素描边 → --line');
|
||
sub('border: 1.5px solid var(--ink-200);', 'border: 1.5px solid var(--line-strong);', 'chip / 输入框描边 → --line-strong');
|
||
sub('border-bottom: 1px solid var(--ink-100);', 'border-bottom: 1px solid var(--line);', '分隔线 → --line');
|
||
sub('border-top: 1px solid var(--ink-100);', 'border-top: 1px solid var(--line);', '顶部分隔线 → --line');
|
||
sub('border-color: var(--ink-100);', 'border-color: var(--line);', 'border-color → --line');
|
||
|
||
// ---- 2. 首屏遮罩减弱:图片更透亮 ----
|
||
sub(
|
||
` linear-gradient(96deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 24%,
|
||
rgba(255, 253, 247, .7) 44%, rgba(255, 253, 247, .22) 68%,
|
||
rgba(255, 253, 247, 0) 100%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, transparent 22%,
|
||
transparent 74%, rgba(255, 255, 255, .55) 100%);`,
|
||
` linear-gradient(96deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .84) 26%,
|
||
rgba(255, 255, 255, .52) 48%, rgba(255, 255, 255, .12) 72%,
|
||
rgba(255, 255, 255, 0) 100%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, transparent 20%,
|
||
transparent 80%, rgba(255, 255, 255, .4) 100%);`,
|
||
'首屏白色遮罩减弱');
|
||
|
||
sub(
|
||
` linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 253, 247, .88) 44%,
|
||
rgba(255, 253, 247, .72) 100%),
|
||
linear-gradient(96deg, rgba(255, 255, 255, .8) 0%, rgba(255, 253, 247, .2) 100%);`,
|
||
` linear-gradient(180deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .82) 44%,
|
||
rgba(255, 255, 255, .66) 100%),
|
||
linear-gradient(96deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .14) 100%);`,
|
||
'首屏移动端遮罩减弱');
|
||
|
||
// ---- 3. 内页页头遮罩减弱 ----
|
||
sub(
|
||
` linear-gradient(94deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 30%,
|
||
rgba(255, 253, 247, .78) 52%, rgba(255, 253, 247, .3) 78%,
|
||
rgba(255, 253, 247, .04) 100%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 45%);`,
|
||
` linear-gradient(94deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .88) 30%,
|
||
rgba(255, 255, 255, .62) 54%, rgba(255, 255, 255, .2) 80%,
|
||
rgba(255, 255, 255, .03) 100%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .34), transparent 45%);`,
|
||
'内页页头遮罩减弱');
|
||
|
||
// ---- 4. 页头网格装饰更清晰一点 ----
|
||
sub('linear-gradient(rgba(15, 28, 49, .035) 1px, transparent 1px),\n linear-gradient(90deg, rgba(15, 28, 49, .035) 1px, transparent 1px);',
|
||
'linear-gradient(rgba(11, 21, 38, .05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(11, 21, 38, .05) 1px, transparent 1px);',
|
||
'页头网格线加深');
|
||
|
||
// ---- 5. 卡片描边加重 + 悬浮不再虚化 ----
|
||
sub('.card {\n position: relative;\n background: #fff;\n border: 1px solid var(--line);',
|
||
'.card {\n position: relative;\n background: #fff;\n border: 1px solid var(--line);',
|
||
'card 基础样式(占位,确保存在)');
|
||
|
||
// ---- 6. 深色页脚文字提亮一点,避免糊 ----
|
||
sub('color: #93a4bd;', 'color: #9fb0c9;', '页脚正文提亮');
|
||
sub('color: #8b9cb6;', 'color: #9aabc4;', '页脚段落提亮');
|
||
sub('color: #6e7f99;', 'color: #8595ad;', '页脚底部提亮');
|
||
|
||
fs.writeFileSync(CSS, css, 'utf8');
|
||
console.log(log.join('\n'));
|
||
console.log('\nCSS 体积: ' + before.length + ' → ' + css.length);
|
||
const o = (css.match(/{/g) || []).length, c = (css.match(/}/g) || []).length;
|
||
console.log('大括号: ' + o + ' / ' + c + (o === c ? ' OK' : ' 不配对!'));
|