AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize the display effect at low resolution

Browse Source
This commit is contained in:
zyronon
2023-11-08 23:45:42 +08:00
parent 30a4c49009
commit 6e82384b1e
25 changed files with 156 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -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']

86
index.html
View File

@@ -1,52 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/logo.jpg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Typing Word</title>
<script>
+(function () {
function rem() {
let html = document.documentElement;
let max = parseInt('1920rem');
let min = parseInt('1000rem');
let width;
if (window.innerWidth > max) {
width = max;
} else if (window.innerWidth < min) {
width = min;
} else {
width = window.innerWidth;
}
html.style.fontSize = width / max + 'px';
}
rem();
window.addEventListener('resize', rem);
})();
</script>
<script>
</script>
<script>
var _hmt = _hmt || [];
if (location.href.includes('netlify.app')) {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d77525f1ad23698a2f34f54ff69c7750";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/logo.jpg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Typing Word</title>
<script>
+(function () {
function rem() {
let html = document.documentElement;
let max = parseInt('2048rem');
let min = parseInt('2048rem');
let width;
if (window.innerWidth < min) {
width = min;
} else {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0859df6553bae18ce901cca87d937ca7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
width = window.innerWidth;
}
</script>
console.log('width', width)
html.style.fontSize = width / max + 'px';
}
rem();
window.addEventListener('resize', rem);
})();
</script>
<script>
</script>
<script>
var _hmt = _hmt || [];
if (location.href.includes('netlify.app')) {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d77525f1ad23698a2f34f54ff69c7750";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
} else {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0859df6553bae18ce901cca87d937ca7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
}
</script>
</head>
<body>
<div id="app"></div>

2
src/App.vue
View File

@@ -38,7 +38,7 @@ watch(store.wrong.originWords, (n) => {
store.wrong.chapterWords = [store.wrong.words]
})
// useStartKeyboardEventListener()
useStartKeyboardEventListener()
onMounted(() => {
console.time()

66
src/assets/css/style.scss
View File

@@ -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;
}

1
src/assets/css/variable.scss
View File

@@ -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;

6
src/components/Add/AddDict.vue
View File

@@ -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 {

2
src/components/Article/ArticleList.vue
View File

@@ -97,7 +97,7 @@ watch(() => props.list, () => {
gap: 15rem;
flex: 1;
overflow: overlay;
padding: 0 $space;
padding: 0 var(--space);
.search {
width: 100%;

10
src/components/Article/EditArticle.vue
View File

@@ -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;
}
}

8
src/components/Modal/AddWordDialog.vue
View File

@@ -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;
}

10
src/components/Modal/DictModal.vue
View File

@@ -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);
}
}
</style>

4
src/components/Modal/MiniModal.vue
View File

@@ -35,7 +35,7 @@ withDefaults(defineProps<IProps>(), {
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<IProps>(), {
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);

2
src/components/Modal/Modal.vue
View File

@@ -349,7 +349,7 @@ $header-height: 60rem;
align-items: center;
justify-content: flex-end;
height: 100%;
gap: $space;
gap: var(--space);
}
}
}

6
src/components/Modal/SettingModal.vue
View File

@@ -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;

2
src/components/Modal/WordListModal.vue
View File

@@ -109,7 +109,7 @@ onUnmounted(() => {
@import "@/assets/css/style";
.all-word {
padding: $space;
padding: var(--space);
padding-top: 0;
width: 400rem;
height: 75vh;

11
src/components/Practice/Panel.vue
View File

@@ -164,7 +164,6 @@ const {
<style scoped lang="scss">
@import "@/assets/css/variable.scss";
$width: 20vw;
$header-height: 50rem;
.slide {
@@ -179,13 +178,13 @@ $header-height: 50rem;
transition: all .5s;
.slide-item {
width: $width;
width: var(--panel-width);
height: 100%;
display: flex;
flex-direction: column;
> header {
padding: 0 $space;
padding: 0 var(--space);
height: $header-height;
position: relative;
display: flex;
@@ -199,11 +198,11 @@ $header-height: 50rem;
.content {
flex: 1;
overflow: auto;
padding-bottom: $space;
padding-bottom: var(--space);
}
footer {
padding-right: $space;
padding-right: var(--space);
margin-bottom: 10rem;
align-items: center;
}
@@ -225,7 +224,7 @@ $header-height: 50rem;
.panel {
border-radius: 8rem;
width: $width;
width: var(--panel-width);
background: var(--color-second-bg);
height: 100%;
display: flex;

7
src/components/Practice/Practice.vue
View File

@@ -146,27 +146,28 @@ onUnmounted(() => {
</script>
<template>
<div class="practice">
<div class="practice-wrapper">
<Toolbar/>
<!-- <BaseButton @click="test">test</BaseButton>-->
<PracticeArticle ref="practiceRef" v-if="store.isArticle"/>
<PracticeWord ref="practiceRef" v-else/>
<Footer/>
</div>
<AddWordDialog></AddWordDialog>
<!-- <AddWordDialog></AddWordDialog>-->
<DictModal :model-value="runtimeStore.showDictModal" @close="runtimeStore.showDictModal = false"/>
<SettingModal v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
<Statistics/>
</template>
<style scoped lang="scss">
.practice {
.practice-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-right: var(--practice-wrapper-padding-right);
}
</style>

2
src/components/Practice/PracticeArticle/PracticeArticle.vue
View File

@@ -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);
}

2
src/components/Practice/PracticeArticle/TypingArticle.vue
View File

@@ -508,7 +508,7 @@ $article-width: 1000px;
padding-top: 20rem;
.section {
margin-bottom: $space;
margin-bottom: var(--space);
.sentence {
transition: all .3s;

1
src/components/Practice/PracticeWord/Typing.vue
View File

@@ -100,6 +100,7 @@ async function onTyping(e: KeyboardEvent) {
wrong = letter
playKeyboardAudio()
playBeep()
volumeIconRef?.play()
setTimeout(() => {
wrong = ''
}, 500)

9
src/components/Practice/PracticeWord/TypingWord.vue
View File

@@ -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);
}

10
src/components/Practice/Statistics.vue
View File

@@ -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);
}
}

4
src/components/Toolbar/FeedbackModal.vue
View File

@@ -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;

4
src/components/Toolbar/Toolbar.vue
View File

@@ -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;

2
src/components/list/WordList.vue
View File

@@ -100,6 +100,6 @@ const {
gap: 15rem;
flex: 1;
overflow: overlay;
padding: 0 $space;
padding: 0 var(--space);
}
</style>

2
src/components/list/WordList2.vue
View File

@@ -72,7 +72,7 @@ const settingStore = useSettingStore()
.virtual-list {
overflow: overlay;
height: 100%;
padding: 0 $space;
padding: 0 var(--space);
}
.dict-virtual-item {