diff --git a/components.d.ts b/components.d.ts
index 385f88b6..412774bd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -45,7 +45,6 @@ declare module 'vue' {
Input: typeof import('./src/components/Input.vue')['default']
List: typeof import('./src/components/list/List.vue')['default']
ListItem: typeof import('./src/components/list/ListItem.vue')['default']
- ListItem2: typeof import('./src/components/list/ListItem2.vue')['default']
MiniModal: typeof import('./src/components/Modal/MiniModal.vue')['default']
Modal: typeof import('./src/components/Modal/Modal.vue')['default']
Options: typeof import('./src/components/Practice/Options.vue')['default']
diff --git a/index.html b/index.html
index b9de6c9f..c1a817f5 100644
--- a/index.html
+++ b/index.html
@@ -1,52 +1,50 @@
-
-
-
- Typing Word
-
-
-
+ console.log('width', width)
+ html.style.fontSize = width / max + 'px';
+ }
+ rem();
+ window.addEventListener('resize', rem);
+ })();
+
+
+
diff --git a/src/App.vue b/src/App.vue
index 86bf4aae..9cc999cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,7 +38,7 @@ watch(store.wrong.originWords, (n) => {
store.wrong.chapterWords = [store.wrong.words]
})
-// useStartKeyboardEventListener()
+useStartKeyboardEventListener()
onMounted(() => {
console.time()
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 55598913..7071af54 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -25,12 +25,15 @@
--color-font-active-1: white;
--color-font-active-2: whitesmoke;
--color-main-active: rgb(12, 140, 233);
- --toolbar-width: 700rem;
- //--toolbar-width: 50vw;
-
+ --color-scrollbar: rgb(147, 173, 227);
--color-gray: gray;
- --color-scrollbar: rgb(147, 173, 227);
+ --practice-wrapper-padding-right: 1px;
+ --toolbar-width: 700rem;
+ --toolbar-height: 60rem;
+ --panel-width: 400rem;
+ --space: 24rem;
+ --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 24rem);
}
html.dark {
@@ -61,12 +64,59 @@ html.dark {
--color-scrollbar: rgb(92, 93, 94);
}
+@media (max-width: 1680px) {
+ :root {
+ --practice-wrapper-padding-right: 25vw;
+ --toolbar-width: 40vw;
+ --panel-width: 380rem;
+ --toolbar-height: 48rem;
+ }
+ .footer {
+ .bottom {
+ padding: 1.5rem 5rem 5rem 5rem !important;
+ }
+
+ .stat {
+ margin-top: 4rem !important;
+
+ .row {
+ gap: 5rem !important;
+ }
+ }
+ }
+}
+
+@media (max-width: 1366px) {
+ :root {
+ --space: 10rem;
+ --practice-wrapper-padding-right: 30vw;
+ --panel-width: 30vw;
+ --toolbar-width: 50vw;
+ --toolbar-height: 40rem;
+ }
+
+ .footer {
+ .bottom {
+ padding: 1.5rem 5rem 5rem 5rem !important;
+ }
+
+ .stat {
+ margin-top: 4rem !important;
+
+ .row {
+ gap: 5rem !important;
+ }
+ }
+ }
+}
+
$anim-time: 0.3s;
.anim {
transition: background $anim-time, color $anim-time;
}
html, body {
+ font-size: 1px;
padding: 0;
margin: 0;
width: 100%;
@@ -140,7 +190,7 @@ footer {
display: flex;
align-items: flex-end;
justify-content: flex-end;
- gap: $space;
+ gap: var(--space);
}
.pointer {
@@ -169,12 +219,12 @@ footer {
display: flex;
flex-direction: column;
height: 100%;
- padding-bottom: $space;
+ padding-bottom: var(--space);
box-sizing: border-box;
.list-header {
min-height: 50rem;
- padding: 10rem $space;
+ padding: 10rem var(--space);
box-sizing: border-box;
display: flex;
justify-content: space-between;
@@ -199,7 +249,7 @@ footer {
}
.scroll {
- padding: 0 $space;
+ padding: 0 var(--space);
flex: 1;
overflow: auto;
}
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index 79e44851..54fdb90d 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -9,7 +9,6 @@ $main: rgb(64,158,255);
//$second: rgb(75, 110, 175);
$second: rgb(59, 87, 138);
$item-hover: rgb(75, 75, 75);
-$space: 24rem;
$footer-height: 40rem;
$card-radius: 8rem;
diff --git a/src/components/Add/AddDict.vue b/src/components/Add/AddDict.vue
index 7dd9f0b4..5d4a35eb 100644
--- a/src/components/Add/AddDict.vue
+++ b/src/components/Add/AddDict.vue
@@ -315,7 +315,7 @@ function close() {
}
.dict-list-page {
- padding: 0 $space;
+ padding: 0 var(--space);
box-sizing: border-box;
}
@@ -326,7 +326,7 @@ function close() {
//flex-direction: column;
header {
- padding: 0 $space;
+ padding: 0 var(--space);
}
.detail {
@@ -340,7 +340,7 @@ function close() {
border-radius: 10rem;
background: var(--color-second-bg);
color: var(--color-font-1);
- padding-left: $space;
+ padding-left: var(--space);
box-sizing: border-box;
.info {
diff --git a/src/components/Article/ArticleList.vue b/src/components/Article/ArticleList.vue
index 931d710e..343a9c03 100644
--- a/src/components/Article/ArticleList.vue
+++ b/src/components/Article/ArticleList.vue
@@ -97,7 +97,7 @@ watch(() => props.list, () => {
gap: 15rem;
flex: 1;
overflow: overlay;
- padding: 0 $space;
+ padding: 0 var(--space);
.search {
width: 100%;
diff --git a/src/components/Article/EditArticle.vue b/src/components/Article/EditArticle.vue
index 35b0f002..5ad7dec5 100644
--- a/src/components/Article/EditArticle.vue
+++ b/src/components/Article/EditArticle.vue
@@ -377,8 +377,8 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
color: black;
flex: 1;
display: flex;
- gap: $space;
- padding: $space;
+ gap: var(--space);
+ padding: var(--space);
padding-top: 10rem;
}
@@ -423,7 +423,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
display: flex;
align-items: center;
justify-content: flex-end;
- gap: calc($space / 2);
+ gap: calc(var(--space) / 2);
}
.el-progress {
@@ -440,7 +440,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
.section {
background: white;
margin-bottom: 20rem;
- padding: $space;
+ padding: var(--space);
border-radius: 8rem;
&:last-child {
@@ -487,7 +487,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
}
.left {
- gap: $space;
+ gap: var(--space);
display: flex;
}
}
diff --git a/src/components/Modal/AddWordDialog.vue b/src/components/Modal/AddWordDialog.vue
index 41a5bb7a..5517d82e 100644
--- a/src/components/Modal/AddWordDialog.vue
+++ b/src/components/Modal/AddWordDialog.vue
@@ -412,7 +412,7 @@ const {
}
.dict-list-page {
- padding: 0 $space;
+ padding: 0 var(--space);
box-sizing: border-box;
}
@@ -422,7 +422,7 @@ const {
//flex-direction: column;
header {
- padding: 0 $space;
+ padding: 0 var(--space);
}
.detail {
@@ -436,7 +436,7 @@ const {
border-radius: 10rem;
background: var(--color-second-bg);
color: var(--color-font-1);
- padding-left: $space;
+ padding-left: var(--space);
box-sizing: border-box;
.info {
@@ -496,7 +496,7 @@ const {
}
.edit {
- padding: 0 $space;
+ padding: 0 var(--space);
width: 100%;
box-sizing: border-box;
}
diff --git a/src/components/Modal/DictModal.vue b/src/components/Modal/DictModal.vue
index 6ef2c7fa..fd515727 100644
--- a/src/components/Modal/DictModal.vue
+++ b/src/components/Modal/DictModal.vue
@@ -397,7 +397,7 @@ $header-height: 60rem;
width: 50%;
height: 100%;
$header-height: 60rem;
- padding: $space;
+ padding: var(--space);
padding-top: 0;
box-sizing: border-box;
@@ -441,7 +441,7 @@ $header-height: 60rem;
flex: 1;
overflow: auto;
height: 100%;
- padding-right: $space;
+ padding-right: var(--space);
.translate {
display: flex;
@@ -461,7 +461,7 @@ $header-height: 60rem;
width: 50%;
height: 100%;
$header-height: 60rem;
- padding: $space;
+ padding: var(--space);
padding-top: 0;
box-sizing: border-box;
display: flex;
@@ -488,7 +488,7 @@ $header-height: 60rem;
overflow: hidden;
display: flex;
position: relative;
- gap: $space;
+ gap: var(--space);
.detail {
overflow: auto;
@@ -561,7 +561,7 @@ $header-height: 60rem;
display: flex;
align-items: flex-end;
justify-content: flex-end;
- gap: $space;
+ gap: var(--space);
}
}
diff --git a/src/components/Modal/MiniModal.vue b/src/components/Modal/MiniModal.vue
index 17f5f9b0..acce991f 100644
--- a/src/components/Modal/MiniModal.vue
+++ b/src/components/Modal/MiniModal.vue
@@ -35,7 +35,7 @@ withDefaults(defineProps(), {
display: flex;
justify-content: space-between;
align-items: center;
- gap: $space;
+ gap: var(--space);
color: var(--color-font-1);
word-break: keep-all;
}
@@ -47,7 +47,7 @@ withDefaults(defineProps(), {
background: var(--color-second-bg);
border-radius: 8rem;
box-shadow: 0 0 8px 2px var(--color-item-border);
- padding: 10rem $space;
+ padding: 10rem var(--space);
top: 40rem;
left: 50%;
transform: translate3d(-50%, 0, 0);
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 332496c8..8224bd05 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -349,7 +349,7 @@ $header-height: 60rem;
align-items: center;
justify-content: flex-end;
height: 100%;
- gap: $space;
+ gap: var(--space);
}
}
}
diff --git a/src/components/Modal/SettingModal.vue b/src/components/Modal/SettingModal.vue
index b0af89f3..3c41d24d 100644
--- a/src/components/Modal/SettingModal.vue
+++ b/src/components/Modal/SettingModal.vue
@@ -347,21 +347,21 @@ function resetShortcutKeyMap() {
flex: 1;
height: 100%;
overflow: auto;
- padding: 0 $space;
+ padding: 0 var(--space);
.row {
height: 40rem;
display: flex;
justify-content: space-between;
align-items: center;
- gap: $space * 5;
+ gap: calc(var(--space) * 5);
.wrapper {
height: 30rem;
flex: 1;
display: flex;
justify-content: flex-end;
- gap: $space;
+ gap: var(--space);
span {
text-align: right;
diff --git a/src/components/Modal/WordListModal.vue b/src/components/Modal/WordListModal.vue
index 7c6e6cd1..de5a19e5 100644
--- a/src/components/Modal/WordListModal.vue
+++ b/src/components/Modal/WordListModal.vue
@@ -109,7 +109,7 @@ onUnmounted(() => {
@import "@/assets/css/style";
.all-word {
- padding: $space;
+ padding: var(--space);
padding-top: 0;
width: 400rem;
height: 75vh;
diff --git a/src/components/Practice/Panel.vue b/src/components/Practice/Panel.vue
index 1244cc26..df7255ac 100644
--- a/src/components/Practice/Panel.vue
+++ b/src/components/Practice/Panel.vue
@@ -164,7 +164,6 @@ const {
\ No newline at end of file
diff --git a/src/components/Practice/PracticeArticle/PracticeArticle.vue b/src/components/Practice/PracticeArticle/PracticeArticle.vue
index 95645e14..5264fd3b 100644
--- a/src/components/Practice/PracticeArticle/PracticeArticle.vue
+++ b/src/components/Practice/PracticeArticle/PracticeArticle.vue
@@ -317,7 +317,7 @@ $article-width: 50vw;
left: 0;
top: 10rem;
z-index: 1;
- margin-left: calc(50% + ($article-width / 2) + $space);
+ margin-left: calc(50% + ($article-width / 2) + var(--space));
height: calc(100% - 20rem);
}
diff --git a/src/components/Practice/PracticeArticle/TypingArticle.vue b/src/components/Practice/PracticeArticle/TypingArticle.vue
index f0d85d07..1cf73929 100644
--- a/src/components/Practice/PracticeArticle/TypingArticle.vue
+++ b/src/components/Practice/PracticeArticle/TypingArticle.vue
@@ -508,7 +508,7 @@ $article-width: 1000px;
padding-top: 20rem;
.section {
- margin-bottom: $space;
+ margin-bottom: var(--space);
.sentence {
transition: all .3s;
diff --git a/src/components/Practice/PracticeWord/Typing.vue b/src/components/Practice/PracticeWord/Typing.vue
index 1624ebd5..1f43698a 100644
--- a/src/components/Practice/PracticeWord/Typing.vue
+++ b/src/components/Practice/PracticeWord/Typing.vue
@@ -100,6 +100,7 @@ async function onTyping(e: KeyboardEvent) {
wrong = letter
playKeyboardAudio()
playBeep()
+ volumeIconRef?.play()
setTimeout(() => {
wrong = ''
}, 500)
diff --git a/src/components/Practice/PracticeWord/TypingWord.vue b/src/components/Practice/PracticeWord/TypingWord.vue
index 9aa268d8..8ca089e6 100644
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/src/components/Practice/PracticeWord/TypingWord.vue
@@ -172,7 +172,11 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
//TODO 略过忽略的单词上
function prev() {
- data.index--
+ if (data.index === 0){
+ ElMessage.warning('已经是第一个了~')
+ }else {
+ data.index--
+ }
}
function skip(e: KeyboardEvent) {
@@ -370,7 +374,8 @@ $article-width: 50vw;
left: 0;
top: 10rem;
z-index: 1;
- margin-left: calc(50% + (var(--toolbar-width) / 2) + $space);
+ //margin-left: calc(50% + (var(--toolbar-width) / 2) + var(--space));
+ margin-left: var(--panel-margin-left);
height: calc(100% - 20rem);
}
diff --git a/src/components/Practice/Statistics.vue b/src/components/Practice/Statistics.vue
index dba939b2..c3feb223 100644
--- a/src/components/Practice/Statistics.vue
+++ b/src/components/Practice/Statistics.vue
@@ -130,7 +130,7 @@ const isEnd = $computed(() => {
.statistics {
width: 800rem;
- padding: $space;
+ padding: var(--space);
background: $dark-second-bg;
border-radius: $card-radius;
@@ -148,7 +148,7 @@ const isEnd = $computed(() => {
.content {
display: flex;
- gap: $space;
+ gap: var(--space);
margin-bottom: 15rem;
.result {
@@ -164,7 +164,7 @@ const isEnd = $computed(() => {
.wrong-words-wrapper {
flex: 1;
overflow: auto;
- padding: $space;
+ padding: var(--space);
}
.wrong-words {
@@ -189,14 +189,14 @@ const isEnd = $computed(() => {
display: flex;
gap: 10rem;
align-items: center;
- padding-left: $space;
+ padding-left: var(--space);
}
}
.shares {
display: flex;
flex-direction: column;
- gap: $space;
+ gap: var(--space);
}
}
diff --git a/src/components/Toolbar/FeedbackModal.vue b/src/components/Toolbar/FeedbackModal.vue
index 19e674cf..49b6413c 100644
--- a/src/components/Toolbar/FeedbackModal.vue
+++ b/src/components/Toolbar/FeedbackModal.vue
@@ -51,7 +51,7 @@ const emit = defineEmits([
flex-direction: column;
background: var(--color-second-bg);
align-items: center;
- padding: $space;
+ padding: var(--space);
//justify-content: center;
color: var(--color-font-1);
@@ -62,7 +62,7 @@ const emit = defineEmits([
.github {
display: flex;
align-items: center;
- gap: $space;
+ gap: var(--space);
.options {
display: flex;
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index 05faa879..7e8104a6 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -166,14 +166,14 @@ header {
margin-bottom: 30rem;
position: relative;
z-index: 2;
- padding: 10rem $space;
+ padding: 10rem var(--space);
box-sizing: border-box;
transition: all .3s;
gap: 10rem;
border: 1px solid var(--color-item-border);
.content {
- min-height: 60rem;
+ min-height: var(--toolbar-height);
display: flex;
align-items: center;
justify-content: space-between;
diff --git a/src/components/list/WordList.vue b/src/components/list/WordList.vue
index 49e8f003..5271df44 100644
--- a/src/components/list/WordList.vue
+++ b/src/components/list/WordList.vue
@@ -100,6 +100,6 @@ const {
gap: 15rem;
flex: 1;
overflow: overlay;
- padding: 0 $space;
+ padding: 0 var(--space);
}
diff --git a/src/components/list/WordList2.vue b/src/components/list/WordList2.vue
index c62ff99d..81d04387 100644
--- a/src/components/list/WordList2.vue
+++ b/src/components/list/WordList2.vue
@@ -72,7 +72,7 @@ const settingStore = useSettingStore()
.virtual-list {
overflow: overlay;
height: 100%;
- padding: 0 $space;
+ padding: 0 var(--space);
}
.dict-virtual-item {