forked from Qi/Oroqen-Vue
763 lines
20 KiB
Vue
763 lines
20 KiB
Vue
<template>
|
||
<div class="heritage">
|
||
<!-- 页面头部 -->
|
||
<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="section">
|
||
<div class="container">
|
||
<h2 class="section-title">非遗名录</h2>
|
||
<div class="heritage-levels">
|
||
<div class="level-tabs">
|
||
<button
|
||
v-for="level in heritageLevels"
|
||
:key="level.id"
|
||
:class="['level-tab', { active: activeLevel === level.id }]"
|
||
@click="activeLevel = level.id"
|
||
>
|
||
{{ level.name }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="heritage-list">
|
||
<div v-for="item in currentHeritageList" :key="item.id" class="heritage-item card">
|
||
<div class="heritage-image">
|
||
<div class="image-placeholder">
|
||
<svg viewBox="0 0 200 150" width="100%" height="150">
|
||
<rect width="200" height="150" :fill="item.color" opacity="0.2"/>
|
||
<circle cx="100" cy="75" r="30" :fill="item.color" opacity="0.5"/>
|
||
<text x="100" y="85" text-anchor="middle" :fill="item.color"
|
||
font-size="12" font-weight="bold">{{ item.name.substring(0, 2) }}</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="heritage-info">
|
||
<h3 class="heritage-name">{{ item.name }}</h3>
|
||
<p class="heritage-category">{{ item.category }}</p>
|
||
<p class="heritage-description">{{ item.description }}</p>
|
||
<div class="heritage-meta">
|
||
<span class="heritage-year">{{ item.year }}年入选</span>
|
||
<el-button type="primary" size="small" @click="viewDetails(item)">
|
||
查看详情
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技艺展示 -->
|
||
<section class="section" style="background-color: var(--background-light);">
|
||
<div class="container">
|
||
<h2 class="section-title">技艺展示</h2>
|
||
<div class="crafts-showcase">
|
||
<div v-for="craft in crafts" :key="craft.id" class="craft-item">
|
||
<div class="craft-media">
|
||
<div class="media-placeholder">
|
||
<svg viewBox="0 0 400 250" width="100%" height="250">
|
||
<rect width="400" height="250" :fill="craft.color" opacity="0.1"/>
|
||
<rect x="50" y="50" width="300" height="150" :fill="craft.color" opacity="0.3" rx="10"/>
|
||
<circle cx="200" cy="125" r="40" fill="white" opacity="0.8"/>
|
||
<polygon points="180,115 180,135 220,125" fill="var(--primary-color)"/>
|
||
</svg>
|
||
</div>
|
||
<div class="media-controls">
|
||
<el-button type="primary" circle @click="playCraftVideo(craft)">
|
||
<el-icon><VideoPlay /></el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="craft-content">
|
||
<h3 class="craft-title">{{ craft.name }}</h3>
|
||
<p class="craft-description">{{ craft.description }}</p>
|
||
<div class="craft-steps">
|
||
<h4>制作流程：</h4>
|
||
<ol class="steps-list">
|
||
<li v-for="step in craft.steps" :key="step">{{ step }}</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 传承人故事 -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2 class="section-title">传承人故事</h2>
|
||
<div class="inheritors-stories">
|
||
<div v-for="story in inheritorStories" :key="story.id" class="story-card card">
|
||
<div class="story-header">
|
||
<div class="inheritor-avatar">
|
||
<div class="avatar-placeholder">
|
||
<svg viewBox="0 0 80 80" width="80" height="80">
|
||
<circle cx="40" cy="40" r="35" fill="var(--primary-color)" opacity="0.2"/>
|
||
<circle cx="40" cy="30" r="12" fill="var(--primary-color)" opacity="0.5"/>
|
||
<path d="M20 60 Q40 50 60 60 L60 70 L20 70 Z"
|
||
fill="var(--primary-color)" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="inheritor-basic">
|
||
<h3 class="inheritor-name">{{ story.name }}</h3>
|
||
<p class="inheritor-title">{{ story.title }}</p>
|
||
<p class="inheritor-age">{{ story.age }}岁 · {{ story.experience }}年从艺经验</p>
|
||
</div>
|
||
</div>
|
||
<div class="story-content">
|
||
<h4>传承故事</h4>
|
||
<p>{{ story.story }}</p>
|
||
<h4>代表作品</h4>
|
||
<div class="works-grid">
|
||
<div v-for="work in story.works" :key="work" class="work-item">
|
||
<div class="work-image">
|
||
<svg viewBox="0 0 100 80" width="100" height="80">
|
||
<rect width="100" height="80" fill="var(--secondary-color)" opacity="0.2" rx="4"/>
|
||
<text x="50" y="45" text-anchor="middle" fill="var(--secondary-color)"
|
||
font-size="10">{{ work.substring(0, 2) }}</text>
|
||
</svg>
|
||
</div>
|
||
<p class="work-name">{{ work }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 保护现状 -->
|
||
<section class="section" style="background-color: var(--background-light);">
|
||
<div class="container">
|
||
<h2 class="section-title">保护现状与成果</h2>
|
||
<div class="protection-overview">
|
||
<div class="protection-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-number">15</div>
|
||
<div class="stat-label">国家级非遗项目</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">28</div>
|
||
<div class="stat-label">省级非遗项目</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">45</div>
|
||
<div class="stat-label">代表性传承人</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">8</div>
|
||
<div class="stat-label">传承基地</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="protection-measures">
|
||
<h3>保护措施</h3>
|
||
<div class="measures-grid">
|
||
<div class="measure-item">
|
||
<div class="measure-icon">
|
||
<el-icon size="32"><School /></el-icon>
|
||
</div>
|
||
<h4>教育传承</h4>
|
||
<p>在学校开设非遗课程，培养年轻一代的文化认同感</p>
|
||
</div>
|
||
<div class="measure-item">
|
||
<div class="measure-icon">
|
||
<el-icon size="32"><Camera /></el-icon>
|
||
</div>
|
||
<h4>数字化保护</h4>
|
||
<p>建立数字档案，记录技艺流程和文化内涵</p>
|
||
</div>
|
||
<div class="measure-item">
|
||
<div class="measure-icon">
|
||
<el-icon size="32"><Trophy /></el-icon>
|
||
</div>
|
||
<h4>展示推广</h4>
|
||
<p>举办展览活动，提高社会关注度和影响力</p>
|
||
</div>
|
||
<div class="measure-item">
|
||
<div class="measure-icon">
|
||
<el-icon size="32"><Money /></el-icon>
|
||
</div>
|
||
<h4>资金支持</h4>
|
||
<p>设立专项资金，支持传承人和保护项目</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 详情对话框 -->
|
||
<el-dialog v-model="detailDialogVisible" :title="selectedHeritage?.name" width="70%" top="5vh">
|
||
<div v-if="selectedHeritage" class="heritage-detail">
|
||
<div class="detail-image">
|
||
<div class="image-placeholder">
|
||
<svg viewBox="0 0 400 200" width="100%" height="200">
|
||
<rect width="400" height="200" :fill="selectedHeritage.color" opacity="0.2"/>
|
||
<circle cx="200" cy="100" r="50" :fill="selectedHeritage.color" opacity="0.5"/>
|
||
<text x="200" y="110" text-anchor="middle" :fill="selectedHeritage.color"
|
||
font-size="20" font-weight="bold">{{ selectedHeritage.name.substring(0, 2) }}</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="detail-content">
|
||
<h3>项目简介</h3>
|
||
<p>{{ selectedHeritage.fullDescription }}</p>
|
||
<h3>历史渊源</h3>
|
||
<p>{{ selectedHeritage.history }}</p>
|
||
<h3>技艺特点</h3>
|
||
<ul>
|
||
<li v-for="feature in selectedHeritage.features" :key="feature">{{ feature }}</li>
|
||
</ul>
|
||
<h3>传承价值</h3>
|
||
<p>{{ selectedHeritage.value }}</p>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
import { VideoPlay, School, Camera, Trophy, Money } from '@element-plus/icons-vue'
|
||
|
||
// 响应式数据
|
||
const activeLevel = ref('national')
|
||
const detailDialogVisible = ref(false)
|
||
const selectedHeritage = ref(null)
|
||
|
||
// 非遗级别
|
||
const heritageLevels = ref([
|
||
{ id: 'national', name: '国家级' },
|
||
{ id: 'provincial', name: '省级' },
|
||
{ id: 'municipal', name: '市级' }
|
||
])
|
||
|
||
// 非遗项目数据
|
||
const heritageItems = ref({
|
||
national: [
|
||
{
|
||
id: 1,
|
||
name: '鄂伦春族桦皮制作技艺',
|
||
category: '传统技艺',
|
||
description: '利用桦树皮制作各种生活用品的传统技艺',
|
||
year: 2008,
|
||
color: '#8b4513',
|
||
fullDescription: '鄂伦春族桦皮制作技艺是一项古老的传统手工艺，主要利用白桦树皮制作各种生活用品。',
|
||
history: '这项技艺有着数百年的历史，是鄂伦春族适应森林生活的智慧结晶。',
|
||
features: ['材料天然环保', '制作工艺精湛', '实用性强', '装饰美观'],
|
||
value: '体现了鄂伦春族与自然和谐共处的生活理念，具有重要的文化价值。'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '鄂伦春族民歌',
|
||
category: '传统音乐',
|
||
description: '反映鄂伦春族生活的传统民歌',
|
||
year: 2008,
|
||
color: '#2d5016',
|
||
fullDescription: '鄂伦春族民歌是反映鄂伦春族生产生活、思想感情的重要载体。',
|
||
history: '民歌世代口耳相传，内容丰富，形式多样。',
|
||
features: ['旋律优美', '内容丰富', '形式多样', '情感真挚'],
|
||
value: '是研究鄂伦春族历史文化的重要资料，具有很高的学术价值。'
|
||
}
|
||
],
|
||
provincial: [
|
||
{
|
||
id: 3,
|
||
name: '鄂伦春族传统刺绣',
|
||
category: '传统美术',
|
||
description: '具有民族特色的传统刺绣工艺',
|
||
year: 2010,
|
||
color: '#8b4513',
|
||
fullDescription: '鄂伦春族传统刺绣以其精美的图案和独特的技法而闻名。',
|
||
history: '刺绣技艺在鄂伦春族中有着悠久的历史传统。',
|
||
features: ['图案精美', '色彩丰富', '技法独特', '寓意深刻'],
|
||
value: '展现了鄂伦春族妇女的智慧和审美情趣。'
|
||
}
|
||
],
|
||
municipal: [
|
||
{
|
||
id: 4,
|
||
name: '鄂伦春族萨满舞',
|
||
category: '传统舞蹈',
|
||
description: '具有宗教色彩的传统舞蹈',
|
||
year: 2012,
|
||
color: '#2d5016',
|
||
fullDescription: '萨满舞是鄂伦春族重要的宗教仪式舞蹈。',
|
||
history: '萨满舞起源于古老的萨满教信仰。',
|
||
features: ['动作独特', '节奏鲜明', '寓意深刻', '仪式感强'],
|
||
value: '是研究鄂伦春族宗教信仰的重要资料。'
|
||
}
|
||
]
|
||
})
|
||
|
||
// 技艺展示数据
|
||
const crafts = ref([
|
||
{
|
||
id: 1,
|
||
name: '桦皮制作技艺',
|
||
description: '从采集桦皮到制作成品的完整工艺流程',
|
||
color: '#8b4513',
|
||
steps: [
|
||
'选择合适的白桦树',
|
||
'小心剥取桦皮',
|
||
'清理和处理桦皮',
|
||
'设计制作图案',
|
||
'缝制和装饰',
|
||
'最终成品整理'
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '传统刺绣工艺',
|
||
description: '精美的手工刺绣制作过程',
|
||
color: '#2d5016',
|
||
steps: [
|
||
'设计刺绣图案',
|
||
'选择合适面料',
|
||
'准备彩色丝线',
|
||
'绷布固定',
|
||
'精细刺绣',
|
||
'后期整理装裱'
|
||
]
|
||
}
|
||
])
|
||
|
||
// 传承人故事数据
|
||
const inheritorStories = ref([
|
||
{
|
||
id: 1,
|
||
name: '关小云',
|
||
title: '国家级非遗传承人',
|
||
age: 68,
|
||
experience: 45,
|
||
story: '从小跟随祖母学习桦皮制作技艺，经过几十年的钻研和实践，不仅掌握了传统技法，还在保持传统的基础上进行了创新发展。她制作的桦皮工艺品不仅实用，更是艺术品，深受人们喜爱。',
|
||
works: ['桦皮首饰盒', '桦皮装饰画', '桦皮茶具', '桦皮摆件']
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '孟淑珍',
|
||
title: '自治区级非遗传承人',
|
||
age: 72,
|
||
experience: 50,
|
||
story: '自幼学习刺绣技艺，对传统图案有着深入的研究和理解。她的刺绣作品图案精美，色彩和谐，充分体现了鄂伦春族的文化特色。多年来培养了众多学生，为技艺传承做出了重要贡献。',
|
||
works: ['传统服饰刺绣', '装饰挂画', '手工包袋', '民族头饰']
|
||
}
|
||
])
|
||
|
||
// 计算属性
|
||
const currentHeritageList = computed(() => {
|
||
return heritageItems.value[activeLevel.value] || []
|
||
})
|
||
|
||
// 方法
|
||
const viewDetails = (item: any) => {
|
||
selectedHeritage.value = item
|
||
detailDialogVisible.value = true
|
||
}
|
||
|
||
const playCraftVideo = (craft: any) => {
|
||
// 模拟播放视频
|
||
console.log('播放视频:', craft.name)
|
||
}
|
||
</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;
|
||
}
|
||
|
||
/* 非遗级别标签 */
|
||
.level-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 2rem;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.level-tab {
|
||
padding: 0.8rem 2rem;
|
||
border: 2px solid var(--primary-color);
|
||
background: transparent;
|
||
color: var(--primary-color);
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.level-tab:hover,
|
||
.level-tab.active {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
/* 非遗列表 */
|
||
.heritage-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.heritage-item {
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.heritage-item:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.heritage-image {
|
||
width: 100%;
|
||
height: 150px;
|
||
}
|
||
|
||
.image-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--background-light);
|
||
}
|
||
|
||
.heritage-info {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.heritage-name {
|
||
font-size: 1.3rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 0.5rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.heritage-category {
|
||
color: var(--secondary-color);
|
||
font-weight: 500;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.heritage-description {
|
||
color: var(--text-color);
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.heritage-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.heritage-year {
|
||
color: var(--text-light);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* 技艺展示 */
|
||
.crafts-showcase {
|
||
display: grid;
|
||
gap: 3rem;
|
||
}
|
||
|
||
.craft-item {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.craft-item:nth-child(even) {
|
||
direction: rtl;
|
||
}
|
||
|
||
.craft-item:nth-child(even) > * {
|
||
direction: ltr;
|
||
}
|
||
|
||
.craft-media {
|
||
position: relative;
|
||
}
|
||
|
||
.media-placeholder {
|
||
width: 100%;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.media-controls {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.craft-content {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.craft-title {
|
||
font-size: 1.5rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.craft-description {
|
||
color: var(--text-color);
|
||
line-height: 1.6;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.craft-steps h4 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.steps-list {
|
||
color: var(--text-color);
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
.steps-list li {
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 传承人故事 */
|
||
.inheritors-stories {
|
||
display: grid;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.story-card {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.story-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inheritor-name {
|
||
font-size: 1.3rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.inheritor-title {
|
||
color: var(--secondary-color);
|
||
font-weight: 500;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.inheritor-age {
|
||
color: var(--text-light);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.story-content h4 {
|
||
color: var(--primary-color);
|
||
margin: 1.5rem 0 1rem;
|
||
}
|
||
|
||
.story-content p {
|
||
color: var(--text-color);
|
||
line-height: 1.8;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.works-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.work-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.work-image {
|
||
margin-bottom: 0.5rem;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.work-name {
|
||
font-size: 0.9rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* 保护现状 */
|
||
.protection-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 2rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 3rem;
|
||
font-weight: bold;
|
||
color: var(--primary-color);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.protection-measures h3 {
|
||
font-size: 1.5rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.measures-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.measure-item {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.measure-icon {
|
||
color: var(--primary-color);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.measure-item h4 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.measure-item p {
|
||
color: var(--text-color);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 详情对话框 */
|
||
.heritage-detail {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.detail-content h3 {
|
||
color: var(--primary-color);
|
||
margin: 1.5rem 0 1rem;
|
||
}
|
||
|
||
.detail-content h3:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.detail-content p {
|
||
color: var(--text-color);
|
||
line-height: 1.8;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.detail-content ul {
|
||
color: var(--text-color);
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
.detail-content li {
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.page-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.level-tabs {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.heritage-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.craft-item {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.craft-item:nth-child(even) {
|
||
direction: ltr;
|
||
}
|
||
|
||
.story-header {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.works-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.protection-stats,
|
||
.measures-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.heritage-detail {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style> |