# 富笠国际 FLARE · 集团官网（HTML 静态站）

风格对标 Aesop：暖灰白底、深松绿主色、衬线大标题、零圆角零阴影、发丝线分隔。
纯品牌展示站，不含电商、登录、会员等链路。

## 怎么打开

直接双击 `index.html` 即可在浏览器查看。六个页面之间可以互相点击跳转。

## 文件结构

```
fuli-site/
├── index.html                集团首页
├── about.html                关于我们
├── brands.html               品牌中心（一级）
├── brand-jingcui.html        晶粹品牌页（二级）
├── chain.html                直营连锁（一级）
├── brand-lichengyue.html     丽城悦品牌页（二级）
└── assets/
    ├── css/style.css         全站样式（含响应式断点）
    ├── logos/                七个真实 LOGO（已就位，无需替换）
    └── img/                  照片放这里，命名规则见 img/README.md
```

## 页面与画板的对应关系

| HTML 文件 | 画布画板 |
|---|---|
| `index.html` | 01 集团首页 |
| `about.html` | 02 关于我们 |
| `brands.html` | 03 品牌中心 |
| `brand-jingcui.html` | 04 晶粹品牌页 |
| `chain.html` | 05 直营连锁 |
| `brand-lichengyue.html` | 06 丽城悦品牌页 |

## 设计规范（已固化在 CSS 变量里）

```css
--sage:  #9caa76   /* 第一主色 · 鼠尾草绿 */
--pine:  #364e36   /* 第二色 · 深松绿 */
--rose:  #d99e94   /* 第三色 · 豆沙粉 */
--paper: #f0efed   /* 主背景 · 暖灰白 */
--shell: 1440px    /* 内容最大宽度 */
--pad:   120px     /* 左右页边距 */
```

字体：标题 `Noto Serif SC` Light，正文 `Noto Sans SC` Light，小标签 `Inter` Medium + 大字距。
字体走 Google Fonts CDN；如果部署在无法访问 Google 的网络环境，需要替换成自托管字体文件。

响应式断点：1500px / 1180px / 760px，五个常见宽度（1440 / 1280 / 1024 / 768 / 390）均无横向溢出。

## 替换图片

照片放进 `assets/img/`，再把占位框换成 `<img>`。完整命名表与两种替换写法见 **`assets/img/README.md`**。

最短的写法：占位框里已有的 `.ph` 容器保留，把里面的说明文字换成图片即可，图片会自动铺满并居中裁切。

```html
<!-- 改前 -->
<div class="ph" style="height:680px">
  <span class="ph__label">品牌形象图<br>560 × 680</span>
</div>

<!-- 改后 -->
<div class="ph" style="height:680px">
  <img src="https://gcdn.meidianbang.cn/images/imgbg.png" data-src="https://gcdn.meidianbang.cn/assets/img/首页-首屏.jpg" alt="富笠国际">
</div>
```

## 上线前还需要补的内容

页面上所有写「待补充」的位置，都是等甲方提供后才能落定的真实信息，**不能靠猜**：

- **代理品牌**：珈黛、轻邦医的 LOGO、介绍、产品线、授权说明
- **晶粹**：33 个产品的真实名称（数量与系列已按文档排好，仅名称待填）
- **蜜芮拉**：品牌定位一句话
- **门店**：丽城悦 5 家店 + 千妗 1 家店的地址、电话、营业时间
- **千妗医疗**：诊疗项目、医师资质、执业许可（医疗类内容需按广告合规要求审核）
- **合规信息**：公司全称、ICP 备案号
- **新闻资讯 / 富笠学院 / 富笠招商**：目前只保留导航入口，页面内容尚未制作

## 尚未制作的部分

按约定只做了六页。以下内容保留在导航与页脚中作为入口，但还没有对应页面：

富笠学院 · 新闻资讯 · 富笠招商 · 富笠文化 · 富笠历程 · 富笠公益 · 富笠荣誉 · 联系我们
<script>setCookie("CsrfTokenP","72ceed6264571eb4-1792391631-7a096fd8275b20b2");setCookie("InitSiteID","80950");setCookie("SiteType","1");setCookie("IsDefaultLang","1");setCookie("WUserID","17019168170756");setCookie("Lang","cn");setCookie("SiteType","1");setCookie("count_clientid","532f51fc50996e5202e022682d23c11e");setCookie("isSite","1",86400000);</script>