合并精品课

2025-08-21 09:59:04 +08:00
parent 72d63c5a80
commit 196ea43fad
19 changed files with 6308 additions and 18 deletions
@@ -0,0 +1,145 @@
+<!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 {
+            margin: 0;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+            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);
+        }
+        .placeholder {
+            width: 120px;
+            height: 120px;
+            background: linear-gradient(135deg, #87CEEB, #E0F6FF);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 20px auto;
+            position: relative;
+            overflow: hidden;
+        }
+        .doctor-icon {
+            width: 60px;
+            height: 60px;
+            background: #FF4757;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+        }
+        .generate-btn {
+            background: #FF4757;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            margin: 10px;
+        }
+        .generate-btn:hover {
+            background: #e63946;
+        }
+        .download-btn {
+            background: #28a745;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            margin: 10px;
+        }
+        .download-btn:hover {
+            background: #218838;
+        }
+        canvas {
+            border: 1px solid #ddd;
+            margin: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>医生头像占位图生成器</h1>
+        <p>为精品课页面生成医生头像占位图</p>
+        
+        <div class="placeholder">
+            <div class="doctor-icon">医</div>
+        </div>
+        
+        <div style="text-align: center;">
+            <button class="generate-btn" onclick="generatePlaceholder()">生成占位图</button>
+            <button class="download-btn" onclick="downloadImage()">下载图片</button>
+        </div>
+        
+        <canvas id="canvas" width="120" height="120" style="display: none;"></canvas>
+        
+        <div id="preview"></div>
+    </div>
+
+    <script>
+        function generatePlaceholder() {
+            const canvas = document.getElementById('canvas');
+            const ctx = canvas.getContext('2d');
+            
+            // 创建渐变背景
+            const gradient = ctx.createLinearGradient(0, 0, 120, 120);
+            gradient.addColorStop(0, '#87CEEB');
+            gradient.addColorStop(1, '#E0F6FF');
+            
+            // 绘制背景
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, 120, 120);
+            
+            // 绘制圆角矩形
+            ctx.fillStyle = '#FF4757';
+            ctx.beginPath();
+            ctx.roundRect(30, 30, 60, 60, 30);
+            ctx.fill();
+            
+            // 绘制文字
+            ctx.fillStyle = 'white';
+            ctx.font = 'bold 24px Arial';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('医', 60, 60);
+            
+            // 显示预览
+            const preview = document.getElementById('preview');
+            preview.innerHTML = '<h3>生成的占位图：</h3>';
+            preview.appendChild(canvas.cloneNode(true));
+            canvas.style.display = 'block';
+        }
+        
+        function downloadImage() {
+            const canvas = document.getElementById('canvas');
+            const link = document.createElement('a');
+            link.download = 'placeholder_doctor.png';
+            link.href = canvas.toDataURL();
+            link.click();
+        }
+        
+        // 页面加载时自动生成
+        window.onload = function() {
+            generatePlaceholder();
+        };
+    </script>
+</body>
+</html>