File size: 13,518 Bytes
b4f2238 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 | {% load i18n %}
<!-- 法院短信自动处理流程演示 -->
<section class="sms-flow-section" id="sms-flow">
<div class="sms-flow-container">
<div class="section-header reveal">
<span class="section-tag">⚡ {% trans "自动化演示" %}</span>
<h2 class="section-title">{% trans "法院短信智能处理流程" %}</h2>
<p class="section-desc">{% trans "从收到短信到文书归档，全程自动化处理，7×24 小时无人值守" %}</p>
</div>
<div class="flow-demo" id="flowDemo">
<!-- 左侧：手机模拟器 -->
<div class="flow-left">
<div class="phone-mockup" id="phoneMockup">
<div class="phone-notch"></div>
<div class="phone-screen">
<div class="phone-status-bar">
<span>中国移动</span>
<span>10:24</span>
<span>📶</span>
</div>
<div class="sms-notification" id="smsNotification">
<div class="sms-header">
<div class="sms-icon">📩</div>
<div>
<div class="sms-sender">{% trans "浦东法院" %}</div>
<div class="sms-time">{% trans "刚刚" %}</div>
</div>
</div>
<div class="sms-content">
【浦东法院】张某诉李某民间借贷纠纷一案，现有法律文书送达：<span class="sms-link">https://ssfw...</span>
</div>
</div>
<div class="sms-notification" id="smsForward" style="background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3);">
<div class="sms-header">
<div class="sms-icon" style="background: linear-gradient(135deg, #fbbf24, #f59e0b);">📤</div>
<div>
<div class="sms-sender">{% trans "快捷指令" %}</div>
<div class="sms-time">{% trans "刚刚" %}</div>
</div>
</div>
<div class="sms-content">
{% trans "正在转发至法穿AI..." %}
</div>
</div>
</div>
</div>
</div>
<!-- 中间：转发说明卡片 + 箭头 -->
<div class="forward-section" id="forwardSection">
<div class="forward-card" id="forwardCard">
<div class="forward-card-icon">📱</div>
<div class="forward-card-title">{% trans "自动转发" %}</div>
<div class="forward-card-desc">iOS {% trans "快捷指令" %}<br>Android SMS Forwarder</div>
</div>
<!-- 连接箭头 -->
<div class="flow-arrow" id="flowArrow1">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
<!-- 右侧：处理流程 + 结果卡片 -->
<div class="flow-right">
<div class="flow-center">
<!-- 流程标题 -->
<div class="flow-center-title">
<div class="flow-center-title-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
</div>
<span class="flow-center-title-text">{% trans "法穿AI 智能处理" %}</span>
<span class="flow-center-title-sub">{% trans "7×24 自动化" %}</span>
</div>
<!-- 处理节点网格 -->
<div class="process-grid">
<div class="process-node" id="processReceive">
<div class="process-node-icon receive">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "接收短信" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processParse">
<div class="process-node-icon parse">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "解析链接" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processDownload">
<div class="process-node-icon download">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "下载文书" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processMatch">
<div class="process-node-icon match">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "匹配案件" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processRename">
<div class="process-node-icon rename">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "重命名归档" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processAnalyze">
<div class="process-node-icon analyze">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "智能分析" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<div class="process-node" id="processNotify" style="grid-column: span 2;">
<div class="process-node-icon notify">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
</div>
<div class="process-node-content">
<div class="process-node-title">{% trans "推送通知给律师（飞书/Telegram）" %}</div>
</div>
<div class="process-node-status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
</div>
</div>
<!-- 结果展示卡片 -->
<div class="result-cards" id="resultCards">
<div class="result-card success" id="resultBind">
<div class="result-icon">📁</div>
<div class="result-title">{% trans "文书已归档" %}</div>
<div class="result-desc">{% trans "自动绑定至案件" %}</div>
</div>
<div class="result-card success" id="resultRename">
<div class="result-icon">✏️</div>
<div class="result-title">{% trans "已重命名" %}</div>
<div class="result-desc">{% trans "传票（张某诉李某…）.pdf" %}</div>
</div>
<div class="result-card warning" id="resultReminder">
<div class="result-icon">⏰</div>
<div class="result-title">{% trans "开庭提醒" %}</div>
<div class="result-desc">2026-02-15 09:30</div>
</div>
<div class="result-card alert" id="resultAlert">
<div class="result-icon">⚠️</div>
<div class="result-title">{% trans "费用异常" %}</div>
<div class="result-desc">{% trans "受理费计算有误，立即联系书记员" %}</div>
</div>
</div>
</div>
</div>
<!-- 流程步骤指示器 -->
<div class="flow-steps" id="flowSteps">
<div class="flow-step" data-step="1">
<span class="flow-step-num">1</span>
<span>{% trans "收到短信" %}</span>
</div>
<div class="flow-step" data-step="2">
<span class="flow-step-num">2</span>
<span>{% trans "自动转发" %}</span>
</div>
<div class="flow-step" data-step="3">
<span class="flow-step-num">3</span>
<span>{% trans "解析链接" %}</span>
</div>
<div class="flow-step" data-step="4">
<span class="flow-step-num">4</span>
<span>{% trans "下载文书" %}</span>
</div>
<div class="flow-step" data-step="5">
<span class="flow-step-num">5</span>
<span>{% trans "归档绑定" %}</span>
</div>
<div class="flow-step" data-step="6">
<span class="flow-step-num">6</span>
<span>{% trans "智能提醒" %}</span>
</div>
</div>
<!-- 控制按钮 -->
<div class="flow-controls">
<button class="flow-btn flow-btn-play" id="flowPlayBtn" onclick="startFlowAnimation()">
<span>▶</span> {% trans "播放演示" %}
</button>
<button class="flow-btn flow-btn-reset" id="flowResetBtn" onclick="resetFlowAnimation()">
<span>↺</span> {% trans "重置" %}
</button>
</div>
</div>
</section>
|