feat: 初始化硅基伙伴企业官网项目
添加项目基础结构和核心页面组件,包括: - 首页布局与导航栏 - 产品服务展示区 - 客户案例模块 - 关于我们介绍 - 联系咨询表单 - 页脚信息 集成Vue 3 + Vite技术栈,配置TypeScript支持,添加基础样式和响应式设计
This commit is contained in:
138
src/components/AboutSection.vue
Normal file
138
src/components/AboutSection.vue
Normal 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>
|
||||
Reference in New Issue
Block a user