-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
314 lines (306 loc) · 13.8 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抗疫之路</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/hero.css">
<link rel="stylesheet" href="css/prevention.css">
<link rel="stylesheet" href="css/measures.css">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!-- 导航栏 -->
<div id="header">
<div class="bg">
<div class="nav wrap clear-fix">
<div class="nav-theme">战"疫"必胜</div>
<div class="nav-list">
<ul class="clear-fix">
<li class="active anchor-point"><a href="index.html#header">首页</a></li>
<li class="anchor-point"><a href="index.html#about">关于新冠</a></li>
<li class="anchor-point"><a href="index.html#hero">抗疫英雄</a></li>
<li class="anchor-point"><a href="index.html#prevention">如何防疫</a></li>
<li class="anchor-point"><a href="index.html#measures">大国战疫</a></li>
</ul>
</div>
</div>
</div>
<div class="swiper">
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList" class="clear-fix">
<li><img class="swiper_img" src="./assets/img/swiper_1.png"/></li>
<li><img class="swiper_img" src="./assets/img/swiper_2.png"/></li>
<li><img class="swiper_img" src="./assets/img/swiper_3.png"/></li>
<li><img class="swiper_img" src="./assets/img/swiper_4.png"/></li>
<li><img class="swiper_img" src="./assets/img/swiper_1.png"/></li>
</ul>
<div id="navDiv">
<a href="javascript:;" class="dot"></a>
<a href="javascript:;" class="dot"></a>
<a href="javascript:;" class="dot"></a>
<a href="javascript:;" class="dot"></a>
</div>
</div>
</div>
</div>
<!-- 关于新冠 -->
<div id="about">
<div class="wrap">
<div class="title">什么是新冠病毒?</div>
<div class="line"></div>
<div class="content clear-fix">
<div class="des-text left">
<span><span class="placeholder"></span>冠状病毒属于套式病毒目、冠状病毒科、冠状病毒属，是一类具有囊膜、基因组为线性单股正链的RNA病毒，是自然界广泛存在的一.大类病毒。病毒基因组5'端具有甲基化的帽状结构，3' 端具有poly(A)尾，基因组全长27~32kb,是目前已知RNA病毒中基因组最大的病毒。</span>
<div>
<span class="placeholder"></span>冠状病毒仅感染脊椎动物，与人和动物的多种疾病有关，可引起人和动物呼吸系统、消化系统和神经系统疾病。
</div>
</div>
<div class="left"><img src="./assets/img/about_1.png" alt=""></div>
<div class="left spread"><img src="./assets/img/about_2.png" alt=""></div>
<div class="left spread-text">
<span class="placeholder"></span>新型冠状病毒引起的新型冠状病毒肺炎，其传播途径主要是呼吸道途径以及密切接触传播。目前又分为直接传播，主要是患者打喷嚏、流鼻涕、咳嗽、说话出的飞沫以及呼出的气体，近距离接触到其他健康人员，使其吸入到气道内而导致感染。另外飞沫会混合在空气中而形成气溶胶，在密闭环境中会被健康人群吸入后会导致感染。飞沫沉积在物品的表面，健康人群接触污染的手臂后，再接触自己的口腔、鼻腔、眼球等黏膜处，也会被吸收导致感染到新型冠状病毒。
</div>
</div>
</div>
</div>
<!-- 抗疫英雄 -->
<div id="hero">
<div class="wrap">
<div class="clear-fix title">
<div class="left line"></div>
<div class="left content">抗疫英雄</div>
<div class="right"><a href="./page/hero.html" title="点击查看更多">查看更多+</a></div>
</div>
<ul class="clear-fix character">
<li>
<div>
<a href="javascript:;">
<img src="./assets/img/hero_1.png" alt="">
</a>
</div>
<div class="caption">
<div class="name">钟南山/中国工程院院士</div>
<div class="brief-introduction">
<span class="placeholder"></span>
广州医科大学附属第一医院国家呼吸系统疾病临床医学研究中心主任。
</div>
<div class="subject">
<span class="placeholder"></span><span>人物简介：</span>
钟南山长期从事呼吸内科的医疗,教学,科研工作。重点开展哮喘,慢阻肺疾病,呼吸衰竭和呼吸系统常见疾病的规范化诊疗,疑难病,少见病和呼吸危重症监护与救治等方面的研究。<br />
<span class="placeholder"></span>从非典到新冠肺炎，钟南山一直站在抗疫一线，成为公共卫生事件应急体系建设的推动者，促成了国家多项政策法规的制定，更成为突发公共卫生事件的代言人，成为稳定民心的科学家代表。
</div>
</div>
</li>
<li>
<div>
<a href="javascript:;">
<img src="./assets/img/hero_2.png" alt="">
</a>
</div>
<div class="caption">
<div class="name">李兰娟/中国工程院院士</div>
<div class="brief-introduction">
<span class="placeholder"></span>
传染病诊治国家重点实验室主任。
</div>
<div class="subject">
<span class="placeholder"></span><span>人物简介：</span>
李兰娟从事传染病临床,科研和教学工作40余年,擅长各类肝炎,感染性疾病,新发突发传染病诊治,尤其是肝衰竭,病毒性肝炎,肝病微生态研究。<br />
<span class="placeholder"></span>李兰娟作为中国人工肝的开拓者，她创建独特有效的人工肝支持系统治疗重型肝炎获重大突破。首次提出感染微生态学理论，从微生态角度来审视感染的发生、发展和结局，为感染防治提供了崭新的思路。
</div>
</div>
</li>
<li>
<div>
<a href="javascript:;">
<img src="./assets/img/hero_3.png" alt="">
</a>
</div>
<div class="caption">
<div class="name">李文亮</div>
<div class="brief-introduction">
<span class="placeholder"></span>
武汉市中心医院眼科医生。
</div>
<div class="subject">
<span class="placeholder"></span><span>人物简介：</span>
中共党员，硕士研究生学历，生前为湖北省武汉市中心医院眼科主治医师。作为眼科医生，他不惧危险，勇于近距离接触患者。<br /><span class="placeholder"></span>2019年12月30日，向外界发出防护预警，而被称为疫情“吹哨人。2020年1月上旬，他在工作中不幸感染新冠肺炎，住院期间也始终牵挂着抗疫一线，多次表示“恢复以后还要上一线”。
</div>
</div>
</li>
<li>
<div>
<a href="javascript:;">
<img src="./assets/img/hero_4.png" alt="">
</a>
</div>
<div class="caption">
<div class="name">张文宏</div>
<div class="brief-introduction">
<span class="placeholder"></span>
复旦大学附属华山医院感染科主任。
</div>
<div class="subject">
<span class="placeholder"></span><span>人物简介：</span>
张文宏主要研究疑难感染性疾病与肝病的诊断与治疗，包括发热待查、疑难感染性疾病的病因诊断、疑难肝病的病因诊断、慢性病毒性肝炎的长期治疗与临床治愈，以及结核性脑膜炎与耐药结核等疑难结核病的诊治等。
<span class="placeholder"></span>造福人类，护佑安全，是他的使命担当，也是宏图大愿。脚踏实地，做一名充满仁爱之心的良医，是张文宏矢志不渝的初心。
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 防疫小贴士 -->
<div id="prevention">
<div class="wrap">
<div class="clear-fix title">
<div class="left line"></div>
<div class="left content">防疫小贴士</div>
</div>
<div class="step">
<ul class="clear-fix">
<li class="step-1 step-commom">
<div class="bgc">
<div class="position-1 position">1</div>
<div class="title">勤开窗 多通风</div>
<div class="clear-fix">
<div class="left">
<img src="./assets/img/prevention_1.png" alt="">
</div>
<div class="left des">
疫情期间,要勤开窗通风<br />
让室内能够<br />
进入新鲜空气就好。
</div>
</div>
</div>
</li>
<li class="step-2 step-commom">
<div class="bgc">
<div class="position-2 position">2</div>
<div class="title">勤洗手 多消毒</div>
<div class="clear-fix">
<div class="left des">
洗手要用肥皂和水龙头的水<br />
酒精消毒防范于未然
</div>
<div class="left">
<img src="./assets/img/prevention_2.png" alt="">
</div>
</div>
</div>
</li>
<li class="step-3 step-commom">
<div class="bgc">
<div class="position-2 position">3</div>
<div class="title">出门时 戴口罩</div>
<div class="clear-fix">
<div class="left des">
出门一定戴口罩<br />
和人说话要保持距离<br />
这样对你我都好
</div>
<div class="left">
<img src="./assets/img/prevention_3.jpg" alt="">
</div>
</div>
</div>
</li>
<li class="step-4 step-commom">
<div class="bgc">
<div class="position-1 position">4</div>
<div class="title">勤消毒 勤清洁</div>
<div class="clear-fix">
<div class="left">
<img src="./assets/img/prevention_4.png" alt="">
</div>
<div class="left des">
物品表面可用75%酒精或<br />
消毒液进行擦拭<br />
或喷雾消毒<br />
如: 门把手, 水龙头, 手机等...
</div>
</div>
</div>
</li>
<div class="more"><a href="./page/details.html" title="点击查看更多">查看更多+</a></div>
</ul>
</div>
</div>
</div>
<!-- 大国战役 -->
<div id="measures">
<div class="wrap">
<div class="clear-fix title">
<div class="content">大国战疫</div>
<div class="line"></div>
</div>
<div class="details clear-fix">
<div class="left text">
<div>
一方有难,八方支援。中华儿女众志成城,共克时艰。 防治结合,科学防疫,消除恐慌,理性应对
</div>
<div>
做好个人防护,勤洗手,多饮水,不聚众,公共交通上面尽量减少与他人交流,与乘者尽量保持距离
</div>
<div>
限制人流数量,针对不同地区,有针对的慢慢地恢复营业,上班或者读书期间,错峰就餐
</div>
</div>
<div class="left heart-position">
<div class="heart">
<div class="topLeft"></div>
<div class="topRight"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="show-pictures">
<ul class="clear-fix">
<li><img src="./assets/img/measure_1.png" alt=""></li>
<li><img src="./assets/img/measure_2.png" alt=""></li>
<li><img src="./assets/img/measure_3.png" alt=""></li>
<li><img src="./assets/img/measure_4.png" alt=""></li>
<li><img src="./assets/img/measure_5.png" alt=""></li>
<li><img src="./assets/img/measure_6.png" alt=""></li>
<li><img src="./assets/img/measure_7.png" alt=""></li>
<li><img src="./assets/img/measure_8.png" alt=""></li>
<li><img src="./assets/img/measure_9.png" alt=""></li>
<li><img src="./assets/img/measure_10.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div id="footer">
<div class="wrap">
<ul class="clear-fix">
<li>队长：李翔</li>
<li>队员1：王馨</li>
<li>队员2：刘博涛</li>
<li>tel：13281880960</li>
<li>email：1851186565@qq.com</li>
<li>@swpu-西南石油大学</li>
</ul>
</div>
</div>
<!-- 返回顶部 -->
<div id="gotoTop">
<div>
<a href="index.html#header">
<img src="./assets/img/top.png" alt="">
</a>
</div>
</div>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/gotoTop.js"></script>
</body>
</html>