302 lines
11 KiB
HTML
302 lines
11 KiB
HTML
<!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>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.image-item {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.image-preview {
|
|
margin-bottom: 10px;
|
|
}
|
|
canvas {
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
.download-btn {
|
|
background: #007AFF;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
.download-btn:hover {
|
|
background: #0056CC;
|
|
}
|
|
.info {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
h3 {
|
|
color: #555;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>精品课页面占位图片生成器</h1>
|
|
<p style="text-align: center; color: #666;">点击下载按钮保存图片到 /static/ 目录</p>
|
|
|
|
<!-- 主横幅 -->
|
|
<div class="image-item">
|
|
<h3>1. HIV横幅图片 (hiv_banner.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="hiv_banner" width="700" height="300"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('hiv_banner', 'hiv_banner.png')">下载</button>
|
|
<div class="info">尺寸: 700x300px | 用途: 主横幅</div>
|
|
</div>
|
|
|
|
<!-- 肝病图标 -->
|
|
<div class="image-item">
|
|
<h3>2. 肝病图标 (liver_icon.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="liver_icon" width="120" height="120"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('liver_icon', 'liver_icon.png')">下载</button>
|
|
<div class="info">尺寸: 120x120px | 用途: 分类图标</div>
|
|
</div>
|
|
|
|
<!-- 肿瘤图标 -->
|
|
<div class="image-item">
|
|
<h3>3. 肿瘤图标 (tumor_icon.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="tumor_icon" width="120" height="120"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('tumor_icon', 'tumor_icon.png')">下载</button>
|
|
<div class="info">尺寸: 120x120px | 用途: 分类图标</div>
|
|
</div>
|
|
|
|
<!-- 感染图标 -->
|
|
<div class="image-item">
|
|
<h3>4. 感染图标 (infection_icon.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="infection_icon" width="120" height="120"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('infection_icon', 'infection_icon.png')">下载</button>
|
|
<div class="info">尺寸: 120x120px | 用途: 分类图标</div>
|
|
</div>
|
|
|
|
<!-- 课程缩略图 -->
|
|
<div class="image-item">
|
|
<h3>5. 课程缩略图 (course_thumbnail.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="course_thumbnail" width="240" height="240"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('course_thumbnail', 'course_thumbnail.png')">下载</button>
|
|
<div class="info">尺寸: 240x240px | 用途: 精品小课缩略图</div>
|
|
</div>
|
|
|
|
<!-- 返现卡片1 -->
|
|
<div class="image-item">
|
|
<h3>6. 返现卡片1 (reward_card1.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="reward_card1" width="350" height="200"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('reward_card1', 'reward_card1.png')">下载</button>
|
|
<div class="info">尺寸: 350x200px | 用途: 学克返现卡片</div>
|
|
</div>
|
|
|
|
<!-- 返现卡片2 -->
|
|
<div class="image-item">
|
|
<h3>7. 返现卡片2 (reward_card2.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="reward_card2" width="350" height="200"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('reward_card2', 'reward_card2.png')">下载</button>
|
|
<div class="info">尺寸: 350x200px | 用途: 学克返现卡片</div>
|
|
</div>
|
|
|
|
<!-- 福利横幅 -->
|
|
<div class="image-item">
|
|
<h3>8. 福利横幅 (welfare_banner.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="welfare_banner" width="700" height="200"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('welfare_banner', 'welfare_banner.png')">下载</button>
|
|
<div class="info">尺寸: 700x200px | 用途: 福利课堂横幅</div>
|
|
</div>
|
|
|
|
<!-- HIV课程图 -->
|
|
<div class="image-item">
|
|
<h3>9. HIV课程图 (hiv_course.png)</h3>
|
|
<div class="image-preview">
|
|
<canvas id="hiv_course" width="240" height="240"></canvas>
|
|
</div>
|
|
<button class="download-btn" onclick="downloadImage('hiv_course', 'hiv_course.png')">下载</button>
|
|
<div class="info">尺寸: 240x240px | 用途: 热门课程缩略图</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
|
|
<h3>使用说明:</h3>
|
|
<ol>
|
|
<li>点击每个图片下方的"下载"按钮</li>
|
|
<li>将下载的图片保存到项目的 <code>/static/</code> 目录中</li>
|
|
<li>确保文件名与页面代码中的引用名称一致</li>
|
|
<li>重新运行uniapp项目即可看到占位图片效果</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 绘制图片函数
|
|
function drawImage(canvasId, config) {
|
|
const canvas = document.getElementById(canvasId);
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// 创建渐变背景
|
|
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
|
|
gradient.addColorStop(0, config.startColor);
|
|
gradient.addColorStop(1, config.endColor);
|
|
|
|
// 填充背景
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// 添加文字
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.font = `bold ${config.fontSize}px Arial, sans-serif`;
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
|
|
// 绘制主标题
|
|
ctx.fillText(config.title, canvas.width / 2, canvas.height / 2 - 10);
|
|
|
|
// 绘制副标题（如果有）
|
|
if (config.subtitle) {
|
|
ctx.font = `${config.fontSize - 4}px Arial, sans-serif`;
|
|
ctx.fillText(config.subtitle, canvas.width / 2, canvas.height / 2 + 20);
|
|
}
|
|
|
|
// 添加图标/装饰元素
|
|
if (config.icon) {
|
|
ctx.font = `${config.fontSize + 10}px Arial, sans-serif`;
|
|
ctx.fillText(config.icon, canvas.width / 2, canvas.height / 2 - 40);
|
|
}
|
|
}
|
|
|
|
// 下载图片函数
|
|
function downloadImage(canvasId, filename) {
|
|
const canvas = document.getElementById(canvasId);
|
|
const link = document.createElement('a');
|
|
link.download = filename;
|
|
link.href = canvas.toDataURL();
|
|
link.click();
|
|
}
|
|
|
|
// 页面加载完成后绘制所有图片
|
|
window.onload = function() {
|
|
// HIV横幅
|
|
drawImage('hiv_banner', {
|
|
startColor: '#64B5F6',
|
|
endColor: '#2196F3',
|
|
title: '小懂医生讲HIV和感染',
|
|
subtitle: '专业医学知识分享',
|
|
fontSize: 24,
|
|
icon: '🏥'
|
|
});
|
|
|
|
// 肝病图标
|
|
drawImage('liver_icon', {
|
|
startColor: '#FF8A65',
|
|
endColor: '#FF5722',
|
|
title: '肝病',
|
|
fontSize: 16,
|
|
icon: '🫀'
|
|
});
|
|
|
|
// 肿瘤图标
|
|
drawImage('tumor_icon', {
|
|
startColor: '#FFD54F',
|
|
endColor: '#FF9800',
|
|
title: '肿瘤',
|
|
fontSize: 16,
|
|
icon: '🎯'
|
|
});
|
|
|
|
// 感染图标
|
|
drawImage('infection_icon', {
|
|
startColor: '#64B5F6',
|
|
endColor: '#2196F3',
|
|
title: '感染',
|
|
fontSize: 16,
|
|
icon: '🦠'
|
|
});
|
|
|
|
// 课程缩略图
|
|
drawImage('course_thumbnail', {
|
|
startColor: '#E1F5FE',
|
|
endColor: '#81D4FA',
|
|
title: '肝脏胖瘦临床',
|
|
subtitle: '影像学习交流',
|
|
fontSize: 16,
|
|
icon: '📚'
|
|
});
|
|
|
|
// 返现卡片1
|
|
drawImage('reward_card1', {
|
|
startColor: '#E8F5E8',
|
|
endColor: '#4CAF50',
|
|
title: '乙肝临床治疗肝肝',
|
|
subtitle: '肝炎及关并发作用',
|
|
fontSize: 14
|
|
});
|
|
|
|
// 返现卡片2
|
|
drawImage('reward_card2', {
|
|
startColor: '#FFF3E0',
|
|
endColor: '#FF9800',
|
|
title: '胆汁淤积性诊断与制',
|
|
subtitle: '定及临床手段',
|
|
fontSize: 14
|
|
});
|
|
|
|
// 福利横幅
|
|
drawImage('welfare_banner', {
|
|
startColor: '#F3E5F5',
|
|
endColor: '#9C27B0',
|
|
title: '福利课堂 - 免费学习医学知识',
|
|
fontSize: 20,
|
|
icon: '🎁'
|
|
});
|
|
|
|
// HIV课程图
|
|
drawImage('hiv_course', {
|
|
startColor: '#E3F2FD',
|
|
endColor: '#1976D2',
|
|
title: 'HIV感染',
|
|
subtitle: '抗菌药特性',
|
|
fontSize: 16,
|
|
icon: '💊'
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|