Oroqen-Vue/src/views/About.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>