项目阶段性完成
This commit is contained in:
database-mysql committed
commit
8dd773c603
22 files changed
+5858
No files matched your search
@@ -0,0 +1,474 @@
|
||||
<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>
|
||||
Reference in new issue
Block a user