-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvisa_interview_cards.html
More file actions
508 lines (452 loc) · 19.4 KB
/
visa_interview_cards.html
File metadata and controls
508 lines (452 loc) · 19.4 KB
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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
<!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>
@media print {
.page {
page-break-after: always;
}
body {
margin: 0;
padding: 0;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", "Heiti SC", "SimHei", sans-serif;
background: #f5f5f5;
}
.page {
width: 290mm;
min-height: 297mm;
background: white;
margin: 0 auto;
padding: 15mm;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.page-title {
text-align: center;
font-size: 18px;
font-weight: bold;
color: #1a5490;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 4px solid #1a5490;
}
.cards-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.card {
border: 3px solid #2c5aa0;
border-radius: 12px;
padding: 15px;
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.card-full {
grid-column: 1 / -1;
}
.card-title {
font-size: 12px;
font-weight: bold;
color: #fff;
background: #2c5aa0;
padding: 2px 4px;
margin: -15px -15px 12px -15px;
border-radius: 9px 9px 0 0;
display: flex;
align-items: center;
gap: 8px;
}
.qa-item {
margin-bottom: 14px;
padding: 10px;
background: white;
border-radius: 8px;
border-left: 5px solid #ff9500;
}
.qa-item:last-child {
margin-bottom: 0;
}
.question {
font-size: 18px;
font-weight: bold;
color: #d32f2f;
margin-bottom: 6px;
}
.answer {
font-size: 17px;
color: #333;
line-height: 1.6;
padding-left: 8px;
}
.highlight {
background: #fff59d;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
color: #000000;
}
.info-row {
display: flex;
align-items: center;
font-size: 18px;
margin-bottom: 12px;
padding: 10px;
background: white;
border-radius: 8px;
}
/* 2×3 两列布局（最核心信息） */
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.info-item {
background: #fff;
border-radius: 8px;
padding: 12px;
}
.info-item .info-label {
font-size: 32px; /* 加大字号：标签 */
min-width: auto;
}
.info-item .info-value {
font-size: 26px; /* 加大字号：内容 */
}
.info-item.placeholder { visibility: hidden; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
/* 2×2 矩阵通用样式（用于航班信息、交通方式） */
.matrix-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.matrix-item {
background: #ffffff;
border-radius: 10px;
padding: 12px 14px;
border-left: 5px solid #5c6bc0;
}
.matrix-title {
font-size: 20px; /* 加大标题字号 */
font-weight: 700;
color: #1a237e;
margin-bottom: 6px;
}
.matrix-body {
font-size: 19px; /* 加大内容字号 */
color: #222;
line-height: 1.55;
}
@media (max-width: 900px) { .matrix-2x2 { grid-template-columns: 1fr; } }
.info-row:last-child {
margin-bottom: 0;
}
.info-label {
font-weight: bold;
color: #1565c0;
min-width: 110px;
font-size: 17px;
}
.info-value {
color: #333;
flex: 1;
font-size: 17px;
line-height: 1.5;
}
.flight-section {
margin-bottom: 12px;
padding: 12px;
background: #e3f2fd;
border-radius: 8px;
border-left: 5px solid #1976d2;
}
.flight-section:last-child {
margin-bottom: 0;
}
.flight-title {
font-size: 19px;
font-weight: bold;
color: #0d47a1;
margin-bottom: 8px;
}
.flight-detail {
font-size: 17px;
color: #333;
margin-bottom: 5px;
padding-left: 10px;
}
.emoji {
font-size: 24px;
}
.day-card {
margin-bottom: 10px;
padding: 12px;
background: white;
border-radius: 8px;
border-left: 5px solid #4caf50;
}
.day-card:last-child {
margin-bottom: 0;
}
/* 多列的行程标题（第一行大字） */
.day-head {
display: grid;
/* 第几天 | 日期 | 周几 | 城市 | 看什么 */
grid-template-columns: 90px 110px 80px 210px 1fr;
align-items: baseline;
gap: 10px;
font-size: 22px;
font-weight: bold;
color: #2e7d32;
margin-bottom: 6px;
}
.day-col { min-width: 0; }
.day-col.city { color: #1b5e20; }
.day-col.sights { color: #0d47a1; font-weight: 600; }
.day-content {
font-size: 16px;
color: #333;
line-height: 1.5;
}
/* 小屏或打印时列宽自适应 */
@media (max-width: 900px) {
.day-head { grid-template-columns: 80px 100px 70px 140px 1fr; font-size: 20px; }
}
@media print {
.day-head { grid-template-columns: 80pt 90pt 70pt 160pt 1fr; font-size: 15pt; }
}
.transport-item {
padding: 10px;
background: white;
border-radius: 8px;
margin-bottom: 10px;
border-left: 5px solid #ff6f00;
}
.transport-item:last-child {
margin-bottom: 0;
}
.transport-title {
font-size: 17px;
font-weight: bold;
color: #e65100;
margin-bottom: 5px;
}
.transport-detail {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<!-- 第1页 -->
<div class="page">
<div class="page-title">📋 签证电调准备资料（第1页）</div>
<div class="cards-container">
<!-- 最核心信息（2×3 两列布局） -->
<div class="card card-full">
<div class="card-title"><span class="emoji">⭐</span> 最核心信息（必记）</div>
<div class="info-grid">
<div class="info-item">
<div class="info-label">📅 行程日期：</div>
<div class="info-value"><span class="highlight">2025-10-26 至 11-02</span>（跨8天）</div>
</div>
<div class="info-item">
<div class="info-label">✈️ 入境国家：</div>
<div class="info-value"><span class="highlight">瑞士·苏黎世</span>（10/26抵达）</div>
</div>
<div class="info-item">
<div class="info-label">🏨 主要停留：</div>
<div class="info-value"><span class="highlight">瑞士4晚、意大利2晚</span></div>
</div>
<div class="info-item">
<div class="info-label">👨👩👦 同行人：</div>
<div class="info-value">丈夫<span class="highlight">夏国顺</span>(62岁退休)、儿子<span class="highlight">夏越</span>(37岁在职)</div>
</div>
<div class="info-item">
<div class="info-label">🎯 旅行目的：</div>
<div class="info-value"><span class="highlight">家庭旅游</span>（观光自由行，不跟团）</div>
</div>
<div class="info-item placeholder" aria-hidden="true"></div>
</div>
</div>
<!-- 常见问答1 -->
<div class="card">
<div class="card-title"><span class="emoji">❓</span> 常见电调问答（1）</div>
<div class="qa-item">
<div class="question">Q: 为什么这么晚申请？</div>
<div class="answer">因为前一次<span class="highlight">意大利签证被拒</span>（9月22日），结果领取不及时</div>
</div>
<div class="qa-item">
<div class="question">Q: 去哪些国家？</div>
<div class="answer"><span class="highlight">瑞士（4晚）</span>、意大利（2晚）</div>
</div>
<div class="qa-item">
<div class="question">Q: 入境与离境？</div>
<div class="answer"><span class="highlight">10/26</span> 入境瑞士苏黎世<br><span class="highlight">11/01</span> 从意大利罗马离境</div>
</div>
<div class="qa-item">
<div class="question">Q: 住在哪里？</div>
<div class="answer">苏黎世4晚住<span class="highlight">宜必思酒店</span>（距火车站电车10分钟）<br>罗马2晚住酒店（梵蒂冈附近）</div>
</div>
</div>
<!-- 常见问答2 -->
<div class="card">
<div class="card-title"><span class="emoji">❓</span> 常见电调问答（2）</div>
<div class="qa-item">
<div class="question">Q: 为什么申请瑞士签证？</div>
<div class="answer">在申根区<span class="highlight">停留时间最长在瑞士</span>，且<span class="highlight">入境国是瑞士</span></div>
</div>
<div class="qa-item">
<div class="question">Q: 为什么不申请意大利签证？</div>
<div class="answer">第一次意大利签证被拒后，结果领取不及时，再次预约<span class="highlight">近期没有号了</span></div>
</div>
<div class="qa-item">
<div class="question">Q: 谁承担费用？</div>
<div class="answer"><span class="highlight">家庭共同承担</span></div>
</div>
<div class="qa-item">
<div class="question">Q: 谁做的计划？</div>
<div class="answer">儿子<span class="highlight">夏越</span></div>
</div>
</div>
<!-- 航班信息（2×2 矩阵） -->
<div class="card card-full">
<div class="card-title"><span class="emoji">✈️</span> 航班信息（儿子夏越订票，3人同航班）</div>
<div class="matrix-2x2">
<div class="matrix-item">
<div class="matrix-title">🛫 去程</div>
<div class="matrix-body mono">EK311 杭州 00:10 → 迪拜 04:55（10/26）</div>
</div>
<div class="matrix-item">
<div class="matrix-title">🛫 去程</div>
<div class="matrix-body mono">EK087 迪拜 08:25 → 苏黎世 12:25（10/26）</div>
</div>
<div class="matrix-item">
<div class="matrix-title">🛬 回程</div>
<div class="matrix-body mono">QR132 罗马 15:10 → 多哈 22:25（11/01）</div>
</div>
<div class="matrix-item">
<div class="matrix-title">🛬 回程</div>
<div class="matrix-body mono">QR890 多哈 02:15 → 杭州 15:25（11/02）</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第2页 -->
<div class="page">
<div class="page-title">📋 签证电调准备资料（第2页）</div>
<div class="cards-container">
<!-- 每日计划 -->
<div class="card card-full">
<div class="card-title"><span class="emoji">📅</span> 每日行程计划（共8天）</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第1天</div>
<div class="day-col day-date">10/26</div>
<div class="day-col day-week">周日</div>
<div class="day-col day-city city">苏黎世</div>
<div class="day-col day-sights sights">入住 ibis Zürich City West，休整适应时差</div>
</div>
</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第2天</div>
<div class="day-col day-date">10/27</div>
<div class="day-col day-week">周一</div>
<div class="day-col day-city city">卢塞恩·龙疆·因特拉肯</div>
<div class="day-col day-sights sights">🚂 火车往返｜湖光山色、龙疆村、因特拉肯湖畔</div>
</div>
</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第3天</div>
<div class="day-col day-date">10/28</div>
<div class="day-col day-week">周二</div>
<div class="day-col day-city city">伯尔尼·施皮茨·劳特布龙嫩·米伦</div>
<div class="day-col day-sights sights">🚂 火车往返｜伯尔尼老城（世遗）、施皮茨城堡、劳特布龙嫩峡谷、米伦山村</div>
</div>
</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第4天</div>
<div class="day-col day-date">10/29</div>
<div class="day-col day-week">周三</div>
<div class="day-col day-city city">沙夫豪森·莱茵瀑布·施泰因姆莱茵</div>
<div class="day-col day-sights sights">🚂 火车往返｜莱茵瀑布、施泰因姆莱茵古镇</div>
</div>
</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第5天</div>
<div class="day-col day-date">10/30</div>
<div class="day-col day-week">周四</div>
<div class="day-col day-city city">苏黎世→罗马</div>
<div class="day-col day-sights sights">🚂 火车前往罗马｜入住公寓，傍晚市区轻松游</div>
</div>
</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第6天</div>
<div class="day-col day-date">10/31</div>
<div class="day-col day-week">周五</div>
<div class="day-col day-city city">罗马</div>
<div class="day-col day-sights sights">🏛️ 斗兽场（已订票）、万神殿、特雷维喷泉、西班牙台阶</div>
</div>
</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第7天</div>
<div class="day-col day-date">11/01</div>
<div class="day-col day-week">周六</div>
<div class="day-col day-city city">罗马→多哈</div>
<div class="day-col day-sights sights">退房，前往罗马机场，飞往多哈（QR132）</div>
</div>
</div>
<div class="day-card">
<div class="day-head">
<div class="day-col day-index">第8天</div>
<div class="day-col day-date">11/02</div>
<div class="day-col day-week">周日</div>
<div class="day-col day-city city">多哈→杭州</div>
<div class="day-col day-sights sights">下午15:25抵达杭州</div>
</div>
</div>
</div>
<!-- 交通方式（2×2 矩阵） -->
<div class="card card-full">
<div class="card-title"><span class="emoji">🚆</span> 旅游期间交通方式</div>
<div class="matrix-2x2">
<div class="matrix-item">
<div class="matrix-title">🚊 苏黎世市区</div>
<div class="matrix-body">电车，<span class="highlight">一日通票</span></div>
</div>
<div class="matrix-item">
<div class="matrix-title">🚂 瑞士城市间</div>
<div class="matrix-body">火车，<span class="highlight">一日通票</span></div>
</div>
<div class="matrix-item">
<div class="matrix-title">🚄 苏黎世→罗马</div>
<div class="matrix-body">火车换乘：<span class="highlight">苏黎世→米兰→佛罗伦萨→罗马</span></div>
</div>
<div class="matrix-item">
<div class="matrix-title">🚇 罗马市区</div>
<div class="matrix-body"><span class="highlight">步行 + 地铁</span> 组合</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>