720 lines
18 KiB
Vue
720 lines
18 KiB
Vue
<template>
|
||
<div class="about">
|
||
<!-- 页面头部 -->
|
||
<section class="page-header">
|
||
<div class="container">
|
||
<div class="header-content">
|
||
<h1 class="page-title">关于我们</h1>
|
||
<p class="page-subtitle">传承鄂伦春族文化，连接传统与现代</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 平台介绍 -->
|
||
<section class="platform-intro section">
|
||
<div class="container">
|
||
<div class="intro-layout">
|
||
<div class="intro-content">
|
||
<h2 class="section-title">平台简介</h2>
|
||
<p class="intro-text">
|
||
鄂伦春族文化传承与产品销售平台致力于保护、传承和弘扬鄂伦春族深厚的文化底蕴。
|
||
我们通过数字化手段，系统性地展示鄂伦春族的历史文化、传统习俗、非物质文化遗产，
|
||
同时为鄂伦春族手工艺人提供产品展示和销售渠道，实现文化传承与经济发展的良性循环。
|
||
</p>
|
||
<p class="intro-text">
|
||
平台汇聚了丰富的文化资源，包括传统狩猎文化、桦皮工艺、刺绣技艺、民族服饰等，
|
||
每一件展示的产品都承载着深厚的文化内涵和匠人的精湛技艺。我们相信，通过现代科技
|
||
与传统文化的结合，能够让更多人了解和欣赏鄂伦春族的独特魅力。
|
||
</p>
|
||
</div>
|
||
<div class="intro-visual">
|
||
<div class="visual-placeholder">
|
||
<svg viewBox="0 0 400 300" width="100%" height="300">
|
||
<defs>
|
||
<pattern id="ethnic-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||
<rect width="40" height="40" fill="var(--primary-color)" opacity="0.1"/>
|
||
<circle cx="20" cy="20" r="8" fill="var(--primary-color)" opacity="0.3"/>
|
||
</pattern>
|
||
</defs>
|
||
<rect width="400" height="300" fill="url(#ethnic-pattern)"/>
|
||
<circle cx="200" cy="150" r="60" fill="var(--primary-color)" opacity="0.6"/>
|
||
<text x="200" y="160" text-anchor="middle" fill="var(--primary-color)"
|
||
font-size="20" font-weight="bold">鄂伦春</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 我们的使命 -->
|
||
<section class="mission section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center">我们的使命</h2>
|
||
<div class="mission-grid">
|
||
<div class="mission-item card">
|
||
<div class="mission-icon">
|
||
<el-icon size="40" color="var(--primary-color)"><Collection /></el-icon>
|
||
</div>
|
||
<h3>文化保护</h3>
|
||
<p>通过数字化手段保护和记录鄂伦春族珍贵的文化遗产，为后代留存宝贵的文化财富。</p>
|
||
</div>
|
||
<div class="mission-item card">
|
||
<div class="mission-icon">
|
||
<el-icon size="40" color="var(--primary-color)"><Share /></el-icon>
|
||
</div>
|
||
<h3>文化传播</h3>
|
||
<p>让更多人了解和欣赏鄂伦春族文化，提升民族文化的影响力和认知度。</p>
|
||
</div>
|
||
<div class="mission-item card">
|
||
<div class="mission-icon">
|
||
<el-icon size="40" color="var(--primary-color)"><TrendCharts /></el-icon>
|
||
</div>
|
||
<h3>经济发展</h3>
|
||
<p>为鄂伦春族手工艺人提供销售平台，促进民族文化产业的发展和传承人的经济收入。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 团队介绍 -->
|
||
<section class="team section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center">团队介绍</h2>
|
||
<div class="team-grid">
|
||
<div v-for="member in teamMembers" :key="member.id" class="team-member card">
|
||
<div class="member-avatar">
|
||
<el-icon size="50"><User /></el-icon>
|
||
</div>
|
||
<div class="member-info">
|
||
<h3 class="member-name">{{ member.name }}</h3>
|
||
<p class="member-title">{{ member.title }}</p>
|
||
<p class="member-desc">{{ member.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 合作伙伴 -->
|
||
<section class="partners section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center">合作伙伴</h2>
|
||
<div class="partners-grid">
|
||
<div v-for="partner in partners" :key="partner.id" class="partner-item card">
|
||
<div class="partner-logo">
|
||
<div class="logo-placeholder">
|
||
<svg viewBox="0 0 120 80" width="100%" height="80">
|
||
<rect width="120" height="80" fill="var(--primary-color)" opacity="0.1"/>
|
||
<text x="60" y="45" text-anchor="middle" fill="var(--primary-color)"
|
||
font-size="12" font-weight="bold">{{ partner.name.substring(0, 4) }}</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="partner-info">
|
||
<h4>{{ partner.name }}</h4>
|
||
<p>{{ partner.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 发展历程 -->
|
||
<section class="timeline section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center">发展历程</h2>
|
||
<div class="timeline-container">
|
||
<div v-for="(event, index) in timelineEvents" :key="event.id" class="timeline-item">
|
||
<div class="timeline-marker">
|
||
<div class="marker-dot"></div>
|
||
<div v-if="index < timelineEvents.length - 1" class="marker-line"></div>
|
||
</div>
|
||
<div class="timeline-content card">
|
||
<div class="timeline-date">{{ event.date }}</div>
|
||
<h3 class="timeline-title">{{ event.title }}</h3>
|
||
<p class="timeline-desc">{{ event.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="contact section">
|
||
<div class="container">
|
||
<h2 class="section-title text-center">联系我们</h2>
|
||
<div class="contact-layout">
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<el-icon size="24" color="var(--primary-color)"><Location /></el-icon>
|
||
</div>
|
||
<div class="contact-details">
|
||
<h4>地址</h4>
|
||
<p>黑龙江省大兴安岭地区呼玛县<br>鄂伦春族文化传承中心</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<el-icon size="24" color="var(--primary-color)"><Phone /></el-icon>
|
||
</div>
|
||
<div class="contact-details">
|
||
<h4>电话</h4>
|
||
<p>400-123-4567<br>0457-1234567</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<el-icon size="24" color="var(--primary-color)"><Message /></el-icon>
|
||
</div>
|
||
<div class="contact-details">
|
||
<h4>邮箱</h4>
|
||
<p>info@oroqen-culture.com<br>support@oroqen-culture.com</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<el-icon size="24" color="var(--primary-color)"><Clock /></el-icon>
|
||
</div>
|
||
<div class="contact-details">
|
||
<h4>工作时间</h4>
|
||
<p>周一至周五：9:00-18:00<br>周六至周日：10:00-17:00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-form">
|
||
<h3>留言咨询</h3>
|
||
<el-form :model="contactForm" label-width="80px">
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="contactForm.name" placeholder="请输入您的姓名" />
|
||
</el-form-item>
|
||
<el-form-item label="邮箱">
|
||
<el-input v-model="contactForm.email" placeholder="请输入您的邮箱" />
|
||
</el-form-item>
|
||
<el-form-item label="电话">
|
||
<el-input v-model="contactForm.phone" placeholder="请输入您的电话" />
|
||
</el-form-item>
|
||
<el-form-item label="主题">
|
||
<el-input v-model="contactForm.subject" placeholder="请输入咨询主题" />
|
||
</el-form-item>
|
||
<el-form-item label="内容">
|
||
<el-input
|
||
v-model="contactForm.message"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请输入您的留言内容"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitContact" :loading="submitting">
|
||
提交留言
|
||
</el-button>
|
||
<el-button @click="resetForm">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import {
|
||
Collection,
|
||
Share,
|
||
TrendCharts,
|
||
User,
|
||
Location,
|
||
Phone,
|
||
Message,
|
||
Clock
|
||
} from '@element-plus/icons-vue'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
// 响应式数据
|
||
const submitting = ref(false)
|
||
|
||
// 团队成员
|
||
const teamMembers = ref([
|
||
{
|
||
id: 1,
|
||
name: '张文化',
|
||
title: '项目负责人',
|
||
description: '民族学博士，专注于鄂伦春族文化研究20余年，致力于民族文化的保护与传承工作。'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '李传承',
|
||
title: '文化顾问',
|
||
description: '鄂伦春族文化传承人，精通传统手工艺制作，为平台提供专业的文化指导。'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '王技术',
|
||
title: '技术总监',
|
||
description: '资深全栈开发工程师，专注于文化数字化技术应用，负责平台的技术架构与开发。'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '刘设计',
|
||
title: '设计总监',
|
||
description: '资深UI/UX设计师，擅长将传统文化元素与现代设计理念相结合。'
|
||
}
|
||
])
|
||
|
||
// 合作伙伴
|
||
const partners = ref([
|
||
{
|
||
id: 1,
|
||
name: '大兴安岭文化局',
|
||
description: '提供政策支持和文化资源'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '鄂伦春族自治旗',
|
||
description: '官方合作伙伴，提供文化认证'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '民族工艺合作社',
|
||
description: '手工艺品供应商合作伙伴'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '文化研究院',
|
||
description: '学术研究与文化咨询支持'
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '非遗保护中心',
|
||
description: '非物质文化遗产保护合作'
|
||
},
|
||
{
|
||
id: 6,
|
||
name: '民族博物馆',
|
||
description: '文物资料与展览合作'
|
||
}
|
||
])
|
||
|
||
// 发展历程
|
||
const timelineEvents = ref([
|
||
{
|
||
id: 1,
|
||
date: '2023年3月',
|
||
title: '项目启动',
|
||
description: '项目正式启动，开始进行鄂伦春族文化资料收集和整理工作。'
|
||
},
|
||
{
|
||
id: 2,
|
||
date: '2023年6月',
|
||
title: '文化调研',
|
||
description: '深入鄂伦春族聚居地进行实地调研，采访传承人，收集第一手文化资料。'
|
||
},
|
||
{
|
||
id: 3,
|
||
date: '2023年9月',
|
||
title: '平台开发',
|
||
description: '开始平台的技术开发工作，设计用户界面，构建系统架构。'
|
||
},
|
||
{
|
||
id: 4,
|
||
date: '2023年12月',
|
||
title: '内容制作',
|
||
description: '完成文化内容的数字化制作，包括图片、视频、音频等多媒体资源。'
|
||
},
|
||
{
|
||
id: 5,
|
||
date: '2024年1月',
|
||
title: '平台上线',
|
||
description: '平台正式上线运营，开始为用户提供文化展示和产品销售服务。'
|
||
}
|
||
])
|
||
|
||
// 联系表单
|
||
const contactForm = ref({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
subject: '',
|
||
message: ''
|
||
})
|
||
|
||
// 方法
|
||
const submitContact = async () => {
|
||
if (!contactForm.value.name || !contactForm.value.email || !contactForm.value.message) {
|
||
ElMessage.warning('请填写必要信息')
|
||
return
|
||
}
|
||
|
||
submitting.value = true
|
||
|
||
// 模拟提交
|
||
setTimeout(() => {
|
||
submitting.value = false
|
||
ElMessage.success('留言提交成功，我们会尽快回复您！')
|
||
resetForm()
|
||
}, 2000)
|
||
}
|
||
|
||
const resetForm = () => {
|
||
contactForm.value = {
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
subject: '',
|
||
message: ''
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面头部 */
|
||
.page-header {
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
color: white;
|
||
padding: 4rem 0 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 3rem;
|
||
font-weight: bold;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 1.2rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 平台介绍 */
|
||
.intro-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.intro-text {
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
color: var(--text-color);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.visual-placeholder {
|
||
width: 100%;
|
||
height: 300px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 使命 */
|
||
.mission {
|
||
background: var(--background-light);
|
||
}
|
||
|
||
.mission-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.mission-item {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.mission-icon {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.mission-item h3 {
|
||
color: var(--primary-color);
|
||
font-size: 1.3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.mission-item p {
|
||
color: var(--text-light);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 团队介绍 */
|
||
.team-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.team-member {
|
||
padding: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.member-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 1.5rem;
|
||
}
|
||
|
||
.member-name {
|
||
color: var(--primary-color);
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.member-title {
|
||
color: var(--secondary-color);
|
||
font-weight: 500;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.member-desc {
|
||
color: var(--text-light);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 合作伙伴 */
|
||
.partners {
|
||
background: var(--background-light);
|
||
}
|
||
|
||
.partners-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.partner-item {
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.partner-logo {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.logo-placeholder {
|
||
width: 120px;
|
||
height: 80px;
|
||
margin: 0 auto;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.partner-info h4 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.partner-info p {
|
||
color: var(--text-light);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* 发展历程 */
|
||
.timeline-container {
|
||
max-width: 800px;
|
||
margin: 3rem auto 0;
|
||
}
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.timeline-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.timeline-marker {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.marker-dot {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: var(--primary-color);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.marker-line {
|
||
width: 2px;
|
||
height: 100px;
|
||
background: var(--border-color);
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.timeline-content {
|
||
flex: 1;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.timeline-date {
|
||
color: var(--secondary-color);
|
||
font-weight: 500;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-title {
|
||
color: var(--primary-color);
|
||
font-size: 1.2rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-desc {
|
||
color: var(--text-light);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 联系我们 */
|
||
.contact {
|
||
background: var(--background-light);
|
||
}
|
||
|
||
.contact-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.contact-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: rgba(var(--primary-color-rgb), 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.contact-details h4 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.contact-details p {
|
||
color: var(--text-light);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.contact-form {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.contact-form h3 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.page-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.intro-layout {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.mission-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.team-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
}
|
||
|
||
.partners-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
}
|
||
|
||
.timeline-item {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.timeline-marker {
|
||
flex-direction: row;
|
||
width: 100%;
|
||
}
|
||
|
||
.marker-line {
|
||
width: 100px;
|
||
height: 2px;
|
||
margin-top: 0;
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
.contact-layout {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.contact-item {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.mission-item,
|
||
.team-member,
|
||
.partner-item {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.timeline-content {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.contact-form {
|
||
padding: 1.5rem;
|
||
}
|
||
}
|
||
</style> |