This commit is contained in:
Hmtsai 2024-08-31 09:51:56 +08:00
commit 84705ca02b
2 changed files with 89 additions and 0 deletions

14
index.css Normal file
View File

@ -0,0 +1,14 @@
mdui-card {
margin: 3px;
width: calc(25% - 6px);
height: 8em;
}
mdui-card h1 {
margin: 0;
padding: 0.2em 0.2em;
}
mdui-layout-main {
display: flex;
}

75
index.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
/>
<meta name="renderer" content="webkit" />
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link href="index.css" rel="stylesheet" />
<title>Study Area CN Learn</title>
</head>
<body>
<mdui-layout>
<mdui-navigation-drawer>
<mdui-list-item
end-icon="arrow_right"
href="https://learn.study-area.org.cn"
>开始学习</mdui-list-item
>
<mdui-list-item
end-icon="arrow_right"
href="https://forum.study-area.org.cn"
>讨论区</mdui-list-item
>
<mdui-list-item
end-icon="arrow_right"
href="https://git.hmtsai.cn/study-area-cn/learn-homepage"
>查看本站源码</mdui-list-item
>
</mdui-navigation-drawer>
<mdui-top-app-bar style="position: relative">
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Study Area CN Learn</mdui-top-app-bar-title>
</mdui-top-app-bar>
<mdui-layout-main class="example-layout-main" style="min-height: 300px">
<mdui-card
href="https://learn.study-area.org.cn/computer/"
clickable
class="card"
>
<h1>学习电脑</h1>
</mdui-card>
<mdui-card
href="https://learn.study-area.org.cn/linux-basic/"
clickable
class="card"
>
<h1>学习 Linux 基础</h1>
</mdui-card>
</mdui-layout-main>
</mdui-layout>
<script>
document
.querySelector("mdui-button-icon")
.addEventListener("click", () => {
document.querySelector("mdui-navigation-drawer").open =
!document.querySelector("mdui-navigation-drawer").open;
});
</script>
</body>
</html>