非遗万象图前端开发
任务一：非遗地图浏览模块
核心功能
- 高德地图集成与定制化
- 非遗项目地理位置标记
- 实时搜索过滤功能
前端技术实现要点
1. 地图初始化与定制
- 使用高德地图JS API创建地图实例
- 应用自定义地图样式(whitesmoke)营造文化氛围
- 添加CSS滤镜(sepia、saturate等)增强视觉效果
2. 标记点系统
- 动态创建带交互效果的自定义标记
- 实现标记点点击事件处理
- 开发信息窗口展示详细内容
3. 搜索过滤功能
- 实现前端实时搜索过滤
- 支持多字段匹配(名称、省份、类型)
- 优化搜索结果去重显示
用户体验优化
- 添加动画过渡效果提升视觉体验
- 实现响应式设计适配不同设备
- 优化标记点交互反馈(悬停、点击效果)
部分代码：
点击查看代码
<div class="relative w-full h-[calc(100vh-80px)] overflow-hidden bg-[#eeeadd]"
x-data="mapApp()" x-init="initMap()">
<div id="map" class="absolute inset-0 z-0 opacity-0 transition-opacity duration-[2000ms] ease-in-out"></div>
<div class="absolute top-8 left-8 z-10 w-80 flex flex-col gap-6 opacity-0 translate-x-[-20px] animate-fade-in-up" style="animation-delay: 0.5s; animation-fill-mode: forwards;">
<div class="bg-paper/80 backdrop-blur-md p-1 border border-ink/10 rounded-sm shadow-sm transition-all duration-300 focus-within:shadow-md focus-within:bg-paper hover:-translate-y-1">
<div class="relative flex items-center h-10">
<input type="text" x-model="query" @input="filterItems"
class="w-full h-full bg-transparent border-none pl-4 pr-10 text-sm text-ink font-serif focus:ring-0 placeholder-ink-light/50 transition-colors"
placeholder="寻访 · 非遗 (搜名称/省份)">
<div class="absolute right-0 top-0 h-full w-10 flex items-center justify-center text-cinnabar transition-all duration-300">
<i class="fa-solid fa-search text-sm" x-show="!query"></i>
<i class="fa-solid fa-times text-sm cursor-pointer hover:scale-110 transition" x-show="query" @click="query=''; filterItems()"></i>
</div>
</div>
</div>
<div class="bg-paper/80 backdrop-blur-md border border-ink/10 shadow-lg rounded-sm overflow-hidden flex flex-col max-h-[60vh] transition-transform duration-500 hover:shadow-xl">
<div class="p-4 border-b border-ink/5 flex justify-between items-center">
<span class="text-cinnabar font-bold text-sm tracking-widest">
非遗 · 目录 (<span x-text="filteredItems.length"></span>)
</span>
<i class="fa-solid fa-seedling text-ink-light text-xs animate-float"></i>
</div>
<div class="overflow-y-auto p-4 space-y-4 scrollbar-thin scrollbar-thumb-ink/10">
<template x-for="item in filteredItems" :key="item.id">
<div class="group cursor-pointer flex gap-4 items-start p-2 rounded hover:bg-white/50 transition-all duration-500 hover:-translate-y-1 hover:shadow-sm"
@click="focusMap(item)">
<div class="w-16 h-16 bg-[#eecfa1] shrink-0 overflow-hidden relative shadow-inner flex items-center justify-center">
<img :src="item.main_image_url || ''"
class="w-full h-full object-cover grayscale-[30%] group-hover:grayscale-0 group-hover:scale-110 transition duration-[1.5s] ease-out relative z-10"
onerror="this.style.display='none'">
<div class="absolute inset-0 flex items-center justify-center border border-ink/5 bg-[#fdfbf7]">
<span class="font-calligraphy text-2xl text-cinnabar/30 select-none" x-text="item.title.charAt(0)"></span>
</div>
</div>
<div>
<h4 class="text-ink font-bold text-sm group-hover:text-cinnabar transition-colors duration-300" x-text="item.title"></h4>
<div class="flex items-center gap-2 mt-1 opacity-60 group-hover:opacity-100 transition-opacity">
<span class="text-[10px] border border-ink/20 px-1 text-ink-light" x-text="item.province"></span>
<span class="text-[10px] text-ink-light" x-text="item.type"></span>
</div>
</div>
</div>
</template>
<div x-show="filteredItems.length === 0" class="text-center py-8 text-ink-light/50 text-sm font-serif">
<p>未寻得相关非遗...</p>
</div>
</div>
<div class="p-3 bg-ink/5 text-center transition duration-300">
<span class="text-xs text-ink-light tracking-widest opacity-50">SCROLL FOR MORE</span>
</div>
</div>
</div>
</div>
完整代码：
https://gitee.com/kjmfzu/fzu_-kjm/blob/master/非遗万象图前端开发/ich_map.html
效果图：
任务二：非遗项目详情页
核心功能
- 非遗项目详细信息展示
- 多媒体内容(图片、视频)呈现
- 相关项目智能推荐
技术实现要点
1. 内容布局设计
- 采用网格系统实现多列布局
- 侧边栏展示项目基本信息
- 主内容区呈现详细介绍文本
2. 多媒体处理
- 图片懒加载与悬停效果
- 视频文件动态检测与播放支持
- 响应式媒体容器适配不同尺寸
3. 首字母装饰效果
- 利用CSS伪元素实现首字母特殊样式
- 结合书法字体突出文化特色
用户体验优化
- 渐进式内容加载动画
- 响应式设计适配移动端
- 直观的导航和返回功能
部分代码：
点击查看代码
<div class="max-w-7xl mx-auto px-6 md:px-12 py-16 grid grid-cols-1 md:grid-cols-12 gap-12 relative z-10">
<aside class="md:col-span-3 md:border-r md:border-ink/10 md:pr-8 flex flex-col md:items-end text-right reveal active">
<div class="sticky top-32 flex flex-col items-end">
<div class="w-8 h-20 border border-cinnabar/30 rounded-full flex items-center justify-center py-2 mb-8 bg-paper transition-transform duration-500 hover:rotate-3 hover:border-cinnabar hover:shadow-sm">
<span class="writing-vertical text-cinnabar text-xs tracking-widest">{{ type }}</span>
</div>
<h1 class="hidden md:block writing-vertical text-5xl font-bold text-ink leading-loose h-[400px] text-left opacity-0 animate-fade-in-up delay-200" style="animation-fill-mode: forwards;">
{{ title }}
</h1>
<h1 class="md:hidden text-4xl font-bold text-ink mb-6 text-right animate-fade-in-up">
{{ title }}
</h1>
<div class="mt-8 space-y-4 text-sm text-ink-light font-serif opacity-0 animate-fade-in-up delay-300" style="animation-fill-mode: forwards;">
<p><span class="text-cinnabar">●</span> {{ province }}</p>
<p>编号：{{ num or '---' }}</p>
<p>{{ rx_time }} 公布</p>
</div>
</div>
</aside>
完整代码：
https://gitee.com/kjmfzu/fzu_-kjm/blob/master/非遗万象图前端开发/ich_detail.html
效果图：
任务三：分类浏览功能(ich_province.html, ich_stats.html, category.html)
核心功能
- 按省份分类浏览非遗项目
- 数据统计可视化展示
- 分页导航系统
前端技术实现要点
1. 省份导航系统
- 实现侧边栏省份列表导航
- 当前省份高亮显示
- 分页功能实现
2. 数据统计展示
- 集成ECharts实现数据可视化
- 柱状图展示省份项目分布
- 条形图展示类别分布情况
3. 分页与排序
- 实现服务端分页逻辑
- 排序算法优化展示效果
- 页面间导航链接处理
用户体验优化
- 直观的数据可视化呈现
- 清晰的导航路径
- 响应式表格设计
部分代码：
点击查看代码
<div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-6">
<aside class="lg:col-span-3 rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-5 h-fit">
<div class="text-sm font-bold text-ink">省份导航</div>
<div class="mt-3 space-y-1">
{% for name, cnt in province_list %}
<a class="block rounded-lg px-3 py-2 text-sm transition
{% if name == province %}bg-cinnabar/10 text-cinnabar font-bold{% else %}text-ink hover:bg-ink/5{% endif %}"
href="{{ url_for('ich_map.ich_province_page', province_name=name, page=current_page) }}">
<span>{{ name }}</span>
<span class="text-xs text-ink-light">（{{ cnt }}）</span>
</a>
{% endfor %}
</div>
<div class="mt-5 flex items-center justify-between text-xs text-ink-light">
{% if current_page > 1 %}
<a class="text-cinnabar hover:underline"
href="{{ url_for('ich_map.ich_province_page', province_name=province, page=current_page-1) }}">上一页</a>
{% else %}
<span class="opacity-40">上一页</span>
{% endif %}
<span>第 {{ current_page }} / {{ total_pages }} 页</span>
{% if current_page < total_pages %}
<a class="text-cinnabar hover:underline"
href="{{ url_for('ich_map.ich_province_page', province_name=province, page=current_page+1) }}">下一页</a>
{% else %}
<span class="opacity-40">下一页</span>
{% endif %}
</div>
</aside>
<div class="lg:col-span-9 space-y-6">
<div class="rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-6">
<div class="text-sm font-bold text-ink">省域画像</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">项目数量</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ items|length }}</div>
</div>
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">全国排名</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ province_rank or "-" }}</div>
</div>
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">占比</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ "%.2f"|format(province_percent or 0) }}%</div>
</div>
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">多样性指数</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ "%.3f"|format(diversity_index or 0) }}</div>
</div>
</div>
完整代码：
https://gitee.com/kjmfzu/fzu_-kjm/tree/master/非遗万象图前端开发
效果图：
任务四：搜索功能
核心功能
- 全局关键词搜索
- 搜索结果展示与排序
- 智能匹配算法
前端技术实现要点
1. 搜索算法优化
- 标题精确匹配优先
- 标题包含次之
- 内容字段匹配最后
2. 结果展示
- 卡片式布局展示搜索结果
- 关键信息高亮显示
- 无结果友好提示
3. 前端交互
- 实时搜索反馈
- 搜索历史记录(可扩展)
- 快速返回导航
代码：
点击查看代码
{% extends "base.html" %}
{% block title %}探索非遗{% endblock %}
{% block content %}
<section class="max-w-7xl mx-auto px-6 md:px-12 py-10">
<div class="flex items-end justify-between gap-6 flex-wrap">
<div>
<h1 class="text-3xl md:text-4xl font-bold text-ink tracking-wide">探索 · 非遗</h1>
<p class="text-ink-light mt-2 text-sm tracking-widest">按名称 / 省份 / 类别 / 内容检索</p>
</div>
<form class="w-full md:w-[520px]" method="get" action="{{ url_for('ich_search_page') }}">
<div class="flex gap-3">
<input
name="keyword"
value="{{ keyword }}"
class="flex-1 rounded-lg border border-ink/10 bg-paper/80 backdrop-blur px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-cinnabar/30"
placeholder="输入关键词，例如：剪纸 / 贵州 / 京剧…"
/>
<button class="rounded-lg bg-cinnabar text-white px-5 py-3 text-sm font-bold tracking-widest hover:bg-cinnabar/90">
搜索
</button>
</div>
</form>
</div>
{% if search_performed %}
<div class="mt-8 flex items-center justify-between text-sm text-ink-light">
<div>结果：<span class="text-ink font-bold">{{ results|length }}</span> 项</div>
<a class="text-cinnabar hover:underline" href="{{ url_for('ich_map.ich_map_page') }}">返回地图</a>
</div>
{% if results %}
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for item in results %}
<a href="{{ url_for('ich_map.ich_item_page', item_id=item.get('id')) }}"
class="group rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-5 hover:-translate-y-0.5 hover:shadow-lg transition">
<div class="flex items-start justify-between gap-3">
<h3 class="font-bold text-ink group-hover:text-cinnabar transition line-clamp-2">
{{ item.get('title') or '未命名' }}
</h3>
<span class="text-[11px] text-ink-light whitespace-nowrap">
{{ item.get('rx_time') or '' }}
</span>
</div>
<div class="mt-3 text-xs text-ink-light flex flex-wrap gap-x-3 gap-y-1">
<span>📍 {{ item.get('province') or '未知地区' }}</span>
<span>🏷️ {{ item.get('type') or '未分类' }}</span>
{% if item.get('cate') %}<span>· {{ item.get('cate') }}</span>{% endif %}
</div>
<p class="mt-4 text-sm text-ink-light leading-relaxed">
{{ (item.get('content') or '') | striptags | truncate(140, True) }}
</p>
</a>
{% endfor %}
</div>
{% else %}
<div class="mt-10 rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-10 text-center text-ink-light">
未找到匹配结果，换个关键词试试。
</div>
{% endif %}
{% else %}
<div class="mt-10 rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-10 text-center text-ink-light">
输入关键词开始检索。
</div>
{% endif %}
</section>
{% endblock %}
效果图：
任务五：整体UI/UX优化
核心功能
- 统一的设计语言和视觉风格
- 响应式导航系统
- 全局样式协调
前端技术实现要点
1. 设计系统建立
- 定义色彩体系(朱砂红、墨色等)
- 统一字体和排版规范
- 建立组件库(按钮、卡片等)
2. 响应式导航
- 移动端汉堡菜单
- 桌面端水平导航
- 悬停动效增强交互
3. 全局样式协调
- TailwindCSS定制配置
- CSS变量统一管理
- 动画和过渡效果标准化
部分代码：
点击查看代码
<nav class="fixed top-0 w-full z-50 bg-paper/90 backdrop-blur-md border-b border-ink/5 transition-all duration-500 animate-fade-in-up">
<div class="max-w-7xl mx-auto px-6 md:px-12">
<div class="flex items-center justify-between h-24">
<a href="{{ url_for('ich_map.ich_map_page') }}" class="group flex items-center gap-4">
<div class="w-12 h-12 border-2 border-cinnabar rounded-lg flex items-center justify-center relative overflow-hidden transition-transform duration-700 group-hover:rotate-12 shadow-sm">
<div class="absolute inset-0 bg-cinnabar opacity-0 group-hover:opacity-10 transition-opacity duration-500"></div>
<span class="text-cinnabar font-calligraphy text-2xl">非遗</span>
</div>
<div class="flex flex-col justify-center">
<span class="text-xl font-bold tracking-[0.3em] text-ink transition-colors group-hover:text-cinnabar">智图</span>
<span class="text-[10px] uppercase tracking-[0.2em] text-ink-light mt-0.5 font-sans opacity-60">ICH Digital</span>
</div>
</a>
<div class="hidden md:flex items-center space-x-12">
<a href="{{ url_for('ich_map.ich_map_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
全景地图
<span class="absolute -bottom-1 left-1/2 w-0 h-[2px] bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-[16%]"></span>
</a>
<a href="{{ url_for('aimap_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
服饰·融创
<span class="absolute -bottom-1 left-1/2 w-0 h-[2px] bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-[16%]"></span>
</a>
<a href="{{ url_for('ai_create.ai_create_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
灵感·工坊
<span class="absolute -bottom-1 left-1/2 w-0 h-[2px] bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-[16%]"></span>
</a>
<a href="{{ url_for('analysis.endangered_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
濒危·抢救
<span class="absolute -bottom-1 left-1/2 w-0 h-[2px] bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-[16%]"></span>
</a>
<a href="{{ url_for('virtual_cut_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
虚实·共剪
<span class="absolute -bottom-1 left-1/2 w-0 h-[2px] bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-[16%]"></span>
</a>
<a href="{{ url_for('shadow_puppetry_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
光影·幕后
<span class="absolute -bottom-1 left-1/2 w-0 h-[2px] bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-[16%]"></span>
</a>
<a href="{{ url_for('jingju_synthesis_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
梨园·传声
<span class="absolute -bottom-1 left-1/2 w-0 h-[2px] bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-[16%]"></span>
</a>
</div>
<div></div>
</div>
</div>
</nav>
完整代码：
https://gitee.com/kjmfzu/fzu_-kjm/blob/master/非遗万象图前端开发/base.html
心得体会：
通过本次非遗数字化展示项目的前端开发实践，我深刻体会到了现代Web技术在传统文化传承中的重要作用。在实现地图浏览、项目详情展示、分类导航和搜索功能的过程中，我不仅巩固了HTML、CSS、JavaScript等前端基础知识，还学习了Vue.js状态管理和ECharts数据可视化等高级技术。
项目中最大的挑战是如何在保证功能完整性的同时，创造出富有文化韵味的用户体验。通过对非遗项目详情页的精心设计，实现了图片视频展示、首字母装饰等特色功能，让用户在获取信息的同时感受到传统文化的魅力。响应式设计确保了在各种设备上都能获得良好的浏览体验。
这次实践让我认识到，前端开发不仅是技术实现，更是艺术与技术的结合，需要不断学习新技术，提升用户体验。
浙公网安备 33010602011771号