Compare commits
2 Commits
480d874910
...
4cf4fdce17
| Author | SHA1 | Date |
|---|---|---|
cast1e
|
4cf4fdce17 | |
|
cast1e
|
5c258b85e8 |
|
|
@ -24,4 +24,4 @@ pnpm-debug.log*
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
auto-imports.d.ts
|
auto-imports.d.ts
|
||||||
component.d.ts
|
components.d.ts
|
||||||
|
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
/* eslint-disable */
|
|
||||||
// @ts-nocheck
|
|
||||||
// Generated by unplugin-vue-components
|
|
||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
|
||||||
// biome-ignore lint: disable
|
|
||||||
export {}
|
|
||||||
|
|
||||||
/* prettier-ignore */
|
|
||||||
declare module 'vue' {
|
|
||||||
export interface GlobalComponents {
|
|
||||||
CDialog: typeof import('./src/components/UI/CDialog.vue')['default']
|
|
||||||
ElAside: typeof import('element-plus/es')['ElAside']
|
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
|
||||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
|
||||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
|
||||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
|
||||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
|
||||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
|
||||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
|
||||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
|
||||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
|
||||||
ElInput: typeof import('element-plus/es')['ElInput']
|
|
||||||
ElLink: typeof import('element-plus/es')['ElLink']
|
|
||||||
ElMain: typeof import('element-plus/es')['ElMain']
|
|
||||||
ElOption: typeof import('element-plus/es')['ElOption']
|
|
||||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
|
||||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
|
||||||
ElStep: typeof import('element-plus/es')['ElStep']
|
|
||||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
|
||||||
ElTable: typeof import('element-plus/es')['ElTable']
|
|
||||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
|
||||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
|
||||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
|
||||||
ElText: typeof import('element-plus/es')['ElText']
|
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
18
index.html
18
index.html
|
|
@ -8,24 +8,8 @@
|
||||||
<title>
|
<title>
|
||||||
Wordin
|
Wordin
|
||||||
</title>
|
</title>
|
||||||
<style>
|
<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Medium.min.css" />
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but doesn't work properly without JavaScript enabled.
|
<strong>We're sorry but doesn't work properly without JavaScript enabled.
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,8 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@jamescoyle/vue-icon": "^0.1.2",
|
"@jamescoyle/vue-icon": "^0.1.2",
|
||||||
"@mdi/font": "^7.4.47",
|
"@mdi/font": "^7.4.47",
|
||||||
|
"@types/animejs": "^3.1.13",
|
||||||
|
"animejs": "^3.2.2",
|
||||||
"axios": "^1.5.1",
|
"axios": "^1.5.1",
|
||||||
"boxicons": "^2.1.4",
|
"boxicons": "^2.1.4",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,12 @@ importers:
|
||||||
'@mdi/font':
|
'@mdi/font':
|
||||||
specifier: ^7.4.47
|
specifier: ^7.4.47
|
||||||
version: 7.4.47
|
version: 7.4.47
|
||||||
|
'@types/animejs':
|
||||||
|
specifier: ^3.1.13
|
||||||
|
version: 3.1.13
|
||||||
|
animejs:
|
||||||
|
specifier: ^3.2.2
|
||||||
|
version: 3.2.2
|
||||||
axios:
|
axios:
|
||||||
specifier: ^1.5.1
|
specifier: ^1.5.1
|
||||||
version: 1.8.1
|
version: 1.8.1
|
||||||
|
|
@ -1070,6 +1076,9 @@ packages:
|
||||||
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
|
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
|
||||||
engines: {node: '>=10.13.0'}
|
engines: {node: '>=10.13.0'}
|
||||||
|
|
||||||
|
'@types/animejs@3.1.13':
|
||||||
|
resolution: {integrity: sha512-yWg9l1z7CAv/TKpty4/vupEh24jDGUZXv4r26StRkpUPQm04ztJaftgpto8vwdFs8SiTq6XfaPKCSI+wjzNMvQ==}
|
||||||
|
|
||||||
'@types/body-parser@1.19.5':
|
'@types/body-parser@1.19.5':
|
||||||
resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
|
resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
|
||||||
|
|
||||||
|
|
@ -1503,6 +1512,9 @@ packages:
|
||||||
alien-signals@1.0.4:
|
alien-signals@1.0.4:
|
||||||
resolution: {integrity: sha512-DJqqQD3XcsaQcQ1s+iE2jDUZmmQpXwHiR6fCAim/w87luaW+vmLY8fMlrdkmRwzaFXhkxf3rqPCR59tKVv1MDw==}
|
resolution: {integrity: sha512-DJqqQD3XcsaQcQ1s+iE2jDUZmmQpXwHiR6fCAim/w87luaW+vmLY8fMlrdkmRwzaFXhkxf3rqPCR59tKVv1MDw==}
|
||||||
|
|
||||||
|
animejs@3.2.2:
|
||||||
|
resolution: {integrity: sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==}
|
||||||
|
|
||||||
ansi-escapes@3.2.0:
|
ansi-escapes@3.2.0:
|
||||||
resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
|
resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
|
|
@ -5640,6 +5652,8 @@ snapshots:
|
||||||
|
|
||||||
'@trysound/sax@0.2.0': {}
|
'@trysound/sax@0.2.0': {}
|
||||||
|
|
||||||
|
'@types/animejs@3.1.13': {}
|
||||||
|
|
||||||
'@types/body-parser@1.19.5':
|
'@types/body-parser@1.19.5':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/connect': 3.4.38
|
'@types/connect': 3.4.38
|
||||||
|
|
@ -6406,6 +6420,8 @@ snapshots:
|
||||||
|
|
||||||
alien-signals@1.0.4: {}
|
alien-signals@1.0.4: {}
|
||||||
|
|
||||||
|
animejs@3.2.2: {}
|
||||||
|
|
||||||
ansi-escapes@3.2.0: {}
|
ansi-escapes@3.2.0: {}
|
||||||
|
|
||||||
ansi-html-community@0.0.8: {}
|
ansi-html-community@0.0.8: {}
|
||||||
|
|
|
||||||
10
src/App.vue
10
src/App.vue
|
|
@ -11,11 +11,11 @@
|
||||||
<router-view style=""></router-view>
|
<router-view style=""></router-view>
|
||||||
<div class="mbonly">
|
<div class="mbonly">
|
||||||
<div id="navibar">
|
<div id="navibar">
|
||||||
<div class="navi-item"><box-icon name="home-alt-2" @click="$router.push('/')" color="var(--text-color)" size="27px"></box-icon><div>主页</div></div>
|
<div class="navi-item"><v-icon @click="$router.push('/')">mdi-home</v-icon> <div>主页</div></div>
|
||||||
<div class="navi-item"><box-icon name="book-open" @click="$router.push('/select')" color="var(--text-color)" size="27px"></box-icon><div>背诵</div></div>
|
<div class="navi-item"><v-icon @click="$router.push('/select')">mdi-book</v-icon> <div>背诵</div></div>
|
||||||
<div class="navi-item"><box-icon name="folder" @click="$router.push('/manage')" color="var(--text-color)" size="27px"></box-icon><div>浏览</div></div>
|
<div class="navi-item"><v-icon @click="$router.push('/manage')">mdi-folder</v-icon><div>浏览</div></div>
|
||||||
<div class="navi-item"><box-icon name="file" @click="$router.push('/manual')" color="var(--text-color)" size="27px"></box-icon><div>说明</div></div>
|
<div class="navi-item"><v-icon @click="$router.push('/manual')">mdi-file</v-icon><div>说明</div></div>
|
||||||
<div class="navi-item"><box-icon name="info-circle" @click="$router.push('/about')" color="var(--text-color)" size="27px"></box-icon><div>关于</div></div>
|
<div class="navi-item"><v-icon @click="$router.push('/about')">mdi-information</v-icon><div>关于</div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
<style scoped>
|
||||||
|
html:not(.dark) .dynamic-bg-container {
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
#ffe8f3,
|
||||||
|
#d9f3ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
html:not(.dark) .dynamic-bg-wrapper::before,
|
||||||
|
html:not(.dark) .dynamic-bg-wrapper::after {
|
||||||
|
background: conic-gradient(from 0deg,
|
||||||
|
#ff9aa2,
|
||||||
|
/* Soft pink */
|
||||||
|
#ffb7b2,
|
||||||
|
/* Light peach */
|
||||||
|
#ffdac1,
|
||||||
|
/* Pastel yellow */
|
||||||
|
#e2f0cb,
|
||||||
|
/* Mint green */
|
||||||
|
#a2e4ff,
|
||||||
|
/* Baby blue */
|
||||||
|
#c9afff,
|
||||||
|
/* Lavender */
|
||||||
|
#ffb7b2,
|
||||||
|
#ff9aa2);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .dynamic-bg-container {
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
#331a26,
|
||||||
|
#1a2a33);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .dynamic-bg-wrapper::before,
|
||||||
|
html.dark .dynamic-bg-wrapper::after {
|
||||||
|
background: conic-gradient(from 0deg,
|
||||||
|
#662a30,
|
||||||
|
#663a36,
|
||||||
|
#664a40,
|
||||||
|
#3a4a33,
|
||||||
|
#2a4a66,
|
||||||
|
#3a2a66,
|
||||||
|
#663a36,
|
||||||
|
#662a30);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamic-bg-container {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: fit-content;
|
||||||
|
width: 100%;
|
||||||
|
/* Soft pastel gradient background */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamic-bg-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
/* Fill the entire screen */
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: radial-gradient(circle,
|
||||||
|
rgba(255, 255, 255, 0.2),
|
||||||
|
rgba(0, 0, 0, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamic-bg-wrapper::before,
|
||||||
|
.dynamic-bg-wrapper::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
animation: rotate 8s linear infinite;
|
||||||
|
filter: blur(50px);
|
||||||
|
/* Create a soft glowing effect */
|
||||||
|
opacity: 0.8;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Secondary rotating layer for depth */
|
||||||
|
.dynamic-bg-wrapper::after {
|
||||||
|
width: 180%;
|
||||||
|
height: 180%;
|
||||||
|
animation: rotate-reverse 10s linear infinite;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rotating animations */
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, -50%) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -50%) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-reverse {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, -50%) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -50%) rotate(-360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamic-bg-content {
|
||||||
|
width: 100%;
|
||||||
|
height: fit-content;
|
||||||
|
padding: 10px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="dynamic-bg-container">
|
||||||
|
<div class="dynamic-bg-wrapper"></div>
|
||||||
|
<div class="dynamic-bg-content">
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
# 关于 wordIn
|
# 关于 wordIn
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. wordIn 是什么
|
## 1. wordIn 是什么
|
||||||
|
|
||||||
wordIn 是一款基于 vue.js 的单词默写器，致力于为用户提供便捷有效的单词记忆方式
|
wordIn 是一款基于 vue.js 的单词默写器，致力于为用户提供便捷有效的单词记忆方式
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
# wordIn 使用说明
|
# wordIn 使用说明
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
- 近期发现ZJUWLAN无法访问unpkg.com导致部分图标无法显示,请使用ZJUWLAN-Secure访问
|
- 近期发现ZJUWLAN无法访问unpkg.com导致部分图标无法显示,请使用ZJUWLAN-Secure访问
|
||||||
|
|
||||||
## 1. 背诵单词
|
## 1. 背诵单词
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import {createRouter,createWebHashHistory} from 'vue-router'
|
import {createRouter,createWebHashHistory} from 'vue-router'
|
||||||
const manage = ()=>import('@/views/ManageView.vue');
|
const manage = ()=>import('@/views/ManageView.vue');
|
||||||
const editor = ()=>import('@/views/manage/EditorView.vue');
|
const editor = ()=>import('@/views/manage/EditorView.vue');
|
||||||
const home = ()=>import("@/views/HomeView.vue");
|
import home from "@/views/HomeView.vue";
|
||||||
const recite = ()=>import('@/views/recite/ReciteView.vue');
|
const recite = ()=>import('@/views/recite/ReciteView.vue');
|
||||||
const setlist = ()=>import('@/views/manage/SetListView.vue');
|
const setlist = ()=>import('@/views/manage/SetListView.vue');
|
||||||
const newset = ()=>import('@/views/manage/NewSetView.vue');
|
const newset = ()=>import('@/views/manage/NewSetView.vue');
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,33 @@
|
||||||
|
html{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family:
|
||||||
|
'MiSans',
|
||||||
|
-apple-system, /* macOS, iOS */
|
||||||
|
BlinkMacSystemFont, /* Chrome macOS */
|
||||||
|
"Segoe UI", /* Windows */
|
||||||
|
Roboto, /* Android */
|
||||||
|
"Helvetica Neue", /* 一些 macOS 和 iOS 系统 */
|
||||||
|
Arial, /* 常见替代字体 */
|
||||||
|
"Noto Sans", /* 国际化字体 */
|
||||||
|
"Liberation Sans", /* Linux 系统的替代字体 */
|
||||||
|
sans-serif; /* 默认字体 */
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 500px) {
|
||||||
.pconly {
|
.pconly {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -43,6 +73,7 @@
|
||||||
html {
|
html {
|
||||||
--bg-color-solid: #e8e8e8;
|
--bg-color-solid: #e8e8e8;
|
||||||
--bg-color: #ffffffae;
|
--bg-color: #ffffffae;
|
||||||
|
--bg-color-acrylic:#ffffff54;
|
||||||
--text-color: #464646;
|
--text-color: #464646;
|
||||||
--bd-color: #bbbbbb99;
|
--bd-color: #bbbbbb99;
|
||||||
}
|
}
|
||||||
|
|
@ -50,6 +81,7 @@ html {
|
||||||
html.dark {
|
html.dark {
|
||||||
--bg-color-solid: #191919;
|
--bg-color-solid: #191919;
|
||||||
--bg-color: #2a2a2a88;
|
--bg-color: #2a2a2a88;
|
||||||
|
--bg-color-acrylic:rgba(42, 42, 42, 0.263);
|
||||||
--text-color: #c0c0c0;
|
--text-color: #c0c0c0;
|
||||||
--bd-color: #7f7f7f7c;
|
--bd-color: #7f7f7f7c;
|
||||||
--navi-bg-color: #131313e2;
|
--navi-bg-color: #131313e2;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
/* Markdown Typography */
|
||||||
|
.markdown {
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
.markdown h1,
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
/* margin-top: 1.5em; */
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
border-bottom: 1px solid var(--bd-color);
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 1.75em;;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: #6a737d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lists */
|
||||||
|
.markdown ul,
|
||||||
|
.markdown ol {
|
||||||
|
padding-left: 2em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown li {
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown li > ul,
|
||||||
|
.markdown li > ol {
|
||||||
|
margin-top: 0.25em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Paragraphs and spacing */
|
||||||
|
.markdown p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
.markdown a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
.markdown pre {
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 16px;
|
||||||
|
overflow: auto;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||||
|
background-color: var(--bg-color-solid);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
font-size: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre code {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blockquotes */
|
||||||
|
.markdown blockquote {
|
||||||
|
margin-left: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
color: var(--text-color);
|
||||||
|
border-left: 0.25em solid var(--bd-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
.markdown table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown table th,
|
||||||
|
.markdown table td {
|
||||||
|
padding: 6px 13px;
|
||||||
|
border: 1px solid var(--bd-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown table tr {
|
||||||
|
background-color: var(--bg-color-solid);
|
||||||
|
border-top: 1px solid var(--bd-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown table tr:nth-child(2n) {
|
||||||
|
background-color: var(--bg-color-solid);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal rule */
|
||||||
|
.markdown hr {
|
||||||
|
height: 0.25em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 24px 0;
|
||||||
|
background-color: var(--bg-color-solid);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Images */
|
||||||
|
.markdown img {
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container rowbox" style="height: calc(100% - 65px); align-items: center;width: 100%;overflow: auto;">
|
<div class="home-view-container">
|
||||||
|
<DynamicBackground class="home-view-header">
|
||||||
|
<template #content>
|
||||||
<div class="colbox" style="width: 95%;margin-top: 10px;">
|
<div class="colbox" style="width: 95%;margin-top: 10px;">
|
||||||
<div style="flex-grow: 2;margin:30px;" class="rowbox">
|
<div style="flex-grow: 2;margin:30px;" class="rowbox">
|
||||||
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
|
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
|
||||||
<div id="title">wordIn</div>
|
<div id="title">wordIn</div>
|
||||||
<div>当前版本: 1.02 <br/> 更新时间:2025年3月6日 10:35 PM</div>
|
<div>当前版本: 1.03 beta1 <br /> 更新时间:2025年3月7日 12:03</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex-grow: 1;align-items: center;" class="colbox card">
|
<div class="colbox card home-view-option-wrapper">
|
||||||
<router-link to="/select" class="button">
|
<router-link to="/select" class="button">
|
||||||
开始新背诵
|
开始新背诵
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
@ -15,9 +17,12 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="history" class="wrapper">
|
</template>
|
||||||
<div class="title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
|
</DynamicBackground>
|
||||||
<div class="card colbox history-item" v-for="(history, index) in store.history._content" :key="index">
|
<div class="wrapper home-view-history">
|
||||||
|
<div class="home-view-history-title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
|
||||||
|
<div class="home-view-history-item" v-for="(history, index) in store.history._content" :key="index">
|
||||||
|
<div class="card colbox" >
|
||||||
<div style="width: 25px;">{{ index + 1 }}</div>
|
<div style="width: 25px;">{{ index + 1 }}</div>
|
||||||
<div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
|
<div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
|
||||||
<div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
|
<div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
|
||||||
|
|
@ -25,8 +30,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="setting">
|
<div id="setting">
|
||||||
<box-icon class="btn" color="var(--text-color)" name='cog' @click="open_setting_dialog"></box-icon>
|
<v-icon class="btn" @click="open_setting_dialog">mdi-cog</v-icon>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog v-model="settingVisible" title="设置" width="75%">
|
<el-dialog v-model="settingVisible" title="设置" width="75%">
|
||||||
<div class="title">更换自定义背景</div>
|
<div class="title">更换自定义背景</div>
|
||||||
|
|
@ -39,8 +45,10 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useMainStore } from '@/store';
|
import { useMainStore } from '@/store';
|
||||||
import { ref} from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import DynamicBackground from '@/components/DynamicBackground.vue';
|
||||||
|
import animejs from 'animejs';
|
||||||
|
|
||||||
const store = useMainStore();
|
const store = useMainStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
@ -62,6 +70,21 @@ const restart = (index: number): void => {
|
||||||
query: { index }
|
query: { index }
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
animejs({
|
||||||
|
targets:".home-view-header",
|
||||||
|
translateY: [-50,0],
|
||||||
|
opacity: [0,1],
|
||||||
|
})
|
||||||
|
animejs({
|
||||||
|
targets:".home-view-history-title,.home-view-history-item",
|
||||||
|
translateX: [50,0],
|
||||||
|
opacity: [0,1],
|
||||||
|
delay: animejs.stagger(50),
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
@ -72,7 +95,7 @@ const restart = (index: number): void => {
|
||||||
text-shadow: #00000057 5px 5px 20px;
|
text-shadow: #00000057 5px 5px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.home-view-history-title {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
|
@ -101,6 +124,10 @@ const restart = (index: number): void => {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 500px) {
|
@media screen and (min-width: 500px) {
|
||||||
|
.home-view-container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
#title {
|
#title {
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
@ -110,7 +137,7 @@ const restart = (index: number): void => {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.home-view-history-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
|
|
@ -134,22 +161,12 @@ const restart = (index: number): void => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#history{
|
|
||||||
width: calc(95% - 20px);
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
border: 1px solid var(--bd-color);
|
/* border: 1px solid var(--bd-color); */
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-item {
|
|
||||||
margin: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#setting {
|
#setting {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -186,16 +203,30 @@ html.dark .button {
|
||||||
.button:hover {
|
.button:hover {
|
||||||
box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
|
box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
#ball {
|
<style>
|
||||||
background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
|
.home-view-history {
|
||||||
border-radius: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
padding: 20px;
|
||||||
animation: enter .8s ease-out;
|
padding-top: 10px;
|
||||||
box-shadow: #e0c3fcca 0px 0px 50px 10px;
|
box-sizing: border-box;
|
||||||
z-index: -1;
|
flex-grow: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.bgimged #ball {
|
.home-view-container{
|
||||||
backdrop-filter: blur(20px);
|
height: calc(100% - 65px);
|
||||||
}</style>
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-view-option-wrapper{
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: var(--bg-color-acrylic);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,12 +7,12 @@
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<el-button>
|
<el-button>
|
||||||
操作<box-icon color="var(--text-color)" name='chevron-down' size="20px"></box-icon>
|
操作<v-icon size="20px">mdi-chevron-down</v-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item @click="download"><box-icon color="var(--text-color)" name='download'
|
<el-dropdown-item @click="download"><v-icon
|
||||||
size="20px"></box-icon>下载</el-dropdown-item>
|
size="20px">mdi-download</v-icon>下载</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<el-button>
|
<el-button>
|
||||||
操作<box-icon color="var(--text-color)" name='chevron-down' size="20px"></box-icon>
|
操作<v-icon size="20px">mdi-chevron-down</v-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="wrapper" class="rowbox container">
|
<div id="wrapper" class="rowbox container">
|
||||||
<Post id="post"/>
|
<Post class="markdown" id="post"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Post from '@/md/about.md';
|
import Post from '@/md/about.md';
|
||||||
|
import '@/styles/markdown.css';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="wrapper" class="rowbox container">
|
<div id="wrapper" class="rowbox container">
|
||||||
<Post id="post"/>
|
<Post class="markdown" id="post"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Post from '@/md/manual.md';
|
import Post from '@/md/manual.md';
|
||||||
|
import '@/styles/markdown.css';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<el-checkbox-group v-model="local.checkedSets" @change="(res: string[]) => { handleChange(local, res) }">
|
<el-checkbox-group v-model="local.checkedSets" @change="(res: string[]) => { handleChange(local, res) }">
|
||||||
<div class="set_radios" v-for="(set_class, set_class_name) in store.wordsets._inner"
|
<div class="set_radios" v-for="(set_class, set_class_name) in store.wordsets._inner"
|
||||||
:key="set_class_name">
|
:key="set_class_name">
|
||||||
<p>{{ set_class_name }}</p>
|
<p class="mb-4 mt-2">{{ set_class_name }}</p>
|
||||||
<el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id"
|
<el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id"
|
||||||
size="large" border>
|
size="large" border>
|
||||||
<div style="font-size: 18px;font-weight: 500;">
|
<div style="font-size: 18px;font-weight: 500;">
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<div class="set_radios" v-for="(set, set_name) in online_sets" :key="set_name">
|
<div class="set_radios" v-for="(set, set_name) in online_sets" :key="set_name">
|
||||||
<div class="subtitle">{{ set_name }}</div>
|
<div class="subtitle">{{ set_name }}</div>
|
||||||
<div v-for="(book, book_name) in set" :key="book_name">
|
<div v-for="(book, book_name) in set" :key="book_name">
|
||||||
<p>{{ book_name }}</p>
|
<p class="mb-4 mt-2">{{ book_name }}</p>
|
||||||
<el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id"
|
<el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id"
|
||||||
size="large" border>
|
size="large" border>
|
||||||
<div style="font-size: 18px;font-weight: 500;">
|
<div style="font-size: 18px;font-weight: 500;">
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,11 @@ export default defineConfig({
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/': {
|
'/wordset': {
|
||||||
|
target: 'https://app.cast1e.top/wordin',
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
'/upload': {
|
||||||
target: 'https://app.cast1e.top/wordin',
|
target: 'https://app.cast1e.top/wordin',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue