study-area-cn
/
study-area-cn-homepage
2
0
Fork 1
Code Issues Pull Requests Actions Projects Releases Wiki Activity

优化界面操作逻辑，提升对手持设备的兼容性
Build and Publish / Run (push) Successful in 2m36s Details

This commit is contained in:
Hmtsai 2024-08-09 21:32:18 +08:00
parent 5c5fbbe88a
commit cbc7994230
2 changed files with 111 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@ -1,24 +1,35 @@
<!doctype html> <!doctype html>
<html lang="en" class="mdui-theme-auto"> <html lang="en" class="mdui-theme-auto">
<head>
<title>Study Area CN</title>
<meta charset="utf-8" />
<meta
name="keywords"
content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook"
/>
<meta
name="description"
content="Study Area CN 酷学园CN, 玩的开心，学的愉快！"
/>
<meta name="generator" content="Vite, mdbook" />
<meta name="copyright" content="StudyAreaCN Team" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="author" content="StudyAreaCN Team,team@study-area.org.cn" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<link rel="icon" type="image/x-icon" href="/favicon.png" />
</head>
<head> <body>
<title>Study Area CN</title> <style>
<meta charset="utf-8" /> html,
<meta name="keywords" body,
content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook"> #app {
<meta name="description" content="Study Area CN 酷学园CN, 玩的开心，学的愉快！"> height: 100%;
<meta name="generator" content="Vite, mdbook"> width: 100%;
<meta name="copyright" content="StudyAreaCN Team"> }
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </style>
<meta name="author" content="StudyAreaCN Team,team@study-area.org.cn"> <div id="app"></div>
<meta name="robots" content="index,follow"> <script type="module" src="/src/main.ts"></script>
<link rel="icon" type="image/x-icon" href="/favicon.png"> </body>
</head> </html>
<body>
<div id="app">
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

126
src/App.vue
View File

@ -1,72 +1,104 @@
<script setup> <script setup></script>
</script>
<style> <style>
* { * {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
</style> </style>
<template> <template>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<mdui-top-app-bar style="position: relative;"> <mdui-layout style="height: 100%">
<mdui-button-icon id="openButton" icon="menu"></mdui-button-icon> <mdui-top-app-bar>
<mdui-top-app-bar-title>Study Area CN</mdui-top-app-bar-title> <mdui-button-icon id="openButton" icon="menu"></mdui-button-icon>
<div style="flex-grow: 1"></div> <mdui-top-app-bar-title>Study Area CN</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
</mdui-top-app-bar> </mdui-top-app-bar>
<mdui-navigation-drawer close-on-overlay-click class="navi-drawer"> <mdui-navigation-drawer close-on-overlay-click class="navi-drawer">
<mdui-list> <mdui-list>
<mdui-list-item end-icon="arrow_right" href="https://learn.study-area.org.cn">开始学习</mdui-list-item> <mdui-list-item
<mdui-list-item end-icon="arrow_right" href="https://forum.study-area.org.cn">讨论区</mdui-list-item> end-icon="arrow_right"
<mdui-list-item end-icon="arrow_right" href="https://learn.study-area.org.cn"
href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/">查看本站源码</mdui-list-item> >开始学习</mdui-list-item
</mdui-list> >
<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/study-area-cn-homepage/"
>查看本站源码</mdui-list-item
>
</mdui-list>
</mdui-navigation-drawer> </mdui-navigation-drawer>
<component :is="'script'"> <component :is="'script'">
const navigationDrawer = document.querySelector(".navi-drawer"); const navigationDrawer = document.querySelector(".navi-drawer"); const
const openButton = document.getElementById("openButton"); openButton = document.getElementById("openButton");
openButton.addEventListener("click", () => navigationDrawer.open =
openButton.addEventListener("click", () => navigationDrawer.open = true); !navigationDrawer.open);
</component> </component>
<div id="content"> <mdui-layout-main>
<mdui-card href="https://forum.study-area.org.cn/" clickable class="card"> <mdui-card href="https://forum.study-area.org.cn/" clickable class="card">
<h1>Study Area CN 讨论区</h1> <h1>Study Area CN 讨论区</h1>
</mdui-card> </mdui-card>
<mdui-card href="https://learn.study-area.org.cn/"clickable class="card"> <mdui-card href="https://learn.study-area.org.cn/" clickable class="card">
<h1>开始学习</h1> <h1>开始学习</h1>
</mdui-card> </mdui-card>
<mdui-card href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/" clickable class="card">
<h1>查看本站源码</h1>
</mdui-card>
<mdui-card href="https://git.hmtsai.cn/study-area-cn/" clickable class="card">
<h1>本站Gitea</h1>
</mdui-card>
</div>
<mdui-card
href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/"
clickable
class="card"
>
<h1>查看本站源码</h1>
</mdui-card>
<mdui-card
href="https://git.hmtsai.cn/study-area-cn/"
clickable
class="card"
>
<h1>本站Gitea</h1>
</mdui-card>
</mdui-layout-main>
</mdui-layout>
</template> </template>
<style> <style>
h1 {
h1{ padding-left: 15px;
padding-left: 15px;
}
#content {
display: flex;
flex-wrap: wrap;
flex-direction: row;
} }
.card { mdui-layout-main {
flex: 300px; display: flex;
height: 200px; flex-direction: row;
margin:5px; flex-wrap: wrap;
} }
</style>
mdui-card {
margin: 3px;
width: 24.5%;
height: 25%;
}
@media screen and (max-width: 640px) {
mdui-card {
margin: 0;
width: 100%;
}
mdui-layout-main{
flex-direction: column;
}
}
</style>