cxykevin
/
study-area-cn-homepage
forked from study-area-cn/study-area-cn-homepage
1
0
Fork 0
Code Pull Requests Activity

修改主页

This commit is contained in:
Hmtsai 2024-08-27 21:24:49 +08:00
parent 8c9a13d3f5
commit 694adfdb84
1 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/App.vue
View File

@ -7,10 +7,7 @@
</style> </style>
<template> <template>
<link <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<mdui-layout style="height: 100%"> <mdui-layout style="height: 100%">
<mdui-top-app-bar> <mdui-top-app-bar>
@ -21,21 +18,10 @@
<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 <mdui-list-item end-icon="arrow_right" href="https://learn.study-area.org.cn">开始学习</mdui-list-item>
end-icon="arrow_right" <mdui-list-item end-icon="arrow_right" href="https://forum.study-area.org.cn">讨论区</mdui-list-item>
href="https://learn.study-area.org.cn" <mdui-list-item end-icon="arrow_right"
>开始学习</mdui-list-item href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/">查看本站源码</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/study-area-cn-homepage/"
>查看本站源码</mdui-list-item
>
</mdui-list> </mdui-list>
</mdui-navigation-drawer> </mdui-navigation-drawer>
@ -47,39 +33,61 @@
</component> </component>
<mdui-layout-main> <mdui-layout-main>
<mdui-card href="https://forum.study-area.org.cn/" clickable class="card"> <div class="header">
<h1>Study Area CN 讨论区</h1> <h1>Study Area CN</h1>
</mdui-card> <p class="desc">在这里，您将看不见八卦，看不见争吵，没有新闻，也没娱乐。</p>
<p class="desc">本站仅能为阁下提供的就是您要学习的技术文件与心得经验的交流。本站的角色是一个网上的学习园地（Study Area）。</p>
</div>
<mdui-card href="https://learn.study-area.org.cn/" clickable class="card"> <div class="links">
<h1>开始学习</h1> <mdui-card href="https://forum.study-area.org.cn/" clickable class="card">
</mdui-card> <h1>Study Area CN 讨论区</h1>
</mdui-card>
<mdui-card <mdui-card href="https://learn.study-area.org.cn/" clickable class="card">
href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/" <h1>开始学习</h1>
clickable </mdui-card>
class="card"
>
<h1>查看本站源码</h1>
</mdui-card>
<mdui-card <mdui-card href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/" clickable class="card">
href="https://git.hmtsai.cn/study-area-cn/" <h1>查看本站源码</h1>
clickable </mdui-card>
class="card"
> <mdui-card href="https://git.hmtsai.cn/study-area-cn/" clickable class="card">
<h1>本站Gitea</h1> <h1>本站Gitea</h1>
</mdui-card> </mdui-card>
</div>
</mdui-layout-main> </mdui-layout-main>
</mdui-layout> </mdui-layout>
</template> </template>
<style> <style>
h1 { *{
padding-left: 15px; padding: 0;
margin: 0;
} }
mdui-layout-main { mdui-card h1 {
padding: 0.2em 0.2em;
}
.header {
margin-top: 4em;
margin-bottom: 8em;
}
.header h1 {
width: 100%;
text-align: center;
}
.header .desc {
margin: auto;
width: 75%;
text-align: center;
}
.links {
height: 10em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -88,7 +96,7 @@ mdui-layout-main {
mdui-card { mdui-card {
margin: 3px; margin: 3px;
width: calc(25% - 6px); width: calc(25% - 6px);
height: 25%; height: 8em;
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
@ -96,9 +104,18 @@ mdui-card {
width: calc(100% - 6px); width: calc(100% - 6px);
} }
mdui-layout-main{ .links {
height:auto;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.header {
margin-bottom:2em;
}
.header .desc {
width: 90%;
}
} }
</style> </style>