feat: 初始化硅基伙伴企业官网项目

添加项目基础结构和核心页面组件,包括:
- 首页布局与导航栏
- 产品服务展示区
- 客户案例模块
- 关于我们介绍
- 联系咨询表单
- 页脚信息

集成Vue 3 + Vite技术栈,配置TypeScript支持,添加基础样式和响应式设计
This commit is contained in:
2026-03-19 17:36:43 +08:00
commit c3341b57be
24 changed files with 5449 additions and 0 deletions

View File

@@ -0,0 +1,138 @@
<template>
<section id="about" class="about">
<div class="container">
<div class="about-layout">
<div class="about-text">
<div class="tag">关于我们</div>
<h2 class="section-title" style="margin-top:16px">
专注 AI 落地<br>深耕企业场景
</h2>
<p class="section-sub" style="margin-top:16px">
北京硅基伙伴科技有限公司成立于 2022
总部位于北京我们由一批来自顶级互联网公司和 AI 研究院的技术专家创立
专注于企业 AI 数字化转型技术服务致力于让先进的 AI 能力真正在企业中落地生根
</p>
<p class="section-sub" style="margin-top:12px; font-size: 15px;">
我们相信AI 不应该只是大企业的特权
通过我们的产品和服务让每一家企业都能享受到 AI 带来的生产力革命
</p>
<div class="team-tags">
<span v-for="t in teamTags" :key="t">{{ t }}</span>
</div>
</div>
<div class="about-cards">
<div class="about-card" v-for="c in aboutCards" :key="c.title">
<div class="about-card-icon" v-html="c.icon"></div>
<h3>{{ c.title }}</h3>
<p>{{ c.desc }}</p>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
const teamTags = [
'前阿里巴巴', '前腾讯', '前百度 AI', '清华大学 CS',
'北京大学', '斯坦福大学', 'IEEE Fellow'
]
const aboutCards = [
{
title: '使命',
desc: '让 AI 成为每家企业的核心竞争力,推动中国企业数字化转型进入智能时代。',
icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>`,
},
{
title: '愿景',
desc: '成为中国企业 AI 数字化转型领域最受信赖的技术伙伴,服务超过 10,000 家企业。',
icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.8"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,
},
{
title: '价值观',
desc: '客户成功优先、技术诚实透明、持续创新迭代、共赢长期主义。',
icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.8"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>`,
},
]
</script>
<style scoped>
.about {
padding: 120px 0;
background: var(--white);
}
.about-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.team-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 32px;
}
.team-tags span {
padding: 6px 14px;
background: var(--gray-100);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
color: var(--gray-600);
}
.about-cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-card {
display: flex;
gap: 20px;
align-items: flex-start;
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: 28px;
border: 1.5px solid var(--gray-100);
transition: all .2s;
}
.about-card:hover {
border-color: var(--green-200);
background: var(--green-50);
box-shadow: var(--shadow);
}
.about-card-icon {
width: 48px;
height: 48px;
background: white;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-100);
}
.about-card h3 {
font-size: 16px;
font-weight: 800;
color: var(--gray-900);
letter-spacing: -.02em;
margin-bottom: 8px;
}
.about-card p {
font-size: 14px;
color: var(--gray-500);
line-height: 1.65;
}
@media (max-width: 1024px) {
.about-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.about { padding: 80px 0; }
}
</style>