chore(tempLate): 二进制资源迁至 CDN 并改指 hb.cdn 引用
TempLate/assets 二进制已迁移至 hb.cdn.gvsds.com（本地 assets - Copy 仅为上传参考源）， 将根域页面的有效二进制引用改指 CDN： - index.html（icon/ICON.png）、_base（fonts woff2/ttf/otf + hlogos/gnobg.png） - TempLate/1、Members/B-Smooth、Members/TermiNexus（members 头像 / Mascot 图） - .gitignore 排除 assets - Copy；MC/OMC/错误页等子域或死链引用保持原样
TermiNexus committed No files matched your search
@@ -52,4 +52,7 @@ __pycache__/
|
||||
# SVE 前端工程（独立 git 仓库）
|
||||
/SVE/
|
||||
# SVE 的编译文件
|
||||
/TempLate/SVE/
|
||||
/TempLate/SVE/
|
||||
|
||||
# TempLate 二进制资源 CDN 上传源（仅本地参考，hb.cdn.gvsds.com 与其无关联）
|
||||
/TempLate/assets - Copy/
|
||||
@@ -60,7 +60,7 @@
|
||||
<!-- 主持人信息 -->
|
||||
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg p-4 flex items-center gap-4 shadow-sm">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-primary/20 dark:border-blue-500/20 flex-shrink-0">
|
||||
<img src="/assets/members/terminexus.jpg" alt="TermiNexus" class="w-full h-full object-cover">
|
||||
<img src="https://hb.cdn.gvsds.com/assets/members/terminexus.jpg" alt="TermiNexus" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mb-0.5 uppercase tracking-wider">主持 & 主讲</p>
|
||||
@@ -220,7 +220,7 @@
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 font-milky-han">团队的价值不止于项目成果，更在于让每个成员在成长中遇见更好的自己。</p>
|
||||
<div class="flex items-center gap-3 mt-5 pt-4 border-t border-gray-100 dark:border-slate-700">
|
||||
<div class="w-7 h-7 rounded-full overflow-hidden">
|
||||
<img src="/assets/members/terminexus.jpg" alt="" class="w-full h-full object-cover">
|
||||
<img src="https://hb.cdn.gvsds.com/assets/members/terminexus.jpg" alt="" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-text-primary dark:text-white">TermiNexus</p>
|
||||
|
||||
@@ -449,7 +449,7 @@ document.getElementById("header-png").innerHTML = `<div class="flex items-center
|
||||
<h2 class="section-title">关于画师</h2>
|
||||
<div class="about-grid">
|
||||
<div class="avatar-frame">
|
||||
<img src="https://www.gvsds.com/assets/members/quchenyueyuan.jpg" alt="B-Smooth Avatar">
|
||||
<img src="https://hb.cdn.gvsds.com/assets/members/quchenyueyuan.jpg" alt="B-Smooth Avatar">
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<h3>B-Smooth</h3>
|
||||
@@ -495,7 +495,7 @@ document.getElementById("header-png").innerHTML = `<div class="flex items-center
|
||||
<h2 class="section-title">吉祥物企划</h2>
|
||||
<div class="mascot-layout">
|
||||
<div class="mascot-image">
|
||||
<img src="https://www.gvsds.com/assets/img/Mascot/OriginalImage_3_Resize.png" alt="银霜 Silver Frost">
|
||||
<img src="https://hb.cdn.gvsds.com/assets/img/Mascot/OriginalImage_3_Resize.png" alt="银霜 Silver Frost">
|
||||
</div>
|
||||
<div class="mascot-info">
|
||||
<div class="mascot-name-cn">银霜 · 风獠</div>
|
||||
|
||||
@@ -38,7 +38,7 @@ html,body{margin:0;padding:0;}
|
||||
<div class="relative w-40 h-40 mb-6 animate-float">
|
||||
<div class="absolute inset-0 rounded-full border-2 border-dashed border-blue-400/30 animate-[spin_10s_linear_infinite]"></div>
|
||||
<div class="absolute inset-2 rounded-full border border-blue-500/20"></div>
|
||||
<img src="/assets/members/terminexus.jpg" alt="Avatar" class="w-full h-full rounded-full object-cover shadow-lg relative z-10 bg-white">
|
||||
<img src="https://hb.cdn.gvsds.com/assets/members/terminexus.jpg" alt="Avatar" class="w-full h-full rounded-full object-cover shadow-lg relative z-10 bg-white">
|
||||
<div class="absolute bottom-2 right-2 w-4 h-4 bg-green-500 border-2 border-white rounded-full z-20" title="Online"></div>
|
||||
</div>
|
||||
<h1 class="font-serif-display text-3xl font-bold text-slate-800 mb-1 tracking-wide">陈砚辞</h1>
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
<style id="external-tw-style" type="text/tailwindcss">
|
||||
@layer utilities{.content-auto{content-visibility:auto}.menu-shadow{box-shadow:0 8px 16px rgba(0,0,0,.08)}.search-result-highlight{@apply bg-yellow-100 text-primary font-medium}.tag-basic{@apply bg-gray-100 text-gray-700 text-xs px-1.5 py-0.5 rounded}.tag-new{@apply bg-[#e6f7e9] text-[#00b42a] text-xs px-1.5 py-0.5 rounded}.tag-hot{@apply bg-[#fff2e8] text-[#ff7d00] text-xs px-1.5 py-0.5 rounded}.tag-preview{@apply bg-[#e8f3ff] text-[#0066ff] text-xs px-1.5 py-0.5 rounded}.tag-feature{@apply bg-[#f5faff] text-[#0066ff] text-xs px-1.5 py-0.5 rounded}.sidebar-submenu-active{@apply bg-primary/10 text-primary font-medium border-l-2 border-primary}.mobile-menu-enter{@apply opacity-0 translate-x-full}.mobile-menu-enter-active{@apply opacity-100 translate-x-0 transition-all duration-300}.mobile-menu-exit{@apply opacity-100 translate-x-0}.mobile-menu-exit-active{@apply opacity-0 translate-x-full transition-all duration-300}.search-btn-focus{@apply border-primary text-primary}.card-shadow{box-shadow:0 4px 12px rgba(0,0,0,.08)}.file-corner{position:relative}.file-corner::after{content:'';position:absolute;top:0;right:0;border-width:0 24px 24px 0;border-style:solid;border-color:transparent #d1d5db transparent transparent}.scale-in{animation:scaleIn .3s ease-out forwards}@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.slide-up{animation:slideUp .4s ease-out forwards}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-float{animation:float 6s ease-in-out infinite}.animate-pulse-slow{animation:pulse 4s cubic-bezier(.4,0,.6,1) infinite}.window-titlebar{background:linear-gradient(90deg,navy,#1084d0)}.window-border{border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #7b7b7b;border-bottom:2px solid #7b7b7b}.window-border-inset{border-top:2px solid #7b7b7b;border-left:2px solid #7b7b7b;border-right:2px solid #fff;border-bottom:2px solid #fff}.search-btn{@apply h-full px-4 text-gray-500 transition-all duration-200 ease-in-out hover:text-primary flex items-center justify-center rounded-r-md}.search-icon{@apply transition-transform duration-200 ease-in-out}.search-btn:hover .search-icon{transform:scale(1.03)}.search-btn:active .search-icon{transform:scale(0.95)}.search-wrapper{@apply transition-all duration-300 ease-in-out}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}@keyframes gradientAnimation{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}section { position: relative; }section .absolute.left-0,section .absolute.right-0 { overflow: hidden; }@keyframes gradientAnimation {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}
|
||||
/*@font-face{font-family:"Dot Matrix";src:url("https://fonts.cdnfonts.com/css/dot-matrix") format("truetype");font-weight:400;font-style:normal;font-display:swap}
|
||||
@font-face{font-family:"Milky Han Term J Heavy";src:url("https://www.gvsds.com/assets/fonts/MilkyHanTermJHeavy.woff2") format("woff2"),url("https://www.gvsds.com/assets/fonts/MilkyHanTermJHeavy.ttf") format("truetype");font-style:normal;font-display:swap}
|
||||
@font-face{font-family:'Playlist Script';src:url('https://www.gvsds.com/assets/fonts/PlaylistScript.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}*/
|
||||
@font-face{font-family:"Milky Han Term J Heavy";src:url("https://hb.cdn.gvsds.com/assets/fonts/MilkyHanTermJHeavy.woff2") format("woff2"),url("https://hb.cdn.gvsds.com/assets/fonts/MilkyHanTermJHeavy.ttf") format("truetype");font-style:normal;font-display:swap}
|
||||
@font-face{font-family:'Playlist Script';src:url('https://hb.cdn.gvsds.com/assets/fonts/PlaylistScript.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}*/
|
||||
</style>
|
||||
<style id="external-tw-style" type="text/tailwindcss">
|
||||
#header[data-nav-theme="dark"] nav a[data-menu] {color: #555867;}
|
||||
@@ -27,7 +27,7 @@
|
||||
<header id="header" class="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm border-b border-gray-100 bg-[linear-gradient(120deg,#ffffff,#f0f8ff,#f8f0ff,#ffffff)] bg-[size:400%_400%] animate-[gradientAnimation_15s_ease_infinite] dark:bg-gray-900 dark:border-gray-800 dark:bg-[linear-gradient(120deg,#111827,#1e293b,#271e3b,#111827)] transition-all duration-300 ease-in-out">
|
||||
<div class="flex items-center justify-between h-16 px-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center text-primary text-xl font-bold h-10" id="header-png"><img src="https://www.gvsds.com/assets/hlogos/gnobg.png" style="height: 100%; object-fit: contain; margin-top: -8px;"></div>
|
||||
<div class="flex items-center text-primary text-xl font-bold h-10" id="header-png"><img src="https://hb.cdn.gvsds.com/assets/hlogos/gnobg.png" style="height: 100%; object-fit: contain; margin-top: -8px;"></div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-text-primary text-xl transition-all duration-200 hover:scale-110"><i class="fa fa-bars"></i></button>
|
||||
</div>
|
||||
<nav class="hidden md:flex items-center space-x-6">
|
||||
|
||||
@@ -1,316 +0,0 @@
|
||||
const MenuData1 = {
|
||||
model: {
|
||||
title: "大模型",
|
||||
description: "一站式为企业和开发者提供大模型能力体系，助力云上开发者轻松完成 AI 落地。",
|
||||
submenus: [{
|
||||
id: "experience",
|
||||
name: "AI 体验中心",
|
||||
icon: "fa-rocket"
|
||||
},
|
||||
{
|
||||
id: "tongyi-models",
|
||||
name: "通义大模型",
|
||||
icon: "fa-brain"
|
||||
},
|
||||
{
|
||||
id: "services",
|
||||
name: "大模型服务",
|
||||
icon: "fa-cogs"
|
||||
},
|
||||
{
|
||||
id: "tools",
|
||||
name: "智能工具",
|
||||
icon: "fa-wrench"
|
||||
}
|
||||
],
|
||||
contents: {
|
||||
experience: [{
|
||||
type: "two-cards",
|
||||
cards: [{
|
||||
name: "AI 体验馆",
|
||||
description: "免费体验前沿 AI 应用和最新通义系列大模型",
|
||||
link: "/ai-experience",
|
||||
target: "_blank"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼",
|
||||
description: "为企业打造的大模型服务与应用开发平台",
|
||||
link: "/bailian-platform",
|
||||
target: "_self"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "four-columns",
|
||||
title: "通义大模型家族",
|
||||
subtitle: "更强效果、更高性能、更优价格",
|
||||
items: [{
|
||||
name: "通义万相2.5 - 图生视频 - Preview",
|
||||
tag: "preview",
|
||||
description: "稳定保持图像主体、风格和文字等细节信息",
|
||||
link: "/tongyi-wanxiang/2.5/image-to-video"
|
||||
},
|
||||
{
|
||||
name: "通义百聆 - Fun · ASR",
|
||||
tag: "new",
|
||||
description: "支持中英文自由切换，具备更强的噪声鲁棒性",
|
||||
link: "/tongyi-bailing/fun-asr"
|
||||
},
|
||||
{
|
||||
name: "通义千问3 - VL · Plus",
|
||||
description: "视觉 Coding、空间感知、多模态思考等全面升级",
|
||||
link: "/tongyi-qianwen/3/vl-plus"
|
||||
},
|
||||
{
|
||||
name: "通义万相2.5 - 文生视频 - Preview",
|
||||
tag: "preview",
|
||||
description: "丝滑动态能力，电影美学控制",
|
||||
link: "/tongyi-wanxiang/2.5/text-to-video"
|
||||
},
|
||||
{
|
||||
name: "通义千问3 - Omni · Flash",
|
||||
description: "支持 119 种语言文本交互",
|
||||
link: "/tongyi-qianwen/3/omni-flash"
|
||||
},
|
||||
{
|
||||
name: "通义千问 - Image",
|
||||
description: "卓越的文本渲染能力",
|
||||
link: "/tongyi-qianwen/image"
|
||||
},
|
||||
{
|
||||
name: "通义千问3 - Max",
|
||||
tag: "hot",
|
||||
description: "达到领域 SOTA 水平",
|
||||
link: "/tongyi-qianwen/3/max",
|
||||
target: "_blank"
|
||||
},
|
||||
{
|
||||
name: "通义千问3",
|
||||
description: "Qwen3 最强 235B 旗舰版",
|
||||
link: "/tongyi-qianwen/3",
|
||||
target: "_blank"
|
||||
},
|
||||
{
|
||||
name: "通义千问 - Qwen3 · Coder",
|
||||
description: "强大的 Coding Agent 能力",
|
||||
link: "/tongyi-qianwen/qwen3-coder"
|
||||
},
|
||||
{
|
||||
name: "通义千问 - Plus",
|
||||
description: "Owen-Plus:Latest 升级",
|
||||
link: "/tongyi-qianwen/plus"
|
||||
},
|
||||
{
|
||||
name: "通义千问 - Flash",
|
||||
description: "思考和非思考模式融合",
|
||||
link: "/tongyi-qianwen/flash"
|
||||
},
|
||||
{
|
||||
name: "通义千问3 - Image",
|
||||
tag: "new",
|
||||
description: "写实质感细腻画面",
|
||||
link: "/tongyi-qianwen/3/image"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "four-columns",
|
||||
title: "大模型服务平台",
|
||||
items: [{
|
||||
name: "大模型服务平台百炼 - 模型体验",
|
||||
description: "在线体验全尺寸、多种模态的模型效果",
|
||||
link: "/bailian-platform/model-experience"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 微调与部署",
|
||||
description: "一站式大模型服务平台",
|
||||
link: "/bailian-platform/fine-tune-deploy"
|
||||
},
|
||||
{
|
||||
name: "人工智能平台 PAI",
|
||||
description: "AI Native 的算法工程平台",
|
||||
link: "/pai-platform",
|
||||
target: "_blank"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 应用模版",
|
||||
tag: "new",
|
||||
description: "丰富多元化的应用模版",
|
||||
link: "/bailian-platform/application-templates"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - MCP服务",
|
||||
tag: "new",
|
||||
description: "全生命周期MCP托管",
|
||||
link: "/bailian-platform/mcp-service"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 智能体",
|
||||
description: "构建企业级 Agent",
|
||||
link: "/bailian-platform/agent-builder"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 全秒",
|
||||
description: "多模态内容创作工具",
|
||||
link: "/bailian-platform/quanmiao"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 通义法睿",
|
||||
description: "法律智能助手",
|
||||
link: "/bailian-platform/tongyi-farui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "four-columns",
|
||||
title: "大模型服务平台",
|
||||
items: [{
|
||||
name: "大模型服务平台百炼 - 模型体验",
|
||||
description: "在线体验全尺寸、多种模态的模型效果",
|
||||
link: "/bailian-platform/model-experience"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 微调与部署",
|
||||
description: "一站式大模型服务平台",
|
||||
link: "/bailian-platform/fine-tune-deploy"
|
||||
},
|
||||
{
|
||||
name: "人工智能平台 PAI",
|
||||
description: "AI Native 的算法工程平台",
|
||||
link: "/pai-platform",
|
||||
target: "_blank"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 应用模版",
|
||||
tag: "new",
|
||||
description: "丰富多元化的应用模版",
|
||||
link: "/bailian-platform/application-templates"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - MCP服务",
|
||||
tag: "new",
|
||||
description: "全生命周期MCP托管",
|
||||
link: "/bailian-platform/mcp-service"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 智能体",
|
||||
description: "构建企业级 Agent",
|
||||
link: "/bailian-platform/agent-builder"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 全秒",
|
||||
description: "多模态内容创作工具",
|
||||
link: "/bailian-platform/quanmiao"
|
||||
},
|
||||
{
|
||||
name: "大模型服务平台百炼 - 通义法睿",
|
||||
description: "法律智能助手",
|
||||
link: "/bailian-platform/tongyi-farui"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"tongyi-models": [{
|
||||
type: "four-columns",
|
||||
title: "通义大模型家族",
|
||||
subtitle: "更强效果、更高性能、更优价格",
|
||||
items: [{
|
||||
name: "通义千问3 - Omni · Flash",
|
||||
description: "支持 119 种语言文本交互",
|
||||
link: "/tongyi-qianwen/3/omni-flash"
|
||||
},
|
||||
{
|
||||
name: "通义千问 - Image",
|
||||
description: "卓越的文本渲染能力",
|
||||
link: "/tongyi-qianwen/image"
|
||||
},
|
||||
{
|
||||
name: "通义千问3 - Max",
|
||||
tag: "hot",
|
||||
description: "达到领域 SOTA 水平",
|
||||
link: "/tongyi-qianwen/3/max",
|
||||
target: "_blank"
|
||||
},
|
||||
{
|
||||
name: "通义千问3",
|
||||
description: "Qwen3 最强 235B 旗舰版",
|
||||
link: "/tongyi-qianwen/3",
|
||||
target: "_blank"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
const MenuData2 = {
|
||||
solutions: {
|
||||
title: "解决方案",
|
||||
description: "为各行业提供完整的人工智能解决方案，加速业务创新与数字化转型。",
|
||||
submenus: [{
|
||||
id: "industry",
|
||||
name: "行业解决方案",
|
||||
icon: "fa-building"
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
name: "企业级方案",
|
||||
icon: "fa-briefcase"
|
||||
},
|
||||
{
|
||||
id: "developer",
|
||||
name: "开发者方案",
|
||||
icon: "fa-code"
|
||||
},
|
||||
{
|
||||
id: "case",
|
||||
name: "成功案例",
|
||||
icon: "fa-trophy"
|
||||
}
|
||||
],
|
||||
contents: {
|
||||
industry: [{
|
||||
type: "four-columns",
|
||||
title: "行业解决方案",
|
||||
items: [{
|
||||
name: "金融行业AI解决方案",
|
||||
tag: "hot",
|
||||
description: "智能风控、智能投顾、智能客服",
|
||||
link: "/solutions/finance"
|
||||
},
|
||||
{
|
||||
name: "智能制造解决方案",
|
||||
description: "预测性维护、质量检测、智能排产",
|
||||
link: "/solutions/manufacturing"
|
||||
},
|
||||
{
|
||||
name: "智慧零售解决方案",
|
||||
description: "智能推荐、客流分析、无人零售",
|
||||
link: "/solutions/retail"
|
||||
},
|
||||
{
|
||||
name: "智慧医疗解决方案",
|
||||
tag: "new",
|
||||
description: "医学影像分析、智能诊断辅助",
|
||||
link: "/solutions/medical"
|
||||
}
|
||||
]
|
||||
}],
|
||||
enterprise: [{
|
||||
type: "two-cards",
|
||||
cards: [{
|
||||
name: "企业知识管理平台",
|
||||
description: "基于大模型的智能知识检索与分析平台",
|
||||
link: "/solutions/enterprise/knowledge",
|
||||
target: "_self"
|
||||
},
|
||||
{
|
||||
name: "智能客户服务系统",
|
||||
description: "全渠道智能客服解决方案，提升客户满意度",
|
||||
link: "/solutions/enterprise/service",
|
||||
target: "_self"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
Before Width: | Height: | Size: 438 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 328 KiB |
|
Before Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 341 KiB |
@@ -1,228 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SVG外部加载 + 黑色主题</title>
|
||||
<!-- 引入Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<script>
|
||||
// 配置Tailwind自定义工具类
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
'xs': '360px',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
.svg-container {
|
||||
@apply w-full h-auto transition-all duration-500 ease-in-out;
|
||||
}
|
||||
.svg-container-desktop {
|
||||
@apply max-w-5xl max-h-[80vh];
|
||||
}
|
||||
.svg-container-mobile {
|
||||
@apply max-w-full max-h-[60vh];
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-black min-h-screen flex items-center justify-center p-4">
|
||||
<!-- 外部SVG加载容器 - 响应式尺寸适配 -->
|
||||
<object id="svg-container"
|
||||
data="./ICON.svg"
|
||||
type="image/svg+xml"
|
||||
class="svg-container svg-container-desktop md:svg-container-desktop xs:svg-container-mobile object-contain">
|
||||
<!-- 加载失败时显示的替代内容 -->
|
||||
<div class="text-white text-center p-8">
|
||||
<i class="fa fa-exclamation-triangle text-4xl mb-4 text-yellow-400"></i>
|
||||
<p>无法加载SVG文件</p>
|
||||
<p class="text-sm text-gray-400 mt-2">请检查文件路径是否正确</p>
|
||||
</div>
|
||||
</object>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const svgObject = document.getElementById('svg-container');
|
||||
let isMobile = window.innerWidth < 768;
|
||||
|
||||
// 根据屏幕尺寸动态调整SVG容器
|
||||
function adjustSvgContainer() {
|
||||
isMobile = window.innerWidth < 768;
|
||||
if (isMobile) {
|
||||
svgObject.classList.remove('svg-container-desktop');
|
||||
svgObject.classList.add('svg-container-mobile');
|
||||
} else {
|
||||
svgObject.classList.remove('svg-container-mobile');
|
||||
svgObject.classList.add('svg-container-desktop');
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化时调整
|
||||
adjustSvgContainer();
|
||||
|
||||
// 窗口大小改变时重新调整
|
||||
window.addEventListener('resize', adjustSvgContainer);
|
||||
|
||||
// 处理SVG加载完成事件
|
||||
svgObject.addEventListener('load', () => {
|
||||
try {
|
||||
const svgDoc = svgObject.contentDocument;
|
||||
const svgRoot = svgDoc.querySelector('svg');
|
||||
|
||||
// 设置SVG视口以确保响应式行为
|
||||
svgRoot.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||||
svgRoot.removeAttribute('width');
|
||||
svgRoot.removeAttribute('height');
|
||||
svgRoot.setAttribute('width', '100%');
|
||||
svgRoot.setAttribute('height', '100%');
|
||||
|
||||
// 添加SVG内部样式适配黑色主题
|
||||
const style = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
|
||||
style.textContent = `
|
||||
svg {
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
[name^="node_"] {
|
||||
opacity: 0;
|
||||
transform-origin: center;
|
||||
/* 根据需要调整SVG元素颜色以适应黑色背景 */
|
||||
fill: #fff;
|
||||
stroke: #ddd;
|
||||
}
|
||||
/* 文本元素特殊处理 */
|
||||
text {
|
||||
fill: #fff !important;
|
||||
font-size: ${isMobile ? '0.8em' : '1em'} !important;
|
||||
}
|
||||
`;
|
||||
svgRoot.prepend(style);
|
||||
|
||||
// 获取并排序所有节点
|
||||
const nodes = Array.from(svgDoc.querySelectorAll('[name^="node_"]'))
|
||||
.sort((a, b) => {
|
||||
const numA = parseInt(a.getAttribute('name').split('_')[1]);
|
||||
const numB = parseInt(b.getAttribute('name').split('_')[1]);
|
||||
return numA - numB;
|
||||
});
|
||||
|
||||
// 动画参数 - 移动端使用更快的动画节奏
|
||||
const delayBetweenNodes = isMobile ? 150 : 200; // 节点间延迟
|
||||
const animationDuration = isMobile ? 500 : 600; // 动画持续时间
|
||||
|
||||
// 为每个节点添加动画
|
||||
nodes.forEach((node, index) => {
|
||||
const startTime = index * delayBetweenNodes;
|
||||
|
||||
// 透明度动画
|
||||
const animOpacity = svgDoc.createElementNS("http://www.w3.org/2000/svg", "animate");
|
||||
animOpacity.setAttribute("attributeName", "opacity");
|
||||
animOpacity.setAttribute("from", "0");
|
||||
animOpacity.setAttribute("to", "1");
|
||||
animOpacity.setAttribute("begin", `${startTime}ms`);
|
||||
animOpacity.setAttribute("dur", `${animationDuration}ms`);
|
||||
animOpacity.setAttribute("fill", "freeze");
|
||||
|
||||
// 缩放动画
|
||||
const animScale = svgDoc.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
|
||||
animScale.setAttribute("attributeName", "transform");
|
||||
animScale.setAttribute("type", "scale");
|
||||
animScale.setAttribute("from", "0.9");
|
||||
animScale.setAttribute("to", "1");
|
||||
animScale.setAttribute("begin", `${startTime}ms`);
|
||||
animScale.setAttribute("dur", `${animationDuration}ms`);
|
||||
animScale.setAttribute("fill", "freeze");
|
||||
|
||||
node.appendChild(animOpacity);
|
||||
node.appendChild(animScale);
|
||||
|
||||
// 根据节点类型添加位置动画
|
||||
switch(node.tagName.toLowerCase()) {
|
||||
case "rect":
|
||||
case "image": {
|
||||
const currentX = parseFloat(node.getAttribute("x"));
|
||||
const animX = svgDoc.createElementNS("http://www.w3.org/2000/svg", "animate");
|
||||
animX.setAttribute("attributeName", "x");
|
||||
animX.setAttribute("from", (currentX - 10).toString());
|
||||
animX.setAttribute("to", currentX.toString());
|
||||
animX.setAttribute("begin", `${startTime}ms`);
|
||||
animX.setAttribute("dur", `${animationDuration}ms`);
|
||||
animX.setAttribute("fill", "freeze");
|
||||
node.appendChild(animX);
|
||||
break;
|
||||
}
|
||||
|
||||
case "circle":
|
||||
case "ellipse": {
|
||||
const currentCx = parseFloat(node.getAttribute("cx"));
|
||||
const animCx = svgDoc.createElementNS("http://www.w3.org/2000/svg", "animate");
|
||||
animCx.setAttribute("attributeName", "cx");
|
||||
animCx.setAttribute("from", (currentCx - 10).toString());
|
||||
animCx.setAttribute("to", currentCx.toString());
|
||||
animCx.setAttribute("begin", `${startTime}ms`);
|
||||
animCx.setAttribute("dur", `${animationDuration}ms`);
|
||||
animCx.setAttribute("fill", "freeze");
|
||||
node.appendChild(animCx);
|
||||
break;
|
||||
}
|
||||
|
||||
case "polygon":
|
||||
case "polyline":
|
||||
case "line": {
|
||||
const points = node.getAttribute("points");
|
||||
if (points) {
|
||||
const fromPoints = points.split(' ').map(coord => {
|
||||
const [x, y] = coord.split(',');
|
||||
return `${parseFloat(x) - 10},${y}`;
|
||||
}).join(' ');
|
||||
const animPoints = svgDoc.createElementNS("http://www.w3.org/2000/svg", "animate");
|
||||
animPoints.setAttribute("attributeName", "points");
|
||||
animPoints.setAttribute("from", fromPoints);
|
||||
animPoints.setAttribute("to", points);
|
||||
animPoints.setAttribute("begin", `${startTime}ms`);
|
||||
animPoints.setAttribute("dur", `${animationDuration}ms`);
|
||||
animPoints.setAttribute("fill", "freeze");
|
||||
node.appendChild(animPoints);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case "text": {
|
||||
const currentX = parseFloat(node.getAttribute("x"));
|
||||
const animX = svgDoc.createElementNS("http://www.w3.org/2000/svg", "animate");
|
||||
animX.setAttribute("attributeName", "x");
|
||||
animX.setAttribute("from", (currentX - 10).toString());
|
||||
animX.setAttribute("to", currentX.toString());
|
||||
animX.setAttribute("begin", `${startTime}ms`);
|
||||
animX.setAttribute("dur", `${animationDuration}ms`);
|
||||
animX.setAttribute("fill", "freeze");
|
||||
node.appendChild(animX);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error processing SVG:", error);
|
||||
}
|
||||
});
|
||||
|
||||
// 处理SVG加载失败情况
|
||||
svgObject.addEventListener('error', () => {
|
||||
console.error("Failed to load SVG file");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 341 KiB |
|
Before Width: | Height: | Size: 307 KiB |
|
Before Width: | Height: | Size: 307 KiB |
|
Before Width: | Height: | Size: 437 KiB |
|
Before Width: | Height: | Size: 453 KiB |
|
Before Width: | Height: | Size: 402 KiB |
|
Before Width: | Height: | Size: 233 KiB |
|
Before Width: | Height: | Size: 498 KiB |
|
Before Width: | Height: | Size: 602 KiB |
|
Before Width: | Height: | Size: 406 KiB |
|
Before Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 372 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 753 KiB |
|
Before Width: | Height: | Size: 718 KiB |
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 762 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 321 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 594 KiB |
|
Before Width: | Height: | Size: 834 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 482 KiB |
|
Before Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 823 B |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 8.6 KiB |
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>银河锋锐软件开发工作室</title>
|
||||
<link rel="icon" href="/assets/icon/ICON.png">
|
||||
<link rel="icon" href="https://hb.cdn.gvsds.com/assets/icon/ICON.png">
|
||||
<script type="module" crossorigin src="/GVSite/index-D6E7GCNx.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/GVSite/index-C4rcZEW_.css">
|
||||
</head>
|
||||
|
||||