23lab · erichua23 · Sep 16, 2025
diff --git a/we-bank-site/Dockerfile b/we-bank-site/Dockerfile
@@ -0,0 +1,17 @@
+FROM nginx:1.27-alpine
+
+ARG BUILD_DATE
+ARG VCS_REF
+
+LABEL org.opencontainers.image.title="we-bank-site-demo" \
+      org.opencontainers.image.description="Static corporate site template (demo)" \
+      org.opencontainers.image.vendor="demo" \
+      org.opencontainers.image.created=$BUILD_DATE \
+      org.opencontainers.image.revision=$VCS_REF
+
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY public /usr/share/nginx/html
+
+EXPOSE 80
+HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://127.0.0.1/ | grep -qi "</html>" || exit 1
+
diff --git a/we-bank-site/README.md b/we-bank-site/README.md
@@ -0,0 +1,84 @@
+# 演示银行官网模板（部署到阿里云）
+
+> 免责声明：本仓库仅为静态企业官网演示模板，与任何真实银行或机构无关，不提供任何真实金融服务。
+
+## 目录结构
+
+```
+/we-bank-site
+├─ public/                # 静态页面与资源
+│  ├─ index.html
+│  ├─ about.html products.html news.html careers.html contact.html
+│  └─ assets/
+│     ├─ css/styles.css
+│     ├─ js/main.js
+│     └─ img/logo.svg
+├─ nginx/default.conf     # Nginx 静态站点配置
+├─ Dockerfile             # 生产镜像
+├─ docker-compose.yml     # 本地启动
+└─ scripts/
+   ├─ deploy-oss.sh       # 部署到 OSS（静态托管/CDN）
+   └─ deploy-ecs.sh       # 部署到 ECS（Docker/Nginx）
+```
+
+## 本地运行
+
+```bash
+cd /workspace/we-bank-site
+docker compose up --build -d
+# 访问 http://localhost:8080
+```
+
+## 方案一：部署到阿里云 OSS（静态托管 + 可选 CDN）
+
+适合纯静态网站，成本低、维护简单。
+
+### 前置条件
+- 已创建阿里云账号并开通 OSS
+- 安装并配置 aliyun CLI：`aliyun configure`
+- 已创建 Bucket（公共读或绑定 CDN）
+
+### 一键部署
+```bash
+cd /workspace/we-bank-site
+export OSS_BUCKET=你的Bucket名
+export OSS_REGION=cn-hangzhou   # 按你的地域填写
+export OSS_PREFIX=we-bank-site  # 可选：上传到该目录前缀
+bash scripts/deploy-oss.sh
+```
+完成后：
+- 直接用 `https://<bucket>.<region>.aliyuncs.com/<prefix>/index.html` 访问，或
+- 绑定自定义域名 + CDN 加速 + HTTPS 证书（推荐）
+
+## 方案二：部署到阿里云 ECS（Docker 容器）
+
+适合需要自定义 Nginx、未来扩展到后端服务的场景。
+
+### 前置条件
+- 一台可用的 ECS（建议安全组放行 80/443）
+- ECS 上已安装 Docker（或使用 Docker 一键安装脚本）
+- 可 SSH 访问 ECS
+
+### 一键部署
+```bash
+cd /workspace/we-bank-site
+export ECS_HOST=你的ECS公网IP
+export ECS_USER=root               # 如不同请修改
+export SSH_KEY=$HOME/.ssh/id_rsa   # 私钥路径
+export APP_NAME=we-bank-site-demo  # 可自定义
+export REMOTE_PORT=80              # 可改 80/8080 等
+bash scripts/deploy-ecs.sh
+```
+完成后访问：`http://<ECS_HOST>:<REMOTE_PORT>`
+
+### HTTPS（可选）
+- 在 ECS 上使用 Nginx 反向代理 + 证书（如 `certbot`/阿里云证书服务），将 443 代理到容器 80
+- 或使用 SLB/ALB + 证书，监听 443 并转发到容器 80
+
+## 自定义与注意事项
+- 本模板所有文案仅为示例，部署到公网前请替换品牌、文案与法律合规页。
+- 如果使用 OSS 静态托管，注意合理设置缓存策略与 CDN 回源配置。
+- 如需多环境（dev/stage/prod），可分不同 Bucket/路径或不同 ECS。
+
+## 版权与许可
+- 本模板仅用于演示与学习，不得用于冒用真实机构、误导用户或从事任何违法违规行为。
diff --git a/we-bank-site/docker-compose.yml b/we-bank-site/docker-compose.yml
@@ -0,0 +1,11 @@
+version: '3.9'
+services:
+  web:
+    image: we-bank-site-demo:latest
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:80"
+    restart: unless-stopped
+
diff --git a/we-bank-site/nginx/default.conf b/we-bank-site/nginx/default.conf
@@ -0,0 +1,28 @@
+server {
+    listen       80;
+    server_name  _;
+
+    access_log  /var/log/nginx/access.log;
+    error_log   /var/log/nginx/error.log warn;
+
+    gzip on;
+    gzip_types text/plain text/css application/javascript application/json image/svg+xml;
+    gzip_min_length 1024;
+
+    add_header X-Content-Type-Options nosniff;
+    add_header X-Frame-Options SAMEORIGIN;
+    add_header Referrer-Policy no-referrer-when-downgrade;
+
+    root   /usr/share/nginx/html;
+    index  index.html;
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+    location ~* \.(?:css|js|jpg|jpeg|png|gif|svg|ico|woff2?)$ {
+        expires 30d;
+        access_log off;
+    }
+}
+
diff --git a/we-bank-site/public/about.html b/we-bank-site/public/about.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>关于我们 · 演示模板</title>
+    <link rel="icon" href="/assets/img/logo.svg" />
+    <link rel="stylesheet" href="/assets/css/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div class="container header-inner">
+        <a class="brand" href="/">
+          <img src="/assets/img/logo.svg" alt="演示银行 Logo" width="28" height="28" />
+          <span>微众银行（演示）</span>
+        </a>
+        <button class="nav-toggle" aria-label="切换导航" aria-expanded="false">☰</button>
+        <nav class="site-nav" aria-label="主导航">
+          <a href="/about.html" aria-current="page">关于我们</a>
+          <a href="/products.html">产品与服务</a>
+          <a href="/news.html">新闻资讯</a>
+          <a href="/careers.html">加入我们</a>
+          <a href="/contact.html" class="btn btn-primary">联系我们</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="container" style="padding:32px 0;">
+      <h1 style="margin-top:0">关于我们（演示）</h1>
+      <p class="muted">本页面为演示模板内容，不代表任何真实机构。</p>
+      <div class="grid-3">
+        <div class="card">
+          <h3>愿景</h3>
+          <p>以科技驱动金融普惠，共创开放、可信的数字经济。</p>
+        </div>
+        <div class="card">
+          <h3>使命</h3>
+          <p>提供安全与便捷兼具的产品体验，助力个人与企业成长。</p>
+        </div>
+        <div class="card">
+          <h3>价值观</h3>
+          <p>合规、创新、客户为先、长期主义。</p>
+        </div>
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container footer-inner">
+        <div>免责声明：本网站仅为示例模板。</div>
+        <div>© 2025 Demo Bank Template</div>
+      </div>
+    </footer>
+
+    <script src="/assets/js/main.js" defer></script>
+  </body>
+  </html>
+
diff --git a/we-bank-site/public/assets/css/styles.css b/we-bank-site/public/assets/css/styles.css
@@ -0,0 +1,48 @@
+:root{--bg:#0b1020;--card:#111732;--muted:#8a93a6;--text:#e7ecf7;--brand:#3b82f6;--brand-700:#1d4ed8;--accent:#22c55e;--border:#1e263f;--white:#ffffff}
+*{box-sizing:border-box}
+html,body{padding:0;margin:0}
+body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Segoe UI Emoji,Segoe UI Symbol;line-height:1.6;background:var(--bg);color:var(--text)}
+a{color:inherit;text-decoration:none}
+img{display:block;max-width:100%}
+
+.container{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
+
+.site-header{position:sticky;top:0;background:rgba(11,16,32,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);z-index:10}
+.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
+.brand{display:flex;gap:10px;align-items:center;font-weight:700}
+.brand span{letter-spacing:.5px}
+.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:24px}
+.site-nav{display:flex;gap:18px;align-items:center}
+.site-nav a{padding:8px 10px;color:var(--muted)}
+.site-nav a:hover{color:var(--white)}
+.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:#0e1429;color:var(--text)}
+.btn:hover{border-color:#2a3863}
+.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--white)}
+.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
+
+.hero{padding:72px 0;background:radial-gradient(60% 120% at 50% -10%, #1b254d 0%, rgba(27,37,77,0) 60%), linear-gradient(180deg, rgba(59,130,246,.18), transparent)}
+.hero-inner{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
+.hero h1{font-size:42px;line-height:1.2;margin:0}
+.hero p{max-width:680px;color:var(--muted);margin:0}
+.hero-cta{display:flex;gap:12px;margin-top:8px}
+
+.features{padding:48px 0}
+.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.card{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:18px}
+.card h3{margin:0 0 8px 0}
+.card p{margin:0;color:var(--muted)}
+
+.highlight{padding:24px 0;border-top:1px solid var(--border);background:linear-gradient(180deg, rgba(34,197,94,.08), transparent)}
+.highlight h2{margin:0 0 8px}
+.list{margin:0;padding-left:18px}
+
+.site-footer{padding:24px 0;border-top:1px solid var(--border);color:var(--muted)}
+.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
+
+@media (max-width: 768px){
+  .grid-3{grid-template-columns:1fr}
+  .nav-toggle{display:block}
+  .site-nav{position:absolute;inset:64px 0 auto 0;background:rgba(11,16,32,.98);border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;gap:0;padding:8px 16px;display:none}
+  .site-nav.open{display:flex}
+}
+
diff --git a/we-bank-site/public/assets/img/logo.svg b/we-bank-site/public/assets/img/logo.svg
diff --git a/we-bank-site/public/assets/js/main.js b/we-bank-site/public/assets/js/main.js
@@ -0,0 +1,10 @@
+(() => {
+  const toggleButton = document.querySelector('.nav-toggle');
+  const nav = document.querySelector('.site-nav');
+  if (!toggleButton || !nav) return;
+  toggleButton.addEventListener('click', () => {
+    const isOpen = nav.classList.toggle('open');
+    toggleButton.setAttribute('aria-expanded', String(isOpen));
+  });
+})();
+
diff --git a/we-bank-site/public/careers.html b/we-bank-site/public/careers.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>加入我们 · 演示模板</title>
+    <link rel="icon" href="/assets/img/logo.svg" />
+    <link rel="stylesheet" href="/assets/css/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div class="container header-inner">
+        <a class="brand" href="/">
+          <img src="/assets/img/logo.svg" alt="演示银行 Logo" width="28" height="28" />
+          <span>微众银行（演示）</span>
+        </a>
+        <button class="nav-toggle" aria-label="切换导航" aria-expanded="false">☰</button>
+        <nav class="site-nav" aria-label="主导航">
+          <a href="/about.html">关于我们</a>
+          <a href="/products.html">产品与服务</a>
+          <a href="/news.html">新闻资讯</a>
+          <a href="/careers.html" aria-current="page">加入我们</a>
+          <a href="/contact.html" class="btn btn-primary">联系我们</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="container" style="padding:32px 0;">
+      <h1 style="margin-top:0">加入我们（示例）</h1>
+      <div class="card">
+        <h3>示例岗位 · 前端工程师</h3>
+        <p>负责企业官网与后台管理系统的开发与优化。</p>
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container footer-inner">
+        <div>免责声明：本网站仅为示例模板。</div>
+        <div>© 2025 Demo Bank Template</div>
+      </div>
+    </footer>
+
+    <script src="/assets/js/main.js" defer></script>
+  </body>
+  </html>
+
diff --git a/we-bank-site/public/contact.html b/we-bank-site/public/contact.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>联系我们 · 演示模板</title>
+    <link rel="icon" href="/assets/img/logo.svg" />
+    <link rel="stylesheet" href="/assets/css/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div class="container header-inner">
+        <a class="brand" href="/">
+          <img src="/assets/img/logo.svg" alt="演示银行 Logo" width="28" height="28" />
+          <span>微众银行（演示）</span>
+        </a>
+        <button class="nav-toggle" aria-label="切换导航" aria-expanded="false">☰</button>
+        <nav class="site-nav" aria-label="主导航">
+          <a href="/about.html">关于我们</a>
+          <a href="/products.html">产品与服务</a>
+          <a href="/news.html">新闻资讯</a>
+          <a href="/careers.html">加入我们</a>
+          <a href="/contact.html" aria-current="page" class="btn btn-primary">联系我们</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="container" style="padding:32px 0;">
+      <h1 style="margin-top:0">联系我们（示例）</h1>
+      <div class="card">
+        <p>本页面为演示用途。请勿填写真实敏感信息。</p>
+        <form onsubmit="event.preventDefault(); alert('演示表单，无实际提交。');">
+          <div style="display:grid;gap:8px;max-width:520px;">
+            <input required placeholder="姓名" style="padding:10px;border-radius:10px;border:1px solid var(--border);background:#0e1429;color:var(--text)" />
+            <input type="email" required placeholder="邮箱" style="padding:10px;border-radius:10px;border:1px solid var(--border);background:#0e1429;color:var(--text)" />
+            <textarea rows="5" required placeholder="留言" style="padding:10px;border-radius:10px;border:1px solid var(--border);background:#0e1429;color:var(--text)"></textarea>
+            <button class="btn btn-primary" type="submit">提交</button>
+          </div>
+        </form>
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container footer-inner">
+        <div>免责声明：本网站仅为示例模板。</div>
+        <div>© 2025 Demo Bank Template</div>
+      </div>
+    </footer>
+
+    <script src="/assets/js/main.js" defer></script>
+  </body>
+  </html>
+