和平签约小程序
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>和平签约 - 微信小程序</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6', // 和平蓝
secondary: '#10B981', // 希望绿
accent: '#EF4444', // 热情红
neutral: '#1F2937', // 深色文本
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-float-delay-1 {
animation: float 3.5s ease-in-out 0.5s infinite;
}
.animate-float-delay-2 {
animation: float 4s ease-in-out 1s infinite;
}
.animate-fly {
animation: fly 15s linear infinite;
}
.animate-fly-delay-1 {
animation: fly 16s linear 3s infinite;
}
.animate-fly-delay-2 {
animation: fly 14s linear 6s infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.signature-pad {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264.888-.14 1.24.916 1.776 1.804 2.456 2.724.667-.905 1.398-1.935 2.456-2.724.168-.125.531.01.888.14 1.39.473 2.954-.095 3.574-1.342.637-1.274-.255-2.94-1.824-3.296-1.14-.23-2.33.358-3.32.814-.45-.422-.9-.85-1.35-1.285.45.435.895.863 1.35 1.285-.99-.456-2.18-.844-3.32-.814-1.568.356-2.46.022-1.824 3.296.62 1.247 2.184 1.815 3.574 1.342zm-6.184-5c.357-.13.72-.264.888-.14 1.24.916 1.776 1.804 2.456 2.724.667-.905 1.398-1.935 2.456-2.724.168-.125.531.01.888.14 1.39.473 2.954-.095 3.574-1.342.637-1.274-.255-2.94-1.824-3.296-1.14-.23-2.33.358-3.32.814-.45-.422-.9-.85-1.35-1.285.45.435.895.863 1.35 1.285-.99-.456-2.18-.844-3.32-.814-1.568.356-2.46.022-1.824 3.296.62 1.247 2.184 1.815 3.574 1.342zm12-5c.357-.13.72-.264.888-.14 1.24.916 1.776 1.804 2.456 2.724.667-.905 1.398-1.935 2.456-2.724.168-.125.531.01.888.14 1.39.473 2.954-.095 3.574-1.342.637-1.274-.255-2.94-1.824-3.296-1.14-.23-2.33.358-3.32.814-.45-.422-.9-.85-1.35-1.285.45.435.895.863 1.35 1.285-.99-.456-2.18-.844-3.32-.814-1.568.356-2.46.022-1.824 3.296.62 1.247 2.184 1.815 3.574 1.342zM0 5c0 2.76 2.24 5 5 5s5-2.24 5-5S7.76 0 5 0 0 2.24 0 5zm15 0c0 2.76 2.24 5 5 5s5-2.24 5-5S22.76 0 20 0s-5 2.24-5 5zm15 0c0 2.76 2.24 5 5 5s5-2.24 5-5S37.76 0 35 0s-5 2.24-5 5zm15 0c0 2.76 2.24 5 5 5s5-2.24 5-5S52.76 0 50 0s-5 2.24-5 5zm15 0c0 2.76 2.24 5 5 5s5-2.24 5-5S67.76 0 65 0s-5 2.24-5 5zm15 0c0 2.76 2.24 5 5 5s5-2.24 5-5S82.76 0 80 0s-5 2.24-5 5zm15 0c0 2.76 2.24 5 5 5s5-2.24 5-5S97.76 0 95 0s-5 2.24-5 5z' fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes fly {
0% { transform: translateX(-100px) translateY(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(400px) translateY(-50px); opacity: 0; }
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen flex flex-col items-center justify-center p-4 font-sans">
<!-- 模拟微信小程序容器 -->
<div class="w-full max-w-md bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 relative">
<!-- 小程序顶部导航栏 -->
<div class="bg-primary text-white py-4 px-6 flex justify-between items-center">
<div class="text-sm opacity-80">返回</div>
<h1 class="text-lg font-bold">和平签约</h1>
<div class="w-6"></div> <!-- 占位，平衡布局 -->
</div>
<!-- 主内容区 -->
<div class="p-6 pb-20 relative">
<!-- 左上角照片 -->
<div class="absolute top-6 left-6 z-10">
<div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white shadow-md">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/21712cbd5dd34903b7e7b94db5a23ab3.jpg~tplv-a9rns2rl98-24:720:720.image?rk3s=1fb89129&x-expires=1757004710&x-signature=RXN3NBupTAhAkXbGznVMIqRvlLI%3D"
alt="男孩照片"
class="w-full h-full object-cover">
</div>
</div>
<!-- 作者信息 -->
<div class="text-right text-sm text-gray-500 mb-4">
作者：田景丞（红英小学，3年级17班）
</div>
<!-- 标题 -->
<div class="text-center mb-8">
<h2 class="text-[clamp(1.5rem,5vw,2rem)] font-bold text-neutral mb-2 text-shadow">
我承诺
</h2>
<p class="text-gray-600 text-lg">守护和平，共创美好未来</p>
</div>
<!-- 和平鸽动画区域 -->
<div class="relative h-24 mb-6 overflow-hidden">
<div class="absolute top-0 left-0 animate-fly">
<i class="fa fa-paper-plane text-2xl text-primary/70"></i>
</div>
<div class="absolute top-8 left-0 animate-fly-delay-1">
<i class="fa fa-paper-plane text-xl text-primary/60"></i>
</div>
<div class="absolute top-4 left-0 animate-fly-delay-2">
<i class="fa fa-paper-plane text-2xl text-secondary/70"></i>
</div>
</div>
<!-- 和平象征图案 -->
<div class="flex justify-center mb-10">
<div class="relative w-40 h-40 animate-pulse-slow">
<!-- 橄榄枝背景 -->
<div class="absolute inset-0 flex items-center justify-center">
<i class="fa fa-leaf text-8xl text-secondary/20 transform -rotate-12"></i>
<i class="fa fa-leaf text-8xl text-secondary/20 transform rotate-12 -ml-6"></i>
</div>
<!-- 和平鸽 -->
<div class="absolute inset-0 flex items-center justify-center animate-float">
<i class="fa fa-paper-plane text-6xl text-primary"></i>
</div>
</div>
</div>
<!-- 签约区域 -->
<div class="mb-8">
<div class="bg-white border-2 border-dashed border-gray-300 rounded-xl p-6 signature-pad min-h-[120px] flex items-center justify-center mb-4" id="signatureArea">
<p class="text-gray-400 text-center" id="signaturePlaceholder">
<i class="fa fa-hand-paper-o mr-2"></i>点击下方按钮完成和平签约
</p>
<canvas id="signatureCanvas" class="w-full h-full hidden"></canvas>
</div>
<!-- 签约按钮 -->
<button id="signButton" class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl flex items-center justify-center">
<i class="fa fa-pencil-square-o mr-2"></i>
签署和平承诺
</button>
</div>
<!-- 宣言文字 -->
<div class="bg-blue-50 border border-blue-100 rounded-xl p-5 text-center">
<p class="text-gray-700 italic">
"我们铭记历史，珍惜和平，<br>
愿为世界的和平与发展贡献力量"
</p>
</div>
</div>
<!-- 底部信息 -->
<div class="absolute bottom-0 left-0 right-0 bg-gray-50 border-t border-gray-100 py-3 px-6 text-center text-gray-500 text-sm">
和平签约 · 共同承诺
</div>
</div>
<!-- 成功提示弹窗 (默认隐藏) -->
<div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 hidden">
<div class="bg-white rounded-2xl p-8 max-w-xs w-full text-center transform transition-all">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-check text-2xl text-secondary"></i>
</div>
<h3 class="text-xl font-bold text-neutral mb-2">签约成功！</h3>
<p class="text-gray-600 mb-6">感谢您对和平事业的支持</p>
<button id="shareButton" class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 px-4 rounded-xl transition-all">
<i class="fa fa-share-alt mr-2"></i>分享我的承诺
</button>
</div>
</div>
<script>
// 获取DOM元素
const signButton = document.getElementById('signButton');
const signatureArea = document.getElementById('signatureArea');
const signaturePlaceholder = document.getElementById('signaturePlaceholder');
const signatureCanvas = document.getElementById('signatureCanvas');
const successModal = document.getElementById('successModal');
const shareButton = document.getElementById('shareButton');
// 设置Canvas
function setupCanvas() {
const rect = signatureArea.getBoundingClientRect();
signatureCanvas.width = rect.width;
signatureCanvas.height = rect.height;
return signatureCanvas.getContext('2d');
}
const ctx = setupCanvas();
let isDrawing = false;
let hasSigned = false;
// 处理签名绘制
function startDrawing(e) {
if (!hasSigned) {
isDrawing = true;
const rect = signatureCanvas.getBoundingClientRect();
const x = e.touches ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
const y = e.touches ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
ctx.beginPath();
ctx.moveTo(x, y);
}
}
function draw(e) {
if (!isDrawing || hasSigned) return;
const rect = signatureCanvas.getBoundingClientRect();
const x = e.touches ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
const y = e.touches ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
ctx.lineTo(x, y);
ctx.strokeStyle = '#3B82F6';
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();
}
function stopDrawing() {
isDrawing = false;
}
// 签约按钮点击事件
signButton.addEventListener('click', () => {
if (!hasSigned) {
// 显示签名区域
signaturePlaceholder.classList.add('hidden');
signatureCanvas.classList.remove('hidden');
// 更改按钮文本
signButton.innerHTML = '<i class="fa fa-check mr-2"></i>完成签约';
signButton.classList.remove('bg-primary');
signButton.classList.add('bg-secondary');
// 添加绘制事件监听
signatureCanvas.addEventListener('mousedown', startDrawing);
signatureCanvas.addEventListener('mousemove', draw);
signatureCanvas.addEventListener('mouseup', stopDrawing);
signatureCanvas.addEventListener('mouseout', stopDrawing);
// 触摸设备支持
signatureCanvas.addEventListener('touchstart', startDrawing);
signatureCanvas.addEventListener('touchmove', (e) => {
e.preventDefault(); // 防止页面滚动
draw(e);
});
signatureCanvas.addEventListener('touchend', stopDrawing);
} else {
// 显示成功弹窗
successModal.classList.remove('hidden');
successModal.classList.add('flex');
}
});
// 监听签名动作，一旦开始签名就标记为已签署
signatureCanvas.addEventListener('mousemove', () => {
if (isDrawing) {
hasSigned = true;
signButton.innerHTML = '<i class="fa fa-check mr-2"></i>确认签约';
}
});
signatureCanvas.addEventListener('touchmove', () => {
if (isDrawing) {
hasSigned = true;
signButton.innerHTML = '<i class="fa fa-check mr-2"></i>确认签约';
}
});
// 分享按钮点击事件
shareButton.addEventListener('click', () => {
// 在实际微信小程序中，这里会调用微信的分享API
alert('分享功能已触发，在实际小程序中会打开分享面板');
successModal.classList.add('hidden');
successModal.classList.remove('flex');
});
// 窗口大小变化时重新设置Canvas
window.addEventListener('resize', () => {
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = signatureCanvas.width;
tempCanvas.height = signatureCanvas.height;
tempCtx.drawImage(signatureCanvas, 0, 0);
setupCanvas();
ctx.drawImage(tempCanvas, 0, 0);
});
</script>
</body>
</html>
浙公网安备 33010602011771号