| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>青竹学术</title> |
| 6 | <style> |
| 7 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 8 | html, body { |
| 9 | width: 1600px; |
| 10 | height: 900px; |
| 11 | overflow: hidden; |
| 12 | background: #ffffff; |
| 13 | font-family: "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif; |
| 14 | } |
| 15 | .canvas { |
| 16 | position: relative; |
| 17 | width: 1600px; |
| 18 | height: 900px; |
| 19 | background: #ffffff; |
| 20 | } |
| 21 | |
| 22 | /* Decorative background shapes */ |
| 23 | .deco-circle-lg { |
| 24 | position: absolute; |
| 25 | width: 520px; height: 520px; |
| 26 | right: -180px; top: -180px; |
| 27 | border-radius: 50%; |
| 28 | background: linear-gradient(135deg, #e0eded 0%, #a9d3a9 100%); |
| 29 | opacity: 0.55; |
| 30 | } |
| 31 | .deco-ring { |
| 32 | position: absolute; |
| 33 | width: 300px; height: 300px; |
| 34 | left: -120px; bottom: -110px; |
| 35 | border-radius: 50%; |
| 36 | border: 40px solid rgba(91,128,91,0.14); |
| 37 | } |
| 38 | .deco-dot { |
| 39 | position: absolute; |
| 40 | left: 220px; bottom: 60px; |
| 41 | width: 14px; height: 14px; |
| 42 | border-radius: 50%; |
| 43 | background: #66a4a4; |
| 44 | } |
| 45 | .deco-dash { |
| 46 | position: absolute; |
| 47 | left: 68px; top: 300px; |
| 48 | width: 2px; height: 300px; |
| 49 | background: repeating-linear-gradient(to bottom, #a9c683 0 6px, transparent 6px 10px); |
| 50 | } |
| 51 | |
| 52 | /* Header */ |
| 53 | .kicker { |
| 54 | position: absolute; |
| 55 | left: 96px; top: 92px; |
| 56 | font-size: 20px; |
| 57 | letter-spacing: 6px; |
| 58 | color: #537e85; |
| 59 | font-weight: 600; |
| 60 | } |
| 61 | .kicker-line { |
| 62 | position: absolute; |
| 63 | left: 96px; top: 128px; |
| 64 | width: 64px; height: 4px; |
| 65 | background: #5b805b; |
| 66 | } |
| 67 | .title { |
| 68 | position: absolute; |
| 69 | left: 96px; top: 156px; |
| 70 | font-size: 53px; |
| 71 | font-weight: 700; |
| 72 | color: #000000; |
| 73 | line-height: 1.2; |
| 74 | letter-spacing: 1px; |
| 75 | } |
| 76 | .subtitle { |
| 77 | position: absolute; |
| 78 | left: 96px; top: 300px; |
| 79 | width: 560px; |
| 80 | font-size: 22px; |
| 81 | line-height: 1.5; |
| 82 | color: #5f5f5f; |
| 83 | font-weight: 400; |
| 84 | } |
| 85 | .meta { |
| 86 | position: absolute; |
| 87 | left: 96px; top: 440px; |
| 88 | font-size: 19px; |
| 89 | color: #727273; |
| 90 | line-height: 1.6; |
| 91 | } |
| 92 | .meta b { color: #3b3b3b; font-weight: 600; } |
| 93 | |
| 94 | /* Hexagon quadrant matrix (right side) */ |
| 95 | .matrix { |
| 96 | position: absolute; |
| 97 | right: 120px; top: 250px; |
| 98 | width: 620px; height: 520px; |
| 99 | } |
| 100 | |
| 101 | .hex { |
| 102 | position: absolute; |
| 103 | width: 200px; height: 226px; |
| 104 | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
| 105 | display: flex; |
| 106 | flex-direction: column; |
| 107 | align-items: center; |
| 108 | justify-content: center; |
| 109 | text-align: center; |
| 110 | color: #ffffff; |
| 111 | padding: 0 26px; |
| 112 | } |
| 113 | .hex .icon { |
| 114 | width: 46px; height: 46px; |
| 115 | margin-bottom: 12px; |
| 116 | display: flex; align-items: center; justify-content: center; |
| 117 | } |
| 118 | .hex .icon svg { width: 40px; height: 40px; } |
| 119 | .hex .h-label { |
| 120 | font-size: 24px; |
| 121 | font-weight: 700; |
| 122 | margin-bottom: 6px; |
| 123 | } |
| 124 | .hex .h-sub { |
| 125 | font-size: 15px; |
| 126 | line-height: 1.35; |
| 127 | opacity: 0.92; |
| 128 | font-weight: 400; |
| 129 | } |
| 130 | |
| 131 | .hex-1 { left: 90px; top: 0; background: linear-gradient(145deg, #5b805b, #6f9a6f); } |
| 132 | .hex-2 { left: 300px; top: 0; background: linear-gradient(145deg, #66a4a4, #7fbcbc); } |
| 133 | .hex-3 { left: 90px; top: 260px; background: linear-gradient(145deg, #537e85, #6a99a1); } |
| 134 | .hex-4 { left: 300px; top: 260px; background: linear-gradient(145deg, #a9c683, #94b56d); } |
| 135 | |
| 136 | .hex-center { |
| 137 | left: 195px; top: 130px; |
| 138 | width: 200px; height: 226px; |
| 139 | position: absolute; |
| 140 | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
| 141 | background: #ffffff; |
| 142 | border: 2px dashed #a9c683; |
| 143 | display: flex; align-items: center; justify-content: center; |
| 144 | text-align: center; |
| 145 | } |
| 146 | .hex-center span { |
| 147 | font-size: 22px; |
| 148 | font-weight: 700; |
| 149 | color: #3b3b3b; |
| 150 | line-height: 1.3; |
| 151 | } |
| 152 | .hex-center small { |
| 153 | display: block; |
| 154 | font-size: 14px; |
| 155 | color: #66a4a4; |
| 156 | letter-spacing: 3px; |
| 157 | margin-top: 6px; |
| 158 | font-weight: 600; |
| 159 | } |
| 160 | |
| 161 | /* Footer */ |
| 162 | .footer { |
| 163 | position: absolute; |
| 164 | left: 96px; bottom: 56px; |
| 165 | font-size: 16px; |
| 166 | color: #727273; |
| 167 | letter-spacing: 1px; |
| 168 | } |
| 169 | .footer .sep { color: #a9d3a9; margin: 0 12px; } |
| 170 | .pageno { |
| 171 | position: absolute; |
| 172 | right: 96px; bottom: 52px; |
| 173 | font-size: 16px; |
| 174 | color: #5b805b; |
| 175 | font-weight: 600; |
| 176 | } |
| 177 | </style> |
| 178 | </head> |
| 179 | <body> |
| 180 | <div class="canvas"> |
| 181 | <div class="deco-circle-lg"></div> |
| 182 | <div class="deco-ring"></div> |
| 183 | <div class="deco-dot"></div> |
| 184 | <div class="deco-dash"></div> |
| 185 | |
| 186 | <div class="kicker">开题报告 · RESEARCH PROPOSAL</div> |
| 187 | <div class="kicker-line"></div> |
| 188 | <div class="title">面向图神经网络的<br>可解释性研究框架</div> |
| 189 | |
| 190 | <div class="subtitle"> |
| 191 | 围绕 GNN 节点分类任务，构建从数据表征、模型推理到结果溯源的 |
| 192 | 闭环分析路径，探索结构化解释与量化评估的统一方法。 |
| 193 | </div> |
| 194 | |
| 195 | <div class="meta"> |
| 196 | 研究方向 <b>机器学习 · 图表示学习</b><br> |
| 197 | 汇报人 <b>李清竹</b> · 计算机科学与技术学院<br> |
| 198 | 指导教师 <b>王沉静 教授</b> |
| 199 | </div> |
| 200 | |
| 201 | <div class="matrix"> |
| 202 | <div class="hex hex-1"> |
| 203 | <div class="icon"> |
| 204 | <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.8"> |
| 205 | <path d="M9 18h6M10 21h4M12 2a6 6 0 0 0-4 10.5c.6.6 1 1.4 1 2.5h6c0-1.1.4-1.9 1-2.5A6 6 0 0 0 12 2z"/> |
| 206 | </svg> |
| 207 | </div> |
| 208 | <div class="h-label">研究内容</div> |
| 209 | <div class="h-sub">界定核心问题<br>凝练关键科学假设</div> |
| 210 | </div> |
| 211 | <div class="hex hex-2"> |
| 212 | <div class="icon"> |
| 213 | <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.8"> |
| 214 | <circle cx="12" cy="12" r="3"/> |
| 215 | <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1"/> |
| 216 | </svg> |
| 217 | </div> |
| 218 | <div class="h-label">理论方法</div> |
| 219 | <div class="h-sub">图卷积与注意力<br>机制建模</div> |
| 220 | </div> |
| 221 | <div class="hex hex-3"> |
| 222 | <div class="icon"> |
| 223 | <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.8"> |
| 224 | <circle cx="11" cy="11" r="7"/> |
| 225 | <path d="M21 21l-4.3-4.3"/> |
| 226 | </svg> |
| 227 | </div> |
| 228 | <div class="h-label">数据分析</div> |
| 229 | <div class="h-sub">多维指标验证<br>与消融实验</div> |
| 230 | </div> |
| 231 | <div class="hex hex-4"> |
| 232 | <div class="icon"> |
| 233 | <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.8"> |
| 234 | <path d="M6 3h9l5 5v13H6z"/> |
| 235 | <path d="M15 3v5h5M9 13h6M9 17h6"/> |
| 236 | </svg> |
| 237 | </div> |
| 238 | <div class="h-label">成果预期</div> |
| 239 | <div class="h-sub">形成可复现的<br>解释性工具链</div> |
| 240 | </div> |
| 241 | <div class="hex-center"> |
| 242 | <span>研究框架<small>FRAMEWORK</small></span> |
| 243 | </div> |
| 244 | </div> |
| 245 | |
| 246 | <div class="footer"> |
| 247 | 青竹学术研究汇报 <span class="sep">/</span> 2025 学年度 <span class="sep">/</span> 严谨 · 沉静 · 有序 |
| 248 | </div> |
| 249 | <div class="pageno">01</div> |
| 250 | </div> |
| 251 | </body> |
| 252 | </html> |
| 253 |