474 lines
9.3 KiB
Vue
474 lines
9.3 KiB
Vue
<script setup>
|
||
import Head_menu from "@/module/head_menu.vue";
|
||
import Footer from "@/module/footer.vue";
|
||
|
||
// 公司信息
|
||
const companyInfo = {
|
||
name: '团队名',
|
||
founded: '2020年',
|
||
location: '中国·北京',
|
||
employees: '200+',
|
||
mission: '子标题 使命 的内容',
|
||
vision: '子标题 愿景 的内容'
|
||
}
|
||
|
||
// 团队成贝
|
||
const teamMembers = [
|
||
{
|
||
name: '姓名',
|
||
position: '职位',
|
||
avatar: '👨💼',
|
||
description: '简单的描述'
|
||
},
|
||
{
|
||
name: '姓名',
|
||
position: '职位',
|
||
avatar: '👨💻',
|
||
description: '简单的描述'
|
||
},
|
||
{
|
||
name: '姓名',
|
||
position: '职位',
|
||
avatar: '👩💼',
|
||
description: '简单的描述'
|
||
},
|
||
{
|
||
name: '姓名',
|
||
position: '职位',
|
||
avatar: '👨🎨',
|
||
description: '简单的描述'
|
||
}
|
||
]
|
||
|
||
// 发展历程
|
||
const milestones = [
|
||
{
|
||
year: 'xxxx年',
|
||
title: 'xxxxxx',
|
||
description: '简要描述'
|
||
},
|
||
{
|
||
year: 'xxxx年',
|
||
title: 'xxxxxx',
|
||
description: '简要描述'
|
||
},
|
||
{
|
||
year: 'xxxx年',
|
||
title: 'xxxxxx',
|
||
description: '简要描述'
|
||
},
|
||
{
|
||
year: 'xxxx年',
|
||
title: 'xxxxxx',
|
||
description: '简要描述'
|
||
},
|
||
{
|
||
year: 'xxxx年',
|
||
title: 'xxxxxx',
|
||
description: '简要描述'
|
||
},
|
||
{
|
||
year: 'xxxx年',
|
||
title: 'xxxxxx',
|
||
description: '简要描述'
|
||
}
|
||
]
|
||
|
||
// 核心价值
|
||
const values = [
|
||
{
|
||
icon: '🎯',
|
||
title: '核心价值 标题',
|
||
description: '核心价值 简介'
|
||
},
|
||
{
|
||
icon: '💡',
|
||
title: '核心价值 标题',
|
||
description: '核心价值 简介'
|
||
},
|
||
{
|
||
icon: '🤝',
|
||
title: '核心价值 标题',
|
||
description: '核心价值 简介'
|
||
},
|
||
{
|
||
icon: '⚡',
|
||
title: '核心价值 标题',
|
||
description: '核心价值 简介'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="about-page">
|
||
<!--顶部导航栏-->
|
||
<head_menu></head_menu>
|
||
|
||
<!--简介区域-->
|
||
<section class="hero-section">
|
||
<div class="container">
|
||
<h1 class="page-title">关于我们</h1>
|
||
<p class="page-subtitle">了解我们的故事和愿景</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!--介绍区域-->
|
||
<section class="intro-section container">
|
||
<div class="intro-content card">
|
||
<div class="intro-text">
|
||
<h2 class="intro-title">简介</h2>
|
||
<p class="intro-desc">这里填写一大串的介绍文本</p>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<span class="info-label">成立于：</span>
|
||
<span class="info-value">{{ companyInfo.founded }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">地点：</span>
|
||
<span class="info-value">{{ companyInfo.location }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">规模：</span>
|
||
<span class="info-value">{{ companyInfo.employees }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="mission-vision">
|
||
<div class="mv-item">
|
||
<h3>使命</h3>
|
||
<p>{{ companyInfo.mission }}</p>
|
||
</div>
|
||
<div class="mv-item">
|
||
<h3>愿景</h3>
|
||
<p>{{ companyInfo.vision }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--核心价值区域-->
|
||
<section class="values-section">
|
||
<div class="container">
|
||
<h2 class="section-title">核心价值</h2>
|
||
<p class="section-subtitle">我们的价值观指引着每一步前行</p>
|
||
<div class="values-grid">
|
||
<div v-for="(value, index) in values" :key="index" class="value-card card">
|
||
<div class="value-icon">{{ value.icon }}</div>
|
||
<h3 class="value-title">{{ value.title }}</h3>
|
||
<p class="value-desc">{{ value.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--团队展示区域-->
|
||
<section class="team-section container">
|
||
<h2 class="section-title">核心团队</h2>
|
||
<p class="section-subtitle">优秀的团队成就卓越的事业</p>
|
||
<div class="team-grid">
|
||
<div v-for="(member, index) in teamMembers" :key="index" class="team-card card">
|
||
<div class="member-avatar">{{ member.avatar }}</div>
|
||
<h3 class="member-name">{{ member.name }}</h3>
|
||
<p class="member-position">{{ member.position }}</p>
|
||
<p class="member-desc">{{ member.description }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--发展历程区域-->
|
||
<section class="timeline-section">
|
||
<div class="container">
|
||
<h2 class="section-title">发展历程</h2>
|
||
<p class="section-subtitle">记录我们的成长足迹</p>
|
||
<div class="timeline">
|
||
<div v-for="(milestone, index) in milestones" :key="index" class="timeline-item">
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content card">
|
||
<div class="timeline-year">{{ milestone.year }}</div>
|
||
<h3 class="timeline-title">{{ milestone.title }}</h3>
|
||
<p class="timeline-desc">{{ milestone.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!--页脚-->
|
||
<Footer/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.about-page {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 顶部区域 */
|
||
.hero-section {
|
||
background: var(--gradient-primary);
|
||
padding: 80px 20px;
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 18px;
|
||
opacity: 0.95;
|
||
}
|
||
|
||
/* 公司介绍区域 */
|
||
.intro-section {
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.intro-content {
|
||
padding: 50px;
|
||
}
|
||
|
||
.intro-title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
margin-bottom: 24px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.intro-desc {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.mission-vision {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 30px;
|
||
}
|
||
|
||
.mv-item h3 {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.mv-item p {
|
||
font-size: 16px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 核心价值区域 */
|
||
.values-section {
|
||
background: var(--bg-light);
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.values-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.value-card {
|
||
text-align: center;
|
||
padding: 40px 30px;
|
||
}
|
||
|
||
.value-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.value-title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.value-desc {
|
||
font-size: 15px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* 团队展示区域 */
|
||
.team-section {
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.team-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.team-card {
|
||
text-align: center;
|
||
padding: 40px 30px;
|
||
}
|
||
|
||
.member-avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 0 auto 20px;
|
||
background: var(--gradient-primary);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 48px;
|
||
}
|
||
|
||
.member-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.member-position {
|
||
font-size: 14px;
|
||
color: var(--primary-color);
|
||
margin-bottom: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.member-desc {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 发展历程区域 */
|
||
.timeline-section {
|
||
background: var(--bg-light);
|
||
padding: 80px 20px;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
max-width: 800px;
|
||
margin: 40px auto 0;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 2px;
|
||
height: 100%;
|
||
background: var(--border-color);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
margin-bottom: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.timeline-item:nth-child(odd) {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.timeline-marker {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 16px;
|
||
height: 16px;
|
||
background: var(--primary-color);
|
||
border-radius: 50%;
|
||
border: 3px solid white;
|
||
box-shadow: 0 0 0 3px var(--primary-color);
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeline-content {
|
||
width: 45%;
|
||
padding: 24px;
|
||
}
|
||
|
||
.timeline-year {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: var(--primary-color);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.timeline-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.timeline-desc {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.page-title {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.intro-content {
|
||
padding: 30px 20px;
|
||
}
|
||
|
||
.timeline::before {
|
||
left: 20px;
|
||
}
|
||
|
||
.timeline-marker {
|
||
left: 20px;
|
||
}
|
||
|
||
.timeline-item,
|
||
.timeline-item:nth-child(odd) {
|
||
flex-direction: row;
|
||
padding-left: 50px;
|
||
}
|
||
|
||
.timeline-content {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style> |