style(gvsite): 官网全站企业化,统一商务蓝配色
- 16 个视图多彩色(紫/粉/绿/橙)收敛为蓝色系 - About 页 CTA 改企业蓝按钮,导航 header 渐变去除淡紫 - 深色段粒子动画收敛为静态光晕,吉祥物板块酒红调蓝 - deploy.ps1 补 UTF-8 BOM,修复 PowerShell 5.1 中文解析报错
This commit is contained in:
1 parent
2c50a8070b
commit
4c1cdb3c73
17 files changed
+217
-223
No files matched your search
+1
-1
@@ -1,4 +1,4 @@
|
||||
# GVSite 前端部署脚本:备份原站页面 → 全量编译 → 同步产物到生产目录(TempLate)
|
||||
# GVSite 前端部署脚本:备份原站页面 → 全量编译 → 同步产物到生产目录(TempLate)
|
||||
#
|
||||
# 用途:
|
||||
# 1. 备份已被 Vue 页面替换的 TempLate 原始文件到 backup/www
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- ===== 顶部导航(对齐原站 _base) ===== -->
|
||||
<header
|
||||
id="header"
|
||||
class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out 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"
|
||||
class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out bg-white shadow-sm border-b border-gray-100 bg-[linear-gradient(120deg,#ffffff,#f0f8ff,#eef4ff,#ffffff)] bg-[size:400%_400%] animate-[gradientAnimation_15s_ease_infinite] dark:bg-gray-900 dark:border-gray-800"
|
||||
:class="
|
||||
navTheme === 'light'
|
||||
? '!bg-transparent !bg-none !shadow-none !border-transparent'
|
||||
|
||||
+37
-40
@@ -3,11 +3,11 @@
|
||||
<!-- 顶部标语 -->
|
||||
<section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-white dark:bg-slate-900 transition-colors duration-300">
|
||||
<div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" style="background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 40px 40px;"></div>
|
||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-violet-300/20 dark:bg-violet-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-300/20 dark:bg-blue-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-sky-300/20 dark:bg-sky-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="relative z-10 text-center px-6">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 text-sm text-gray-500 dark:text-gray-400 mb-8 reveal">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> 非营利 · 开源 · 共建
|
||||
<span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> 非营利 · 开源 · 共建
|
||||
</div>
|
||||
<h2 class="text-5xl md:text-7xl lg:text-8xl font-black text-gray-900 dark:text-white leading-none tracking-tight mb-4 reveal"> 银河锋锐 </h2>
|
||||
<h3 class="text-2xl md:text-3xl font-light text-gray-400 dark:text-gray-500 tracking-widest mb-8 reveal" style="transition-delay:150ms"> SOFTWARE DEVELOPMENT STUDIO </h3>
|
||||
@@ -33,8 +33,8 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/10 rounded-2xl overflow-hidden">
|
||||
<div v-for="(p, i) in philosophies" :key="i" class="group relative bg-gray-950 dark:bg-black p-8 md:p-10 flex flex-col gap-6 hover:bg-white/5 transition-colors duration-500 reveal" :style="{ transitionDelay: (i * 150) + 'ms' }">
|
||||
<div class="text-6xl font-black text-white/10 group-hover:text-violet-500/30 transition-colors duration-500 leading-none">0{{ i + 1 }}</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center group-hover:bg-violet-500/20 transition-colors duration-300" :class="p.iconBg">
|
||||
<div class="text-6xl font-black text-white/10 group-hover:text-blue-500/30 transition-colors duration-500 leading-none">0{{ i + 1 }}</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center group-hover:bg-blue-500/20 transition-colors duration-300" :class="p.iconBg">
|
||||
<i class="fa" :class="p.icon"></i>
|
||||
</div>
|
||||
<div>
|
||||
@@ -54,15 +54,15 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div class="reveal">
|
||||
<span class="text-xs font-bold tracking-widest text-violet-500 uppercase">Who We Are</span>
|
||||
<span class="text-xs font-bold tracking-widest text-blue-500 uppercase">Who We Are</span>
|
||||
<h3 class="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mt-3 leading-tight"> 我们是一群<br>
|
||||
<span class="relative inline-block"> 热爱技术的人 <svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none"><path d="M2 10 Q75 2 150 8 Q225 14 298 6" stroke="#8b5cf6" stroke-width="3" stroke-linecap="round" fill="none" /></svg></span>
|
||||
<span class="relative inline-block"> 热爱技术的人 <svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none"><path d="M2 10 Q75 2 150 8 Q225 14 298 6" stroke="#2563eb" stroke-width="3" stroke-linecap="round" fill="none" /></svg></span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="space-y-6 reveal" style="transition-delay:200ms">
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-violet-300 dark:border-violet-600 pl-5"> 自成立以来,始终以开源精神驱动前行,在 GitHub 等平台分享项目、文章与经验,让技术的价值触达更多人。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-blue-300 dark:border-blue-600 pl-5"> 自成立以来,始终以开源精神驱动前行,在 GitHub 等平台分享项目、文章与经验,让技术的价值触达更多人。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-sky-300 dark:border-sky-600 pl-5"> 我们不追逐商业利益,通过编程兼职保障基本运转,让这里永远是一片纯粹的技术沃土。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-emerald-300 dark:border-emerald-600 pl-5"> 这里不只是写代码的地方,更是结识同好、分享日常的温暖港湾。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-blue-300 dark:border-blue-600 pl-5"> 这里不只是写代码的地方,更是结识同好、分享日常的温暖港湾。 </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal flex flex-wrap gap-3 items-start content-start" style="transition-delay:300ms">
|
||||
@@ -102,12 +102,12 @@
|
||||
|
||||
<!-- ===== Founders 创始人合影 ===== -->
|
||||
<section class="relative min-h-[80vh] flex flex-col bg-slate-50 dark:bg-slate-900 overflow-hidden transition-colors duration-300">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/4 w-[800px] h-[800px] bg-gradient-to-br from-violet-200/40 to-sky-200/40 dark:from-violet-900/20 dark:to-sky-900/20 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/4 w-[800px] h-[800px] bg-gradient-to-br from-blue-200/40 to-sky-200/40 dark:from-blue-900/20 dark:to-sky-900/20 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute -left-32 top-1/4 w-64 h-64 rounded-full border border-gray-200/50 dark:border-slate-700/50 pointer-events-none"></div>
|
||||
<div class="absolute -right-32 bottom-1/4 w-96 h-96 rounded-full border border-gray-200/50 dark:border-slate-700/50 pointer-events-none"></div>
|
||||
<div class="relative z-10 container mx-auto lg:max-w-[85%] px-6 py-12 flex flex-col flex-grow">
|
||||
<div class="text-center mb-8 reveal">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 text-xs font-bold tracking-widest uppercase mb-4">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs font-bold tracking-widest uppercase mb-4">
|
||||
<i class="fa fa-users text-[10px]"></i> The Founders
|
||||
</div>
|
||||
<h3 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white tracking-tight"> 初心如磐,携手同行 </h3>
|
||||
@@ -115,7 +115,7 @@
|
||||
</div>
|
||||
<div class="flex-grow flex items-center justify-center reveal" style="transition-delay: 150ms">
|
||||
<div class="relative group w-full h-full max-h-[70vh]">
|
||||
<div class="relative w-full h-full rounded-3xl overflow-hidden bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm shadow-xl shadow-gray-200/50 dark:shadow-black/20 border border-white dark:border-slate-700 transition-all duration-500 hover:shadow-2xl hover:shadow-violet-500/10">
|
||||
<div class="relative w-full h-full rounded-3xl overflow-hidden bg-white/80 dark:bg-slate-800/50 backdrop-blur-sm shadow-xl shadow-gray-200/50 dark:shadow-black/20 border border-white dark:border-slate-700 transition-all duration-500 hover:shadow-2xl hover:shadow-blue-500/10">
|
||||
<img src="/assets/img/Us/FourPeople.jpg" alt="银河锋锐创始人合影" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 md:p-8 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none">
|
||||
<div class="flex items-end justify-between">
|
||||
@@ -132,12 +132,12 @@
|
||||
</div>
|
||||
<div class="absolute -top-3 -right-3 md:-top-5 md:-right-5 z-20">
|
||||
<div class="px-4 py-2 bg-white dark:bg-slate-700 rounded-xl shadow-lg border border-gray-100 dark:border-slate-600 rotate-6 group-hover:rotate-12 transition-transform duration-500">
|
||||
<span class="text-rose-500 font-bold text-sm flex items-center gap-1">
|
||||
<span class="text-blue-500 font-bold text-sm flex items-center gap-1">
|
||||
<i class="fa fa-heart"></i> 4 Founders
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -bottom-3 -left-3 w-20 h-20 border-b-2 border-l-2 border-violet-400/50 rounded-bl-3xl pointer-events-none group-hover:border-violet-400 transition-colors"></div>
|
||||
<div class="absolute -bottom-3 -left-3 w-20 h-20 border-b-2 border-l-2 border-blue-400/50 rounded-bl-3xl pointer-events-none group-hover:border-blue-400 transition-colors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 text-center reveal" style="transition-delay: 300ms">
|
||||
@@ -152,18 +152,15 @@
|
||||
<!-- ===== Our Belief 信念 ===== -->
|
||||
<section class="relative py-32 md:py-48 bg-gray-950 dark:bg-black overflow-hidden transition-colors duration-300">
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div class="absolute top-1/3 left-10 w-2 h-2 rounded-full bg-violet-400/60 animate-ping" style="animation-duration:3s"></div>
|
||||
<div class="absolute top-2/3 left-1/4 w-1.5 h-1.5 rounded-full bg-sky-400/60 animate-ping" style="animation-duration:4s;animation-delay:1s"></div>
|
||||
<div class="absolute top-1/4 right-1/3 w-2 h-2 rounded-full bg-emerald-400/60 animate-ping" style="animation-duration:3.5s;animation-delay:0.5s"></div>
|
||||
<div class="absolute top-3/4 right-1/4 w-1.5 h-1.5 rounded-full bg-amber-400/60 animate-ping" style="animation-duration:5s;animation-delay:2s"></div>
|
||||
<div class="absolute top-1/2 right-10 w-1 h-1 rounded-full bg-pink-400/60 animate-ping" style="animation-duration:2.5s;animation-delay:1.5s"></div>
|
||||
<div class="absolute top-1/4 left-1/4 w-72 h-72 bg-blue-500/10 rounded-full blur-[120px]"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-sky-500/10 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
<div class="relative z-10 container mx-auto lg:max-w-[70%] px-6 text-center">
|
||||
<div class="reveal">
|
||||
<span class="text-xs font-bold tracking-widest text-white/30 uppercase">Our Belief</span>
|
||||
</div>
|
||||
<blockquote class="mt-8 reveal" style="transition-delay:150ms">
|
||||
<p class="text-3xl md:text-5xl lg:text-6xl font-black text-white leading-tight"> 每一份对技术的<span class="text-violet-400">热爱</span>,<br class="hidden md:block"> 都能汇聚成<span class="text-sky-400">改变</span>的力量。 </p>
|
||||
<p class="text-3xl md:text-5xl lg:text-6xl font-black text-white leading-tight"> 每一份对技术的<span class="text-blue-400">热爱</span>,<br class="hidden md:block"> 都能汇聚成<span class="text-sky-400">改变</span>的力量。 </p>
|
||||
</blockquote>
|
||||
<p class="mt-10 text-gray-500 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto reveal" style="transition-delay:300ms"> 无论你是刚踏入技术领域的新手,还是深耕行业的资深开发者——<br> 只要怀揣好奇,这里就是你的地方。 </p>
|
||||
<div class="mt-8 reveal" style="transition-delay:400ms">
|
||||
@@ -182,13 +179,13 @@
|
||||
</div>
|
||||
<div class="relative z-10 container mx-auto lg:max-w-[60%] px-6 text-center">
|
||||
<div class="reveal">
|
||||
<span class="text-xs font-bold tracking-widest text-violet-500 uppercase">Join Us</span>
|
||||
<span class="text-xs font-bold tracking-widest text-blue-500 uppercase">Join Us</span>
|
||||
<h3 class="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mt-4 mb-6"> 期待与你同行 </h3>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg max-w-lg mx-auto leading-relaxed"> 我们欢迎<strong class="text-violet-500 font-semibold">画师</strong>、 <strong class="text-sky-500 font-semibold">程序员</strong>、 <strong class="text-emerald-500 font-semibold">测试人员</strong>, 以及所有愿意与我们一起探索技术边界的你。</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg max-w-lg mx-auto leading-relaxed"> 我们欢迎<strong class="text-blue-500 font-semibold">画师</strong>、 <strong class="text-sky-500 font-semibold">程序员</strong>、 <strong class="text-blue-500 font-semibold">测试人员</strong>, 以及所有愿意与我们一起探索技术边界的你。</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12 mb-12 reveal" style="transition-delay:200ms">
|
||||
<div v-for="(role, i) in joinRoles" :key="i" :class="role.card" class="group p-6 rounded-2xl border-2 hover:scale-105 transition-all duration-300 cursor-default">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-violet-200 transition-colors" :class="role.iconBg">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200 transition-colors" :class="role.iconBg">
|
||||
<i class="fa text-xl" :class="role.icon"></i>
|
||||
</div>
|
||||
<h5 class="font-bold text-gray-900 dark:text-white mb-1">{{ role.name }}</h5>
|
||||
@@ -196,8 +193,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal" style="transition-delay:400ms">
|
||||
<a :href="joinEmailLink" class="group relative inline-flex items-center gap-3 px-10 py-5 bg-gray-900 dark:bg-white rounded-2xl text-white dark:text-gray-900 font-bold text-lg transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_60px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_20px_60px_rgba(255,255,255,0.15)] overflow-hidden">
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-violet-600 via-sky-500 to-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
|
||||
<a :href="joinEmailLink" class="group relative inline-flex items-center gap-3 px-10 py-5 bg-blue-600 dark:bg-blue-600 rounded-2xl text-white font-bold text-lg transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_60px_rgba(37,99,235,0.3)] overflow-hidden">
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-blue-600 via-sky-500 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
|
||||
<i class="fa fa-paper-plane relative z-10 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300"></i>
|
||||
<span class="relative z-10">发送申请邮件</span>
|
||||
</a>
|
||||
@@ -217,17 +214,17 @@
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">开发类</h3>
|
||||
<ul class="space-y-3">
|
||||
<li v-for="item in devFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
|
||||
<li v-for="item in devFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-blue-600 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">设计类</h3>
|
||||
<ul class="space-y-3">
|
||||
<li v-for="item in designFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
|
||||
<li v-for="item in designFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-blue-600 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
|
||||
</ul>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mt-6 mb-4">其他</h3>
|
||||
<ul class="space-y-3">
|
||||
<li v-for="item in otherFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-gray-900 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
|
||||
<li v-for="item in otherFields" :key="item" class="flex items-center"><div class="w-2 h-2 bg-blue-600 rounded-full mr-3"></div><span class="text-gray-700">{{ item }}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -242,15 +239,15 @@
|
||||
<i class="fa fa-envelope text-2xl text-gray-900 dark:text-white mr-4"></i>
|
||||
<div>
|
||||
<p class="text-gray-900 dark:text-white font-medium">GVSADS</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">微信搜索添加 <span class="inline-block w-2 h-2 bg-gray-900 dark:bg-white animate-blink ml-1 align-middle"></span></p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">微信搜索添加 <span class="inline-block w-2 h-2 bg-blue-600 dark:bg-white animate-blink ml-1 align-middle"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="weixin://dl/add/?username=GVSADS" class="mt-4 inline-block bg-gray-900 dark:bg-white dark:text-gray-900 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-gray-800 dark:hover:bg-gray-200 hover:shadow-[0_0_15px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.2)] transform hover:-translate-y-1 active:scale-98">
|
||||
<a href="weixin://dl/add/?username=GVSADS" class="mt-4 inline-block bg-blue-600 dark:bg-blue-600 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-blue-700 hover:shadow-[0_0_15px_rgba(37,99,235,0.35)] transform hover:-translate-y-1 active:scale-98">
|
||||
申请加入(微信)
|
||||
<i class="fa fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
<a :href="joinEmailLink" class="mt-4 inline-block ml-4 bg-gray-900 dark:bg-white dark:text-gray-900 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-gray-800 dark:hover:bg-gray-200 hover:shadow-[0_0_15px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.2)] transform hover:-translate-y-1 active:scale-98">
|
||||
<a :href="joinEmailLink" class="mt-4 inline-block ml-4 bg-blue-600 dark:bg-blue-600 text-white font-semibold px-8 py-4 rounded-lg transition-all duration-300 hover:bg-blue-700 hover:shadow-[0_0_15px_rgba(37,99,235,0.35)] transform hover:-translate-y-1 active:scale-98">
|
||||
申请加入(邮箱)
|
||||
<i class="fa fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
@@ -299,39 +296,39 @@ onBeforeUnmount(() => {
|
||||
|
||||
/** Philosophy 三大理念 */
|
||||
const philosophies = [
|
||||
{ title: '和而不同', icon: 'fa-code', iconBg: 'bg-violet-500/10 border border-violet-500/20', lineColor: 'bg-violet-400', desc: '尊重每一位开发者独特的风格与思路,在差异中寻求最优解。' },
|
||||
{ title: '和而不同', icon: 'fa-code', iconBg: 'bg-blue-500/10 border border-blue-500/20', lineColor: 'bg-blue-400', desc: '尊重每一位开发者独特的风格与思路,在差异中寻求最优解。' },
|
||||
{ title: '创新为主', icon: 'fa-rocket', iconBg: 'bg-sky-500/10 border border-sky-500/20', lineColor: 'bg-sky-400', desc: '不满足于已知的边界,持续叩响未知领域的大门,让每一行代码都充满可能。' },
|
||||
{ title: '以人为本', icon: 'fa-users', iconBg: 'bg-emerald-500/10 border border-emerald-500/20', lineColor: 'bg-emerald-400', desc: '技术服务于人,成长成就彼此,让每个人都能在这里找到属于自己的位置。' },
|
||||
{ title: '以人为本', icon: 'fa-users', iconBg: 'bg-blue-500/10 border border-blue-500/20', lineColor: 'bg-blue-400', desc: '技术服务于人,成长成就彼此,让每个人都能在这里找到属于自己的位置。' },
|
||||
]
|
||||
|
||||
/** Who We Are 标签 */
|
||||
const whoWeAreTags = [
|
||||
{ name: '开源', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
|
||||
{ name: '协作', cls: 'bg-violet-500 text-white' },
|
||||
{ name: '协作', cls: 'bg-blue-500 text-white' },
|
||||
{ name: '非营利', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
|
||||
{ name: '创新', cls: 'bg-sky-500 text-white' },
|
||||
{ name: '年轻', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
|
||||
{ name: '分享', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
|
||||
{ name: '成长', cls: 'bg-emerald-500 text-white' },
|
||||
{ name: '成长', cls: 'bg-blue-500 text-white' },
|
||||
{ name: '技术探索', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
|
||||
{ name: '热爱', cls: 'bg-amber-400 text-gray-900' },
|
||||
{ name: '热爱', cls: 'bg-blue-400 text-gray-900' },
|
||||
{ name: 'GitHub', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500' },
|
||||
{ name: '彼此成就', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
|
||||
]
|
||||
|
||||
/** By The Numbers 统计 */
|
||||
const stats = [
|
||||
{ label: 'Members', sub: '核心成员', display: '17', color: 'text-violet-400', dashArray: '283', dashOffset: '70' },
|
||||
{ label: 'Members', sub: '核心成员', display: '17', color: 'text-blue-400', dashArray: '283', dashOffset: '70' },
|
||||
{ label: 'Projects', sub: '开源项目', display: '28', color: 'text-sky-400', dashArray: '283', dashOffset: '90' },
|
||||
{ label: 'Commits', sub: '代码提交量', display: '100w+', color: 'text-emerald-400', dashArray: '283', dashOffset: '20' },
|
||||
{ label: 'Clients', sub: '服务客户', display: '1500+', color: 'text-amber-400', dashArray: '283', dashOffset: '50' },
|
||||
{ label: 'Commits', sub: '代码提交量', display: '100w+', color: 'text-blue-400', dashArray: '283', dashOffset: '20' },
|
||||
{ label: 'Clients', sub: '服务客户', display: '1500+', color: 'text-blue-400', dashArray: '283', dashOffset: '50' },
|
||||
]
|
||||
|
||||
/** Join Us 角色卡片 */
|
||||
const joinRoles = [
|
||||
{ name: '画师', icon: 'fa-paint-brush', iconBg: 'bg-violet-100 dark:bg-violet-900/30', card: 'border-violet-100 dark:border-violet-900/50 bg-violet-50/50 dark:bg-violet-900/10 hover:border-violet-400 dark:hover:border-violet-500', desc: '用艺术点亮技术世界' },
|
||||
{ name: '画师', icon: 'fa-paint-brush', iconBg: 'bg-blue-100 dark:bg-blue-900/30', card: 'border-blue-100 dark:border-blue-900/50 bg-blue-50/50 dark:bg-blue-900/10 hover:border-blue-400 dark:hover:border-blue-500', desc: '用艺术点亮技术世界' },
|
||||
{ name: '程序员', icon: 'fa-terminal', iconBg: 'bg-sky-100 dark:bg-sky-900/30', card: 'border-sky-100 dark:border-sky-900/50 bg-sky-50/50 dark:bg-sky-900/10 hover:border-sky-400 dark:hover:border-sky-500', desc: '用代码构建无限可能' },
|
||||
{ name: '测试人员', icon: 'fa-bug', iconBg: 'bg-emerald-100 dark:bg-emerald-900/30', card: 'border-emerald-100 dark:border-emerald-900/50 bg-emerald-50/50 dark:bg-emerald-900/10 hover:border-emerald-400 dark:hover:border-emerald-500', desc: '用严谨保障每个细节' },
|
||||
{ name: '测试人员', icon: 'fa-bug', iconBg: 'bg-blue-100 dark:bg-blue-900/30', card: 'border-blue-100 dark:border-blue-900/50 bg-blue-50/50 dark:bg-blue-900/10 hover:border-blue-400 dark:hover:border-blue-500', desc: '用严谨保障每个细节' },
|
||||
]
|
||||
|
||||
/** 涉及领域 */
|
||||
|
||||
@@ -515,7 +515,7 @@ interface Category {
|
||||
const categories: Category[] = [
|
||||
{ name: '编程开发', icon: 'fa-code', iconClass: 'text-blue-500', bgClass: 'bg-blue-100' },
|
||||
{ name: '数据库', icon: 'fa-database', iconClass: 'text-green-500', bgClass: 'bg-green-100' },
|
||||
{ name: '移动开发', icon: 'fa-mobile', iconClass: 'text-purple-500', bgClass: 'bg-purple-100' },
|
||||
{ name: '移动开发', icon: 'fa-mobile', iconClass: 'text-blue-500', bgClass: 'bg-blue-100' },
|
||||
{ name: '云计算', icon: 'fa-cloud', iconClass: 'text-orange-500', bgClass: 'bg-orange-100' },
|
||||
{ name: '人工智能', icon: 'fa-robot', iconClass: 'text-red-500', bgClass: 'bg-red-100' },
|
||||
{ name: '运维部署', icon: 'fa-server', iconClass: 'text-yellow-500', bgClass: 'bg-yellow-100' },
|
||||
@@ -563,7 +563,7 @@ const featuredArticles: Article[] = [
|
||||
{
|
||||
image: 'https://picsum.photos/id/160/600/400',
|
||||
tag: '前端开发',
|
||||
tagClass: 'bg-purple-500',
|
||||
tagClass: 'bg-blue-500',
|
||||
date: '2025-06-05',
|
||||
readTime: '20 分钟阅读',
|
||||
title: '2025年前端框架全面对比:React、Vue、Angular',
|
||||
|
||||
+63
-66
@@ -14,12 +14,12 @@
|
||||
<div class="text-[20px] sm:text-[24px] md:text-[32px] text-[#FFF] leading-snug">你好 2026! 部署项目:</div>
|
||||
<div class="hidden md:block text-[#FFF]">一站式解决所有项目问题。</div>
|
||||
<div class="hidden md:inline text-[#FFF]">结果不佳? 我们补偿!</div>
|
||||
<div class="hidden md:block text-[18px] text-[#FFF]">相关负责人:<a class="text-[#667eea]" href="mailto:terminexus@gvsds.com">terminexus@gvsds.com</a></div>
|
||||
<div class="hidden md:block text-[18px] text-[#FFF]">相关负责人:<a class="text-sky-300 hover:text-sky-200" href="mailto:terminexus@gvsds.com">terminexus@gvsds.com</a></div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="hero-actions mt-[40px] sm:mt-[60px] md:mt-[90px] px-[16px] sm:px-[32px] md:px-0 flex flex-col sm:flex-row gap-[10px] sm:gap-[12px] md:flex-row">
|
||||
<a class="w-full sm:w-fit flex" href="/ProJect/Service/Service" @click.prevent="go('/ProJect/Service/Service')">
|
||||
<button type="button" class="bg-[#000] w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#fff] hover:bg-[#333] active:scale-95 transition-all duration-150">
|
||||
<button type="button" class="bg-blue-600 w-full h-[44px] sm:h-[48px] 2xl:h-[56px] rounded-[12px] gap-1 py-[15px] pl-[24px] pr-[16px] flex items-center justify-center text-[#fff] hover:bg-blue-700 active:scale-95 transition-all duration-150">
|
||||
<span class="font-['PT_Sans'] font-bold text-[14px] sm:text-[15px] md:text-[18px] 2xl:text-[20px] leading-none tracking-normal align-middle">探索服务</span>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="w-[18px] h-[18px] sm:w-[20px] sm:h-[20px]" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||
</button>
|
||||
@@ -58,7 +58,7 @@
|
||||
|
||||
<!-- ===== 银河锋锐 标语 ===== -->
|
||||
<section class="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-white dark:bg-slate-900 transition-colors duration-300">
|
||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-violet-300/20 dark:bg-violet-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-300/20 dark:bg-blue-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-sky-300/20 dark:bg-sky-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<div class="relative z-10 text-center px-6">
|
||||
<h2 class="text-5xl md:text-7xl lg:text-8xl font-black text-gray-900 dark:text-white leading-none tracking-tight mb-4 reveal"> 银河锋锐 </h2>
|
||||
@@ -70,16 +70,13 @@
|
||||
<!-- ===== Our Belief ===== -->
|
||||
<section class="relative py-32 md:py-48 bg-gray-950 dark:bg-black overflow-hidden transition-colors duration-300">
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div class="absolute top-1/3 left-10 w-2 h-2 rounded-full bg-violet-400/60 animate-ping" style="animation-duration:3s"></div>
|
||||
<div class="absolute top-2/3 left-1/4 w-1.5 h-1.5 rounded-full bg-sky-400/60 animate-ping" style="animation-duration:4s;animation-delay:1s"></div>
|
||||
<div class="absolute top-1/4 right-1/3 w-2 h-2 rounded-full bg-emerald-400/60 animate-ping" style="animation-duration:3.5s;animation-delay:0.5s"></div>
|
||||
<div class="absolute top-3/4 right-1/4 w-1.5 h-1.5 rounded-full bg-amber-400/60 animate-ping" style="animation-duration:5s;animation-delay:2s"></div>
|
||||
<div class="absolute top-1/2 right-10 w-1 h-1 rounded-full bg-pink-400/60 animate-ping" style="animation-duration:2.5s;animation-delay:1.5s"></div>
|
||||
<div class="absolute top-1/4 left-1/4 w-72 h-72 bg-blue-500/10 rounded-full blur-[120px]"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-sky-500/10 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
<div class="relative z-10 container mx-auto lg:max-w-[70%] px-6 text-center">
|
||||
<div class="reveal"><span class="text-xs font-bold tracking-widest text-white/30 uppercase">Our Belief</span></div>
|
||||
<blockquote class="mt-8 reveal" style="transition-delay:150ms">
|
||||
<p class="text-3xl md:text-5xl lg:text-6xl font-black text-white leading-tight"> 每一份对技术的<span class="text-violet-400">热爱</span>,<br class="hidden md:block"> 都能汇聚成<span class="text-sky-400">改变</span>的力量。 </p>
|
||||
<p class="text-3xl md:text-5xl lg:text-6xl font-black text-white leading-tight"> 每一份对技术的<span class="text-blue-400">热爱</span>,<br class="hidden md:block"> 都能汇聚成<span class="text-sky-400">改变</span>的力量。 </p>
|
||||
</blockquote>
|
||||
<p class="mt-10 text-gray-500 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto reveal" style="transition-delay:300ms"> 无论你是刚踏入技术领域的新手,还是深耕行业的资深开发者——<br> 只要怀揣好奇,这里就是你的地方。 </p>
|
||||
<div class="mt-8 reveal" style="transition-delay:400ms">
|
||||
@@ -100,8 +97,8 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/10 rounded-2xl overflow-hidden">
|
||||
<div v-for="(p, i) in philosophies" :key="i" class="group relative bg-gray-950 dark:bg-black p-8 md:p-10 flex flex-col gap-6 hover:bg-white/5 transition-colors duration-500 reveal" :style="{ transitionDelay: (i * 150) + 'ms' }">
|
||||
<div class="text-6xl font-black text-white/10 group-hover:text-violet-500/30 transition-colors duration-500 leading-none">0{{ i + 1 }}</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center group-hover:bg-violet-500/20 transition-colors duration-300" :class="p.iconBg">
|
||||
<div class="text-6xl font-black text-white/10 group-hover:text-blue-500/30 transition-colors duration-500 leading-none">0{{ i + 1 }}</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center group-hover:bg-blue-500/20 transition-colors duration-300" :class="p.iconBg">
|
||||
<i class="fa" :class="p.icon"></i>
|
||||
</div>
|
||||
<div>
|
||||
@@ -121,15 +118,15 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div class="reveal">
|
||||
<span class="text-xs font-bold tracking-widest text-violet-500 uppercase">Who We Are</span>
|
||||
<span class="text-xs font-bold tracking-widest text-blue-500 uppercase">Who We Are</span>
|
||||
<h3 class="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mt-3 leading-tight"> 我们是一群<br>
|
||||
<span class="relative inline-block"> 热爱技术的人 <svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none"><path d="M2 10 Q75 2 150 8 Q225 14 298 6" stroke="#8b5cf6" stroke-width="3" stroke-linecap="round" fill="none" /></svg></span>
|
||||
<span class="relative inline-block"> 热爱技术的人 <svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none"><path d="M2 10 Q75 2 150 8 Q225 14 298 6" stroke="#2563eb" stroke-width="3" stroke-linecap="round" fill="none" /></svg></span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="space-y-6 reveal" style="transition-delay:200ms">
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-violet-300 dark:border-violet-600 pl-5"> 自成立以来,始终以开源精神驱动前行,在 GitHub 等平台分享项目、文章与经验,让技术的价值触达更多人。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-blue-300 dark:border-blue-600 pl-5"> 自成立以来,始终以开源精神驱动前行,在 GitHub 等平台分享项目、文章与经验,让技术的价值触达更多人。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-sky-300 dark:border-sky-600 pl-5"> 我们不追逐商业利益,通过编程兼职保障基本运转,让这里永远是一片纯粹的技术沃土。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-emerald-300 dark:border-emerald-600 pl-5"> 这里不只是写代码的地方,更是结识同好、分享日常的温暖港湾。 </p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg leading-relaxed border-l-2 border-blue-300 dark:border-blue-600 pl-5"> 这里不只是写代码的地方,更是结识同好、分享日常的温暖港湾。 </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal flex flex-wrap gap-3 items-start content-start" style="transition-delay:300ms">
|
||||
@@ -149,13 +146,13 @@
|
||||
</div>
|
||||
<div class="relative z-10 container mx-auto lg:max-w-[60%] px-6 text-center">
|
||||
<div class="reveal">
|
||||
<span class="text-xs font-bold tracking-widest text-violet-500 uppercase">Join Us</span>
|
||||
<span class="text-xs font-bold tracking-widest text-blue-500 uppercase">Join Us</span>
|
||||
<h3 class="text-4xl md:text-5xl font-black text-gray-900 mt-4 mb-6"> 期待与你同行 </h3>
|
||||
<p class="text-gray-500 text-lg max-w-lg mx-auto leading-relaxed"> 我们欢迎<strong class="text-violet-500 font-semibold">画师</strong>、 <strong class="text-sky-500 font-semibold">程序员</strong>、 <strong class="text-emerald-500 font-semibold">测试人员</strong>, 以及所有愿意与我们一起探索技术边界的你。</p>
|
||||
<p class="text-gray-500 text-lg max-w-lg mx-auto leading-relaxed"> 我们欢迎<strong class="text-blue-500 font-semibold">画师</strong>、 <strong class="text-sky-500 font-semibold">程序员</strong>、 <strong class="text-blue-500 font-semibold">测试人员</strong>, 以及所有愿意与我们一起探索技术边界的你。</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12 mb-12 reveal" style="transition-delay:200ms">
|
||||
<div v-for="(role, i) in roles" :key="i" :class="role.card" class="group p-6 rounded-2xl border-2 hover:scale-105 transition-all duration-300 cursor-default">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-violet-200 transition-colors" :class="role.iconBg">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-200 transition-colors" :class="role.iconBg">
|
||||
<i class="fa text-xl" :class="role.icon"></i>
|
||||
</div>
|
||||
<h5 class="font-bold text-gray-900 mb-1">{{ role.name }}</h5>
|
||||
@@ -164,7 +161,7 @@
|
||||
</div>
|
||||
<div class="reveal" style="transition-delay:400ms">
|
||||
<a href="mailto:hr@gvsds.com?subject=我申请加入银河锋锐软件开发工作室&body=您好!%0D%0A%0D%0A我是 [ 姓名 / 网名 ],我期望加入银河锋锐软件开发工作室。%0D%0A我的联系方式是 [ 微信(必填) / QQ / TEL / X / 电报 / DISCORD ] %0D%0A我的兴趣爱好是 [ 选填 ],我的能力是 [ 选填 ]。%0D%0A我能够作为 [ 画师 / 程序员 / 测试人员 ] 加入工作室。%0D%0A [ 您的更多个人信息(选填)(个人简历等) ] %0D%0A希望您能提供一个机会,感谢!%0D%0A—— [ 姓名 / 网名 ] [ 年-月-日 ]" class="group relative inline-flex items-center gap-3 px-10 py-5 bg-gray-900 rounded-2xl text-white font-bold text-lg transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_60px_rgba(0,0,0,0.2)] overflow-hidden">
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-violet-600 via-sky-500 to-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
|
||||
<span class="absolute inset-0 bg-gradient-to-r from-blue-600 via-sky-500 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
|
||||
<i class="fa fa-paper-plane relative z-10 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300"></i>
|
||||
<span class="relative z-10">发送申请邮件</span>
|
||||
</a>
|
||||
@@ -177,7 +174,7 @@
|
||||
<section class="py-24 px-4 bg-gradient-to-b from-white to-slate-50">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<span class="inline-block px-4 py-1.5 bg-purple-50 text-purple-700 text-xs font-semibold tracking-widest uppercase rounded-full border border-purple-100 mb-4">开源成果</span>
|
||||
<span class="inline-block px-4 py-1.5 bg-blue-50 text-blue-700 text-xs font-semibold tracking-widest uppercase rounded-full border border-blue-100 mb-4">开源成果</span>
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">我们做过什么</h2>
|
||||
<p class="text-gray-500 text-lg max-w-xl mx-auto">沉淀技术,开放共享 — 探索我们的核心开源项目与工程实践</p>
|
||||
</div>
|
||||
@@ -196,19 +193,19 @@
|
||||
<div class="flex flex-wrap gap-2 mb-5">
|
||||
<span v-for="(t, ti) in proj.tags" :key="ti" :class="t.cls" class="px-2.5 py-1 text-xs font-medium rounded-md border">{{ t.name }}</span>
|
||||
</div>
|
||||
<a :href="proj.link" target="_blank" class="inline-flex items-center gap-1.5 text-purple-600 hover:text-purple-500 text-sm font-medium group-hover:gap-2.5 transition-all duration-200">
|
||||
<a :href="proj.link" target="_blank" class="inline-flex items-center gap-1.5 text-blue-600 hover:text-blue-500 text-sm font-medium group-hover:gap-2.5 transition-all duration-200">
|
||||
查看项目
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<!-- More Projects CTA -->
|
||||
<div class="bg-gradient-to-br from-purple-600 to-indigo-600 rounded-2xl p-7 flex flex-col items-center justify-center text-center shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="bg-gradient-to-br from-blue-600 to-sky-500 rounded-2xl p-7 flex flex-col items-center justify-center text-center shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="w-12 h-12 bg-white/15 rounded-xl flex items-center justify-center mb-4 border border-white/20">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-1.5">更多开源项目</h3>
|
||||
<p class="text-purple-200 text-sm mb-6 leading-relaxed">持续构建中 — 探索我们在 GitHub 上的完整工程仓库</p>
|
||||
<a href="https://github.com/GVSDS" target="_blank" class="inline-flex items-center gap-2 px-6 py-2.5 bg-white text-purple-700 font-semibold rounded-full text-sm hover:bg-purple-50 transition-colors shadow-sm">
|
||||
<p class="text-blue-200 text-sm mb-6 leading-relaxed">持续构建中 — 探索我们在 GitHub 上的完整工程仓库</p>
|
||||
<a href="https://github.com/GVSDS" target="_blank" class="inline-flex items-center gap-2 px-6 py-2.5 bg-white text-blue-700 font-semibold rounded-full text-sm hover:bg-blue-50 transition-colors shadow-sm">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.54-1.38-1.33-1.75-1.33-1.75-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 013-.4c1.02.005 2.04.14 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.21.7.82.58C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
访问 GitHub
|
||||
</a>
|
||||
@@ -224,7 +221,7 @@
|
||||
<p class="text-gray-600 dark:text-gray-400 text-lg max-w-2xl mx-auto leading-relaxed"> 我们拥有专业的美术设计团队,涵盖UI/UX设计、品牌视觉、插画创作、3D建模等多个领域。每一件作品都凝聚着创意与匠心,为您的项目注入独特的视觉魅力。 </p>
|
||||
<div class="flex justify-center gap-6 mt-8">
|
||||
<div v-for="(s, i) in artStats" :key="i" class="text-center">
|
||||
<div class="text-3xl font-bold text-purple-600 dark:text-purple-400">{{ s.num }}</div>
|
||||
<div class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ s.num }}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">{{ s.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -252,51 +249,51 @@
|
||||
</section>
|
||||
|
||||
<!-- ===== 吉祥物图集(可切换版本) ===== -->
|
||||
<section class="lg:h-[75vh] w-full bg-[#ffebed]/10 p-[2rem_1rem] relative mb-32">
|
||||
<section class="lg:h-[75vh] w-full bg-[#eff6ff]/10 p-[2rem_1rem] relative mb-32">
|
||||
<div class="relative max-w-7xl w-full mx-auto z-20">
|
||||
<div class="p-4 bg-[#ffebed]/20 border-b border-[#d1c4ce]/30 mb-6 rounded-t-lg">
|
||||
<div class="p-4 bg-[#eff6ff]/20 border-b border-[#bfdbfe]/30 mb-6 rounded-t-lg">
|
||||
<div class="flex flex-wrap justify-between items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[#491400] font-medium text-sm">查看模式:</span>
|
||||
<button class="px-3 py-1.5 text-sm rounded-md transition-all duration-300" :class="mascotMode === 'thumbnail' ? 'bg-[#678187] text-white' : 'bg-[#d1c4ce] text-[#491400] hover:bg-[#d1c4ce]/90'" @click="mascotMode = 'thumbnail'">
|
||||
<span class="text-[#1e3a8a] font-medium text-sm">查看模式:</span>
|
||||
<button class="px-3 py-1.5 text-sm rounded-md transition-all duration-300" :class="mascotMode === 'thumbnail' ? 'bg-[#2563eb] text-white' : 'bg-[#bfdbfe] text-[#1e3a8a] hover:bg-[#bfdbfe]/90'" @click="mascotMode = 'thumbnail'">
|
||||
<i class="fa-solid fa-image mr-1"></i>缩略图
|
||||
</button>
|
||||
<button class="px-3 py-1.5 text-sm rounded-md transition-all duration-300" :class="mascotMode === 'original' ? 'bg-[#678187] text-white' : 'bg-[#d1c4ce] text-[#491400] hover:bg-[#d1c4ce]/90'" @click="mascotMode = 'original'">
|
||||
<button class="px-3 py-1.5 text-sm rounded-md transition-all duration-300" :class="mascotMode === 'original' ? 'bg-[#2563eb] text-white' : 'bg-[#bfdbfe] text-[#1e3a8a] hover:bg-[#bfdbfe]/90'" @click="mascotMode = 'original'">
|
||||
<i class="fa-solid fa-image mr-1"></i>原图
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button v-for="(v, vi) in mascotVersions" :key="vi" class="px-2.5 py-1.5 text-sm rounded-md transition-all duration-300" :class="mascotVersion === v.id ? 'bg-[#678187] text-white' : 'bg-[#d1c4ce] text-[#491400] hover:bg-[#d1c4ce]/90'" @click="mascotVersion = v.id">{{ v.label }}</button>
|
||||
<button v-for="(v, vi) in mascotVersions" :key="vi" class="px-2.5 py-1.5 text-sm rounded-md transition-all duration-300" :class="mascotVersion === v.id ? 'bg-[#2563eb] text-white' : 'bg-[#bfdbfe] text-[#1e3a8a] hover:bg-[#bfdbfe]/90'" @click="mascotVersion = v.id">{{ v.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<div class="lg:w-2/3 relative flex justify-center items-center">
|
||||
<div id="imageContainer" class="w-full max-w-[850px] lg:h-[700px] sm:h-[500px] xs:h-[300px] aspect-[17/22] overflow-hidden relative mx-auto p-4 border-0 rounded-lg">
|
||||
<div v-if="mascotLoading" class="absolute inset-0 flex items-center justify-center bg-[#ffebed]/20 z-50">
|
||||
<div class="w-10 h-10 border-4 border-[#d1c4ce] border-t-4 border-t-[#678187] rounded-full animate-spin"></div>
|
||||
<div v-if="mascotLoading" class="absolute inset-0 flex items-center justify-center bg-[#eff6ff]/20 z-50">
|
||||
<div class="w-10 h-10 border-4 border-[#bfdbfe] border-t-4 border-t-[#2563eb] rounded-full animate-spin"></div>
|
||||
</div>
|
||||
<img :src="mascotSrc" :alt="mascotAlt" class="w-full h-full object-contain mx-auto my-0 block" @load="mascotLoading = false" @error="mascotLoading = false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 flex flex-col justify-center text-[#491400] bg-[#ffebed]/10 p-6 rounded-lg">
|
||||
<div class="lg:w-1/3 flex flex-col justify-center text-[#1e3a8a] bg-[#eff6ff]/10 p-6 rounded-lg">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-2.5 h-10 bg-[#491400]"></div>
|
||||
<span class="text-[#678187] uppercase tracking-widest text-xs">Silver Frost · Wind Fiend</span>
|
||||
<div class="w-2.5 h-10 bg-[#1e3a8a]"></div>
|
||||
<span class="text-[#2563eb] uppercase tracking-widest text-xs">Silver Frost · Wind Fiend</span>
|
||||
</div>
|
||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#491400] to-[#d7aa66] mb-3 leading-tight">工作室吉祥物<br>银霜 · 风獠</h2>
|
||||
<div class="h-0.5 w-20 bg-gradient-to-r from-[#491400] to-[#d7aa66] rounded-full mb-6"></div>
|
||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#1e3a8a] to-[#3b82f6] mb-3 leading-tight">工作室吉祥物<br>银霜 · 风獠</h2>
|
||||
<div class="h-0.5 w-20 bg-gradient-to-r from-[#1e3a8a] to-[#3b82f6] rounded-full mb-6"></div>
|
||||
<div class="space-y-3 mb-6">
|
||||
<div v-for="(info, ii) in mascotInfo" :key="ii" class="flex items-start gap-3">
|
||||
<i class="fa-solid text-[#491400] mt-1 text-sm" :class="info.icon"></i>
|
||||
<i class="fa-solid text-[#1e3a8a] mt-1 text-sm" :class="info.icon"></i>
|
||||
<div>
|
||||
<h4 class="font-semibold text-[#491400] text-sm">{{ info.title }}</h4>
|
||||
<p class="text-[#678187]/80 text-xs mt-1">{{ info.desc }}</p>
|
||||
<h4 class="font-semibold text-[#1e3a8a] text-sm">{{ info.title }}</h4>
|
||||
<p class="text-[#2563eb]/80 text-xs mt-1">{{ info.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto pt-4 border-t border-[#d1c4ce]/50">
|
||||
<p class="text-[#678187]/70 text-xs">© 2025 Silver Frost · Wind Fiend · 版权归品牌方(组织)所有,作品权属原画师 B-Smooth,任何第三方未授权窃图皆为违法行为。</p>
|
||||
<div class="mt-auto pt-4 border-t border-[#bfdbfe]/50">
|
||||
<p class="text-[#2563eb]/70 text-xs">© 2025 Silver Frost · Wind Fiend · 版权归品牌方(组织)所有,作品权属原画师 B-Smooth,任何第三方未授权窃图皆为违法行为。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -312,7 +309,7 @@
|
||||
<p class="text-gray-400 text-base">携手同行,共建技术生态</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
<div v-for="(p, i) in partners" :key="i" class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-purple-200 transition-all duration-300">
|
||||
<div v-for="(p, i) in partners" :key="i" class="group flex items-center gap-5 bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-blue-200 transition-all duration-300">
|
||||
<img :src="p.img" :alt="p.name" class="w-16 h-16 rounded-lg object-cover shadow-sm flex-shrink-0 ring-1 ring-gray-100">
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="font-semibold text-base text-gray-800 truncate">{{ p.name }}</span>
|
||||
@@ -331,10 +328,10 @@
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-2 tracking-tight">工程谢幕</h2>
|
||||
<p class="text-gray-400 text-sm">感谢每一位参与者的贡献与支持</p>
|
||||
</div>
|
||||
<div class="w-12 h-px bg-gradient-to-r from-transparent via-purple-400 to-transparent mx-auto mb-10"></div>
|
||||
<div class="w-12 h-px bg-gradient-to-r from-transparent via-blue-400 to-transparent mx-auto mb-10"></div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-x-6 gap-y-5">
|
||||
<div v-for="(n, i) in thanks" :key="i" class="text-center">
|
||||
<span class="text-sm font-semibold text-gray-500 hover:text-purple-600 transition-colors cursor-default tracking-wide">{{ n }}</span>
|
||||
<span class="text-sm font-semibold text-gray-500 hover:text-blue-600 transition-colors cursor-default tracking-wide">{{ n }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -389,68 +386,68 @@ const insuranceDigits = [
|
||||
|
||||
// ==== 理念 ====
|
||||
const philosophies = [
|
||||
{ title: '和而不同', icon: 'fa-code', iconBg: 'bg-violet-500/10 border border-violet-500/20 text-violet-400', lineColor: 'bg-violet-400', desc: '尊重每一位开发者独特的风格与思路,在差异中寻求最优解。' },
|
||||
{ title: '和而不同', icon: 'fa-code', iconBg: 'bg-blue-500/10 border border-blue-500/20 text-blue-400', lineColor: 'bg-blue-400', desc: '尊重每一位开发者独特的风格与思路,在差异中寻求最优解。' },
|
||||
{ title: '创新为主', icon: 'fa-rocket', iconBg: 'bg-sky-500/10 border border-sky-500/20 text-sky-400', lineColor: 'bg-sky-400', desc: '不满足于已知的边界,持续叩响未知领域的大门,让每一行代码都充满可能。' },
|
||||
{ title: '以人为本', icon: 'fa-users', iconBg: 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-400', lineColor: 'bg-emerald-400', desc: '技术服务于人,成长成就彼此,让每个人都能在这里找到属于自己的位置。' },
|
||||
{ title: '以人为本', icon: 'fa-users', iconBg: 'bg-blue-500/10 border border-blue-500/20 text-blue-400', lineColor: 'bg-blue-400', desc: '技术服务于人,成长成就彼此,让每个人都能在这里找到属于自己的位置。' },
|
||||
]
|
||||
|
||||
// ==== Who We Are 标签 ====
|
||||
const tags = [
|
||||
{ name: '开源', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
|
||||
{ name: '协作', cls: 'bg-violet-500 text-white' },
|
||||
{ name: '协作', cls: 'bg-blue-500 text-white' },
|
||||
{ name: '非营利', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold' },
|
||||
{ name: '创新', cls: 'bg-sky-500 text-white' },
|
||||
{ name: '年轻', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold' },
|
||||
{ name: '分享', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
|
||||
{ name: '成长', cls: 'bg-emerald-500 text-white' },
|
||||
{ name: '成长', cls: 'bg-blue-500 text-white' },
|
||||
{ name: '技术探索', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold' },
|
||||
{ name: '热爱', cls: 'bg-amber-400 text-gray-900' },
|
||||
{ name: '热爱', cls: 'bg-blue-400 text-gray-900' },
|
||||
{ name: 'GitHub', cls: 'border-2 border-gray-200 dark:border-slate-600 text-gray-400 dark:text-gray-500 font-semibold' },
|
||||
{ name: '彼此成就', cls: 'border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white' },
|
||||
]
|
||||
|
||||
// ==== Join Us 角色 ====
|
||||
const roles = [
|
||||
{ name: '画师', desc: '用艺术点亮技术世界', icon: 'fa-paint-brush text-violet-500', iconBg: 'bg-violet-100', card: 'border-violet-100 bg-violet-50/50 hover:border-violet-400' },
|
||||
{ name: '画师', desc: '用艺术点亮技术世界', icon: 'fa-paint-brush text-blue-500', iconBg: 'bg-blue-100', card: 'border-blue-100 bg-blue-50/50 hover:border-blue-400' },
|
||||
{ name: '程序员', desc: '用代码构建无限可能', icon: 'fa-terminal text-sky-500', iconBg: 'bg-sky-100', card: 'border-sky-100 bg-sky-50/50 hover:border-sky-400' },
|
||||
{ name: '测试人员', desc: '用严谨保障每个细节', icon: 'fa-bug text-emerald-500', iconBg: 'bg-emerald-100', card: 'border-emerald-100 bg-emerald-50/50 hover:border-emerald-400' },
|
||||
{ name: '测试人员', desc: '用严谨保障每个细节', icon: 'fa-bug text-blue-500', iconBg: 'bg-blue-100', card: 'border-blue-100 bg-blue-50/50 hover:border-blue-400' },
|
||||
]
|
||||
|
||||
// ==== 开源项目 ====
|
||||
const projects = [
|
||||
{
|
||||
name: 'FastProxyX', sub: 'Network Infrastructure', iconBg: 'bg-gradient-to-br from-blue-500 to-cyan-400',
|
||||
name: 'FastProxyX', sub: 'Network Infrastructure', iconBg: 'bg-gradient-to-br from-blue-500 to-sky-400',
|
||||
svg: 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
|
||||
desc: 'FastProxyX —— 用 Python 重写的轻量级 Frp(Fast Reverse Proxy)反向代理。精简体积、免编译即用、可无缝嵌入 Python 工程;服务端/客户端均为单文件 JSON 配置,开箱即用。',
|
||||
tags: [{ name: 'Python', cls: 'bg-blue-50 text-blue-600 border-blue-100' }, { name: 'TCP 转发', cls: 'bg-emerald-50 text-emerald-600 border-emerald-100' }, { name: '可嵌入', cls: 'bg-slate-50 text-slate-600 border-slate-200' }],
|
||||
tags: [{ name: 'Python', cls: 'bg-blue-50 text-blue-600 border-blue-100' }, { name: 'TCP 转发', cls: 'bg-blue-50 text-blue-600 border-blue-100' }, { name: '可嵌入', cls: 'bg-slate-50 text-slate-600 border-slate-200' }],
|
||||
link: 'https://git.gvsds.com/GVSDS/FastProxyX',
|
||||
},
|
||||
{
|
||||
name: 'ResourceShare', sub: 'Web Performance', iconBg: 'bg-gradient-to-br from-orange-500 to-yellow-400',
|
||||
name: 'ResourceShare', sub: 'Web Performance', iconBg: 'bg-gradient-to-br from-blue-500 to-sky-400',
|
||||
svg: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4',
|
||||
desc: '高性能跨资源共享系统,支持跨 iframe / 页面资源共享、智能缓存与加载顺序控制,全面解决 Web 应用资源管理难题。',
|
||||
tags: [{ name: 'JavaScript', cls: 'bg-yellow-50 text-yellow-600 border-yellow-100' }, { name: '资源管理', cls: 'bg-cyan-50 text-cyan-600 border-cyan-100' }, { name: 'Web', cls: 'bg-slate-50 text-slate-600 border-slate-200' }],
|
||||
tags: [{ name: 'JavaScript', cls: 'bg-sky-50 text-sky-600 border-sky-100' }, { name: '资源管理', cls: 'bg-sky-50 text-sky-600 border-sky-100' }, { name: 'Web', cls: 'bg-slate-50 text-slate-600 border-slate-200' }],
|
||||
link: 'https://git.gvsds.com/GVSDS/ResourceShare',
|
||||
},
|
||||
{
|
||||
name: 'PyFabricLoader', sub: 'Game Modding', iconBg: 'bg-gradient-to-br from-green-500 to-emerald-400',
|
||||
name: 'PyFabricLoader', sub: 'Game Modding', iconBg: 'bg-gradient-to-br from-blue-500 to-blue-600',
|
||||
svg: 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4',
|
||||
desc: 'Minecraft Fabric 的 Python 模组加载器,基于 Jython 实现,支持 Python 模组开发,兼容 1.18.1 – 1.21.10 全版本区间。',
|
||||
tags: [{ name: 'Python', cls: 'bg-green-50 text-green-600 border-green-100' }, { name: 'Minecraft', cls: 'bg-red-50 text-red-600 border-red-100' }, { name: 'Java', cls: 'bg-indigo-50 text-indigo-600 border-indigo-100' }],
|
||||
tags: [{ name: 'Python', cls: 'bg-blue-50 text-blue-600 border-blue-100' }, { name: 'Minecraft', cls: 'bg-sky-50 text-sky-600 border-sky-100' }, { name: 'Java', cls: 'bg-blue-50 text-blue-600 border-blue-100' }],
|
||||
link: 'https://git.gvsds.com/GVSDS/PyFabricLoader',
|
||||
},
|
||||
{
|
||||
name: 'TransPyC', sub: 'Compiler Toolchain', iconBg: 'bg-gradient-to-br from-red-500 to-pink-400',
|
||||
name: 'TransPyC', sub: 'Compiler Toolchain', iconBg: 'bg-gradient-to-br from-blue-600 to-sky-500',
|
||||
svg: 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4',
|
||||
desc: '作为自制语言 "Viper" 的编译器,其以类似 Python 的语法进行 AOT,性能和 C 相当,但可读性更高。',
|
||||
tags: [{ name: 'Python', cls: 'bg-blue-50 text-blue-600 border-blue-100' }, { name: 'Viper', cls: 'bg-slate-100 text-slate-600 border-slate-200' }, { name: '编译器', cls: 'bg-orange-50 text-orange-600 border-orange-100' }],
|
||||
tags: [{ name: 'Python', cls: 'bg-blue-50 text-blue-600 border-blue-100' }, { name: 'Viper', cls: 'bg-slate-100 text-slate-600 border-slate-200' }, { name: '编译器', cls: 'bg-blue-50 text-blue-600 border-blue-100' }],
|
||||
link: 'https://git.gvsds.com/GVSDS/TransPyC',
|
||||
},
|
||||
{
|
||||
name: 'CreateE SpaceCCL', sub: 'Spatial Computing', iconBg: 'bg-gradient-to-br from-violet-500 to-purple-400',
|
||||
name: 'CreateE SpaceCCL', sub: 'Spatial Computing', iconBg: 'bg-gradient-to-br from-blue-500 to-sky-400',
|
||||
svg: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z',
|
||||
desc: '专注于空间计算与创意工程的前沿技术探索项目,融合工程实践与创意思维,持续拓展技术边界。',
|
||||
tags: [{ name: '空间计算', cls: 'bg-violet-50 text-violet-600 border-violet-100' }, { name: '创意工程', cls: 'bg-teal-50 text-teal-600 border-teal-100' }],
|
||||
tags: [{ name: '空间计算', cls: 'bg-blue-50 text-blue-600 border-blue-100' }, { name: '创意工程', cls: 'bg-sky-50 text-sky-600 border-sky-100' }],
|
||||
link: 'https://git.gvsds.com/GVSDS/CreateE_SpaceCCL',
|
||||
},
|
||||
]
|
||||
@@ -474,9 +471,9 @@ let rafId = 0
|
||||
|
||||
// ==== 美术分类 ====
|
||||
const artCats = [
|
||||
{ name: 'UI/UX设计', desc: '打造直观、美观的用户界面,提升用户体验与产品价值', iconBg: 'bg-gradient-to-br from-pink-500 to-rose-500', svg: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' },
|
||||
{ name: '个人艺术', desc: '来自画师本身独特的艺术风格', iconBg: 'bg-gradient-to-br from-violet-500 to-purple-500', svg: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01' },
|
||||
{ name: '3D建模', desc: '高质量3D模型制作,适用于游戏、动画与产品展示', iconBg: 'bg-gradient-to-br from-cyan-500 to-blue-500', svg: 'M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5' },
|
||||
{ name: 'UI/UX设计', desc: '打造直观、美观的用户界面,提升用户体验与产品价值', iconBg: 'bg-gradient-to-br from-blue-500 to-sky-500', svg: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' },
|
||||
{ name: '个人艺术', desc: '来自画师本身独特的艺术风格', iconBg: 'bg-gradient-to-br from-blue-500 to-sky-500', svg: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01' },
|
||||
{ name: '3D建模', desc: '高质量3D模型制作,适用于游戏、动画与产品展示', iconBg: 'bg-gradient-to-br from-sky-500 to-blue-500', svg: 'M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5' },
|
||||
]
|
||||
|
||||
// ==== 吉祥物图集 ====
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p class="text-gray-600 mx-auto leading-relaxed opacity-0 animate-fade-in delay-200"> 高效、安全的企业级管理平台,为您的工作提供便捷支持<br> 请尽可能使用工号和密码登录,保障账户信息安全。 </p>
|
||||
<div class="relative mt-12 h-64">
|
||||
<div class="absolute top-0 left-1/4 w-8 h-8 rounded bg-blue-500/30 animate-pulse"></div>
|
||||
<div class="absolute top-1/4 left-1/2 w-12 h-12 rounded bg-purple-500/30 animate-pulse delay-300"></div>
|
||||
<div class="absolute top-1/4 left-1/2 w-12 h-12 rounded bg-blue-500/30 animate-pulse delay-300"></div>
|
||||
<div class="absolute bottom-1/4 left-1/3 w-10 h-10 rounded bg-green-500/30 animate-pulse delay-500"></div>
|
||||
<div class="absolute bottom-0 left-2/3 w-14 h-14 rounded bg-orange-500/30 animate-pulse delay-700"></div>
|
||||
</div>
|
||||
@@ -147,5 +147,5 @@ onMounted(() => {
|
||||
.animate-fade-in-right { animation: fadeInRight 0.5s ease-out forwards; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
|
||||
input:focus ~ .input-icon { color: #a855f7; }
|
||||
input:focus ~ .input-icon { color: #2563eb; }
|
||||
</style>
|
||||
+13
-13
@@ -3,19 +3,19 @@
|
||||
<div class="relative min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-100 p-4">
|
||||
<div class="hidden md:flex md:w-1/2 items-center justify-start px-4 opacity-0 translate-x-[-20px] animate-fade-in-left">
|
||||
<div class="text-center w-full">
|
||||
<div class="w-56 h-56 mx-auto mb-8 rounded-2xl bg-purple-500/5 flex items-center justify-center p-6 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/5"></div>
|
||||
<div class="w-56 h-56 mx-auto mb-8 rounded-2xl bg-blue-500/5 flex items-center justify-center p-6 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/5"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-4 opacity-0 animate-fade-in delay-100">G-ERP 账号注册</h2>
|
||||
<p class="text-gray-600 mx-auto leading-relaxed opacity-0 animate-fade-in delay-200"> 填写以下信息完成注册,账号将用于在所有 GVSDS 下属平台访问<br> 请确保信息真实有效,注册后信息可在后台修改 </p>
|
||||
<div class="relative mt-12 h-64">
|
||||
<div class="absolute top-0 left-1/4 w-8 h-8 rounded bg-purple-500/30 animate-pulse"></div>
|
||||
<div class="absolute top-0 left-1/4 w-8 h-8 rounded bg-blue-500/30 animate-pulse"></div>
|
||||
<div class="absolute top-1/4 left-1/2 w-12 h-12 rounded bg-blue-500/30 animate-pulse delay-300"></div>
|
||||
<div class="absolute bottom-1/4 left-1/3 w-10 h-10 rounded bg-green-500/30 animate-pulse delay-500"></div>
|
||||
<div class="absolute bottom-0 left-2/3 w-14 h-14 rounded bg-pink-500/30 animate-pulse delay-700"></div>
|
||||
<div class="absolute bottom-0 left-2/3 w-14 h-14 rounded bg-blue-500/30 animate-pulse delay-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 max-w-md opacity-0 translate-x-[20px] animate-fade-in-right">
|
||||
<div class="bg-white dark:bg-gray-50 rounded-xl shadow-xl overflow-visible transition-all duration-300 hover:shadow-purple-500/5">
|
||||
<div class="bg-white dark:bg-gray-50 rounded-xl shadow-xl overflow-visible transition-all duration-300 hover:shadow-blue-500/5">
|
||||
<div class="relative h-24">
|
||||
<img src="https://bing.img.run/uhd.php" alt="Card image" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-white to-transparent"></div>
|
||||
@@ -39,45 +39,45 @@
|
||||
<i class="tim-icons icon-single-02 text-gray-500 input-icon"></i>
|
||||
</div>
|
||||
<input type="text" name="UserName" v-model="userName"
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="昵称" required>
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="昵称" required>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none transition-colors duration-200">
|
||||
<i class="tim-icons icon-email-85 text-gray-500 input-icon"></i>
|
||||
</div>
|
||||
<input type="email" name="UserEmail" v-model="userEmail"
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="邮箱(注意:请填写有效的邮箱)" required>
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="邮箱(注意:请填写有效的邮箱)" required>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none transition-colors duration-200">
|
||||
<i class="tim-icons icon-lock-circle text-gray-500 input-icon"></i>
|
||||
</div>
|
||||
<input type="password" name="UserPassword" v-model="userPassword"
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="密码" required>
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="密码" required>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none transition-colors duration-200">
|
||||
<i class="tim-icons icon-lock-circle text-gray-500 input-icon"></i>
|
||||
</div>
|
||||
<input type="password" name="UserPassword2" v-model="userPassword2"
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="重复密码" required>
|
||||
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="重复密码" required>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="UserConsent" name="UserConsent" type="checkbox" v-model="userConsent" class="w-4 h-4 rounded border-gray-300 text-purple-500 focus:ring-purple-500 bg-gray-100 transition-all duration-200 hover:border-gray-400 checked:scale-[0.95]" required>
|
||||
<input id="UserConsent" name="UserConsent" type="checkbox" v-model="userConsent" class="w-4 h-4 rounded border-gray-300 text-blue-500 focus:ring-blue-500 bg-gray-100 transition-all duration-200 hover:border-gray-400 checked:scale-[0.95]" required>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="UserConsent" class="text-gray-700 transition-colors duration-200 hover:text-gray-900"> 我阅读并同意
|
||||
<a href="/Document/9bc298e9c1d03ed3bd4777181bf7411d/d2ae1dd63e9c35d687464a160896e1ab" target="_blank" class="text-purple-600 hover:underline transition-colors duration-200 hover:text-purple-700">GVSDS用户协议</a>
|
||||
<a href="/Document/9bc298e9c1d03ed3bd4777181bf7411d/d2ae1dd63e9c35d687464a160896e1ab" target="_blank" class="text-blue-600 hover:underline transition-colors duration-200 hover:text-blue-700">GVSDS用户协议</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-700"> 我已有账号,去
|
||||
<a href="/#/login" class="text-purple-600 hover:underline transition-colors duration-200 hover:text-purple-700">登录</a>
|
||||
<a href="/#/login" class="text-blue-600 hover:underline transition-colors duration-200 hover:text-blue-700">登录</a>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<button type="submit" :disabled="submitting"
|
||||
class="w-full py-3 px-4 bg-purple-500 hover:bg-purple-600 rounded-lg text-white font-medium transition-all duration-200 flex items-center justify-center hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-purple-500/10 disabled:opacity-60 disabled:cursor-not-allowed">
|
||||
class="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium transition-all duration-200 flex items-center justify-center hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-blue-500/10 disabled:opacity-60 disabled:cursor-not-allowed">
|
||||
<i v-if="submitting" class="fa fa-spinner fa-spin mr-2"></i>
|
||||
{{ submitting ? '注册中...' : '注册' }}
|
||||
</button>
|
||||
@@ -164,5 +164,5 @@ onMounted(() => {
|
||||
.animate-fade-in-right { animation: fadeInRight 0.5s ease-out forwards; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
|
||||
input:focus ~ .input-icon { color: #a855f7; }
|
||||
input:focus ~ .input-icon { color: #2563eb; }
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="h-[80vh] flex items-center justify-center p-4 sm:p-6 lg:p-8">
|
||||
<div class="w-full max-w-md bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
|
||||
<div class="bg-gradient-to-br from-amber-50 to-orange-50 border-b border-amber-200/60 p-6">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-orange-50 border-b border-blue-200/60 p-6">
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<i class="fa fa-exclamation-triangle text-5xl sm:text-6xl" style="color: #f59e0b;"></i>
|
||||
</div>
|
||||
|
||||
@@ -13,14 +13,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 404页面主体内容 -->
|
||||
<div class="min-h-screen flex items-center justify-center relative bg-gradient-to-br from-blue-50 to-indigo-100 overflow-hidden">
|
||||
<div class="min-h-screen flex items-center justify-center relative bg-gradient-to-br from-blue-50 to-blue-100 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-[url('https://bing.img.run/uhd.php')] bg-cover bg-center opacity-10"></div>
|
||||
<div class="absolute inset-0 bg-white/70 backdrop-blur-sm"></div>
|
||||
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
||||
<div class="content-center">
|
||||
<!-- 404标题 -->
|
||||
<h1 class="text-[clamp(5rem,15vw,10rem)] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-indigo-600 mb-4 tracking-tighter">
|
||||
<h1 class="text-[clamp(5rem,15vw,10rem)] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 mb-4 tracking-tighter">
|
||||
404
|
||||
</h1>
|
||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-6">
|
||||
|
||||
@@ -13,14 +13,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 500页面主体内容 -->
|
||||
<div class="min-h-screen flex items-center justify-center relative bg-gradient-to-br from-blue-50 to-indigo-100 overflow-hidden">
|
||||
<div class="min-h-screen flex items-center justify-center relative bg-gradient-to-br from-blue-50 to-blue-100 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-[url('https://bing.img.run/uhd.php')] bg-cover bg-center opacity-10"></div>
|
||||
<div class="absolute inset-0 bg-white/70 backdrop-blur-sm"></div>
|
||||
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
||||
<div class="content-center">
|
||||
<!-- 500标题 -->
|
||||
<h1 class="text-[clamp(5rem,15vw,10rem)] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-indigo-600 mb-4 tracking-tighter">
|
||||
<h1 class="text-[clamp(5rem,15vw,10rem)] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 mb-4 tracking-tighter">
|
||||
500
|
||||
</h1>
|
||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-6">
|
||||
|
||||
@@ -13,14 +13,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 503页面主体内容 -->
|
||||
<div class="min-h-screen flex items-center justify-center relative bg-gradient-to-br from-blue-50 to-indigo-100 overflow-hidden">
|
||||
<div class="min-h-screen flex items-center justify-center relative bg-gradient-to-br from-blue-50 to-blue-100 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-[url('https://bing.img.run/uhd.php')] bg-cover bg-center opacity-10"></div>
|
||||
<div class="absolute inset-0 bg-white/70 backdrop-blur-sm"></div>
|
||||
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
||||
<div class="content-center">
|
||||
<!-- 503标题 -->
|
||||
<h1 class="text-[clamp(5rem,15vw,10rem)] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-indigo-600 mb-4 tracking-tighter">
|
||||
<h1 class="text-[clamp(5rem,15vw,10rem)] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 mb-4 tracking-tighter">
|
||||
503
|
||||
</h1>
|
||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-6">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 迁移自 TempLate/Invite/index.html(招聘首页):c-furry 插画元素保留;Apply 按钮跳转改为站内路由 -->
|
||||
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen flex flex-col">
|
||||
<div class="bg-gradient-to-br from-blue-50 to-blue-50 min-h-screen flex flex-col">
|
||||
<main class="flex-grow flex flex-col items-center justify-center px-6 py-12 relative overflow-hidden">
|
||||
<div class="hidden lg:block absolute left-0 top-[12.5%] -translate-y-1/2 w-1/3 max-w-md animate-float c-furry" style="animation-delay: 0s;">
|
||||
<img src="https://www.gvsds.com/assets/img/Background/ChiSha_Left.png" alt="左侧插画" class="w-full h-auto object-contain transform hover:scale-105 transition-transform duration-300">
|
||||
|
||||
@@ -94,10 +94,10 @@
|
||||
|
||||
<!-- 为什么选择我们 -->
|
||||
<div class="text-center mb-20 mt-20">
|
||||
<div class="inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 text-sm px-4 py-1.5 rounded-full mb-6">
|
||||
<span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span> 为什么选择我们
|
||||
<div class="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 text-blue-600 text-sm px-4 py-1.5 rounded-full mb-6">
|
||||
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></span> 为什么选择我们
|
||||
</div>
|
||||
<h2 class="text-5xl font-bold text-slate-900 mb-4 tracking-tight"> 加入我们, <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-cyan-600">能获得什么</span>
|
||||
<h2 class="text-5xl font-bold text-slate-900 mb-4 tracking-tight"> 加入我们, <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600">能获得什么</span>
|
||||
</h2>
|
||||
<p class="text-slate-600 text-lg max-w-xl mx-auto"> 我们相信每一位成员都值得被看见、被支持、被表扬 </p>
|
||||
</div>
|
||||
@@ -147,7 +147,7 @@
|
||||
<div class="relative rounded-3xl overflow-hidden border border-slate-200 bg-white p-10 text-center shadow-sm">
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div class="absolute -top-20 left-1/2 -translate-x-1/2 w-96 h-40 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-10 left-1/4 w-64 h-32 bg-emerald-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-10 left-1/4 w-64 h-32 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-10 right-1/4 w-64 h-32 bg-cyan-500/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
@@ -156,7 +156,7 @@
|
||||
<p class="text-slate-600 text-sm max-w-md mx-auto mb-8 leading-relaxed"> GVSDS 工作室欢迎每一位有想法、有热情的你。<br />不论你是前端、后端、设计还是运营,这里都有你的位置。 </p>
|
||||
<div class="flex justify-center gap-10 mb-8">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-emerald-600">2019</div>
|
||||
<div class="text-2xl font-bold text-blue-600">2019</div>
|
||||
<div class="text-slate-500 text-xs mt-1">创立年份</div>
|
||||
</div>
|
||||
<div class="w-px bg-slate-200"></div>
|
||||
@@ -171,7 +171,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center gap-3 flex-wrap">
|
||||
<button class="bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-medium px-8 py-3 rounded-xl transition-all duration-200 text-sm shadow-md shadow-emerald-500/10 cursor-pointer" @click="mailto('mailto:hr@gvsds.com')"> 立即加入我们 </button>
|
||||
<button class="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-medium px-8 py-3 rounded-xl transition-all duration-200 text-sm shadow-md shadow-blue-500/10 cursor-pointer" @click="mailto('mailto:hr@gvsds.com')"> 立即加入我们 </button>
|
||||
<button class="border border-slate-200 hover:border-slate-400 text-slate-700 hover:text-slate-900 px-8 py-3 rounded-xl transition-all duration-200 text-sm cursor-pointer" @click="mailto('https://www.gvsds.com/')"> 了解更多 </button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -393,9 +393,9 @@ function deptStyle(department: string): { bg: string; emoji: string } {
|
||||
case '技术':
|
||||
return { bg: 'bg-blue-500/10 text-blue-600', emoji: '⚡' }
|
||||
case '产品':
|
||||
return { bg: 'bg-purple-500/10 text-purple-600', emoji: '🧩' }
|
||||
return { bg: 'bg-blue-500/10 text-blue-600', emoji: '🧩' }
|
||||
case '设计':
|
||||
return { bg: 'bg-pink-500/10 text-pink-600', emoji: '🎨' }
|
||||
return { bg: 'bg-blue-500/10 text-blue-600', emoji: '🎨' }
|
||||
case '运营':
|
||||
return { bg: 'bg-green-500/10 text-green-600', emoji: '📈' }
|
||||
default:
|
||||
@@ -416,10 +416,10 @@ const benefits = [
|
||||
icon: '📦',
|
||||
title: '成员福利',
|
||||
badge: '免费申请',
|
||||
badgeColor: 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20',
|
||||
accentColor: 'from-emerald-500/10 to-transparent',
|
||||
borderColor: 'hover:border-emerald-500/30',
|
||||
glowColor: 'bg-emerald-500/5',
|
||||
badgeColor: 'bg-blue-500/10 text-blue-600 border-blue-500/20',
|
||||
accentColor: 'from-blue-500/10 to-transparent',
|
||||
borderColor: 'hover:border-blue-500/30',
|
||||
glowColor: 'bg-blue-500/5',
|
||||
items: [
|
||||
{ icon: '📧', text: '免费申请专属工作室邮箱,彰显你的身份' },
|
||||
{ icon: '🖥️', text: '每位成员均可申请一台免费云服务器' },
|
||||
@@ -464,10 +464,10 @@ const benefits = [
|
||||
icon: '🌐',
|
||||
title: '丰富的资源',
|
||||
badge: '8所合作',
|
||||
badgeColor: 'bg-purple-500/10 text-purple-600 border-purple-500/20',
|
||||
accentColor: 'from-purple-500/10 to-transparent',
|
||||
borderColor: 'hover:border-purple-500/30',
|
||||
glowColor: 'bg-purple-500/5',
|
||||
badgeColor: 'bg-blue-500/10 text-blue-600 border-blue-500/20',
|
||||
accentColor: 'from-blue-500/10 to-transparent',
|
||||
borderColor: 'hover:border-blue-500/30',
|
||||
glowColor: 'bg-blue-500/5',
|
||||
items: [
|
||||
{ icon: '🤝', text: '已与全国 8 所工作室 / 社区正式达成战略合作' },
|
||||
{ icon: '📚', text: '海量学习资源、项目资源随时共享,应有尽有' },
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div class="p-8 rounded-2xl border border-white/5 hover-glow" style="background-color: var(--bg-card);">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-[#2487FE] to-purple-900 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg"> 赤 </div>
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-[#2487FE] to-blue-900 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg"> 赤 </div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-white">渊泽</h3>
|
||||
<p class="text-sm" style="color: var(--primary);">角色概念设计师 / 插画师</p>
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 -z-10">
|
||||
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-blue-100 blur-3xl opacity-70"></div>
|
||||
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-indigo-100 blur-3xl opacity-70"></div>
|
||||
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-blue-100 blur-3xl opacity-70"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-in-up" style="animation-delay: 0.1s;">
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight mb-6">
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary via-secondary to-indigo-600">协同筑码</span> 工作法
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary via-secondary to-blue-600">协同筑码</span> 工作法
|
||||
</h1>
|
||||
<p class="mt-4 text-xl text-slate-500 max-w-3xl mx-auto leading-relaxed">
|
||||
通过规范先行、增量迭代与质量内建,打造可维护、高可用的软件交付体系。
|
||||
@@ -255,7 +255,7 @@
|
||||
|
||||
<!-- Phase 2 -->
|
||||
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
||||
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
||||
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
||||
02
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
@@ -263,7 +263,7 @@
|
||||
<p class="text-slate-500 text-sm font-mono">CODING & IMPLEMENTATION</p>
|
||||
</div>
|
||||
<div class="flex-1 space-y-6">
|
||||
<div class="glass-card p-6 rounded-xl border-t-4 border-indigo-500 bg-white">
|
||||
<div class="glass-card p-6 rounded-xl border-t-4 border-blue-500 bg-white">
|
||||
<h4 class="font-bold text-slate-800 mb-4"><i class="fa-solid fa-terminal mr-2"></i>通用编码规范</h4>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm text-left text-slate-600">
|
||||
@@ -291,15 +291,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-card p-6 rounded-xl border-t-4 border-indigo-500 bg-white">
|
||||
<div class="glass-card p-6 rounded-xl border-t-4 border-blue-500 bg-white">
|
||||
<h4 class="font-bold text-slate-800 mb-4"><i class="fa-solid fa-code-branch mr-2"></i>Git 版本控制</h4>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
||||
<div class="bg-slate-50 p-3 rounded">
|
||||
<strong class="text-indigo-600 block mb-1">分支策略</strong>
|
||||
<strong class="text-blue-600 block mb-1">分支策略</strong>
|
||||
<p class="text-slate-600">master (生产) / develop (开发) / feature-xxx (功能) / hotfix-xxx (紧急修复)</p>
|
||||
</div>
|
||||
<div class="bg-slate-50 p-3 rounded">
|
||||
<strong class="text-indigo-600 block mb-1">提交规范</strong>
|
||||
<strong class="text-blue-600 block mb-1">提交规范</strong>
|
||||
<p class="text-slate-600">feat/fix/docs/style/refactor... 例如: `feat(user): 实现登录`</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,37 +329,37 @@
|
||||
|
||||
<!-- Phase 4 -->
|
||||
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
||||
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-emerald-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
||||
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
||||
04
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-2">发布与运维</h3>
|
||||
<p class="text-slate-500 text-sm font-mono">DEPLOYMENT & OPS</p>
|
||||
</div>
|
||||
<div class="flex-1 glass-card p-6 rounded-xl border-b-4 border-emerald-600 bg-white">
|
||||
<div class="flex-1 glass-card p-6 rounded-xl border-b-4 border-blue-600 bg-white">
|
||||
<ul class="space-y-3 text-sm text-slate-600">
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 输出发布清单与回滚方案</li>
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 非核心时段发布,数据/代码备份</li>
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 灰度发布策略,实时监控日志与资源</li>
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-emerald-500 mt-1"></i> 沉淀部署文档与运维手册</li>
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-blue-500 mt-1"></i> 输出发布清单与回滚方案</li>
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-blue-500 mt-1"></i> 非核心时段发布,数据/代码备份</li>
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-blue-500 mt-1"></i> 灰度发布策略,实时监控日志与资源</li>
|
||||
<li class="flex items-start gap-2"><i class="fa-solid fa-check-circle text-blue-500 mt-1"></i> 沉淀部署文档与运维手册</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phase 5 -->
|
||||
<div class="relative md:pl-24 flex flex-col md:flex-row gap-8 group">
|
||||
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
||||
<div class="absolute left-0 top-0 w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xl shadow-lg z-10 border-4 border-slate-50">
|
||||
05
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<h3 class="text-2xl font-bold text-slate-900 mb-2">复盘与优化</h3>
|
||||
<p class="text-slate-500 text-sm font-mono">REVIEW & OPTIMIZE</p>
|
||||
</div>
|
||||
<div class="flex-1 glass-card p-6 rounded-xl border-l-4 border-purple-600 bg-white">
|
||||
<div class="flex-1 glass-card p-6 rounded-xl border-l-4 border-blue-600 bg-white">
|
||||
<p class="text-slate-600 text-sm mb-4">迭代结束不等于项目结束。</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
|
||||
<div class="bg-purple-50 p-3 rounded-lg">
|
||||
<i class="fa-solid fa-lightbulb text-purple-600 text-xl mb-2"></i>
|
||||
<div class="bg-blue-50 p-3 rounded-lg">
|
||||
<i class="fa-solid fa-lightbulb text-blue-600 text-xl mb-2"></i>
|
||||
<div class="font-bold text-slate-800 text-sm">亮点总结</div>
|
||||
</div>
|
||||
<div class="bg-red-50 p-3 rounded-lg">
|
||||
@@ -416,13 +416,13 @@
|
||||
<div class="absolute top-10 left-1/2 -translate-x-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-600 text-3xl border border-slate-100">
|
||||
<i class="fa-brands fa-git-alt"></i>
|
||||
</div>
|
||||
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-indigo-600 text-3xl border border-slate-100">
|
||||
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-600 text-3xl border border-slate-100">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
</div>
|
||||
<div class="absolute left-10 top-1/2 -translate-y-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-cyan-600 text-3xl border border-slate-100">
|
||||
<i class="fa-solid fa-file-code"></i>
|
||||
</div>
|
||||
<div class="absolute right-10 top-1/2 -translate-y-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-600 text-3xl border border-slate-100">
|
||||
<div class="absolute right-10 top-1/2 -translate-y-1/2 w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-600 text-3xl border border-slate-100">
|
||||
<i class="fa-solid fa-server"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -490,7 +490,7 @@
|
||||
<span class="text-slate-700 font-bold">95%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-200 rounded-full h-2">
|
||||
<div class="bg-emerald-500 h-2 rounded-full" style="width: 95%"></div>
|
||||
<div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -557,10 +557,10 @@
|
||||
|
||||
const principles = [
|
||||
{ iconBg: 'bg-blue-100', icon: 'fas fa-gem', iconColor: 'var(--color-primary, #1e40af)', title: '价值导向', desc: '拒绝炫技,聚焦业务问题解决,优先保证功能可用与稳定。' },
|
||||
{ iconBg: 'bg-indigo-100', icon: 'fas fa-ruler-combined', iconColor: '#3b82f6', title: '规范先行', desc: '统一编码、分支与文档规范,降低协作成本,提升可读性。' },
|
||||
{ iconBg: 'bg-blue-100', icon: 'fas fa-ruler-combined', iconColor: '#3b82f6', title: '规范先行', desc: '统一编码、分支与文档规范,降低协作成本,提升可读性。' },
|
||||
{ iconBg: 'bg-sky-100', icon: 'fas fa-shoe-prints', iconColor: '#f59e0b', title: '增量迭代', desc: '小步快跑,拆分大需求为小任务,每轮输出可验证成果。' },
|
||||
{ iconBg: 'bg-emerald-100', icon: 'fas fa-shield-alt', iconColor: '#10b981', title: '质量内建', desc: '测试、复盘、优化融入全流程,而非仅依赖最终验收。' },
|
||||
{ iconBg: 'bg-amber-100', icon: 'fas fa-users', iconColor: '#f59e0b', title: '知识共享', desc: '鼓励代码评审与技术分享,沉淀通用能力,打破壁垒。' },
|
||||
{ iconBg: 'bg-blue-100', icon: 'fas fa-shield-alt', iconColor: '#10b981', title: '质量内建', desc: '测试、复盘、优化融入全流程,而非仅依赖最终验收。' },
|
||||
{ iconBg: 'bg-blue-100', icon: 'fas fa-users', iconColor: '#f59e0b', title: '知识共享', desc: '鼓励代码评审与技术分享,沉淀通用能力,打破壁垒。' },
|
||||
]
|
||||
|
||||
const timelineSteps = [
|
||||
@@ -573,13 +573,13 @@ const timelineSteps = [
|
||||
|
||||
const collabItems = [
|
||||
{ bg: 'bg-blue-500', icon: 'fa-solid fa-people-group', title: '每日站会 (10分钟)', desc: '同步进度、暴露阻塞、协调资源。拒绝长篇大论,只讲干货。' },
|
||||
{ bg: 'bg-indigo-500', icon: 'fa fa-code', title: '严格代码评审 (CR)', desc: '对事不对人,聚焦逻辑正确性、性能与安全。每行合并代码至少经过一双眼睛。' },
|
||||
{ bg: 'bg-blue-500', icon: 'fa fa-code', title: '严格代码评审 (CR)', desc: '对事不对人,聚焦逻辑正确性、性能与安全。每行合并代码至少经过一双眼睛。' },
|
||||
{ bg: 'bg-cyan-500', icon: 'fa-solid fa-book', title: '统一文档与知识分享', desc: '核心文档存储在知识库,接口文档自动生成。定期技术分享,拒绝"单点知识壁垒"。' },
|
||||
]
|
||||
|
||||
const whyAdvantages = [
|
||||
{ iconBg: 'bg-blue-100', icon: 'fas fa-tachometer-alt', iconColor: '#1e40af', title: '显著提升交付效率', desc: '增量迭代模式配合自动化工具链,减少重复劳动,让开发专注于核心逻辑。' },
|
||||
{ iconBg: 'bg-indigo-100', icon: 'fas fa-project-diagram', iconColor: '#3b82f6', title: '降低项目风险', desc: '通过代码评审、单元测试和灰度发布机制,提前发现并规避90%的潜在故障。' },
|
||||
{ iconBg: 'bg-blue-100', icon: 'fas fa-project-diagram', iconColor: '#3b82f6', title: '降低项目风险', desc: '通过代码评审、单元测试和灰度发布机制,提前发现并规避90%的潜在故障。' },
|
||||
{ iconBg: 'bg-sky-100', icon: 'fas fa-layer-group', iconColor: '#f59e0b', title: '沉淀团队资产', desc: '将个人经验转化为团队文档和通用组件库,避免因人员流动导致的技术断层。' },
|
||||
]
|
||||
|
||||
|
||||
@@ -84,30 +84,30 @@
|
||||
<div class="bg-white rounded-xl shadow-xl overflow-hidden border border-slate-200">
|
||||
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center"> <span class="text-sm font-bold text-slate-700">RS_CONFIG.js</span> <span class="text-xs text-slate-400 font-mono">V1.3.7.2</span> </div>
|
||||
<div class="p-0">
|
||||
<pre class="code-block !rounded-t-none !border-t-0" style="overflow-y: scroll; height: 300px;"><span class="text-purple-400">window</span>.RS_CONFIG = {
|
||||
<pre class="code-block !rounded-t-none !border-t-0" style="overflow-y: scroll; height: 300px;"><span class="text-blue-400">window</span>.RS_CONFIG = {
|
||||
<span class="text-blue-400">VERSION</span>: <span class="text-green-400">'1.3.7.2'</span>, <span class="text-slate-500">// 当前系统版本号</span>
|
||||
<span class="text-blue-400">COPYRIGHT</span>: <span class="text-green-400">'© 2026 GVSDS Team'</span>, <span class="text-slate-500">// 版权声明</span>
|
||||
<span class="text-blue-400">SOURCE_FILE</span>: <span class="text-green-400">'ResourceShare.js'</span>, <span class="text-slate-500">// 源文件标识名称</span>
|
||||
|
||||
<span class="text-blue-400">ENABLE_UI</span>: <span class="text-orange-400">true</span>, <span class="text-slate-500">// 是否启用可视化界面 (启动页/日志/弹窗)</span>
|
||||
|
||||
<span class="text-blue-400">POST_MESSAGE_LIMIT</span>: <span class="text-purple-400">1</span> * <span class="text-purple-400">1024</span> * <span class="text-purple-400">1024</span>, <span class="text-slate-500">// 消息传输大小阈值 (1MB),超过转Blob</span>
|
||||
<span class="text-blue-400">BLOB_LIMIT</span>: <span class="text-purple-400">1024</span> * <span class="text-purple-400">1024</span> * <span class="text-purple-400">1024</span>, <span class="text-slate-500">// Blob数据处理限制 (1GB),防内存溢出</span>
|
||||
<span class="text-blue-400">SCRIPT_TIMEOUT</span>: <span class="text-purple-400">5</span> * <span class="text-purple-400">60</span> * <span class="text-purple-400">1000</span>, <span class="text-slate-500">// 脚本加载超时时间 (5分钟),超时强制释放</span>
|
||||
<span class="text-blue-400">PING_INTERVAL</span>: <span class="text-purple-400">100</span>, <span class="text-slate-500">// 子页向父页握手间隔</span>
|
||||
<span class="text-blue-400">PING_TIMEOUT</span>: <span class="text-purple-400">5000</span>, <span class="text-slate-500">// 父页握手响应超时 (5秒)</span>
|
||||
<span class="text-blue-400">REQUEST_TIMEOUT</span>: <span class="text-purple-400">10000</span>, <span class="text-slate-500">// 资源请求超时 (10秒)</span>
|
||||
<span class="text-blue-400">POST_MESSAGE_LIMIT</span>: <span class="text-blue-400">1</span> * <span class="text-blue-400">1024</span> * <span class="text-blue-400">1024</span>, <span class="text-slate-500">// 消息传输大小阈值 (1MB),超过转Blob</span>
|
||||
<span class="text-blue-400">BLOB_LIMIT</span>: <span class="text-blue-400">1024</span> * <span class="text-blue-400">1024</span> * <span class="text-blue-400">1024</span>, <span class="text-slate-500">// Blob数据处理限制 (1GB),防内存溢出</span>
|
||||
<span class="text-blue-400">SCRIPT_TIMEOUT</span>: <span class="text-blue-400">5</span> * <span class="text-blue-400">60</span> * <span class="text-blue-400">1000</span>, <span class="text-slate-500">// 脚本加载超时时间 (5分钟),超时强制释放</span>
|
||||
<span class="text-blue-400">PING_INTERVAL</span>: <span class="text-blue-400">100</span>, <span class="text-slate-500">// 子页向父页握手间隔</span>
|
||||
<span class="text-blue-400">PING_TIMEOUT</span>: <span class="text-blue-400">5000</span>, <span class="text-slate-500">// 父页握手响应超时 (5秒)</span>
|
||||
<span class="text-blue-400">REQUEST_TIMEOUT</span>: <span class="text-blue-400">10000</span>, <span class="text-slate-500">// 资源请求超时 (10秒)</span>
|
||||
|
||||
<span class="text-blue-400">RETRY</span>: {
|
||||
<span class="text-blue-400">COUNT</span>: <span class="text-purple-400">3</span>, <span class="text-slate-500">// 失败重试次数</span>
|
||||
<span class="text-blue-400">DELAY</span>: <span class="text-purple-400">1500</span> <span class="text-slate-500">// 重试间隔</span>
|
||||
<span class="text-blue-400">COUNT</span>: <span class="text-blue-400">3</span>, <span class="text-slate-500">// 失败重试次数</span>
|
||||
<span class="text-blue-400">DELAY</span>: <span class="text-blue-400">1500</span> <span class="text-slate-500">// 重试间隔</span>
|
||||
},
|
||||
|
||||
<span class="text-blue-400">Z_INDEX</span>: {
|
||||
<span class="text-blue-400">SPLASH</span>: <span class="text-purple-400">2147483647</span>, <span class="text-slate-500">// 启动页层级 (最高)</span>
|
||||
<span class="text-blue-400">PROGRESS</span>: <span class="text-purple-400">2147483646</span>, <span class="text-slate-500">// 进度条层级</span>
|
||||
<span class="text-blue-400">PANEL</span>: <span class="text-purple-400">2147483645</span>, <span class="text-slate-500">// 日志面板层级</span>
|
||||
<span class="text-blue-400">ERROR</span>: <span class="text-purple-400">2147483648</span> <span class="text-slate-500">// 错误弹窗层级</span>
|
||||
<span class="text-blue-400">SPLASH</span>: <span class="text-blue-400">2147483647</span>, <span class="text-slate-500">// 启动页层级 (最高)</span>
|
||||
<span class="text-blue-400">PROGRESS</span>: <span class="text-blue-400">2147483646</span>, <span class="text-slate-500">// 进度条层级</span>
|
||||
<span class="text-blue-400">PANEL</span>: <span class="text-blue-400">2147483645</span>, <span class="text-slate-500">// 日志面板层级</span>
|
||||
<span class="text-blue-400">ERROR</span>: <span class="text-blue-400">2147483648</span> <span class="text-slate-500">// 错误弹窗层级</span>
|
||||
},
|
||||
|
||||
<span class="text-blue-400">LOG_LEVEL_UI</span>: <span class="text-green-400">'debug'</span>, <span class="text-slate-500">// UI面板日志级别 ('debug'/'info'/'error'/'none')</span>
|
||||
@@ -121,18 +121,18 @@
|
||||
},
|
||||
|
||||
<span class="text-blue-400">ANIMATION</span>: {
|
||||
<span class="text-blue-400">SPLASH_HIDE</span>: <span class="text-purple-400">800</span>, <span class="text-slate-500">// 启动页隐藏动画时长</span>
|
||||
<span class="text-blue-400">PROGRESS_COMPLETE</span>: <span class="text-purple-400">800</span>,<span class="text-slate-500">// 进度条完成动画时长</span>
|
||||
<span class="text-blue-400">PANEL_HIDE</span>: <span class="text-purple-400">500</span>, <span class="text-slate-500">// 面板隐藏动画时长</span>
|
||||
<span class="text-blue-400">ERROR_SLIDE_UP</span>: <span class="text-purple-400">400</span>, <span class="text-slate-500">// 错误弹窗滑入动画时长</span>
|
||||
<span class="text-blue-400">LOG_FADE_IN</span>: <span class="text-purple-400">200</span> <span class="text-slate-500">// 日志条目淡入动画时长</span>
|
||||
<span class="text-blue-400">SPLASH_HIDE</span>: <span class="text-blue-400">800</span>, <span class="text-slate-500">// 启动页隐藏动画时长</span>
|
||||
<span class="text-blue-400">PROGRESS_COMPLETE</span>: <span class="text-blue-400">800</span>,<span class="text-slate-500">// 进度条完成动画时长</span>
|
||||
<span class="text-blue-400">PANEL_HIDE</span>: <span class="text-blue-400">500</span>, <span class="text-slate-500">// 面板隐藏动画时长</span>
|
||||
<span class="text-blue-400">ERROR_SLIDE_UP</span>: <span class="text-blue-400">400</span>, <span class="text-slate-500">// 错误弹窗滑入动画时长</span>
|
||||
<span class="text-blue-400">LOG_FADE_IN</span>: <span class="text-blue-400">200</span> <span class="text-slate-500">// 日志条目淡入动画时长</span>
|
||||
},
|
||||
|
||||
<span class="text-blue-400">UI_STYLE</span>: {
|
||||
<span class="text-blue-400">FONT_FAMILY</span>: <span class="text-green-400">"'Segoe UI Variable', 'Segoe UI', sans-serif"</span>, <span class="text-slate-500">// 系统字体</span>
|
||||
<span class="text-blue-400">MONO_FONT</span>: <span class="text-green-400">"'Consolas', 'Monaco', monospace"</span>, <span class="text-slate-500">// 代码字体</span>
|
||||
<span class="text-blue-400">BLUR_VALUE</span>: <span class="text-green-400">'20px'</span>, <span class="text-slate-500">// 背景模糊度</span>
|
||||
<span class="text-blue-400">SHADOW_OPACITY</span>: <span class="text-purple-400">0.12</span> <span class="text-slate-500">// 阴影透明度</span>
|
||||
<span class="text-blue-400">SHADOW_OPACITY</span>: <span class="text-blue-400">0.12</span> <span class="text-slate-500">// 阴影透明度</span>
|
||||
}
|
||||
};</pre>
|
||||
</div>
|
||||
@@ -240,7 +240,7 @@
|
||||
</div>
|
||||
<!-- Right Arrows -->
|
||||
<div class="absolute right-10 top-1/2 -translate-y-1/2 flex flex-col items-center">
|
||||
<div class="text-xs text-emerald-500 bg-white px-1 mb-1">PostMessage (Blob)</div>
|
||||
<div class="text-xs text-blue-500 bg-white px-1 mb-1">PostMessage (Blob)</div>
|
||||
<div class="h-8 w-[1px] bg-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -291,7 +291,7 @@
|
||||
<!-- 子页面职责 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="p-2 rounded-lg bg-indigo-100 text-indigo-600">
|
||||
<div class="p-2 rounded-lg bg-blue-100 text-blue-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-slate-900">子页面:轻量接入</h3>
|
||||
@@ -300,8 +300,8 @@
|
||||
<div class="space-y-6">
|
||||
<div v-for="(step, i) in childSteps" :key="i" class="flex gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold">{{ i + 1 }}</div>
|
||||
<div v-if="i < childSteps.length - 1" class="w-0.5 flex-1 bg-indigo-200 my-1"></div>
|
||||
<div class="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-bold">{{ i + 1 }}</div>
|
||||
<div v-if="i < childSteps.length - 1" class="w-0.5 flex-1 bg-blue-200 my-1"></div>
|
||||
</div>
|
||||
<div :class="i < childSteps.length - 1 ? 'pb-6' : ''">
|
||||
<h4 class="font-bold text-slate-800" v-html="step.title"></h4>
|
||||
@@ -445,7 +445,7 @@
|
||||
|
||||
<span class="text-slate-500"><!-- 3. 正常书写业务代码,无需额外等待逻辑 --></span>
|
||||
<span class="text-blue-400"><script></span>
|
||||
<span class="text-purple-400">window</span>.resourceShareManager.on(<span class="text-green-400">'ready'</span>, () => {
|
||||
<span class="text-blue-400">window</span>.resourceShareManager.on(<span class="text-green-400">'ready'</span>, () => {
|
||||
$(<span class="text-green-400">'#app'</span>).show(); <span class="text-slate-500">// jQuery 确保已加载</span>
|
||||
});
|
||||
<span class="text-blue-400"></script></span></pre>
|
||||
@@ -475,8 +475,8 @@ const features = [
|
||||
desc: '自动为远程资源生成 <code>VM_</code> 前缀的虚拟文件名(如 <code>VM_jquery.min.js</code>),保留完整的 SourceURL 路径层级,极大提升开发者调试体验。',
|
||||
},
|
||||
{
|
||||
iconBg: 'bg-indigo-100',
|
||||
iconColor: 'text-indigo-600',
|
||||
iconBg: 'bg-blue-100',
|
||||
iconColor: 'text-blue-600',
|
||||
svgPath: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
|
||||
title: '智能错误诊断',
|
||||
desc: '内置规则引擎,自动识别常见的加载错误(如 jQuery 缺失、CORS 限制),并提供具体的解决方案建议,告别无头苍蝇式排查。',
|
||||
@@ -504,15 +504,15 @@ const distAdvantages = [
|
||||
desc: '首个 iframe 请求资源后,后续所有同源 iframe 均直接从父级内存读取 Blob URL 或 PostMessage 消息,网络延迟为零。',
|
||||
},
|
||||
{
|
||||
iconBg: 'bg-indigo-50',
|
||||
iconColor: 'text-indigo-600',
|
||||
iconBg: 'bg-blue-50',
|
||||
iconColor: 'text-blue-600',
|
||||
svgPath: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
|
||||
title: '流量节省',
|
||||
desc: '对于 100 个 iframe 加载同一套 2MB 的 UI 库,系统仅消耗 2MB 流量,而非 200MB,显著降低服务器带宽成本。',
|
||||
},
|
||||
{
|
||||
iconBg: 'bg-emerald-50',
|
||||
iconColor: 'text-emerald-600',
|
||||
iconBg: 'bg-blue-50',
|
||||
iconColor: 'text-blue-600',
|
||||
svgPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
|
||||
title: '同源安全握手',
|
||||
desc: '内置 Ping/Pong 握手机制,严格校验 Origin,确保资源只在授权的同源 iframe 间流转,防止数据泄露。',
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-14">
|
||||
<!-- Big Featured Card -->
|
||||
<div class="lg:col-span-3 bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 rounded-3xl p-8 text-white relative overflow-hidden card-hover shadow-xl shadow-blue-100">
|
||||
<div class="lg:col-span-3 bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 rounded-3xl p-8 text-white relative overflow-hidden card-hover shadow-xl shadow-blue-100">
|
||||
<!-- Decorative circles -->
|
||||
<div class="absolute -top-10 -right-10 w-48 h-48 bg-white opacity-5 rounded-full"></div>
|
||||
<div class="absolute -bottom-16 -right-4 w-72 h-72 bg-white opacity-5 rounded-full"></div>
|
||||
@@ -76,43 +76,43 @@
|
||||
<!-- Card A -->
|
||||
<div class="flex-1 bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-12 h-12 bg-violet-50 rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h4 class="font-bold text-gray-900">项目运营托管</h4>
|
||||
<span class="text-xs bg-violet-50 text-violet-700 font-semibold px-2 py-0.5 rounded-full">全托管</span>
|
||||
<span class="text-xs bg-blue-50 text-blue-700 font-semibold px-2 py-0.5 rounded-full">全托管</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 leading-relaxed">辅助部署服务器,提供服务器运维、数据备份、版本更新、故障处理等一站式全流程运营托管服务。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||||
<span class="text-sm text-gray-400">24 小时监控</span>
|
||||
<button class="text-violet-600 text-sm font-semibold hover:text-violet-800 transition" @click="openQuotation">了解更多 →</button>
|
||||
<button class="text-blue-600 text-sm font-semibold hover:text-blue-800 transition" @click="openQuotation">了解更多 →</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card B -->
|
||||
<div class="flex-1 bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<h4 class="font-bold text-gray-900">B2B / B2C 定制开发</h4>
|
||||
<span class="text-xs bg-emerald-50 text-emerald-700 font-semibold px-2 py-0.5 rounded-full">低成本</span>
|
||||
<span class="text-xs bg-blue-50 text-blue-700 font-semibold px-2 py-0.5 rounded-full">低成本</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 leading-relaxed">坚持质量优先、效率至上的服务理念,以高标准品质为核心,以高效响应为保障,为企业提供稳定可靠、灵活适配的专业解决方案。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||||
<span class="text-sm text-gray-400">查看我们历来的开源项目</span>
|
||||
<button class="text-emerald-600 text-sm font-semibold hover:text-emerald-800 transition" @click="openUrl('https://git.gvsds.com/GVSDS', '_blank')">了解更多 →</button>
|
||||
<button class="text-blue-600 text-sm font-semibold hover:text-blue-800 transition" @click="openUrl('https://git.gvsds.com/GVSDS', '_blank')">了解更多 →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,7 +150,7 @@
|
||||
|
||||
<!-- ===== SECTION: OPEN SOURCE PROJECTS ===== -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xs font-bold uppercase tracking-widest text-violet-600 mb-1">开源项目</h2>
|
||||
<h2 class="text-xs font-bold uppercase tracking-widest text-blue-600 mb-1">开源项目</h2>
|
||||
<h3 class="text-2xl font-bold text-gray-900">基于开源,快速定制</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-14">
|
||||
@@ -229,7 +229,7 @@
|
||||
<div class="bg-gradient-to-r from-slate-900 via-blue-950 to-slate-900 rounded-3xl p-10 text-center relative overflow-hidden">
|
||||
<!-- Decorative -->
|
||||
<div class="absolute top-0 left-1/4 w-64 h-64 bg-blue-600 opacity-10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-64 h-64 bg-indigo-600 opacity-10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-64 h-64 bg-blue-600 opacity-10 rounded-full blur-3xl"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="inline-flex items-center gap-2 bg-blue-500 bg-opacity-20 border border-blue-400 border-opacity-30 text-blue-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-5">
|
||||
<span>立即咨询</span>
|
||||
@@ -289,8 +289,8 @@ const serviceCategories = [
|
||||
linkColor: 'text-cyan-600 hover:text-cyan-800',
|
||||
},
|
||||
{
|
||||
iconBg: 'bg-amber-50 group-hover:bg-amber-100',
|
||||
iconColor: 'text-amber-600',
|
||||
iconBg: 'bg-blue-50 group-hover:bg-blue-100',
|
||||
iconColor: 'text-blue-600',
|
||||
svgPath: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
|
||||
badge: '长期合作',
|
||||
title: '技术维护与迭代',
|
||||
@@ -298,22 +298,22 @@ const serviceCategories = [
|
||||
tags: ['Bug 修复', '性能优化', '版本迭代'],
|
||||
dot: 'bg-green-400',
|
||||
status: '7×24h 支持',
|
||||
linkColor: 'text-amber-600 hover:text-amber-800',
|
||||
linkColor: 'text-blue-600 hover:text-blue-800',
|
||||
},
|
||||
]
|
||||
|
||||
const openSourceProjects = [
|
||||
{
|
||||
iconBg: 'bg-violet-50 group-hover:bg-violet-100',
|
||||
iconColor: 'text-violet-600',
|
||||
iconBg: 'bg-blue-50 group-hover:bg-blue-100',
|
||||
iconColor: 'text-blue-600',
|
||||
svgPath: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z',
|
||||
title: '管理后台类',
|
||||
desc: '基于 GERP、VueAdmin、ReactAdmin 等开源后台框架定制企业管理系统,快速上线。',
|
||||
foot: '支持RBAC权限管理',
|
||||
},
|
||||
{
|
||||
iconBg: 'bg-pink-50 group-hover:bg-pink-100',
|
||||
iconColor: 'text-pink-600',
|
||||
iconBg: 'bg-blue-50 group-hover:bg-blue-100',
|
||||
iconColor: 'text-blue-600',
|
||||
svgPath: 'M15 10l4.553-2.069A1 1 0 0121 8.87v6.26a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z',
|
||||
title: '爬虫/自动化类',
|
||||
desc: '基于 Scrapy、Playwright 等开源框架开发定制化爬虫与自动化脚本。',
|
||||
|
||||
Reference in new issue
Block a user