+
-
Create Next App
-
+
主页 - Social Eye
+
-
-
+
-
- Get started by editing{' '}
- pages/index.js
-
-
-
+
+
+ 全国灾害统计地图
+ 发布于 2022-05-12
+
+
+
+ Social OJO 正式成立
+ 平台介绍、期望及使命
+ 发布于 2022-05-12
+
+
-
-
- )
+ );
}
+
diff --git a/pages/posts/init.js b/pages/posts/init.js
new file mode 100644
index 0000000..71be13c
--- /dev/null
+++ b/pages/posts/init.js
@@ -0,0 +1,56 @@
+import Head from "next/head";
+import Link from "next/link";
+import Header from "../../components/Header";
+
+import styles from "../../styles/Post.module.css";
+import homeStyles from "../../styles/Home.module.css";
+
+export default function Init() {
+ const title = "Social OJO 正式成立";
+ return (
+
+
+
{title} - Social Eye
+
+
+
+
+
+
+ {title}
+ 发布于 2022-05-12
+ 今天是汶川大地震的十四周年，也是国家每年的防灾减灾日。
+
+ 十四年前，UIC二百多名
+ 师生在地震发生后前赴后继地奔赴灾区，在三江，水磨，绵竹等地提供了灾后社区关怀服务。虽然力量有限，服务为期不长，但师生对灾后服务的情景都记忆猶新。今天我们仍在和水磨镇的小伙伴们在话家常。
+
+
+ 自此，在UIC我们开设了一门灾害社会工作的选修课，探索社会工作者在灾变管理的角色和社会心理应急特别是危机干预介入的技巧。
+
+
+ 转眼间我们已进入数字时代。数字社交平台在武汉疫情期间使我们能在线上提供危机干预培训和督导。更在线上陪同当地社工、社区工作者和志愿者为社区內的新冠患者及其家人提供社会心理服务，也可以连接基金会进行精准捐赠。以同一模式我们服务了2020年在湖北滞留的香港市民，在南韩的我国留学生，和2022年面对奥米克隆的香港市民。值得一提的是我们数十名毕业生，都参与到线上服务当中。
+
+
+ 数字社会工作的基础经已建立。大数据也能应用于灾害救援，郑州洪灾期间，透过收集求助信息志愿者不眠不休地尝试连接求救者和救援队，也用GIS
+ 技术将求救者和救援队的位置显示出来，中间有多少失望，又有多少惊喜，不足为外人道。UIC一名毕业生，自行组织了一个信息志愿队，加入了捜救者的行列，不求名利，实在令人感动。现在各个盈利地图都在大灾时开放求助信息通道，其实是向社会学习。
+
+
+ 今天是国家防灾减灾日，为传承及颂掦UIC师生在灾难靣前挺身而出的优良传统，我邀请了一群同学，主要是社会工作及社会行政三，四年级，也有其他三个学部的同学，制作了一个中囯灾害地图，利用可视化的效果，让大家初步了解中国的灾害情况。
+
+
+ 这只是漫漫防灾长路的一步，不是第一步，也肯定不是最后一步。请批评，指正，和参与。
+
+
+ 黄匡忠
+
+
+
+
+ );
+}
+
diff --git a/pages/posts/map.js b/pages/posts/map.js
new file mode 100644
index 0000000..279100e
--- /dev/null
+++ b/pages/posts/map.js
@@ -0,0 +1,136 @@
+import Head from "next/head";
+import Link from "next/link";
+import Header from "../../components/Header";
+import Copyright from "../../components/Copyright";
+import Image from "next/image";
+
+import styles from "../../styles/Post.module.css";
+import homeStyles from "../../styles/Home.module.css";
+
+import typhoonMapPreview from "../../public/typhoon.png";
+import doughtMapPreview from "../../public/dought.png";
+import snowMapPreview from "../../public/snow.jpg";
+import workInjureMapPreview from "../../public/workInjury.png";
+import geologicalDisasterMapPreview from '../../public/geological.png';
+import earthquakeMapPreview from '../../public/earthquake.png';
+import forestFireMapPreview from '../../public/forestFire.png';
+import floodsAndDroughtsMapPreview from '../../public/floodsAndDroughts.png';
+import trafficAccidentsMapPreview from '../../public/traffic.png';
+
+export default function Init() {
+ return (
+
+
+
Social OJO 正式成立 - Social Eye
+
+
+
+
+
+
+ 全国灾害统计地图
+ 发布于 2022-05-12
+
+
+
+
各省受台风影响地图
+
+
+
+
+
+
+
各省干旱灾害地图
+
+
+
+
+
+
+
各省雪灾影响地图
+
+
+
+
+
+
+
各省工伤统计地图
+
+
+
+
+
+
+
各省突发地址灾害地图
+
+
+
+
+
+
+
新中国成立后各省地震数据
+
+
+
+
+
+
+
各省森林火灾地图
+
+
+
+
+
+
+
各省洪涝旱灾地图
+
+
+
+
+
+
+
各省交通事故地图
+
+
+
+
+
+
+
+ );
+}
diff --git a/public/dought.png b/public/dought.png
new file mode 100644
index 0000000..37cd2fe
Binary files /dev/null and b/public/dought.png differ
diff --git a/public/earthquake.png b/public/earthquake.png
new file mode 100644
index 0000000..05a96dc
Binary files /dev/null and b/public/earthquake.png differ
diff --git a/public/floodsAndDroughts.png b/public/floodsAndDroughts.png
new file mode 100644
index 0000000..b00793e
Binary files /dev/null and b/public/floodsAndDroughts.png differ
diff --git a/public/forestFire.png b/public/forestFire.png
new file mode 100644
index 0000000..3bf3ad7
Binary files /dev/null and b/public/forestFire.png differ
diff --git a/public/geological.png b/public/geological.png
new file mode 100644
index 0000000..fabd759
Binary files /dev/null and b/public/geological.png differ
diff --git a/public/snow.jpg b/public/snow.jpg
new file mode 100644
index 0000000..01a272d
Binary files /dev/null and b/public/snow.jpg differ
diff --git a/public/traffic.png b/public/traffic.png
new file mode 100644
index 0000000..09a4256
Binary files /dev/null and b/public/traffic.png differ
diff --git a/public/typhoon.png b/public/typhoon.png
new file mode 100644
index 0000000..590e570
Binary files /dev/null and b/public/typhoon.png differ
diff --git a/public/workInjury.png b/public/workInjury.png
new file mode 100644
index 0000000..4b4d026
Binary files /dev/null and b/public/workInjury.png differ
diff --git a/styles/Footer.module.css b/styles/Footer.module.css
new file mode 100644
index 0000000..a37aeab
--- /dev/null
+++ b/styles/Footer.module.css
@@ -0,0 +1,4 @@
+.footer {
+ padding-top: 2rem;
+ text-align: center;
+}
diff --git a/styles/Header.module.css b/styles/Header.module.css
new file mode 100644
index 0000000..8de1298
--- /dev/null
+++ b/styles/Header.module.css
@@ -0,0 +1,38 @@
+.header {
+ padding: 2em;
+ background-color: rgba(255, 255, 255, 0.7);
+ box-shadow: 0px 5px 8px rgba(255, 255, 255, 0.7);
+ background-position: center;
+ background-size: cover;
+ height: 50vh;
+}
+
+.toolbar {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ position: absolute;
+ left: 0;
+ width: 100vw;
+ padding: 2rem;
+ background-color: rgba(255, 255, 255, 0.7);
+}
+
+.nav {
+ height: min-content;
+}
+
+.nav > * {
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+.title {
+ position: absolute;
+ top: 22vh;
+ width: 100vw;
+ text-align: center;
+ font-size: 2rem;
+ line-height: 3rem;
+ text-shadow: 1px 1px 1px black;
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 32a57d5..2612777 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,116 +1,11 @@
.container {
- padding: 0 2rem;
+ margin-left: 2rem;
+ margin-right: 2rem;
+ margin-top: 2rem;
}
-.main {
- min-height: 100vh;
- padding: 4rem 0;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.footer {
- display: flex;
- flex: 1;
- padding: 2rem 0;
- border-top: 1px solid #eaeaea;
- justify-content: center;
- align-items: center;
-}
-
-.footer a {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-grow: 1;
-}
-
-.title a {
- color: #0070f3;
- text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
-}
-
-.title {
- margin: 0;
- line-height: 1.15;
- font-size: 4rem;
-}
-
-.title,
-.description {
- text-align: center;
-}
-
-.description {
- margin: 4rem 0;
- line-height: 1.5;
- font-size: 1.5rem;
-}
-
-.code {
- background: #fafafa;
- border-radius: 5px;
- padding: 0.75rem;
- font-size: 1.1rem;
- font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
- Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- max-width: 800px;
-}
-
-.card {
- margin: 1rem;
- padding: 1.5rem;
- text-align: left;
- color: inherit;
- text-decoration: none;
- border: 1px solid #eaeaea;
- border-radius: 10px;
- transition: color 0.15s ease, border-color 0.15s ease;
- max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
- color: #0070f3;
- border-color: #0070f3;
-}
-
-.card h2 {
- margin: 0 0 1rem 0;
- font-size: 1.5rem;
-}
-
-.card p {
- margin: 0;
- font-size: 1.25rem;
- line-height: 1.5;
-}
-
-.logo {
- height: 1em;
- margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
- .grid {
- width: 100%;
- flex-direction: column;
- }
+.postPreview {
+ padding: 0.5rem;
+ border-radius: 1rem;
+ cursor: pointer;
}
diff --git a/styles/Post.module.css b/styles/Post.module.css
new file mode 100644
index 0000000..090347a
--- /dev/null
+++ b/styles/Post.module.css
@@ -0,0 +1,20 @@
+.post {
+ padding-top: 1rem;
+}
+
+.grid {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: repeat(auto-fit, 15rem);
+}
+
+.grid > * {
+ padding: 0.3rem;
+ cursor: pointer;
+ border-radius: 1rem;
+}
+
+.grid > *:hover {
+ background-color: lightblue;
+ transition: cubic-bezier(1, 0, 0, 1);
+}
diff --git a/styles/globals.css b/styles/globals.css
index e5e2dcc..f66987c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,8 +2,7 @@ html,
body {
padding: 0;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ font-family:Arial, Helvetica, sans-serif
}
a {
@@ -14,3 +13,8 @@ a {
* {
box-sizing: border-box;
}
+
+.hr {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+}