Files
web_template/web/dist/index.html
Geliebte 69c59f4fbd feat: 导航页SEO/GEO优化 + 手机端完全适配 + App候选码 + 业务系统板块
- SEO: 添加meta description/keywords/Open Graph/结构化数据/地理信息
- GEO: 添加geo.region/geo.position/ICBM等地理标记
- 手机端完全重写响应式: 咨询表单/导航卡片/hero区/标签全部适配
- 新增App候选码板块: 后台管理+导航页动态展示(支持录屏视频/下载链接)
- 新增业务系统板块: 进销存/OA/财务/工单等,支持按年/按月/定制定价
- 后台新增App候选码管理页面(增删改查+上下架)
- 后台新增业务系统管理页面(增删改查+上下架)
- 导航页设置新增新板块标题配置
- 公开API: GET /api/v1/showcase/apps + /api/v1/showcase/systems
2026-09-09 03:32:22 +08:00

474 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<title>Gotest · 多行业网站模板集合 - 企业官网/电商/外卖/游戏/应用/音乐模板一站式导航</title>
<meta name="description" content="Gotest 提供 19 套精心设计的多行业网站模板,覆盖企业官网、跨境电商、外卖平台、游戏、应用商店、音乐平台 6 大行业,支持响应式设计,一键预览,即刻上线。">
<meta name="keywords" content="网站模板,企业官网模板,电商模板,响应式网站,网站设计,模板导航,跨境电商模板,外卖平台模板,游戏网站模板,应用商店模板,音乐平台模板,低成本建站">
<meta name="author" content="焉耆青梧映星软件开发工作室">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="/">
<meta property="og:title" content="Gotest · 多行业网站模板集合">
<meta property="og:description" content="19 套精心设计的多行业网站模板,覆盖 6 大行业,响应式设计,一键预览。">
<meta property="og:site_name" content="Gotest 模板导航">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Gotest · 多行业网站模板集合">
<meta name="twitter:description" content="19 套精心设计的多行业网站模板,覆盖 6 大行业,响应式设计,一键预览。">
<!-- GEO -->
<meta name="geo.region" content="CN-XJ">
<meta name="geo.placename" content="焉耆回族自治县">
<meta name="geo.position" content="42.05;86.57">
<meta name="ICBM" content="42.05, 86.57">
<link rel="canonical" href="/">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Gotest 模板导航",
"description": "多行业网站模板集合,覆盖企业官网、跨境电商、外卖、游戏、应用、音乐 6 大行业",
"url": "/",
"potentialAction": {
"@type": "SearchAction",
"target": "/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "焉耆青梧映星软件开发工作室",
"url": "/",
"sameAs": []
}
</script>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23000'/><text x='50' y='70' font-size='58' font-weight='bold' fill='white' text-anchor='middle' font-family='Arial'>G</text></svg)">
<script>
// Prevent FOUC: apply theme before render
(function(){
var t = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', t);
})();
</script>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f5f5f7;--text:#1d1d1f;--text-sub:#86868b;--card:#fff;--border:rgba(0,0,0,.06);--radius:20px;--shadow:0 4px 24px rgba(0,0,0,.06);--shadow-hover:0 12px 40px rgba(0,0,0,.12);--form-bg:rgba(255,255,255,0.95);--input-bg:#f9f9f9;--input-border:#e5e5e5;--admin-btn-bg:#1d1d1f;--admin-btn-hover:#000}
[data-theme="dark"]{--bg:#0f0f12;--text:#f5f5f7;--text-sub:#a1a1aa;--card:#1c1c22;--border:rgba(255,255,255,.08);--shadow:0 4px 24px rgba(0,0,0,.3);--shadow-hover:0 12px 40px rgba(0,0,0,.5);--form-bg:rgba(28,28,34,0.95);--input-bg:#27272a;--input-border:#3f3f46;--admin-btn-bg:#f5f5f7;--admin-btn-hover:#fff}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
.wrap{max-width:1120px;margin:0 auto;padding:48px 24px 64px}
/* Hero */
.hero{text-align:center;padding:48px 0 56px}
.hero h1{font-size:56px;font-weight:700;letter-spacing:-2px;line-height:1.1;margin-bottom:16px}
.hero h1 span{background:linear-gradient(90deg,#6366f1,#ec4899,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:19px;color:var(--text-sub);max-width:580px;margin:0 auto;line-height:1.5}
.hero-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pill{padding:6px 16px;border-radius:100px;background:#fff;border:1px solid var(--border);font-size:13px;color:var(--text-sub);font-weight:500}
[data-theme="dark"] .pill{background:#27272a}
.pill b{color:var(--text)}
/* Section */
.sec{margin-bottom:56px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.sec-head h2{font-size:28px;font-weight:700;letter-spacing:-.5px}
.sec-head .sub{font-size:14px;color:var(--text-sub)}
.sec-line{flex:1;height:1px;background:var(--border)}
/* Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.item{background:var(--card);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(.25,.46,.45,.94);text-decoration:none;color:inherit;position:relative;display:block;box-shadow:var(--shadow)}
.item:hover{box-shadow:var(--shadow-hover);transform:translateY(-6px)}
.item-banner{height:160px;position:relative;display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.item-banner .glow{position:absolute;inset:0;opacity:.9}
.item-banner .pattern{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle at 25% 25%,#fff 2px,transparent 2px),radial-gradient(circle at 75% 75%,#fff 2px,transparent 2px);background-size:24px 24px}
.item-tag{position:relative;z-index:1;font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;backdrop-filter:blur(10px);background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}
.item-body{padding:18px 20px}
.item-title{font-size:17px;font-weight:600;margin-bottom:4px;letter-spacing:-.2px}
.item-desc{font-size:13px;color:var(--text-sub);line-height:1.4}
.item-go{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;opacity:0;transform:scale(.8);transition:all .3s}
.item:hover .item-go{opacity:1;transform:scale(1)}
/* Banner gradients */
.g-enterprise .glow{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 40%,#60a5fa 100%)}
.g-shop .glow{background:linear-gradient(135deg,#991b1b 0%,#ef4444 40%,#fb923c 100%)}
.g-food .glow{background:linear-gradient(135deg,#92400e 0%,#f59e0b 40%,#fde047 100%)}
.g-game .glow{background:linear-gradient(135deg,#0c0a09 0%,#7c3aed 40%,#d946ef 100%)}
.g-app .glow{background:linear-gradient(135deg,#0c4a6e 0%,#0ea5e9 40%,#7dd3fc 100%)}
.g-music .glow{background:linear-gradient(135deg,#312e81 0%,#7c3aed 40%,#f472b6 100%)}
.g-appshow .glow{background:linear-gradient(135deg,#0f766e 0%,#14b8a6 40%,#5eead4 100%)}
.g-bizsys .glow{background:linear-gradient(135deg,#1e3a5f 0%,#3b82f6 40%,#93c5fd 100%)}
/* Admin */
.admin-row{display:flex;justify-content:center;margin-top:56px}
.admin-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:100px;background:var(--admin-btn-bg);color:var(--text);text-decoration:none;font-size:15px;font-weight:600;transition:all .25s}
.admin-btn:hover{background:var(--admin-btn-hover);transform:scale(1.03)}
.admin-btn svg{width:18px;height:18px}
/* Theme Toggle */
.theme-toggle{position:fixed;top:24px;right:24px;z-index:100;width:48px;height:48px;border-radius:50%;border:2px solid var(--border);background:var(--card);box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-hover)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;transition:all .3s;font-size:20px}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(.5)}
/* Footer */
.foot{text-align:center;padding:32px 0 0;color:var(--text-sub);font-size:12px}
/* Responsive - base tablet */
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
/* Anim */
.item{animation:up .6s ease both}
.item:nth-child(1){animation-delay:.05s}.item:nth-child(2){animation-delay:.12s}.item:nth-child(3){animation-delay:.19s}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* Consult Section */
.consult-section{max-width:680px;margin:64px auto 0;padding:40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:24px;box-shadow:0 20px 60px rgba(102,126,234,0.3)}
.consult-header{text-align:center;margin-bottom:32px}
.consult-header h2{font-size:32px;font-weight:700;color:#fff;margin-bottom:8px}
.consult-header p{font-size:16px;color:rgba(255,255,255,0.9)}
.consult-form{background:var(--form-bg);padding:32px;border-radius:16px;backdrop-filter:blur(10px);transition:background .3s}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:2px solid var(--input-border);border-radius:12px;font-size:15px;transition:all .3s;background:var(--input-bg);color:var(--text);-webkit-appearance:none;appearance:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-sub)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;background:var(--card);box-shadow:0 0 0 4px rgba(102,126,234,0.1)}
.form-group textarea{resize:vertical;min-height:100px}
.submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s;margin-top:8px}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.4)}
.submit-btn:active{transform:translateY(0)}
.consult-success{text-align:center;padding:40px;background:var(--form-bg);border-radius:16px;transition:background .3s}
.success-icon{width:64px;height:64px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;color:#fff}
.consult-success h3{font-size:24px;font-weight:700;color:var(--text);margin-bottom:8px}
.consult-success p{font-size:16px;color:var(--text-sub)}
/* ===== Mobile Responsive ===== */
@media(max-width:600px){
.wrap{padding:24px 16px 48px}
.hero{padding:24px 0 32px}
.hero h1{font-size:28px;letter-spacing:-1px}
.hero p{font-size:15px}
.hero-pills{gap:6px;margin-top:20px}
.pill{padding:5px 12px;font-size:12px}
.sec{margin-bottom:36px}
.sec-head{gap:8px;margin-bottom:16px}
.sec-head h2{font-size:20px}
.sec-head .sub{font-size:12px}
.grid{grid-template-columns:1fr !important;gap:14px}
.item-banner{height:120px}
.item-body{padding:14px 16px}
.item-title{font-size:15px}
.item-desc{font-size:12px}
.item-go{opacity:1;transform:scale(1)}
.theme-toggle{width:40px;height:40px;top:16px;right:16px}
.consult-section{margin:36px 0 0;padding:0;border-radius:0;box-shadow:none;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.consult-header{padding:24px 20px 0;margin-bottom:20px}
.consult-header h2{font-size:22px}
.consult-header p{font-size:14px}
.consult-form{padding:20px;border-radius:0;margin:0 16px 16px}
.form-row{grid-template-columns:1fr;gap:0}
.form-group{margin-bottom:12px}
.form-group label{font-size:13px;margin-bottom:4px}
.form-group input,.form-group textarea{padding:10px 14px;font-size:14px;border-width:1px}
.submit-btn{padding:14px;font-size:16px;margin-top:4px}
.admin-row{margin-top:36px}
.admin-btn{padding:12px 24px;font-size:14px}
.foot{padding:24px 16px 0;font-size:11px}
}
</style>
</head>
<body>
<button class="theme-toggle" id="themeToggle" aria-label="切换主题">
<span class="icon-sun">☀️</span>
<span class="icon-moon">🌙</span>
</button>
<div class="wrap">
<div class="hero">
<h1><span id="s_hero_title">Gotest</span> <span id="s_hero_highlight">模板导航</span></h1>
<p id="s_hero_desc">6 大行业,19 套精心设计的网站模板,一键切换,即刻预览</p>
<div class="hero-pills">
<span class="pill"><b id="s_pill_templates">19</b> 套模板</span>
<span class="pill"><b id="s_pill_lines">6</b> 大行业</span>
<span class="pill"><b id="s_pill_per_industry">3</b> 套 / 行业</span>
<span class="pill" id="s_pill_responsive">响应式设计</span>
</div>
</div>
<!-- 企业官网 -->
<div class="sec">
<div class="sec-head"><h2 id="s_sec_enterprise_title">企业官网</h2><span class="sub" id="s_sec_enterprise_sub">3 套风格</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/site1" target="_blank"><div class="item-banner g-enterprise"><div class="glow"></div><div class="pattern"></div><span class="item-tag">科技蓝</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">科技企业 · site1</div><div class="item-desc">现代科技公司风格,蓝色主调</div></div></a>
<a class="item" href="/site2" target="_blank"><div class="item-banner g-enterprise"><div class="glow" style="background:linear-gradient(135deg,#1c1917 0%,#b45309 40%,#fbbf24 100%)"></div><div class="pattern"></div><span class="item-tag">制造金</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">制造企业 · site2</div><div class="item-desc">工业制造风格,深色金调</div></div></a>
<a class="item" href="/site3" target="_blank"><div class="item-banner g-enterprise"><div class="glow" style="background:linear-gradient(135deg,#064e3b 0%,#10b981 40%,#6ee7b7 100%)"></div><div class="pattern"></div><span class="item-tag">咨询绿</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">咨询服务 · site3</div><div class="item-desc">专业咨询风格,绿色清新</div></div></a>
</div>
</div>
<!-- 跨境电商 -->
<div class="sec">
<div class="sec-head"><h2 id="s_sec_shop_title">跨境电商</h2><span class="sub" id="s_sec_shop_sub">4 套风格</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/shop" target="_blank"><div class="item-banner g-shop"><div class="glow"></div><div class="pattern"></div><span class="item-tag">红色经典</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">经典电商 · shop</div><div class="item-desc">经典电商红,大促风格</div></div></a>
<a class="item" href="/shop2" target="_blank"><div class="item-banner g-shop"><div class="glow" style="background:linear-gradient(135deg,#18181b 0%,#3f3f46 40%,#71717a 100%)"></div><div class="pattern"></div><span class="item-tag">暗黑模式</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">暗黑电商 · shop2</div><div class="item-desc">黑色高端,极简暗色</div></div></a>
<a class="item" href="/shop3" target="_blank"><div class="item-banner g-shop"><div class="glow" style="background:linear-gradient(135deg,#f5f5f0 0%,#d6d3d1 40%,#a8a29e 100%)"></div><div class="pattern" style="opacity:.08"></div><span class="item-tag" style="background:rgba(0,0,0,.1);color:#1c1917;border-color:rgba(0,0,0,.1)">北欧极简</span><div class="item-go" style="color:#1c1917">→</div></div><div class="item-body"><div class="item-title">北欧极简 · shop3</div><div class="item-desc">NORDI 风格,自然柔和</div></div></a>
<a class="item" href="/shop4" target="_blank"><div class="item-banner g-shop"><div class="glow" style="background:linear-gradient(135deg,#0f172a 0%,#1a3a2a 50%,#2d5a1f 100%)"></div><div class="pattern" style="opacity:.06"></div><span class="item-tag">古树生机</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">古树商城 · shop4</div><div class="item-desc">古树壁纸,光追生命力</div></div></a>
</div>
</div>
<!-- 外卖平台 -->
<div class="sec">
<div class="sec-head"><h2 id="s_sec_food_title">外卖平台</h2><span class="sub" id="s_sec_food_sub">3 套风格</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/food1" target="_blank"><div class="item-banner g-food"><div class="glow"></div><div class="pattern"></div><span class="item-tag">橙黄活力</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">美味达 · food1</div><div class="item-desc">暖橙食欲风格,活力满满</div></div></a>
<a class="item" href="/food2" target="_blank"><div class="item-banner g-food"><div class="glow" style="background:linear-gradient(135deg,#18181b 0%,#44403c 40%,#78716c 100%)"></div><div class="pattern"></div><span class="item-tag">深色模式</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">GOURMET · food2</div><div class="item-desc">暗色高端外卖平台</div></div></a>
<a class="item" href="/food3" target="_blank"><div class="item-banner g-food"><div class="glow" style="background:linear-gradient(135deg,#14532d 0%,#22c55e 40%,#86efac 100%)"></div><div class="pattern"></div><span class="item-tag">清新自然</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">绿野鲜送 · food3</div><div class="item-desc">绿色健康,清新自然</div></div></a>
</div>
</div>
<!-- 游戏平台 -->
<div class="sec">
<div class="sec-head"><h2 id="s_sec_game_title">游戏平台</h2><span class="sub" id="s_sec_game_sub">3 套风格</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/game1" target="_blank"><div class="item-banner g-game"><div class="glow"></div><div class="pattern"></div><span class="item-tag">赛博朋克</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">NEON ARCADE · game1</div><div class="item-desc">霓虹未来,赛博朋克风格</div></div></a>
<a class="item" href="/game2" target="_blank"><div class="item-banner g-game"><div class="glow" style="background:linear-gradient(135deg,#052e16 0%,#16a34a 40%,#4ade80 100%)"></div><div class="pattern"></div><span class="item-tag">像素复古</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">PIXEL GAMES · game2</div><div class="item-desc">8-bit 像素复古游戏风</div></div></a>
<a class="item" href="/game3" target="_blank"><div class="item-banner g-game"><div class="glow" style="background:linear-gradient(135deg,#083344 0%,#06b6d4 40%,#67e8f9 100%)"></div><div class="pattern"></div><span class="item-tag">云游戏</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">云游平台 · game3</div><div class="item-desc">流线科技,云游戏风格</div></div></a>
</div>
</div>
<!-- 应用商店 -->
<div class="sec">
<div class="sec-head"><h2 id="s_sec_app_title">应用商店</h2><span class="sub" id="s_sec_app_sub">3 套风格</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/app1" target="_blank"><div class="item-banner g-app"><div class="glow" style="background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 40%,#cbd5e1 100%)"></div><div class="pattern" style="opacity:.06"></div><span class="item-tag" style="background:rgba(0,0,0,.08);color:#1e293b;border-color:rgba(0,0,0,.08)">极简白</span><div class="item-go" style="color:#1e293b">→</div></div><div class="item-body"><div class="item-title">极简白 · app1</div><div class="item-desc">Apple 风格,简洁清爽</div></div></a>
<a class="item" href="/app2" target="_blank"><div class="item-banner g-app"><div class="glow" style="background:linear-gradient(135deg,#052e16 0%,#10b981 40%,#34d399 100%)"></div><div class="pattern"></div><span class="item-tag">暗黑模式</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">暗黑应用 · app2</div><div class="item-desc">霓虹绿暗色,科技感十足</div></div></a>
<a class="item" href="/app3" target="_blank"><div class="item-banner g-app"><div class="glow"></div><div class="pattern"></div><span class="item-tag">清新蓝</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">清新蓝 · app3</div><div class="item-desc">明亮配色,活泼现代</div></div></a>
</div>
</div>
<!-- 音乐平台 -->
<div class="sec">
<div class="sec-head"><h2 id="s_sec_music_title">音乐平台</h2><span class="sub" id="s_sec_music_sub">3 套风格</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/music1" target="_blank"><div class="item-banner g-music"><div class="glow" style="background:linear-gradient(135deg,#1e1b4b 0%,#4f46e5 40%,#818cf8 100%)"></div><div class="pattern"></div><span class="item-tag">暗黑播放器</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">云音 Music · music1</div><div class="item-desc">暗夜沉浸式音乐播放器</div></div></a>
<a class="item" href="/music2" target="_blank"><div class="item-banner g-music"><div class="glow" style="background:linear-gradient(135deg,#451a03 0%,#92400e 40%,#d97706 100%)"></div><div class="pattern"></div><span class="item-tag">黑胶复古</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Vinyl · music2</div><div class="item-desc">黑胶唱片复古风格</div></div></a>
<a class="item" href="/music3" target="_blank"><div class="item-banner g-music"><div class="glow"></div><div class="pattern"></div><span class="item-tag">渐变流媒体</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">流媒体 · music3</div><div class="item-desc">紫粉渐变,现代流媒体</div></div></a>
</div>
</div>
<!-- App 候选码 -->
<div class="sec" id="sec-apps" style="display:none">
<div class="sec-head"><h2 id="s_sec_appshow_title">App 候选码</h2><span class="sub" id="s_sec_appshow_sub">精选应用</span><div class="sec-line"></div></div>
<div class="grid" id="appShowGrid"></div>
</div>
<!-- 业务系统 -->
<div class="sec" id="sec-systems" style="display:none">
<div class="sec-head"><h2 id="s_sec_bizsys_title">业务系统</h2><span class="sub" id="s_sec_bizsys_sub">定制 / 年付</span><div class="sec-line"></div></div>
<div class="grid" id="bizSysGrid"></div>
</div>
<!-- Admin -->
<div class="admin-row">
<a class="admin-btn" href="/admin">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
管理后台
</a>
</div>
<!-- 客户咨询表单 -->
<div class="consult-section">
<div class="consult-header">
<h2 id="s_consult_title">需要定制网站?</h2>
<p id="s_consult_desc">只需几百块,即可拥有同款精美站点!留下您的信息,我们尽快联系您</p>
</div>
<form class="consult-form" id="consultForm">
<div class="form-row">
<div class="form-group">
<label for="name">姓名 *</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
</div>
<div class="form-group">
<label for="phone">联系电话 *</label>
<input type="tel" id="phone" name="phone" placeholder="请输入您的手机号" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="company">公司名称</label>
<input type="text" id="company" name="company" placeholder="请输入公司名称(选填)">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱(选填)">
</div>
</div>
<div class="form-group">
<label for="needs">需求描述 *</label>
<textarea id="needs" name="needs" rows="4" placeholder="请描述您的需求,比如:想要一个企业官网,类似科技风格..." required></textarea>
</div>
<button type="submit" class="submit-btn" id="submitBtn">
<span class="btn-text">立即咨询</span>
<span class="btn-loading" style="display:none">提交中...</span>
</button>
</form>
<div class="consult-success" id="consultSuccess" style="display:none">
<div class="success-icon">✓</div>
<h3 id="s_consult_success">提交成功!</h3>
<p>我们会尽快联系您,请保持电话畅通</p>
</div>
</div>
<div class="foot" id="s_footer">Gotest · 多行业网站模板集合 · 点击卡片进入对应模板</div>
<div class="foot" id="s_company" style="margin-top:4px;font-size:11px;opacity:.6"></div>
</div>
<script>
// Theme toggle
(function(){
var toggle = document.getElementById('themeToggle');
toggle.addEventListener('click', function(){
var current = document.documentElement.getAttribute('data-theme');
var next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
});
})();
// 加载后台配置,覆盖默认文案
(async function(){
try {
var resp = await fetch('/api/v1/nav-settings');
var result = await resp.json();
if (result.code !== 0 || !result.data) return;
var s = result.data;
var map = {
s_hero_title: 'nav_hero_title',
s_hero_highlight: 'nav_hero_highlight',
s_hero_desc: 'nav_hero_desc',
s_pill_templates: 'nav_pill_templates',
s_pill_lines: 'nav_pill_lines',
s_pill_per_industry: 'nav_pill_per_industry',
s_pill_responsive: 'nav_pill_responsive',
s_consult_title: 'nav_consult_title',
s_consult_desc: 'nav_consult_desc',
s_consult_success: 'nav_consult_success',
s_footer_text: 'nav_footer_text',
s_company_name: 'nav_company_name',
s_sec_enterprise_title: 'nav_sec_enterprise_title',
s_sec_enterprise_sub: 'nav_sec_enterprise_sub',
s_sec_shop_title: 'nav_sec_shop_title',
s_sec_shop_sub: 'nav_sec_shop_sub',
s_sec_food_title: 'nav_sec_food_title',
s_sec_food_sub: 'nav_sec_food_sub',
s_sec_game_title: 'nav_sec_game_title',
s_sec_game_sub: 'nav_sec_game_sub',
s_sec_app_title: 'nav_sec_app_title',
s_sec_app_sub: 'nav_sec_app_sub',
s_sec_music_title: 'nav_sec_music_title',
s_sec_music_sub: 'nav_sec_music_sub',
s_sec_appshow_title: 'nav_sec_appshow_title',
s_sec_appshow_sub: 'nav_sec_appshow_sub',
s_sec_bizsys_title: 'nav_sec_bizsys_title',
s_sec_bizsys_sub: 'nav_sec_bizsys_sub',
};
for (var elId in map) {
var val = s[map[elId]];
if (val) {
var el = document.getElementById(elId);
if (el) el.textContent = val;
}
}
} catch(e) {}
})();
// 加载 App 候选码
(async function(){
try {
var resp = await fetch('/api/v1/showcase/apps');
var result = await resp.json();
if (result.code !== 0 || !result.data.list || result.data.list.length === 0) return;
var grid = document.getElementById('appShowGrid');
var items = result.data.list;
var gradients = ['#0f766e,#14b8a6,#5eead4','#7c2d12,#ea580c,#fdba74','#1e3a5f,#2563eb,#60a5fa','#581c87,#9333ea,#d8b4fe','#065f46,#10b981,#6ee7b7'];
grid.innerHTML = items.map(function(item, i) {
var g = gradients[i % gradients.length].split(',');
return '<a class="item" href="' + (item.download_url || '#') + '" target="_blank">' +
'<div class="item-banner g-appshow"><div class="glow" style="background:linear-gradient(135deg,' + g[0] + ' 0%,' + g[1] + ' 40%,' + g[2] + ' 100%)"></div><div class="pattern"></div>' +
'<span class="item-tag">' + (item.category || 'App') + '</span><div class="item-go">\u2192</div></div>' +
'<div class="item-body"><div class="item-title">' + item.name + '</div><div class="item-desc">' + (item.description || '') + '</div></div></a>';
}).join('');
document.getElementById('sec-apps').style.display = '';
} catch(e) {}
})();
// 加载业务系统
(async function(){
try {
var resp = await fetch('/api/v1/showcase/systems');
var result = await resp.json();
if (result.code !== 0 || !result.data.list || result.data.list.length === 0) return;
var grid = document.getElementById('bizSysGrid');
var items = result.data.list;
var gradients = ['#1e3a5f,#3b82f6,#93c5fd','#0f766e,#14b8a6,#5eead4','#7c2d12,#ea580c,#fdba74','#581c87,#9333ea,#d8b4fe','#065f46,#10b981,#6ee7b7'];
grid.innerHTML = items.map(function(item, i) {
var g = gradients[i % gradients.length].split(',');
var priceLabel = item.price_type === '定制' ? '定制开发' : (item.price || '咨询报价');
return '<div class="item">' +
'<div class="item-banner g-bizsys"><div class="glow" style="background:linear-gradient(135deg,' + g[0] + ' 0%,' + g[1] + ' 40%,' + g[2] + ' 100%)"></div><div class="pattern"></div>' +
'<span class="item-tag">' + (item.category || '系统') + '</span><div class="item-go">\u2192</div></div>' +
'<div class="item-body"><div class="item-title">' + item.name + '</div><div class="item-desc">' + (item.description || '') + '</div>' +
'<div style="margin-top:8px"><span style="display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;background:rgba(59,130,246,0.1);color:#3b82f6">' + priceLabel + '</span></div></div></div>';
}).join('');
document.getElementById('sec-systems').style.display = '';
} catch(e) {}
})();
document.getElementById('consultForm').addEventListener('submit', async function(e) {
e.preventDefault();
const submitBtn = document.getElementById('submitBtn');
const btnText = submitBtn.querySelector('.btn-text');
const btnLoading = submitBtn.querySelector('.btn-loading');
btnText.style.display = 'none';
btnLoading.style.display = 'inline';
submitBtn.disabled = true;
const formData = {
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
company: document.getElementById('company').value,
email: document.getElementById('email').value,
needs: document.getElementById('needs').value
};
try {
const response = await fetch('/api/v1/customer/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const result = await response.json();
if (result.code === 0) {
document.getElementById('consultForm').style.display = 'none';
document.getElementById('consultSuccess').style.display = 'block';
} else {
alert(result.message || '提交失败,请稍后重试');
btnText.style.display = 'inline';
btnLoading.style.display = 'none';
submitBtn.disabled = false;
}
} catch (error) {
console.error('提交失败:', error);
alert('网络错误,请稍后重试');
btnText.style.display = 'inline';
btnLoading.style.display = 'none';
submitBtn.disabled = false;
}
});
</script>
</body>
</html>