更新主页
This commit is contained in:
parent
694adfdb84
commit
c1d5a8c359
109
src/App.vue
109
src/App.vue
@ -1,4 +1,24 @@
|
||||
<script setup></script>
|
||||
<script lang="ts" setup>
|
||||
import SubProjectCard from "./components/SubProjectCard.vue";
|
||||
|
||||
const sub_projects = [
|
||||
{
|
||||
desc: "知识从不是少数人的专利，让知识自由的在世界上流淌，为每个人创造价值。",
|
||||
name: "Learning",
|
||||
href: "https://learn.study-area.org.cn/",
|
||||
},
|
||||
{
|
||||
desc: "让知识与感想突破地域的界限，即时在网络上流通。",
|
||||
name: "Discussing",
|
||||
href: "https://forum.study-area.org.cn/",
|
||||
},
|
||||
{
|
||||
desc: "用爱发电，很难长久。为我们的项目贡献一份力量，我们才能走得更远。",
|
||||
name: "Contributing",
|
||||
href: "https://git.hmtsai.cn/",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
@ -34,88 +54,27 @@
|
||||
|
||||
<mdui-layout-main>
|
||||
<div class="header">
|
||||
<h1>Study Area CN</h1>
|
||||
<p class="desc">在这里，您将看不见八卦，看不见争吵，没有新闻，也没娱乐。</p>
|
||||
<p class="desc">本站仅能为阁下提供的就是您要学习的技术文件与心得经验的交流。本站的角色是一个网上的学习园地（Study Area）。</p>
|
||||
<div class="header-mover">
|
||||
<h1>Study Area CN</h1>
|
||||
<p class="desc">在这里，您将看不见八卦，看不见争吵，没有新闻，也没娱乐。</p>
|
||||
<p class="desc">本站仅能为阁下提供的就是您要学习的技术文件与心得经验的交流。本站的角色是一个网上的学习园地（Study Area）。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<mdui-card href="https://forum.study-area.org.cn/" clickable class="card">
|
||||
<h1>Study Area CN 讨论区</h1>
|
||||
</mdui-card>
|
||||
<div>
|
||||
<SubProjectCard v-for="item in sub_projects" :name="item.name" :desc="item.desc" :href="item.href">
|
||||
</SubProjectCard>
|
||||
</div>
|
||||
|
||||
<mdui-card href="https://learn.study-area.org.cn/" clickable class="card">
|
||||
<h1>开始学习</h1>
|
||||
</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 class="footer">
|
||||
<h3>Study Area CN Team 2024 - Forever</h3>
|
||||
</div>
|
||||
</mdui-layout-main>
|
||||
</mdui-layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
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;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
mdui-card {
|
||||
margin: 3px;
|
||||
width: calc(25% - 6px);
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
mdui-card {
|
||||
width: calc(100% - 6px);
|
||||
}
|
||||
|
||||
.links {
|
||||
height:auto;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom:2em;
|
||||
}
|
||||
|
||||
.header .desc {
|
||||
width: 90%;
|
||||
}
|
||||
font-family: "Source Han Serif CN VF";
|
||||
}
|
||||
</style>
|
||||
|
||||
15
src/components/SubProjectCard.vue
Normal file
15
src/components/SubProjectCard.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
name: { type: String, required: true },
|
||||
desc: { type: String, required: true },
|
||||
href: { type: String, required: true },
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="width:95%">
|
||||
<h2>{{ props.name }}</h2>
|
||||
<p>{{ props.desc }}</p>
|
||||
<mdui-button :href="props.href" end-icon="arrow_forward" style="font-family: sans-serif;">Go</mdui-button>
|
||||
</div>
|
||||
</template>
|
||||
100
src/main.css
Normal file
100
src/main.css
Normal file
@ -0,0 +1,100 @@
|
||||
@import url("https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css");
|
||||
|
||||
* {
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
mdui-layout-main {
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 10vh;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
background: -webkit-linear-gradient(
|
||||
135deg,
|
||||
#08dfb4,
|
||||
#ff6ac6 25%,
|
||||
#661496 50%,
|
||||
#e6d205 55%,
|
||||
#2cc4e0 60%,
|
||||
#8b2ce0 80%,
|
||||
#ff6384 95%,
|
||||
#08dfb4
|
||||
);
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
background-size: 200% 100%;
|
||||
animation: header_title_animation 12s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes header_title_animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -400% 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1:hover {
|
||||
animation: header_title_animation 8s infinite linear;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 6vh;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: auto;
|
||||
height:2vh
|
||||
}
|
||||
|
||||
.footer h3{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header .desc {
|
||||
width: 75%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.header-mover {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.header .desc {
|
||||
width: 75%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@ import App from './App.vue'
|
||||
import 'mdui/mdui.css';
|
||||
import 'mdui';
|
||||
import '@mdui/icons/search.js';
|
||||
import './main.css'
|
||||
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user