feat:add home page
This commit is contained in:
zyronon
@@ -7,7 +7,7 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
练习英语，一次敲击，一点进步；一个可以在网页上背单词、背文章的网站，
|
||||
学习英语，一次敲击，一点进步；记忆不再盲目，学习更高效，开源单词与文章练习工具
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -21,8 +21,8 @@
|
||||
<a href="https://trendshift.io/repositories/14139" target="_blank" class="trendshift-badge"><img src="https://trendshift.io/api/badge/repositories/14139" alt="TypeWords | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 在线访问
|
||||
|
||||
|
||||
1
components.d.ts
vendored
1
components.d.ts
vendored
@@ -46,6 +46,7 @@ declare module 'vue' {
|
||||
IconFluentEye16Regular: typeof import('~icons/fluent/eye16-regular')['default']
|
||||
IconFluentEyeOff16Regular: typeof import('~icons/fluent/eye-off16-regular')['default']
|
||||
IconFluentHeadphones20Regular: typeof import('~icons/fluent/headphones20-regular')['default']
|
||||
IconFluentHome20Regular: typeof import('~icons/fluent/home20-regular')['default']
|
||||
IconFluentKeyboardLayoutFloat20Regular: typeof import('~icons/fluent/keyboard-layout-float20-regular')['default']
|
||||
IconFluentMailEdit20Regular: typeof import('~icons/fluent/mail-edit20-regular')['default']
|
||||
IconFluentMyLocation20Regular: typeof import('~icons/fluent/my-location20-regular')['default']
|
||||
|
||||
@@ -24,7 +24,8 @@ Practice English, one strike, one step forward
|
||||
<a href="https://trendshift.io/repositories/14139" target="_blank" class="trendshift-badge"><img src="https://trendshift.io/api/badge/repositories/14139" alt="TypeWords | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Online visit
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 960 KiB After Width: | Height: | Size: 960 KiB |
|
Before Width: | Height: | Size: 819 KiB After Width: | Height: | Size: 819 KiB |
@@ -1,4 +1,5 @@
|
||||
export const GITHUB = 'https://github.com/zyronon/TypeWords'
|
||||
export const ProjectName = 'Type Words'
|
||||
|
||||
const common = {
|
||||
word_dict_list_version: 1
|
||||
|
||||
@@ -33,7 +33,7 @@ const studyProgress = $computed(() => {
|
||||
<div class="text-base">{{ item?.name }}</div>
|
||||
<div class="text-sm line-clamp-3" v-opacity="item.name !== item.description">{{ item?.description }}</div>
|
||||
</div>
|
||||
<div class="absolute bottom-3 right-3">
|
||||
<div class="absolute bottom-4 right-3">
|
||||
<div>{{ studyProgress }}{{ item?.length }}{{ quantifier }}</div>
|
||||
</div>
|
||||
<div class="absolute bottom-2 left-3 right-3">
|
||||
|
||||
@@ -6,6 +6,7 @@ import {watch} from "vue";
|
||||
import {useSettingStore} from "@/stores/setting.ts";
|
||||
|
||||
import {isMobile} from "@/utils";
|
||||
import {ProjectName} from "@/config/ENV.ts";
|
||||
|
||||
let settingStore = useSettingStore()
|
||||
let showNotice = $ref(false)
|
||||
@@ -44,7 +45,7 @@ watch(() => settingStore.load, (n) => {
|
||||
v-if="show">
|
||||
<div class="notice">
|
||||
坚持练习，提高外语能力。将
|
||||
<span class="active">「Type Words」</span>
|
||||
<span class="active">「{{ ProjectName}}」</span>
|
||||
保存为书签，永不迷失！
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import {splitEnArticle2} from "@/hooks/article.ts";
|
||||
import test from '../../test/test.vue'
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
|
||||
function test1() {
|
||||
splitEnArticle2(
|
||||
`While it is yet to be seen what direction the second Trump administration will take globally in its China policy, VOA traveled to the main island of Mahe in Seychelles to look at how China and the U.S. have impacted the country, and how each is fairing in that competition for influence there.
|
||||
`)
|
||||
}
|
||||
|
||||
function test2() {
|
||||
splitEnArticle2(
|
||||
`
|
||||
Last week I went to the theatre. I had a very good seat. The play was very interesting. I did not enjoy it. A young man and a young woman were sitting behind me. They were talking loudly. I got very angry. I could not hear the actors. I turned round. I looked at the man and the woman angrily. They did not pay any attention. In the end, I could not bear it. I turned round again. I cant hear a word! I said angrily.
|
||||
Its none of your business, the young man said rudely. This is a private conversation!
|
||||
`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="word flex center h-screen ">
|
||||
<base-button @click="test1">test1</base-button>
|
||||
<base-button @click="test2">test2</base-button>
|
||||
<test/>
|
||||
</div>
|
||||
</template>
|
||||
122
src/pages/pc/home/index.vue
Normal file
122
src/pages/pc/home/index.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import {ProjectName} from "@/config/ENV.ts";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import Radio from "@/pages/pc/components/base/radio/Radio.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center flex-col gap-3rem">
|
||||
<h1>{{ ProjectName }}</h1>
|
||||
<div class="text-center -mt-4rem">
|
||||
<h2>学习英语，一次敲击，一点进步</h2>
|
||||
<h2>记忆不再盲目，学习更高效，开源单词与文章练习工具</h2>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<BaseButton @click="$router.push('/words')">练习单词</BaseButton>
|
||||
<BaseButton @click="$router.push('/articles')">练习文章</BaseButton>
|
||||
</div>
|
||||
<div class="flex w-60vw gap-space">
|
||||
<div class="card">
|
||||
<div class="emoji">📚</div>
|
||||
<div class="title">单词练习</div>
|
||||
<div class="desc">
|
||||
<ul>
|
||||
<li>三种输入模式：跟打 / 复习 / 默写</li>
|
||||
<li>智能模式：自动安排复习与默写，更高效记忆</li>
|
||||
<li>自由模式：不受限制，想怎么练就怎么练</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="emoji">✍️</div>
|
||||
<div class="title">文章练习</div>
|
||||
<div class="desc">
|
||||
<ul>
|
||||
<li>内置常见书籍，也可自行添加文章</li>
|
||||
<li>跟打 + 默写双模式，让背诵更高效</li>
|
||||
<li>支持边听边默写，强化记忆</li>
|
||||
<li>支持批量导入文章，快速扩展练习内容</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="emoji">⚙️</div>
|
||||
<div class="title">高度自由</div>
|
||||
<div class="desc">
|
||||
<ul>
|
||||
<li>自由添加词典与文章</li>
|
||||
<li>可自定义快捷键</li>
|
||||
<li>丰富的键盘音效</li>
|
||||
<li>高度定制化的设置选项</li>
|
||||
<li>完全开源，可审查、可修改</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="emoji">🎨</div>
|
||||
<div class="title">简洁现代</div>
|
||||
<div class="desc">
|
||||
<ul>
|
||||
<li>无广告</li>
|
||||
<li>不强制关注任何平台</li>
|
||||
<li>简洁设计</li>
|
||||
<li>现代化UI</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-60vw text-center">
|
||||
<h3 class="text-4xl">单词练习</h3>
|
||||
<img src="/word.png" alt="word.png" class="w-full rounded-xl">
|
||||
<h3 class="text-4xl">文章练习</h3>
|
||||
<img src="/article.png" alt="article.png" class="w-full rounded-xl">
|
||||
</div>
|
||||
<div class="text-center my-10 bottom">
|
||||
<div>Released under the GPL License.</div>
|
||||
<div>Copyright © 2019-present zyronon 蜀ICP备2025157466号</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
h1 {
|
||||
//color: #3451B2;
|
||||
font-size: 5rem;
|
||||
background: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply flex flex-col items-start gap-2 flex-1;
|
||||
.emoji {
|
||||
display: inline-block;
|
||||
background: var(--color-third);
|
||||
padding: .6rem;
|
||||
border-radius: 0.4rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
padding-top: 3rem;
|
||||
border-top:1px solid #c4c4c4;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -22,6 +22,10 @@ const {toggleTheme} = useTheme()
|
||||
<div class="aside anim fixed" :class="{'expand':settingStore.sideExpand}">
|
||||
<div class="top">
|
||||
<Logo v-if="settingStore.sideExpand"/>
|
||||
<div class="row" @click="router.push('/')">
|
||||
<IconFluentHome20Regular/>
|
||||
<span v-if="settingStore.sideExpand">主页</span>
|
||||
</div>
|
||||
<div class="row" @click="router.push('/words')">
|
||||
<IconFluentTextUnderlineDouble20Regular/>
|
||||
<span v-if="settingStore.sideExpand">单词</span>
|
||||
|
||||
@@ -11,14 +11,15 @@ import BookDetail from "@/pages/pc/article/BookDetail.vue";
|
||||
import DictList from "@/pages/pc/word/DictList.vue";
|
||||
import BookList from "@/pages/pc/article/BookList.vue";
|
||||
import Setting from "@/pages/pc/setting/Setting.vue";
|
||||
import Home from "@/pages/pc/home/index.vue";
|
||||
|
||||
export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
component: PC,
|
||||
redirect: '/word',
|
||||
redirect: '/',
|
||||
children: [
|
||||
// {path: 'home', component: HomeIndex},
|
||||
{path: '/', component: Home},
|
||||
{path: 'words', component: WordHomePage},
|
||||
{path: 'word', redirect: '/words'},
|
||||
{path: 'dict-list', component: DictList},
|
||||
|
||||
Reference in New Issue
Block a user