Oroqen-Vue/src/views/Home.vue

<template>
  <div class="home">
    <!-- 英雄区域 -->
    <section class="hero">
      <div class="hero-background ethnic-pattern">
        <div class="container">
          <div class="hero-content">
            <div class="hero-text">
              <h1 class="hero-title">
                传承千年文化
                <br>
                <span class="highlight">鄂伦春族的瑰宝</span>
              </h1>
              <p class="hero-description">
                探索中国东北森林深处的古老民族文化，感受狩猎文明的独特魅力，
                体验桦皮工艺、传统刺绣等非物质文化遗产的精湛技艺。
              </p>
              <div class="hero-actions">
                <router-link to="/culture" class="btn-primary hero-btn">
                  探索文化
                </router-link>
                <router-link to="/products" class="btn-secondary hero-btn">
                  精品商城
                </router-link>
              </div>
            </div>
            <div class="hero-image">
              <div class="hero-image-placeholder">
                <svg viewBox="0 0 400 300" class="hero-svg">
                  <!-- 森林背景 -->
                  <rect width="400" height="300" fill="#2d5016" opacity="0.1"/>
                  <!-- 传统建筑轮廓 -->
                  <path d="M50 250 L150 180 L250 250 L350 180 L350 280 L50 280 Z" 
                        fill="var(--secondary-color)" opacity="0.6"/>
                  <!-- 装饰图案 -->
                  <circle cx="200" cy="150" r="40" fill="var(--primary-color)" opacity="0.3"/>
                  <text x="200" y="160" text-anchor="middle" fill="var(--primary-color)" 
                        font-size="24" font-weight="bold">鄂</text>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色板块 -->
    <section class="features section">
      <div class="container">
        <h2 class="section-title">文化瑰宝</h2>
        <div class="features-grid">
          <div class="feature-card card" @click="$router.push('/culture')">
            <div class="feature-icon">
              <svg viewBox="0 0 64 64" width="48" height="48">
                <circle cx="32" cy="32" r="28" fill="var(--primary-color)" opacity="0.2"/>
                <path d="M20 32 L32 20 L44 32 L32 44 Z" fill="var(--primary-color)"/>
              </svg>
            </div>
            <h3 class="feature-title">传统文化</h3>
            <p class="feature-description">
              深入了解鄂伦春族的狩猎文化、节庆仪式、饮食习俗和居住文化
            </p>
          </div>

          <div class="feature-card card" @click="$router.push('/heritage')">
            <div class="feature-icon">
              <svg viewBox="0 0 64 64" width="48" height="48">
                <circle cx="32" cy="32" r="28" fill="var(--secondary-color)" opacity="0.2"/>
                <rect x="24" y="24" width="16" height="16" fill="var(--secondary-color)"/>
              </svg>
            </div>
            <h3 class="feature-title">非遗传承</h3>
            <p class="feature-description">
              桦皮制作技艺、传统刺绣、民族歌舞等非物质文化遗产的传承与保护
            </p>
          </div>

          <div class="feature-card card" @click="$router.push('/products')">
            <div class="feature-icon">
              <svg viewBox="0 0 64 64" width="48" height="48">
                <circle cx="32" cy="32" r="28" fill="var(--accent-color)" opacity="0.3"/>
                <path d="M16 24 L48 24 L44 48 L20 48 Z" fill="var(--primary-color)"/>
              </svg>
            </div>
            <h3 class="feature-title">特色产品</h3>
            <p class="feature-description">
              精美手工艺品、传统服饰、特色食品和现代文创产品
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门产品 -->
    <section class="popular-products section" style="background-color: var(--background-light);">
      <div class="container">
        <h2 class="section-title">热门产品</h2>
        <div class="products-grid">
          <div v-for="product in featuredProducts" :key="product.id" 
               class="product-card card" @click="$router.push(`/product/${product.id}`)">
            <div class="product-image">
              <div class="product-image-placeholder">
                <svg viewBox="0 0 200 150" width="100%" height="150">
                  <rect width="200" height="150" :fill="product.color" opacity="0.3"/>
                  <text x="100" y="80" text-anchor="middle" :fill="product.color" 
                        font-size="14" font-weight="bold">{{ product.name }}</text>
                </svg>
              </div>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-description">{{ product.description }}</p>
              <div class="product-footer">
                <span class="product-price">¥{{ product.price }}</span>
                <el-button type="primary" size="small" @click.stop="addToCart(product)">
                  加入购物车
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center" style="margin-top: 2rem;">
          <router-link to="/products" class="btn-primary">查看更多产品</router-link>
        </div>
      </div>
    </section>

    <!-- 文化故事 -->
    <section class="culture-stories section">
      <div class="container">
        <h2 class="section-title">文化故事</h2>
        <div class="stories-grid">
          <div v-for="story in stories" :key="story.id" class="story-card card">
            <div class="story-image">
              <div class="story-image-placeholder">
                <svg viewBox="0 0 300 200" width="100%" height="200">
                  <rect width="300" height="200" :fill="story.color" opacity="0.2"/>
                  <circle cx="150" cy="100" r="40" :fill="story.color" opacity="0.5"/>
                  <text x="150" y="110" text-anchor="middle" :fill="story.color" 
                        font-size="16" font-weight="bold">{{ story.title.charAt(0) }}</text>
                </svg>
              </div>
            </div>
            <div class="story-content">
              <h3 class="story-title">{{ story.title }}</h3>
              <p class="story-excerpt">{{ story.excerpt }}</p>
              <div class="story-meta">
                <span class="story-date">{{ story.date }}</span>
                <a href="#" class="story-link">阅读更多</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 统计数据 -->
    <section class="stats section" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">1000+</div>
            <div class="stat-label">文化资料</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">50+</div>
            <div class="stat-label">非遗项目</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">200+</div>
            <div class="stat-label">特色产品</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">10000+</div>
            <div class="stat-label">用户关注</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMainStore } from '../stores'
import { ElMessage } from 'element-plus'

const store = useMainStore()

// 特色产品数据
const featuredProducts = ref([
  {
    id: 1,
    name: '桦皮工艺盒',
    description: '传统桦皮制作工艺，精美实用',
    price: 168,
    color: '#8b4513'
  },
  {
    id: 2,
    name: '鄂伦春族刺绣',
    description: '手工刺绣，图案精美，寓意吉祥',
    price: 288,
    color: '#2d5016'
  },
  {
    id: 3,
    name: '传统服饰',
    description: '复刻传统服饰，展现民族风采',
    price: 588,
    color: '#8b4513'
  },
  {
    id: 4,
    name: '木雕摆件',
    description: '手工雕刻，展现森林文化',
    price: 128,
    color: '#2d5016'
  }
])

// 文化故事数据
const stories = ref([
  {
    id: 1,
    title: '森林中的狩猎文化',
    excerpt: '鄂伦春族世代生活在大兴安岭的森林中，形成了独特的狩猎文化和生活方式...',
    date: '2024-01-15',
    color: '#2d5016'
  },
  {
    id: 2,
    title: '桦皮工艺的传承',
    excerpt: '桦皮是鄂伦春族生活中不可缺少的材料，从日用品到艺术品，展现了民族智慧...',
    date: '2024-01-10',
    color: '#8b4513'
  },
  {
    id: 3,
    title: '篝火节的欢歌',
    excerpt: '每年的篝火节是鄂伦春族最重要的节日，族人们围着篝火载歌载舞...',
    date: '2024-01-05',
    color: '#2d5016'
  }
])

// 添加到购物车
const addToCart = (product: any) => {
  store.addToCart(product)
  ElMessage.success('已添加到购物车')
}
</script>

<style scoped>
/* 英雄区域 */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(45, 80, 22, 0.9), rgba(139, 69, 19, 0.8));
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 500px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.highlight {
  color: var(--accent-color);
}

.hero-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}

.hero-btn {
  padding: 15px 30px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-secondary:hover {
  background: white;
  color: var(--primary-color);
}

.hero-image-placeholder {
  width: 100%;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-svg {
  width: 100%;
  height: 100%;
}

/* 特色板块 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-icon {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.feature-description {
  color: var(--text-light);
  line-height: 1.6;
}

/* 产品网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.product-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-image-placeholder {
  width: 100%;
  height: 150px;
  background: var(--background-light);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  padding: 1.5rem;
}

.product-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.product-description {
  color: var(--text-light);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--secondary-color);
}

/* 文化故事 */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.story-card {
  overflow: hidden;
}

.story-image-placeholder {
  width: 100%;
  height: 200px;
  background: var(--background-light);
}

.story-content {
  padding: 1.5rem;
}

.story-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.story-excerpt {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.story-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-date {
  color: var(--text-light);
  font-size: 0.9rem;
}

.story-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.story-link:hover {
  text-decoration: underline;
}

/* 统计数据 */
.stats {
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.1rem;
  opacity: 0.9;
}

.text-center {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .features-grid,
  .products-grid,
  .stories-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>