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

save

Browse Source
This commit is contained in:
zyronon
2024-05-18 00:25:53 +08:00
parent 4106b1c90f
commit 0c1c5d33b0
7 changed files with 103 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/pc/components/DictListPanel.vue
View File

@@ -97,8 +97,8 @@ function del(e) {
:list="groupByTranslateLanguage['common']"/>
</template>
<template v-else>
<div class="translate">
<span>翻译：</span>
<div class="translate ">
<span>释义：</span>
<el-radio-group v-model="currentTranslateLanguage">
<el-radio-button border v-for="i in translateLanguageList" :label="i">{{ $t(i) }}</el-radio-button>
</el-radio-group>
@@ -174,10 +174,10 @@ function del(e) {
display: flex;
align-items: center;
color: var(--color-font-1);
margin-bottom: 2rem;
margin-bottom: 1rem;
& > span {
font-size: 1.6rem;
font-size: 1.2rem;
}
}
}

14
src/pages/pc/components/dialog/MiniDialog.vue
View File

@@ -23,15 +23,15 @@ withDefaults(defineProps<IProps>(), {
@import "@/assets/css/style";
.mini-row-title {
min-height: 35rem;
min-height: 2rem;
text-align: center;
font-size: 16rem;
font-size: 1rem;
font-weight: bold;
color: var(--color-font-1);
}
.mini-row {
min-height: 35rem;
min-height: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -43,12 +43,12 @@ withDefaults(defineProps<IProps>(), {
.mini-modal {
position: absolute;
z-index: 9;
width: 180rem;
width: 12rem;
background: var(--color-second-bg);
border-radius: 8rem;
border-radius: .5rem;
box-shadow: 0 0 8px 2px var(--color-item-border);
padding: 10rem var(--space);
top: 40rem;
padding: .6rem var(--space);
top: 2.4rem;
left: 50%;
transform: translate3d(-50%, 0, 0);
//margin-top: 10rem;

2
src/pages/pc/components/list/DictGroup.vue
View File

@@ -45,7 +45,7 @@ watch(() => props.groupByTag, () => {
<style scoped lang="scss">
.dict-group {
color: var(--color-font-1);
margin-bottom: 40rem;
margin-bottom: 1.5rem;
//border-bottom: 1px dashed gray;
.category {

9
src/pages/pc/components/list/DictItem.vue
View File

@@ -36,7 +36,7 @@ let length = $computed(() => {
<template>
<div
class="dict-item anim"
class="dict-item anim rounded-md p-4"
:class="active && 'active'"
>
<template v-if="dict.id">
@@ -63,12 +63,11 @@ let length = $computed(() => {
.dict-item {
cursor: pointer;
box-sizing: border-box;
padding: 1rem;
width: 12rem;
height: 16rem;
border-radius: 1rem;
width: 9rem;
height: 12rem;
position: relative;
background: var(--color-third-bg);
//background: white;
border: 1px solid var(--color-item-border);
color: var(--color-font-1);
font-size: 1rem;

22
src/pages/pc/components/toolbar/ChapterName.vue
View File

@@ -29,8 +29,8 @@ function clickJumpSpecifiedChapter(index: number) {
const listRef: HTMLElement = $ref(null as any)
watch(() => show, n => {
if (n){
nextTick(()=>{
if (n) {
nextTick(() => {
listRef?.children[store.currentDict.chapterIndex]?.scrollIntoView({block: 'center'})
})
}
@@ -49,7 +49,7 @@ watch(() => show, n => {
v-model="show"
@mouseenter="toggle(true)"
@mouseleave="toggle(false)"
style="width: 230rem;"
style="width: 16rem;"
>
<div class="chapter-list" ref="listRef">
<div class="chapter-list-item"
@@ -70,24 +70,24 @@ watch(() => show, n => {
}
.chapter-list {
max-height: 250rem;
max-height: 16rem;
overflow: auto;
padding-right: 5rem;
padding-right: .3rem;
.chapter-list-item {
margin-bottom: 7rem;
height: 36rem;
margin-bottom: .4rem;
height: 2.2rem;
display: flex;
align-items: center;
gap: 10rem;
gap: .6rem;
width: 100%;
box-sizing: border-box;
background: var(--color-item-bg);
color: var(--color-font-1);
font-size: 18rem;
border-radius: 8rem;
font-size: 1.1rem;
border-radius: .5rem;
transition: all .3s;
padding: 10rem;
padding: .6rem;
border: 1px solid var(--color-item-border);
&:hover {

2
src/pages/pc/index.vue
View File

@@ -48,7 +48,7 @@ const router = useRouter()
</div>
</div>
</div>
<div class="content">
<div class="content overflow-auto">
<router-view></router-view>
</div>
</div>

121
src/pages/pc/word/WordHome.vue
View File

@@ -15,60 +15,91 @@ function clickEvent(e) {
</script>
<template>
<div class="word flex justify-center overflow-auto ">
<div class="w-3/5">
<div class="card">
<div class="title">
当前学习
</div>
<div class="mt-4 flex justify-between items-center">
<div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
<span>{{ base.currentDict.name }}</span>
<Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
<div class="word flex justify-center ">
<div class="w-5/10 pt-5">
<div class="flex gap-6">
<div class="card w-1/2 flex flex-col">
<div class="title">
我的词典
</div>
<div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
@click="router.push('/practice')">
开始学习
<div class="grid flex-1 flex gap-5 mt-4">
<div class="p-4 flex-1 rounded-md bg-slate-200 relative" v-for="i in 3">
<span>收藏</span>
<div class="absolute bottom-4 right-4">333个词</div>
</div>
</div>
</div>
<div class="w-1/2">
<div class="card ">
<div class="flex justify-between items-center">
<div class="bg-slate-200 p-3 rounded-md cursor-pointer flex items-center">
<span class="text-lg font-bold">{{ base.currentDict.name }}</span>
<Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
<Icon icon="uil:setting" class="text-2xl ml-2"/>
</div>
<div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
@click="router.push('/practice')">
开始学习
</div>
</div>
<div class="mt-5 text-sm">已学习5555个单词的1%</div>
<el-progress class="mt-1" percentage="80" :show-text="false"></el-progress>
</div>
<div class="card flex gap-3">
<div class="bg-slate-200 w-10 h-10 flex center text-2xl rounded">
0
</div>
<div class="flex-1">
<div class="flex justify-between">
<div class="title">
每日目标
</div>
<div style="color:#ac6ed1;" class="cursor-pointer">
更改目标
</div>
</div>
<div class="mt-2 text-xs">学习 50 个单词</div>
<el-progress class="flex-1 mt-1" percentage="80" :show-text="false"></el-progress>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="flex justify-between ">
<div class="title">
所有词典
</div>
<Icon icon="lucide:search" class="text-2xl" />
</div>
<div class="bg-white ">
<DictListPanel
/>
</div>
</div>
<div class="card">
<div class="title">
其他学习词典
</div>
<div class="flex flex-wrap">
<div class="flex w-1/2 justify-between items-center">
<div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
<div class="grid grid-cols-2 gap-6 mt-5 ">
<div class=" p-4 rounded-md justify-between items-center bg-slate-200 " v-for="i in 3">
<div class="flex justify-between w-full">
<span>{{ base.currentDict.name }}</span>
<Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
</div>
<div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
@click="router.push('/practice')">
开始学习
</div>
</div>
<div class="flex w-1/2 justify-between items-center">
<div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
<span>{{ base.currentDict.name }}</span>
<Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
</div>
<div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
@click="router.push('/practice')">
开始学习
</div>
</div>
<div class="flex w-1/2 justify-between items-center">
<div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
<span>{{ base.currentDict.name }}</span>
<Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
</div>
<div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
@click="router.push('/practice')">
开始学习
<div class="text-2xl ml-2 flex gap-4">
<Icon icon="hugeicons:delete-02"/>
<Icon icon="nonicons:go-16"/>
</div>
</div>
<div class="mt-5 text-sm">已学习5555个单词的1%</div>
<el-progress class="mt-1" percentage="80" color="white" :show-text="false"></el-progress>
</div>
</div>
<div class="flex justify-center mt-2 text-2xl">
<Icon icon="mingcute:down-line"/>
</div>
</div>
<div class="card">
@@ -90,15 +121,13 @@ function clickEvent(e) {
</div>
</div>
<DictListPanel
/>
</div>
</div>
</template>
<style scoped lang="scss">
.card {
@apply rounded-xl bg-white p-5 mt-10 ;
@apply rounded-xl bg-white p-4 mt-5;
}
.center {
@@ -106,6 +135,6 @@ function clickEvent(e) {
}
.title {
@apply text-xl font-bold;
@apply text-lg font-medium;
}
</style>