forked from Qi/Oroqen-Vue
554 lines
14 KiB
Vue
554 lines
14 KiB
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> |