素材下载详情页面模块
下面是一个素材下载的详情页面模块，采用左右布局，符合您的要求：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>素材下载详情</title>
<style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f7f9fc;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
/* 详情页主体 */
.material-detail {
display: flex;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
overflow: hidden;
}
/* 左侧区域 */
.material-image-section {
width: 50%;
position: relative;
background-color: #f5f7fa;
padding: 30px;
display: flex;
flex-direction: column;
}
/* 面包屑导航 */
.breadcrumb {
margin-bottom: 20px;
font-size: 14px;
color: #666;
}
.breadcrumb a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.breadcrumb a:hover {
color: #3f51b5;
}
.breadcrumb span {
margin: 0 8px;
color: #999;
}
/* 图片展示区 */
.material-image-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.material-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
}
.material-image:hover {
transform: scale(1.03);
}
/* 右侧区域 */
.material-info-section {
width: 50%;
padding: 40px;
}
/* 标题 */
.material-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
color: #1a1a1a;
line-height: 1.3;
}
/* 信息列表 */
.material-info-list {
margin-bottom: 30px;
}
.info-item {
display: flex;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #eee;
}
.info-label {
width: 80px;
color: #666;
font-weight: 500;
}
.info-value {
flex: 1;
color: #1a1a1a;
font-weight: 500;
}
/* 操作按钮区 */
.action-buttons {
display: flex;
gap: 15px;
margin-bottom: 30px;
}
.download-btn {
flex: 2;
background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
color: white;
border: none;
border-radius: 6px;
padding: 16px 32px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(27, 39, 70, 0.2);
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(27, 39, 70, 0.3);
}
.download-btn i {
margin-right: 10px;
}
.favorite-btn, .share-btn {
flex: 1;
background-color: #f0f2f5;
color: #555;
border: none;
border-radius: 6px;
padding: 16px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.favorite-btn:hover, .share-btn:hover {
background-color: #e0e3e8;
transform: translateY(-2px);
}
.favorite-btn i, .share-btn i {
margin-right: 8px;
font-size: 18px;
}
/* 标签区 */
.tags-section {
margin-top: 30px;
}
.tags-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
background-color: #eef2ff;
color: #4b6cb7;
padding: 8px 16px;
border-radius: 100px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.tag:hover {
background-color: #4b6cb7;
color: white;
transform: translateY(-2px);
}
/* 响应式设计 */
@media (max-width: 992px) {
.material-detail {
flex-direction: column;
}
.material-image-section, .material-info-section {
width: 100%;
}
.material-image-section {
padding: 20px;
}
.material-info-section {
padding: 30px;
}
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.material-detail {
animation: fadeIn 0.6s ease-out;
}
.download-btn {
position: relative;
overflow: hidden;
}
.download-btn:after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.download-btn:hover:after {
left: 100%;
}
</style>
<!-- 引入Font Awesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="material-detail">
<!-- 左侧图片展示区 -->
<div class="material-image-section">
<!-- 面包屑导航 -->
<div class="breadcrumb">
<a href="#">首页</a>
<span>/</span>
<a href="#">素材库</a>
<span>/</span>
<a href="#">图片素材</a>
</div>
<!-- 图片容器 -->
<div class="material-image-container">
<img src="https://source.unsplash.com/random/800x600/?design" alt="素材预览图" class="material-image">
</div>
</div>
<!-- 右侧信息区 -->
<div class="material-info-section">
<h1 class="material-title">高品质商务风格展示模板素材</h1>
<!-- 素材信息列表 -->
<div class="material-info-list">
<div class="info-item">
<div class="info-label">格式</div>
<div class="info-value">PSD / AI / JPG</div>
</div>
<div class="info-item">
<div class="info-label">尺寸</div>
<div class="info-value">5000 × 3500 px</div>
</div>
<div class="info-item">
<div class="info-label">大小</div>
<div class="info-value">24.5 MB</div>
</div>
<div class="info-item">
<div class="info-label">上传时间</div>
<div class="info-value">2023-12-15</div>
</div>
<div class="info-item">
<div class="info-label">下载次数</div>
<div class="info-value">12,458</div>
</div>
</div>
<!-- 操作按钮区 -->
<div class="action-buttons">
<button class="download-btn">
<i class="fas fa-download"></i>
立即下载
</button>
<button class="favorite-btn">
<i class="far fa-heart"></i>
收藏
</button>
<button class="share-btn">
<i class="fas fa-share-alt"></i>
分享
</button>
</div>
<!-- 标签区 -->
<div class="tags-section">
<h3 class="tags-title">相关标签</h3>
<div class="tags-container">
<div class="tag">商务风格</div>
<div class="tag">展示模板</div>
<div class="tag">高品质素材</div>
<div class="tag">企业设计</div>
<div class="tag">专业素材</div>
<div class="tag">设计资源</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 收藏功能
document.querySelector('.favorite-btn').addEventListener('click', function() {
const icon = this.querySelector('i');
if (icon.classList.contains('far')) {
icon.classList.remove('far');
icon.classList.add('fas');
icon.style.color = '#ff4757';
// 这里可以添加收藏的API调用
} else {
icon.classList.remove('fas');
icon.classList.add('far');
icon.style.color = '';
// 这里可以添加取消收藏的API调用
}
});
// 分享功能
document.querySelector('.share-btn').addEventListener('click', function() {
// 这里可以添加分享弹窗或社交媒体分享功能
alert('分享功能即将上线！');
});
// 下载按钮点击效果
document.querySelector('.download-btn').addEventListener('click', function() {
// 这里可以添加下载功能或跳转至下载链接
this.innerHTML = '<i class="fas fa-check"></i>正在下载...';
setTimeout(() => {
this.innerHTML = '<i class="fas fa-download"></i>立即下载';
}, 2000);
});
</script>
</body>
</html>设计特点
布局设计:
- 左右两栏布局，左侧为图片展示区域，右侧为素材信息
- 左侧顶部有面包屑导航
- 图片居中展示，并有放大悬停效果
视觉设计:
- 柔和的配色方案，主要使用蓝色渐变作为强调色
- 卡片式设计，带有轻微阴影增加立体感
- 清晰易读的字体层次，标题醒目，信息条理清晰
交互元素:
- 下载按钮醒目，带有渐变色和动画效果
- 收藏和分享按钮使用图标增强可识别性
- 标签采用圆角设计，鼠标悬停时有颜色变化
动效设计:
- 页面加载时有淡入动画
- 下载按钮有光效动画
- 图片有轻微放大效果
- 按钮有上浮效果
响应式设计:
- 虽然主要针对电脑端，但也添加了简单的响应式布局
- 在小屏幕设备上自动调整为上下布局
这个页面风格简洁大气，同时具有现代感，符合高品质素材下载网站的定位。
需支付 5元 阅读剩余内容
