老年书法绘画作品展示平台
我将设计一个温馨、易用的老年书法绘画作品展示平台，让中老年人能够轻松展示才艺、交流学习并获得成就感。
设计思路
- 采用传统中国风设计元素（宣纸纹理、毛笔字风格）
- 大字体、高对比度界面，方便老年人使用
- 简洁直观的操作流程
- 社区互动功能（点赞、评论、分享）
- 线上作品展览功能
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>墨香雅韵 - 老年书画作品展示平台</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "楷体", "STKaiti", serif;
}
:root {
--primary-color: #8B4513;
--secondary-color: #D2B48C;
--accent-color: #A52A2A;
--light-color: #FFF8DC;
--dark-color: #3E2723;
}
body {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23FFF8DC"/><path d="M0,0 Q50,20 100,0 T100,100 Q50,80 0,100 T0,0 Z" fill="%23D2B48C" opacity="0.1"/></svg>');
background-size: cover;
color: var(--dark-color);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
color: var(--light-color);
padding: 20px 0;
text-align: center;
border-bottom: 5px solid var(--secondary-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.logo-icon {
font-size: 2.5rem;
color: var(--light-color);
}
h1 {
font-size: 2.8rem;
letter-spacing: 4px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.subtitle {
font-size: 1.4rem;
margin-top: 10px;
opacity: 0.9;
}
nav {
background-color: var(--secondary-color);
padding: 15px 0;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.nav-links {
display: flex;
justify-content: center;
list-style: none;
gap: 30px;
}
.nav-links a {
color: var(--dark-color);
text-decoration: none;
font-size: 1.3rem;
padding: 8px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links a:hover, .nav-links a.active {
background-color: var(--primary-color);
color: var(--light-color);
}
.main-content {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 25px;
margin-top: 20px;
}
.sidebar {
background-color: rgba(255, 248, 220, 0.85);
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--secondary-color);
}
.user-card {
text-align: center;
padding: 20px 0;
border-bottom: 2px dashed var(--secondary-color);
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--primary-color);
margin-bottom: 15px;
}
.username {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.stats {
display: flex;
justify-content: space-around;
margin: 15px 0;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 1.4rem;
font-weight: bold;
color: var(--accent-color);
}
.stat-label {
font-size: 0.9rem;
color: var(--dark-color);
}
.btn {
display: block;
width: 100%;
padding: 12px;
margin: 10px 0;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 5px;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: var(--accent-color);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: white;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
.artwork-card {
background-color: rgba(255, 248, 220, 0.9);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
border: 1px solid var(--secondary-color);
}
.artwork-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.artwork-img {
width: 100%;
height: 250px;
object-fit: cover;
border-bottom: 2px solid var(--secondary-color);
}
.artwork-info {
padding: 20px;
}
.artwork-title {
font-size: 1.4rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.artist-name {
font-size: 1.1rem;
color: var(--accent-color);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 5px;
}
.artwork-desc {
font-size: 1rem;
margin-bottom: 15px;
color: var(--dark-color);
line-height: 1.5;
}
.artwork-meta {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px dashed var(--secondary-color);
padding-top: 15px;
}
.interactions {
display: flex;
gap: 15px;
}
.interaction-btn {
display: flex;
align-items: center;
gap: 5px;
background: none;
border: none;
color: var(--dark-color);
font-size: 1rem;
cursor: pointer;
transition: color 0.3s;
}
.interaction-btn:hover {
color: var(--accent-color);
}
.like-btn.liked {
color: #e74c3c;
}
.exhibition-section {
margin-top: 40px;
background-color: rgba(255, 248, 220, 0.85);
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--secondary-color);
}
.section-title {
font-size: 1.8rem;
color: var(--primary-color);
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--secondary-color);
}
.exhibition-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.exhibition-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid var(--secondary-color);
}
.exhibition-header {
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
color: white;
padding: 15px;
text-align: center;
}
.exhibition-title {
font-size: 1.4rem;
margin: 0;
}
.exhibition-date {
font-size: 0.9rem;
opacity: 0.9;
}
.exhibition-artworks {
padding: 15px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.exhibition-artwork {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 5px;
border: 1px solid var(--secondary-color);
}
.exhibition-desc {
padding: 15px;
font-size: 0.95rem;
line-height: 1.5;
}
footer {
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
color: var(--light-color);
text-align: center;
padding: 25px 0;
margin-top: 50px;
border-top: 5px solid var(--secondary-color);
}
.footer-links {
display: flex;
justify-content: center;
gap: 25px;
margin: 15px 0;
}
.footer-links a {
color: var(--light-color);
text-decoration: none;
font-size: 1.1rem;
}
.copyright {
margin-top: 15px;
font-size: 0.9rem;
opacity: 0.8;
}
/* 响应式设计 */
@media (max-width: 900px) {
.main-content {
grid-template-columns: 1fr;
}
.gallery {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 600px) {
.nav-links {
flex-direction: column;
align-items: center;
gap: 10px;
}
.gallery {
grid-template-columns: 1fr;
}
.exhibition-grid {
grid-template-columns: 1fr;
}
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: var(--light-color);
width: 90%;
max-width: 700px;
border-radius: 10px;
padding: 30px;
position: relative;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}
.close-modal {
position: absolute;
top: 15px;
right: 20px;
font-size: 1.8rem;
color: var(--dark-color);
cursor: pointer;
background: none;
border: none;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 1.1rem;
color: var(--primary-color);
}
.form-control {
width: 100%;
padding: 12px;
border: 1px solid var(--secondary-color);
border-radius: 5px;
font-size: 1.1rem;
background-color: rgba(255, 255, 255, 0.8);
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
background-color: var(--primary-color);
color: white;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: none;
z-index: 1100;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<header>
<div class="container">
<div class="logo">
<i class="fas fa-paint-brush logo-icon"></i>
<h1>墨香雅韵</h1>
</div>
<div class="subtitle">老年书法绘画作品展示平台</div>
</div>
</header>
<!-- 导航菜单 -->
<nav>
<div class="container">
<ul class="nav-links">
<li><a href="#" class="active">首页</a></li>
<li><a href="#">作品展厅</a></li>
<li><a href="#">线上展览</a></li>
<li><a href="#">艺术课堂</a></li>
<li><a href="#">交流社区</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</nav>
<div class="container">
<!-- 主要内容区 -->
<div class="main-content">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="user-card">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="用户头像" class="avatar">
<div class="username">张雅芝</div>
<div class="user-level">书画爱好者 · 7级</div>
<div class="stats">
<div class="stat-item">
<div class="stat-value">28</div>
<div class="stat-label">作品</div>
</div>
<div class="stat-item">
<div class="stat-value">356</div>
<div class="stat-label">粉丝</div>
</div>
<div class="stat-item">
<div class="stat-value">142</div>
<div class="stat-label">获赞</div>
</div>
</div>
</div>
<button class="btn" id="uploadBtn">
<i class="fas fa-cloud-upload-alt"></i> 上传作品
</button>
<button class="btn btn-outline">
<i class="fas fa-plus-circle"></i> 创建展览
</button>
<button class="btn btn-outline">
<i class="fas fa-bookmark"></i> 我的收藏
</button>
<button class="btn btn-outline">
<i class="fas fa-comments"></i> 我的消息
</button>
<button class="btn btn-outline">
<i class="fas fa-cog"></i> 个人设置
</button>
</div>
<!-- 作品展示区 -->
<div class="content">
<h2 class="section-title">最新作品展示</h2>
<div class="gallery" id="artworkGallery">
<!-- 作品卡片将通过JS动态生成 -->
</div>
<!-- 线上展览区 -->
<div class="exhibition-section">
<h2 class="section-title">线上作品展览</h2>
<div class="exhibition-grid" id="exhibitionGrid">
<!-- 展览卡片将通过JS动态生成 -->
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-links">
<a href="#">网站首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">服务条款</a>
<a href="#">隐私政策</a>
<a href="#">帮助中心</a>
</div>
<div class="copyright">
© 2023 墨香雅韵老年书画作品展示平台 | 让艺术点亮银发生活
</div>
</div>
</footer>
<!-- 上传作品模态框 -->
<div class="modal" id="uploadModal">
<div class="modal-content">
<button class="close-modal" id="closeUploadModal">×</button>
<h2 class="section-title">上传作品</h2>
<form id="uploadForm">
<div class="form-group">
<label for="artworkTitle">作品标题</label>
<input type="text" id="artworkTitle" class="form-control" placeholder="请输入作品名称" required>
</div>
<div class="form-group">
<label for="artworkType">作品类型</label>
<select id="artworkType" class="form-control" required>
<option value="">请选择作品类型</option>
<option value="calligraphy">书法</option>
<option value="painting">绘画</option>
<option value="seal">篆刻</option>
<option value="other">其他</option>
</select>
</div>
<div class="form-group">
<label for="artworkImage">上传作品图片</label>
<input type="file" id="artworkImage" class="form-control" accept="image/*" required>
</div>
<div class="form-group">
<label for="artworkDesc">作品介绍</label>
<textarea id="artworkDesc" class="form-control" placeholder="请介绍您的创作灵感、技法特点等..." required></textarea>
</div>
<div class="form-group">
<label for="artworkTags">作品标签</label>
<input type="text" id="artworkTags" class="form-control" placeholder="例如：楷书、山水、花鸟（用逗号分隔）">
</div>
<button type="submit" class="btn">发布作品</button>
</form>
</div>
</div>
<!-- 通知 -->
<div class="notification" id="notification">操作成功！</div>
<script>
// 示例作品数据
const artworks = [
{
id: 1,
title: "宁静致远",
artist: "张雅芝",
type: "书法",
image: "https://images.unsplash.com/photo-1547981609-4b6bf67db900?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
description: "楷书作品，书写内容为诸葛亮的《诫子书》节选。笔法稳健，结构严谨，体现书法的中正平和之美。",
likes: 42,
comments: 8,
tags: ["楷书", "诸葛亮", "诫子书"]
},
{
id: 2,
title: "秋山图",
artist: "王建国",
type: "绘画",
image: "https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
description: "水墨山水画，描绘金秋时节的山林景色。运用积墨法表现山石的厚重感，淡彩点缀秋叶，营造出秋意盎然的氛围。",
likes: 56,
comments: 12,
tags: ["山水画", "水墨", "秋景"]
},
{
id: 3,
title: "兰亭集序临摹",
artist: "李文华",
type: "书法",
image: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
description: "王羲之《兰亭集序》节选临摹，行书风格。注重笔势连贯与节奏变化，力求再现原作的神韵。",
likes: 38,
comments: 5,
tags: ["行书", "临摹", "王羲之"]
},
{
id: 4,
title: "荷塘清趣",
artist: "陈秀英",
type: "绘画",
image: "https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
description: "工笔花鸟画，描绘夏日荷塘景象。细致勾勒荷花花瓣，淡墨渲染荷叶，展现清雅脱俗的意境。",
likes: 49,
comments: 7,
tags: ["工笔画", "花鸟", "荷花"]
}
];
// 示例展览数据
const exhibitions = [
{
id: 1,
title: "翰墨春秋 - 老年书法精品展",
date: "2023.06.01 - 2023.06.30",
description: "本次展览汇集了平台优秀老年书法家的精品之作，涵盖篆、隶、楷、行、草各体，展现中国传统书法的博大精深。",
artworks: [1, 3, 5, 7]
},
{
id: 2,
title: "丹青晚晴 - 老年绘画作品联展",
date: "2023.07.15 - 2023.08.15",
description: "展出山水画、花鸟画、人物画等多种题材的优秀作品，展现老年艺术家对生活的热爱和对艺术的执着追求。",
artworks: [2, 4, 6, 8]
},
{
id: 3,
title: "桑榆非晚 - 年度优秀作品回顾展",
date: "2023.09.01 - 2023.09.30",
description: "精选过去一年平台最受欢迎、最具艺术价值的书画作品，回顾老年艺术家们的精彩创作历程。",
artworks: [1, 2, 3, 4, 5, 6]
}
];
// DOM元素
const artworkGallery = document.getElementById('artworkGallery');
const exhibitionGrid = document.getElementById('exhibitionGrid');
const uploadBtn = document.getElementById('uploadBtn');
const uploadModal = document.getElementById('uploadModal');
const closeUploadModal = document.getElementById('closeUploadModal');
const uploadForm = document.getElementById('uploadForm');
const notification = document.getElementById('notification');
// 初始化页面
function initPage() {
renderArtworks();
renderExhibitions();
setupEventListeners();
}
// 渲染作品画廊
function renderArtworks() {
artworkGallery.innerHTML = '';
artworks.forEach(artwork => {
const artworkCard = document.createElement('div');
artworkCard.className = 'artwork-card';
artworkCard.innerHTML = `
<img src="${artwork.image}" alt="${artwork.title}" class="artwork-img">
<div class="artwork-info">
<h3 class="artwork-title">${artwork.title}</h3>
<div class="artist-name">
<i class="fas fa-user"></i> ${artwork.artist}
</div>
<p class="artwork-desc">${artwork.description}</p>
<div class="artwork-meta">
<div class="tags">
${artwork.tags.map(tag => `<span class="tag">${tag}</span>`).join(' ')}
</div>
<div class="interactions">
<button class="interaction-btn like-btn" data-id="${artwork.id}">
<i class="far fa-heart"></i> <span>${artwork.likes}</span>
</button>
<button class="interaction-btn comment-btn" data-id="${artwork.id}">
<i class="far fa-comment"></i> <span>${artwork.comments}</span>
</button>
<button class="interaction-btn share-btn" data-id="${artwork.id}">
<i class="fas fa-share-alt"></i>
</button>
</div>
</div>
</div>
`;
artworkGallery.appendChild(artworkCard);
});
}
// 渲染展览
function renderExhibitions() {
exhibitionGrid.innerHTML = '';
exhibitions.forEach(exhibition => {
const exhibitionCard = document.createElement('div');
exhibitionCard.className = 'exhibition-card';
// 获取展览中的作品（这里简化处理）
const exhibitionArtworks = artworks.filter(a => exhibition.artworks.includes(a.id)).slice(0, 4);
exhibitionCard.innerHTML = `
<div class="exhibition-header">
<h3 class="exhibition-title">${exhibition.title}</h3>
<div class="exhibition-date">${exhibition.date}</div>
</div>
<div class="exhibition-artworks">
${exhibitionArtworks.map(art =>
`<img src="${art.image}" alt="${art.title}" class="exhibition-artwork">`
).join('')}
</div>
<div class="exhibition-desc">
${exhibition.description}
</div>
`;
exhibitionGrid.appendChild(exhibitionCard);
});
}
// 设置事件监听器
function setupEventListeners() {
// 打开上传模态框
uploadBtn.addEventListener('click', () => {
uploadModal.style.display = 'flex';
});
// 关闭上传模态框
closeUploadModal.addEventListener('click', () => {
uploadModal.style.display = 'none';
});
// 点击模态框外部关闭
window.addEventListener('click', (e) => {
if (e.target === uploadModal) {
uploadModal.style.display = 'none';
}
});
// 处理表单提交
uploadForm.addEventListener('submit', (e) => {
e.preventDefault();
// 获取表单数据
const title = document.getElementById('artworkTitle').value;
const type = document.getElementById('artworkType').value;
const desc = document.getElementById('artworkDesc').value;
const tags = document.getElementById('artworkTags').value;
// 创建新作品对象
const newArtwork = {
id: artworks.length + 1,
title: title,
artist: "张雅芝",
type: type === "calligraphy" ? "书法" :
type === "painting" ? "绘画" :
type === "seal" ? "篆刻" : "其他",
image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
description: desc,
likes: 0,
comments: 0,
tags: tags.split(',').map(tag => tag.trim())
};
// 添加到作品数组
artworks.unshift(newArtwork);
// 重新渲染作品画廊
renderArtworks();
// 关闭模态框
uploadModal.style.display = 'none';
// 重置表单
uploadForm.reset();
// 显示通知
showNotification('作品上传成功！');
});
// 点赞功能
document.addEventListener('click', (e) => {
if (e.target.closest('.like-btn')) {
const btn = e.target.closest('.like-btn');
const id = parseInt(btn.dataset.id);
const heartIcon = btn.querySelector('i');
const countSpan = btn.querySelector('span');
if (btn.classList.contains('liked')) {
// 取消点赞
btn.classList.remove('liked');
heartIcon.classList.replace('fas', 'far');
countSpan.textContent = parseInt(countSpan.textContent) - 1;
} else {
// 点赞
btn.classList.add('liked');
heartIcon.classList.replace('far', 'fas');
countSpan.textContent = parseInt(countSpan.textContent) + 1;
}
// 更新作品数据中的点赞数
const artwork = artworks.find(a => a.id === id);
if (artwork) {
artwork.likes = parseInt(countSpan.textContent);
}
}
// 评论功能
if (e.target.closest('.comment-btn')) {
const id = parseInt(e.target.closest('.comment-btn').dataset.id);
showNotification(`跳转到作品 ${id} 的评论区`);
}
// 分享功能
if (e.target.closest('.share-btn')) {
const id = parseInt(e.target.closest('.share-btn').dataset.id);
showNotification(`作品 ${id} 已复制到剪贴板，可以分享给朋友了！`);
}
});
}
// 显示通知
function showNotification(message) {
notification.textContent = message;
notification.style.display = 'block';
setTimeout(() => {
notification.style.display = 'none';
}, 3000);
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initPage);
</script>
</body>
</html>
平台功能说明
这个老年书法绘画作品展示平台具有以下核心功能：
1. 作品展示与上传
- 用户可上传书法、绘画、篆刻等艺术作品
- 为作品添加标题、描述和标签
- 画廊式展示所有作品，按时间倒序排列
2. 社交互动功能
- 点赞功能：表达对作品的喜爱
- 评论功能：与其他创作者交流心得
- 分享功能：将作品分享给亲友
3. 线上作品展览
- 定期举办主题线上展览（如"翰墨春秋"、"丹青晚晴"）
- 展览页面展示多幅精选作品
- 提供展览简介和时间安排
4. 用户个人空间
- 展示个人作品集
- 查看粉丝数量和获赞情况
- 管理个人收藏和消息
5. 适老化设计
- 大字体、高对比度界面
- 简洁直观的操作流程
- 传统中国风设计元素
- 响应式布局适配各种设备
使用场景
1. 作品展示：老年人可以上传自己的书法绘画作品，展示才艺
2. 交流学习：通过评论和点赞功能与其他创作者互动交流
3. 参加展览：作品有机会被选入线上主题展览
4. 获得认可：通过点赞和评论获得成就感
5. 持续学习：浏览他人作品获取灵感和学习机会
这个平台为老年人提供了一个温馨的数字家园，让他们在艺术创作中获得乐趣和成就感，同时促进同龄人之间的文化交流。
我是编程小白，请大家多多指教，谢谢！