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-17 00:55:40 +08:00
parent 1025440425
commit 6cf7505a42
38 changed files with 5156 additions and 4352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8879
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -6,7 +6,8 @@
:root {
--color-background: #E6E8EB;
--color-main-bg: #E6E8EB;
//--color-main-bg: #E6E8EB;
--color-main-bg: rgb(238,240,244);
--color-second-bg: rgb(240, 242, 244);
--color-third-bg: rgb(213, 215, 217);
@@ -31,14 +32,14 @@
--practice-wrapper-translateX: 1px;
--article-width: 50vw;
--toolbar-width: 700rem;
--toolbar-height: 54rem;
--panel-width: 400rem;
--space: 20rem;
--radius: 8rem;
--toolbar-width: 45rem;
--toolbar-height: 3.2rem;
--panel-width: 24rem;
--space: 1.6rem;
--radius: .5rem;
--shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
--panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--toolbar-width) / 2 + 24rem);
--article-panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--article-width) / 2 + 24rem);
--panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--toolbar-width) / 2 + 2rem);
--article-panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--article-width) / 2 + 2rem);
--anim-time: 0.5s;
--color-input-bg: white;
@@ -193,13 +194,13 @@ a {
.base-textarea {
flex: 1;
font-family: var(--font-family);
font-size: 18rem;
font-size: 1.1rem;
outline: none;
border: 1px solid transparent;
border-radius: 6rem;
padding: 8rem 10rem;
border-radius: .4rem;
padding: .5rem .6rem;
transition: all .3s;
min-height: 20rem;
min-height: 1.2rem;
width: 100%;
box-sizing: border-box;
background: var(--color-textarea-bg);
@@ -215,18 +216,18 @@ a {
}
::-webkit-scrollbar {
width: 8rem;
height: 10rem;
width: .5rem;
height: .6rem;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 2rem;
border-radius: .1rem;
}
::-webkit-scrollbar-thumb {
background: var(--color-scrollbar);
border-radius: 10rem;
border-radius: .6rem;
}
@@ -286,20 +287,20 @@ footer {
box-sizing: border-box;
.list-header {
min-height: 50rem;
padding: 10rem var(--space);
min-height: 3rem;
padding: .6rem var(--space);
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16rem;
font-size: 1rem;
color: var(--color-font-3);
.left {
flex: 1;
display: flex;
align-items: center;
gap: 10rem;
gap: .6rem;
}
.title {
@@ -341,7 +342,7 @@ footer {
}
.list-item-wrapper {
padding-bottom: 15rem;
padding-bottom: 1rem;
}
.common-list-item {
@@ -350,23 +351,23 @@ footer {
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;
display: flex;
justify-content: space-between;
transition: all .3s;
padding: 10rem;
gap: 10rem;
padding: .6rem;
gap: .6rem;
border: 1px solid var(--color-item-border);
.left {
display: flex;
gap: 10rem;
gap: .6rem;
.title-wrapper {
display: flex;
flex-direction: column;
gap: 3rem;
gap: .2rem;
word-break: break-word;
}
}
@@ -374,7 +375,7 @@ footer {
.right {
display: flex;
flex-direction: column;
gap: 5rem;
gap: .3rem;
transition: all .3s;
}
@@ -426,22 +427,22 @@ footer {
.item-title {
display: flex;
align-items: center;
gap: 8rem;
gap: .5rem;
color: var(--color-font-1);
.word {
font-size: 20rem;
font-size: 1.2rem;
display: flex;
}
.phonetic {
font-size: 14rem;
font-size: .9rem;
color: gray;
}
}
.item-sub-title {
font-size: 16rem;
font-size: 1rem;
color: gray;
}
@@ -454,15 +455,14 @@ footer {
}
.common-title {
min-height: 40rem;
font-size: 18rem;
min-height: 2.8rem;
font-size: 1.1rem;
color: var(--color-font-1);
display: flex;
justify-content: center;
align-items: center;
}
.slide {
flex: 1;
width: 100%;

24
src/components/BaseButton.vue
View File

@@ -52,8 +52,8 @@ defineEmits(['click'])
.base-button {
cursor: pointer;
border-radius: 6rem;
padding: 0 15rem;
border-radius: .4rem;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: center;
@@ -61,7 +61,7 @@ defineEmits(['click'])
//background: #999;
//background: rgb(60, 63, 65);
//background: var(--color-second-bg);
height: 36rem;
height: 2.5rem;
line-height: 1;
position: relative;
@@ -76,25 +76,25 @@ defineEmits(['click'])
}
&.small {
height: 30rem;
height: 2.4rem;
& > span {
font-size: 13rem;
font-size: .8rem;
}
}
&.large {
height: 50rem;
font-size: 18rem;
padding: 0 22rem;
height: 3rem;
font-size: 1.1rem;
padding: 0 1.4rem;
& > span {
font-size: 18rem;
font-size: 1.1rem;
}
}
& > span {
font-size: 16rem;
font-size: 1rem;
color: white;
:deep(a) {
@@ -126,11 +126,11 @@ defineEmits(['click'])
}
.key-notice {
margin-left: 10rem;
margin-left: .6rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 12rem;
font-size: .8rem;
color: white;
//gap: 2rem;

8
src/components/Empty.vue
View File

@@ -27,16 +27,16 @@ defineEmits<{
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 12rem;
gap: 20rem;
font-size: .7rem;
gap: 1.3rem;
span {
font-family: var(--font-family);
}
img {
margin-top: -50rem;
width: 120rem;
margin-top: -3rem;
width: 9rem;
}
}
</style>

2
src/components/icon/Close.vue
View File

@@ -25,6 +25,6 @@ defineProps<{
display: flex;
align-items: center;
justify-content: center;
font-size: 18rem;
font-size: 1.1rem;
}
</style>

2
src/components/icon/VolumeIcon.vue
View File

@@ -75,7 +75,7 @@ defineExpose({play})
display: flex;
align-items: center;
justify-content: center;
$w: 22rem;
$w: 1.6rem;
:deep(svg) {
width: $w;

12
src/pages/pc/components/EditAbleText.vue
View File

@@ -43,7 +43,7 @@ function toggle() {
autosize
autofocus
type="textarea"
:input-style="`color: var(--color-font-1);font-size: 16rem;`"
:input-style="`color: var(--color-font-1);font-size: 1rem;`"
/>
<div class="options">
<BaseButton @click="toggle">取消</BaseButton>
@@ -53,7 +53,7 @@ function toggle() {
<div
v-else
class="text"
:style="`font-size: 16rem;`"
:style="`font-size: 1rem;`"
@click="toggle">
{{ value }}
</div>
@@ -61,12 +61,12 @@ function toggle() {
<style scoped lang="scss">
.edit-text {
margin-top: 10rem;
margin-top: .6rem;
color: var(--color-font-1);
.options {
margin-top: 10rem;
gap: 10rem;
margin-top: .6rem;
gap: .6rem;
display: flex;
justify-content: flex-end;
}
@@ -74,6 +74,6 @@ function toggle() {
.text {
color: var(--color-font-1);
min-height: 18rem;
min-height: 1.1rem;
}
</style>

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

@@ -6,16 +6,16 @@
<style scoped lang="scss">
$w: 22rem;
$w: 1.4rem;
.icon-wrapper {
cursor: pointer;
//padding: 2rem;
width: 26rem;
height: 26rem;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3rem;
border-radius: .3rem;
background: transparent;
transition: all .3s;
color: var(--color-main-active);

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

@@ -44,9 +44,9 @@ useDisableEventListener(() => focus)
.base-input {
border: 1px solid var(--color-second-bg);
border-radius: 6rem;
border-radius: .4rem;
overflow: hidden;
padding: 3rem 5rem;
padding: .2rem .3rem;
transition: all .3s;
display: flex;
align-items: center;
@@ -68,9 +68,9 @@ useDisableEventListener(() => focus)
input {
font-family: var(--font-family);
font-size: 18rem;
font-size: 1.1rem;
outline: none;
min-height: 20rem;
min-height: 1.2rem;
flex: 1;
box-sizing: border-box;
outline: none;

55
src/pages/pc/components/Setting.vue
View File

@@ -481,20 +481,20 @@ function importData(e) {
align-items: center;
.tabs {
padding: 10rem 20rem;
padding: .6rem 1.6rem;
display: flex;
flex-direction: column;
//align-items: center;
//justify-content: center;
gap: 10rem;
gap: .6rem;
.tab {
cursor: pointer;
padding: 10rem 15rem;
border-radius: 8rem;
padding: .6rem .9rem;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 10rem;
gap: .6rem;
&.active {
background: var(--color-item-bg);
@@ -503,9 +503,9 @@ function importData(e) {
}
.git-log {
font-size: 10rem;
font-size: .6rem;
color: gray;
margin-bottom: 5rem;
margin-bottom: .3rem;
}
}
@@ -514,17 +514,17 @@ function importData(e) {
flex: 1;
height: 100%;
overflow: auto;
padding: 10rem var(--space);
padding: 0 var(--space);
.row {
min-height: 40rem;
height: 2.6rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: calc(var(--space) * 5);
.wrapper {
height: 30rem;
height: 2rem;
flex: 1;
display: flex;
justify-content: flex-end;
@@ -533,7 +533,7 @@ function importData(e) {
span {
text-align: right;
//width: 30rem;
font-size: 12rem;
font-size: .7rem;
color: gray;
}
@@ -541,31 +541,34 @@ function importData(e) {
align-items: center;
input {
width: 150rem;
width: 9rem;
box-sizing: border-box;
margin-right: 10rem;
height: 28rem;
margin-right: .6rem;
height: 1.8rem;
outline: none;
font-size: 16rem;
font-size: 1rem;
border: 1px solid gray;
border-radius: 3rem;
padding: 0 5rem;
border-radius: .2rem;
padding: 0 .3rem;
background: var(--color-second-bg);
color: var(--color-font-1);
}
}
}
.main-title {
font-size: 22rem;
font-size: 1.1rem;
font-weight: bold;
}
.item-title {
font-size: 16rem;
font-size: 1rem;
}
.sub-title {
font-size: 14rem;
font-size: .9rem;
}
}
@@ -578,17 +581,17 @@ function importData(e) {
.scroll {
flex: 1;
padding-right: 10rem;
padding-right: .6rem;
overflow: auto;
}
.footer {
margin-bottom: 20rem;
margin-bottom: 1.3rem;
}
.desc {
margin-bottom: 10rem;
font-size: 12rem;
margin-bottom: .6rem;
font-size: .8rem;
}
.line {
@@ -630,7 +633,7 @@ function importData(e) {
color: var(--color-font-1);
p {
font-size: 30rem;
font-size: 2.4rem;
}
.github {
@@ -641,7 +644,7 @@ function importData(e) {
.options {
display: flex;
flex-direction: column;
gap: 10rem;
gap: .6rem;
}
}
}

6
src/pages/pc/components/Tooltip.vue
View File

@@ -72,10 +72,10 @@ export default {
.tip {
position: fixed;
font-size: 14rem;
font-size: 0.8rem;
z-index: 9999;
border-radius: 4rem;
padding: 10rem;
border-radius: .2rem;
padding: .8rem;
color: var(--color-font-1);
background: var(--color-tooltip-bg);
//box-shadow: 1px 1px 6px #bbbbbb;

26
src/pages/pc/components/article/EditArticle.vue
View File

@@ -389,7 +389,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
display: flex;
gap: var(--space);
padding: var(--space);
padding-top: 10rem;
padding-top: .6rem;
}
.row {
@@ -411,7 +411,7 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
}
.title {
font-size: 22rem;
font-size: 1.4rem;
text-align: center;
}
@@ -420,11 +420,11 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
//margin-bottom: 10rem;
.label {
height: 45rem;
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16rem;
font-size: 1rem;
}
}
@@ -441,31 +441,31 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
}
.article-translate {
margin-top: 10rem;
margin-bottom: 20rem;
margin-top: .6rem;
margin-bottom: 1.2rem;
flex: 1;
overflow: auto;
border-radius: 8rem;
border-radius: .5rem;
.section {
background: var(--color-textarea-bg);
margin-bottom: 20rem;
margin-bottom: 1.2rem;
padding: var(--space);
border-radius: 8rem;
border-radius: .5rem;
&:last-child {
margin-bottom: 0;
}
.sentence {
margin-bottom: 20rem;
margin-bottom: 1.2rem;
&:last-child {
margin-bottom: 0;
}
.text {
font-size: 18rem;
font-size: 1.1rem;
}
}
}
@@ -484,14 +484,14 @@ defineExpose({save, getEditArticle: () => cloneDeep(editArticle)})
.warning {
display: flex;
align-items: center;
font-size: 20rem;
font-size: 1.2rem;
color: red;
}
.success {
display: flex;
align-items: center;
font-size: 20rem;
font-size: 1.2rem;
color: #67C23A;
}

28
src/pages/pc/components/article/EditBatchArticleModal.vue
View File

@@ -148,7 +148,7 @@ useWindowClick(() => showExport = false)
:header="false"
>
<div class="add-article">
<div class="slide">
<div class="aslide">
<header>
<div class="dict-name">{{ runtimeStore.editDict.name }}</div>
</header>
@@ -224,18 +224,18 @@ useWindowClick(() => showExport = false)
.close {
position: absolute;
right: 20rem;
top: 20rem;
right: 1.2rem;
top: 1.2rem;
}
.slide {
.aslide {
width: 14vw;
height: 100%;
padding: 0 10rem;
padding: 0 .6rem;
display: flex;
flex-direction: column;
$height: 60rem;
$height: 4rem;
header {
height: $height;
@@ -245,25 +245,25 @@ useWindowClick(() => showExport = false)
//opacity: 0;
.dict-name {
font-size: 30rem;
font-size: 2rem;
color: var(--color-font-1);
}
}
.name {
font-size: 18rem;
font-size: 1.1rem;
}
.translate-name {
font-size: 16rem;
font-size: 1rem;
}
.add {
width: 260rem;
width: 16rem;
box-sizing: border-box;
border-radius: 8rem;
margin-bottom: 10rem;
padding: 10rem;
border-radius: .5rem;
margin-bottom: .6rem;
padding: .6rem;
display: flex;
justify-content: space-between;
transition: all .3s;
@@ -274,7 +274,7 @@ useWindowClick(() => showExport = false)
.footer {
height: $height;
display: flex;
gap: 10rem;
gap: .6rem;
align-items: center;
justify-content: flex-end;

12
src/pages/pc/components/dialog/ArticleContentDialog.vue
View File

@@ -70,25 +70,25 @@ onUnmounted(() => {
.article-content {
flex: 1;
overflow: hidden;
font-size: 20rem;
font-size: 1.2rem;
display: flex;
flex-direction: column;
.title {
text-align: center;
margin-bottom: var(--space);
font-size: 24rem;
font-size: 1.4rem;
}
.text {
text-indent: 1.5em;
line-height: 35rem;
line-height: 2rem;
overflow: auto;
padding-right: 10rem;
padding-bottom: 50rem;
padding-right: .6rem;
padding-bottom: 3rem;
.sentence {
margin-bottom: 30rem;
margin-bottom: 3rem;
}
}
}

32
src/pages/pc/components/dialog/Dialog.vue
View File

@@ -189,9 +189,9 @@ async function cancel() {
@import "@/assets/css/variable";
$modal-mask-bg: rgba(#000, .45);
$radius: 8rem;
$radius: .5rem;
$time: 0.3s;
$header-height: 60rem;
$header-height: 4rem;
@keyframes bounce-in {
0% {
@@ -288,8 +288,8 @@ $header-height: 60rem;
.close {
position: absolute;
right: 20rem;
top: 20rem;
right: 1.2rem;
top: 1.2rem;
z-index: 999;
}
@@ -297,14 +297,14 @@ $header-height: 60rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rem 24rem 16rem;
padding: 1.3rem 1.3rem 1rem;
border-radius: $radius $radius 0 0;
.title {
color: var(--color-font-1);
font-weight: bold;
font-size: 24rem;
line-height: 33rem;
font-size: 1.3rem;
line-height: 1.8rem;
}
}
@@ -312,21 +312,21 @@ $header-height: 60rem;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.8);
font-weight: 400;
font-size: 18rem;
line-height: 27rem;
font-size: 1.1rem;
line-height: 1.7rem;
width: 100%;
flex: 1;
overflow: hidden;
display: flex;
&.padding {
padding: 4rem 24rem 24rem;
padding: .2rem 1.6rem 1.6rem;
}
.content {
width: 350rem;
width: 25rem;
color: var(--color-font-1);
padding: 4rem 24rem 24rem;
padding: .2rem 1.6rem 1.6rem;
}
}
@@ -334,11 +334,11 @@ $header-height: 60rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16rem 24rem;
padding: 1rem 1.6rem;
color: #fff;
font-size: 18rem;
font-size: 1.1rem;
background: rgba(0, 0, 0, .2);
border-radius: 0 0 24rem 24rem;
border-radius: 0 0 1.6rem 1.6rem;
.left {
display: flex;
@@ -347,7 +347,7 @@ $header-height: 60rem;
.text {
color: white;
font-size: 16rem;
font-size: 1rem;
cursor: pointer;
}

31
src/pages/pc/components/dialog/DictDiglog.vue
View File

@@ -245,7 +245,7 @@ function handleChangeArticleChapterIndex(val: any) {
/>
<div class="name">{{ runtimeStore.editDict.name }}</div>
<div class="desc">{{ runtimeStore.editDict.description }}</div>
<div class="text flex align-center gap10">
<div class="text flex align-center">
<div v-if="dictIsArticle">总文章：{{ runtimeStore.editDict.articles.length }}篇
</div>
<div v-else>总词汇：
@@ -423,7 +423,7 @@ function handleChangeArticleChapterIndex(val: any) {
<style scoped lang="scss">
@import "@/assets/css/style";
$header-height: 60rem;
$header-height: 4rem;
#DictDialog {
//position: fixed;
@@ -432,7 +432,7 @@ $header-height: 60rem;
//transform: translate(-50%, -50%);
background: var(--color-second-bg);
z-index: 99999;
width: 1030rem;
width: 60rem;
height: 75vh;
}
@@ -456,7 +456,7 @@ $header-height: 60rem;
.left {
display: flex;
gap: 10rem;
gap: .6rem;
align-items: center;
}
}
@@ -483,21 +483,20 @@ $header-height: 60rem;
.left-column {
flex: 5;
gap: 10rem;
gap: .6rem;
position: relative;
font-size: 14rem;
font-size: .9rem;
padding-right: var(--space);
@extend .column;
.name {
font-size: 24rem;
font-size: 1.6rem;
width: 95%;
}
.desc {
font-size: 16rem;
margin-bottom: 20rem;
font-size: 1rem;
margin-bottom: 1.2rem;
}
.count {
@@ -522,12 +521,12 @@ $header-height: 60rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 34rem;
height: 2rem;
word-break: keep-all;
gap: 10rem;
gap: .6rem;
.el-radio {
margin-right: 10rem;
margin-right: .6rem;
}
}
@@ -540,9 +539,9 @@ $header-height: 60rem;
.notice {
display: flex;
justify-content: space-between;
transform: translate3d(0, -5rem, 0);
padding-left: 100rem;
font-size: 13rem;
transform: translate3d(0, -.3rem, 0);
padding-left: 6rem;
font-size: .8rem;
}
}
}

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

@@ -19,7 +19,7 @@ withDefaults(defineProps<IProps>(), {
</Transition>
</template>
<style lang="scss">
<style lang="scss">
@import "@/assets/css/style";
.mini-row-title {

46
src/pages/pc/components/dialog/SettingDialog.vue
View File

@@ -43,20 +43,20 @@ let disabledDialogEscKey = $ref(true)
align-items: center;
.tabs {
padding: 10rem 20rem;
padding: .6rem 1.6rem;
display: flex;
flex-direction: column;
//align-items: center;
//justify-content: center;
gap: 10rem;
gap: .6rem;
.tab {
cursor: pointer;
padding: 10rem 15rem;
border-radius: 8rem;
padding: .6rem .9rem;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 10rem;
gap: .6rem;
&.active {
background: var(--color-item-bg);
@@ -65,9 +65,9 @@ let disabledDialogEscKey = $ref(true)
}
.git-log {
font-size: 10rem;
font-size: .6rem;
color: gray;
margin-bottom: 5rem;
margin-bottom: .3rem;
}
}
@@ -79,14 +79,14 @@ let disabledDialogEscKey = $ref(true)
padding: 0 var(--space);
.row {
height: 40rem;
height: 2.6rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: calc(var(--space) * 5);
.wrapper {
height: 30rem;
height: 2rem;
flex: 1;
display: flex;
justify-content: flex-end;
@@ -95,7 +95,7 @@ let disabledDialogEscKey = $ref(true)
span {
text-align: right;
//width: 30rem;
font-size: 12rem;
font-size: .7rem;
color: gray;
}
@@ -103,15 +103,15 @@ let disabledDialogEscKey = $ref(true)
align-items: center;
input {
width: 150rem;
width: 9rem;
box-sizing: border-box;
margin-right: 10rem;
height: 28rem;
margin-right: .6rem;
height: 1.8rem;
outline: none;
font-size: 16rem;
font-size: 1rem;
border: 1px solid gray;
border-radius: 3rem;
padding: 0 5rem;
border-radius: .2rem;
padding: 0 .3rem;
background: var(--color-second-bg);
color: var(--color-font-1);
}
@@ -121,16 +121,16 @@ let disabledDialogEscKey = $ref(true)
}
.main-title {
font-size: 18rem;
font-size: 1.1rem;
font-weight: bold;
}
.item-title {
font-size: 16rem;
font-size: 1rem;
}
.sub-title {
font-size: 14rem;
font-size: .9rem;
}
}
@@ -143,17 +143,17 @@ let disabledDialogEscKey = $ref(true)
.scroll {
flex: 1;
padding-right: 10rem;
padding-right: .6rem;
overflow: auto;
}
.footer {
margin-bottom: 20rem;
margin-bottom: 1.3rem;
}
.desc {
margin-bottom: 10rem;
font-size: 12rem;
margin-bottom: .6rem;
font-size: .8rem;
}
.line {

4
src/pages/pc/components/list/ArticleList.vue
View File

@@ -78,7 +78,7 @@ defineExpose({scrollToBottom, scrollToItem})
.list {
display: flex;
flex-direction: column;
gap: 15rem;
gap: 1rem;
flex: 1;
overflow: hidden;
@@ -89,7 +89,7 @@ defineExpose({scrollToBottom, scrollToItem})
}
.translate {
font-size: 16rem;
font-size: 1rem;
}
}
</style>

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

@@ -49,8 +49,8 @@ watch(() => props.groupByTag, () => {
//border-bottom: 1px dashed gray;
.category {
font-size: 24rem;
padding-bottom: 10rem;
font-size: 1.2rem;
padding-bottom: 1rem;
border-bottom: 1px dashed gray;
}
}
@@ -58,13 +58,13 @@ watch(() => props.groupByTag, () => {
.tags {
display: flex;
flex-wrap: wrap;
margin: 10rem 0;
margin: 1rem 0;
.tag {
color: var(--color-font-1);
cursor: pointer;
padding: 5rem 10rem;
border-radius: 20rem;
padding: 0.4rem 1rem;
border-radius: 2rem;
&.active {
color: var(--color-font-active-1);

10
src/pages/pc/components/list/List.vue
View File

@@ -162,10 +162,10 @@ defineExpose({scrollBottom})
transition: all .3s;
flex: 1;
overflow: overlay;
padding-right: 5rem;
padding-right: .3rem;
.search {
margin: 10rem 0;
margin: .6rem 0;
}
.list {
@@ -173,9 +173,9 @@ defineExpose({scrollBottom})
box-sizing: border-box;
background: var(--color-item-bg);
color: var(--color-font-1);
border-radius: 8rem;
margin-bottom: 10rem;
padding: 10rem;
border-radius: .5rem;
margin-bottom: .6rem;
padding: .6rem;
display: flex;
justify-content: space-between;
transition: all .3s;

4
src/pages/pc/components/toolbar/TranslateSetting.vue
View File

@@ -114,9 +114,9 @@ function save() {
}
.footer {
margin-top: 10rem;
margin-top: .6rem;
display: flex;
justify-content: flex-end;
gap: 10rem;
gap: .6rem;
}
</style>

28
src/pages/pc/components/toolbar/index.vue
View File

@@ -31,7 +31,7 @@ const moreOptionsRef = $ref<HTMLDivElement>(null)
watch([() => settingStore.showToolbar, () => headerRef], n => {
if (n[1]) {
if (n[0]) {
n[1].style.marginTop = '10rem'
n[1].style.marginTop = '.8rem'
} else {
let rect = n[1].getBoundingClientRect()
n[1].style.marginTop = `-${rect.height}px`
@@ -68,6 +68,7 @@ watch(() => store.load, n => {
{{ store.currentDict.name }} {{ practiceStore.repeatNumber ? ' 复习错词' : '' }}
</div>
</Tooltip>
<Icon icon="gg:arrows-exchange" />
<ChapterName v-if="store.currentDict.type === DictType.word"/>
<div class="info-text" v-if="practiceStore.repeatNumber">
复习错词
@@ -147,14 +148,14 @@ watch(() => store.load, n => {
<style lang="scss">
.info {
border-radius: 6rem;
border-radius: .5rem;
color: var(--color-font-1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all .3s;
padding: 6rem 8rem;
padding: .5rem .6rem;
&:hover {
background: var(--color-main-active);
@@ -186,15 +187,15 @@ watch(() => store.load, n => {
header {
width: var(--toolbar-width);
margin-top: 10rem;
margin-top: 1rem;
background: var(--color-second-bg);
border-radius: 8rem;
margin-bottom: 30rem;
border-radius: .8rem;
margin-bottom: 3rem;
position: relative;
z-index: 2;
padding: 4rem var(--space);
padding: .4rem var(--space);
box-sizing: border-box;
gap: 10rem;
gap: 1rem;
border: 1px solid var(--color-item-border);
transition: all var(--anim-time);
box-shadow: var(--shadow);
@@ -208,12 +209,12 @@ header {
.dict-name {
display: flex;
max-width: 45%;
font-size: 17rem;
font-size: 1rem;
position: relative;
}
.hide {
transform: translateX(calc(100% - 36rem));
transform: translateX(calc(100% - 2rem));
}
.options {
@@ -221,12 +222,9 @@ header {
align-items: center;
overflow: hidden;
.icon-wrapper {
margin-left: 10rem;
}
:deep(.icon-wrapper) {
margin-left: 10rem;
margin-left: .2rem;
}
.more {
@@ -251,7 +249,7 @@ header {
cursor: pointer;
transition: all .5s;
transform: translate3d(-50%, 100%, 0) rotate(180deg);
padding: 5rem;
padding: .5rem;
&.down {
transform: translate3d(-50%, 100%, 0) rotate(0);

2
src/pages/pc/dict/DictManage.vue
View File

@@ -145,7 +145,7 @@ onMounted(() => {
@import "@/assets/css/variable";
#DictDialog {
font-size: 14rem;
font-size: .9rem;
position: absolute;
left: 50%;
top: 50%;

32
src/pages/pc/dict/components/ArticleDictDetail.vue
View File

@@ -409,8 +409,8 @@ defineExpose({getDictDetail, add, editDict})
align-items: center;
color: var(--color-font-1);
padding: 0 var(--space);
gap: 20rem;
margin-bottom: 20rem;
gap: 1.2rem;
margin-bottom: 1.2rem;
.back {
height: 100%;
@@ -421,15 +421,15 @@ defineExpose({getDictDetail, add, editDict})
.left {
display: flex;
gap: 10rem;
gap: .6rem;
flex-direction: column;
color: var(--color-font-2);
.top {
color: var(--color-font-1);
display: flex;
gap: 10rem;
font-size: 20rem;
gap: .6rem;
font-size: 1.2rem;
align-items: center;
}
@@ -449,7 +449,7 @@ defineExpose({getDictDetail, add, editDict})
.box {
background: white;
border-radius: 10rem;
border-radius: .6rem;
background: var(--color-second-bg);
color: var(--color-font-1);
padding-bottom: var(--space);
@@ -465,7 +465,7 @@ defineExpose({getDictDetail, add, editDict})
}
.chapter-list {
width: 400rem;
width: 25rem;
height: 100%;
@extend .box;
@@ -480,19 +480,19 @@ defineExpose({getDictDetail, add, editDict})
position: absolute;
right: 0;
display: flex;
gap: 10rem;
gap: .6rem;
}
}
.select {
height: 45rem;
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
gap: 5rem;
gap: .3rem;
align-items: center;
}
}
@@ -511,7 +511,7 @@ defineExpose({getDictDetail, add, editDict})
flex: 1;
padding: var(--space);
overflow: hidden;
font-size: 20rem;
font-size: 1.2rem;
.title {
display: flex;
@@ -519,18 +519,18 @@ defineExpose({getDictDetail, add, editDict})
align-items: center;
position: relative;
margin-bottom: var(--space);
font-size: 24rem;
font-size: 1.4rem;
}
.text {
text-indent: 1.5em;
line-height: 35rem;
line-height: 2.6rem;
overflow: auto;
padding-right: 10rem;
padding-bottom: 50rem;
padding-right: .6rem;
padding-bottom: 3rem;
.sentence {
margin-bottom: 30rem;
margin-bottom: 2.4rem;
}
}
}

8
src/pages/pc/dict/components/ChapterWordList.vue
View File

@@ -184,19 +184,19 @@ useWindowClick(() => show = false)
position: absolute;
right: 0;
display: flex;
gap: 10rem;
gap: .6rem;
}
}
.select {
height: 45rem;
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
gap: 5rem;
gap: .3rem;
align-items: center;
}
}
@@ -211,7 +211,7 @@ useWindowClick(() => show = false)
.column {
flex: 1;
background: white;
border-radius: 10rem;
border-radius: .6rem;
background: var(--color-second-bg);
color: var(--color-font-1);
padding-bottom: var(--space);

2
src/pages/pc/dict/components/EditDict.vue
View File

@@ -180,7 +180,7 @@ onMounted(() => {
justify-content: center;
.wrapper {
width: 500rem;
width: 80rem;
}
.el-select {

40
src/pages/pc/dict/components/WordDictDetail.vue
View File

@@ -780,8 +780,8 @@ defineExpose({getDictDetail, add: addWord, editDict})
align-items: center;
color: var(--color-font-1);
padding: 0 var(--space);
gap: 20rem;
margin-bottom: 20rem;
gap: 1.2rem;
margin-bottom: 1.2rem;
.back {
height: 100%;
@@ -792,15 +792,15 @@ defineExpose({getDictDetail, add: addWord, editDict})
.left {
display: flex;
gap: 10rem;
gap: .6rem;
flex-direction: column;
color: var(--color-font-2);
.top {
color: var(--color-font-1);
display: flex;
gap: 10rem;
font-size: 20rem;
gap: .6rem;
font-size: 1.2rem;
align-items: center;
}
@@ -843,14 +843,14 @@ defineExpose({getDictDetail, add: addWord, editDict})
}
.select {
height: 45rem;
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
gap: 5rem;
gap: .3rem;
align-items: center;
}
}
@@ -865,7 +865,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
.column {
flex: 1;
background: white;
border-radius: 10rem;
border-radius: .6rem;
background: var(--color-second-bg);
color: var(--color-font-1);
padding-bottom: var(--space);
@@ -874,7 +874,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
}
.left-column {
max-width: 250rem;
max-width: 16rem;
width: 16vw;
@extend .column;
}
@@ -883,7 +883,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
display: flex;
align-items: center;
justify-content: center;
gap: 10rem;
gap: .6rem;
}
.right-column {
@@ -899,39 +899,39 @@ defineExpose({getDictDetail, add: addWord, editDict})
}
.allocation-chapter {
width: 500rem;
width: 30rem;
padding: var(--space);
padding-top: 0;
color: var(--color-font-1);
.desc {
margin-top: 10rem;
margin-bottom: 35rem;
margin-top: .6rem;
margin-bottom: 2rem;
text-align: center;
}
.row {
display: flex;
align-items: center;
gap: 20rem;
margin-bottom: 15rem;
gap: 1.2rem;
margin-bottom: 1rem;
word-break: keep-all;
.label {
width: 90rem;
width: 5.6rem;
}
.text {
font-size: 12rem;
font-size: .7rem;
}
}
.notice {
display: flex;
justify-content: space-between;
transform: translate3d(0, -15rem, 0);
padding-left: 110rem;
font-size: 13rem;
transform: translate3d(0, -1rem, 0);
padding-left: 7rem;
font-size: .8rem;
}
}

8
src/pages/pc/dict/index.vue
View File

@@ -38,7 +38,7 @@ onMounted(() => {
header {
background: var(--color-second-bg);
height: 60rem;
height: 4rem;
width: 100%;
display: flex;
justify-content: center;
@@ -47,12 +47,12 @@ onMounted(() => {
.nav-list {
display: flex;
gap: 10rem;
gap: .6rem;
nav {
padding: 7rem 20rem;
padding: .4rem 1.2rem;
cursor: pointer;
font-size: 16rem;
font-size: 1rem;
transition: all .3s;
&:hover {

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

@@ -7,11 +7,13 @@ import {usePracticeStore} from "@/stores/practice.ts";
import {useBaseStore} from "@/stores/base.ts";
import {useSettingStore} from "@/stores/setting.ts";
import {useRuntimeStore} from "@/stores/runtime.ts";
import {useRouter} from "vue-router";
const practiceStore = usePracticeStore()
const store = useBaseStore()
const settingStore = useSettingStore()
const runtimeStore = useRuntimeStore()
const router = useRouter()
</script>
<template>
@@ -19,7 +21,7 @@ const runtimeStore = useRuntimeStore()
<div class="aside">
<div class="top">
<Logo/>
<div class="row">
<div class="row" @click="router.push('/word')">
<Icon icon="material-symbols-light:dictionary-outline-sharp"/>
<!-- <Icon icon="streamline:dictionary-language-book"/>-->
<span>单词</span>
@@ -76,6 +78,7 @@ const runtimeStore = useRuntimeStore()
justify-content: space-between;
.row {
@apply cursor-pointer;
padding: 0.5rem;
display: flex;
align-items: center;

22
src/pages/pc/practice/Footer.vue
View File

@@ -81,17 +81,17 @@ onUnmounted(() => {
.footer {
width: var(--toolbar-width);
margin-bottom: 10rem;
margin-bottom: .8rem;
transition: all var(--anim-time);
position: relative;
margin-top: 15rem;
margin-top: 1rem;
&.hide {
margin-bottom: -90rem;
margin-top: 50rem;
margin-bottom: -7rem;
margin-top: 3rem;
.progress {
bottom: calc(100% + 25rem);
bottom: calc(100% + 1.8rem);
}
}
@@ -99,15 +99,15 @@ onUnmounted(() => {
position: relative;
width: 100%;
box-sizing: border-box;
border-radius: 10rem;
border-radius: .6rem;
background: var(--color-second-bg);
padding: 3rem var(--space) 6rem var(--space);
padding: .2rem var(--space) .4rem var(--space);
z-index: 2;
border: 1px solid var(--color-item-border);
box-shadow: var(--shadow);
.stat {
margin-top: 8rem;
margin-top: .5rem;
display: flex;
justify-content: space-around;
@@ -115,8 +115,8 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
align-items: center;
gap: 5rem;
width: 80rem;
gap: .3rem;
width: 5rem;
color: gray;
.line {
@@ -131,7 +131,7 @@ onUnmounted(() => {
.progress {
width: 100%;
transition: all .3s;
padding: 0 10rem;
padding: 0 .6rem;
box-sizing: border-box;
position: absolute;
bottom: 0;

6
src/pages/pc/practice/Options.vue
View File

@@ -66,9 +66,9 @@ const settingStore = useSettingStore()
<style scoped lang="scss">
.options {
margin-top: 10rem;
margin-top: 1.2rem;
display: flex;
gap: 15rem;
font-size: 18rem;
gap: 1rem;
font-size: 1.1rem;
}
</style>

16
src/pages/pc/practice/Panel.vue
View File

@@ -227,14 +227,14 @@ const showCollectToggleButton = $computed(() => {
<style scoped lang="scss">
@import "@/assets/css/variable";
$header-height: 50rem;
$header-height: 3rem;
.slide-item {
width: var(--panel-width);
height: 100%;
}
.panel {
border-radius: 8rem;
border-radius: .5rem;
width: var(--panel-width);
background: var(--color-second-bg);
height: 100%;
@@ -247,15 +247,15 @@ $header-height: 50rem;
& > header {
min-height: 50rem;
min-height: 3rem;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rem 15rem;
padding: .6rem .9rem;
border-bottom: 1px solid #e1e1e1;
gap: 15rem;
gap: 1rem;
.close {
cursor: pointer;
@@ -264,13 +264,13 @@ $header-height: 50rem;
.tabs {
display: flex;
align-items: center;
gap: 15rem;
font-size: 14rem;
gap: .9rem;
font-size: .8rem;
.tab {
cursor: pointer;
word-break: keep-all;
font-size: 16rem;
font-size: 1rem;
transition: all .3s;
color: gray;

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

@@ -154,7 +154,7 @@ useStartKeyboardEventListener()
<style scoped lang="scss">
.practice-wrapper {
font-size: 13rem;
font-size: 0.9rem;
width: 100%;
height: 100%;
display: flex;

20
src/pages/pc/practice/practice-word/Typing.vue
View File

@@ -157,7 +157,7 @@ defineExpose({del, showWord, hideWord, play})
<div class="typing-word">
<div class="translate"
:style="{
fontSize: settingStore.fontSize.wordTranslateFontSize +'rem',
fontSize: settingStore.fontSize.wordTranslateFontSize +'px',
opacity: settingStore.translate ? 1 : 0
}"
>
@@ -179,7 +179,7 @@ defineExpose({del, showWord, hideWord, play})
<div class="word-wrapper">
<div class="word"
:class="wrong && 'is-wrong'"
:style="{fontSize: settingStore.fontSize.wordForeignFontSize +'rem'}"
:style="{fontSize: settingStore.fontSize.wordForeignFontSize +'px'}"
>
<span class="input" v-if="input">{{ input }}</span>
<span class="wrong" v-if="wrong">{{ wrong }}</span>
@@ -218,19 +218,19 @@ defineExpose({del, showWord, hideWord, play})
color: var(--color-font-2);
.phonetic, .translate {
font-size: 20rem;
font-size: 1.6rem;
transition: all .3s;
}
.phonetic {
margin-top: 5rem;
margin-top: .3rem;
font-family: var(--word-font-family);
}
.translate {
position: absolute;
transform: translateY(-50%);
margin-bottom: 90rem;
margin-bottom: 7rem;
&:hover {
.volumeIcon {
@@ -241,7 +241,7 @@ defineExpose({del, showWord, hideWord, play})
.translate-item {
display: flex;
align-items: center;
gap: 10rem;
gap: .8rem;
}
.volumeIcon {
@@ -251,17 +251,17 @@ defineExpose({del, showWord, hideWord, play})
}
.word-wrapper {
margin-left: 30rem;
margin-left: 2rem;
display: flex;
align-items: center;
gap: 10rem;
gap: .8rem;
color: var(--color-font-1);
.word {
font-size: 48rem;
font-size: 3rem;
line-height: 1;
font-family: var(--word-font-family);
letter-spacing: 5rem;
letter-spacing: .3rem;
.input {
color: rgb(22, 163, 74);

22
src/pages/pc/practice/practice-word/TypingWord.vue
View File

@@ -379,9 +379,9 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14rem;
font-size: 1rem;
color: gray;
gap: 6rem;
gap: .4rem;
position: relative;
width: var(--toolbar-width);
@@ -396,14 +396,14 @@ onUnmounted(() => {
align-items: center;
.arrow {
min-width: 22rem;
min-height: 22rem;
min-width: 1.6rem;
min-height: 1.6rem;
}
}
.word {
font-size: 24rem;
margin-bottom: 4rem;
font-size: 1.8rem;
margin-bottom: .2rem;
font-family: var(--word-font-family);
}
@@ -411,31 +411,31 @@ onUnmounted(() => {
cursor: pointer;
display: flex;
float: left;
gap: 10rem;
gap: .8rem;
}
.next {
cursor: pointer;
display: flex;
justify-content: flex-end;
gap: 10rem;
gap: .8rem;
float: right;
}
}
.options-wrapper {
position: absolute;
margin-top: 120rem;
margin-top: 8rem;
}
}
.word-panel-wrapper {
position: fixed;
left: 0;
top: 10rem;
top: .8rem;
z-index: 1;
margin-left: var(--panel-margin-left);
height: calc(100% - 20rem);
height: calc(100% - 1.5rem);
}
</style>

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

@@ -4,8 +4,10 @@ import DictListPanel from "@/pages/pc/components/DictListPanel.vue";
import {Icon} from '@iconify/vue'
import {ActivityCalendar} from "vue-activity-calendar";
import "vue-activity-calendar/style.css";
import {useRouter} from "vue-router";
const base = useBaseStore()
const router = useRouter()
function clickEvent(e) {
console.log('e', e)
@@ -13,14 +15,15 @@ function clickEvent(e) {
</script>
<template>
<div class="word flex justify-center h-full">
<div class="word flex justify-center overflow-auto ">
<div class="w-3/5">
<div class="card 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="mingcute:right-line" class="text-2xl ml-2"/>
<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">
<div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
@click="router.push('/practice')">
开始学习
</div>
</div>

7
src/router.ts
View File

@@ -23,11 +23,12 @@ import PC from "@/pages/pc/index.vue";
export const routes: RouteRecordRaw[] = [
{
path: '/', component: PC,
redirect: '/word',
children: [
{path: '/word', component: WordHome},
{path: 'word', component: WordHome},
{path: 'practice', component: Practice},
]
},
{path: '/pc/practice', component: Practice},
{path: '/pc/dict', component: Dict},
{path: '/mobile', component: Mobile,},
@@ -44,7 +45,7 @@ export const routes: RouteRecordRaw[] = [
{path: '/mobile/about', component: About},
{path: '/mobile/feedback', component: Feedback},
{path: '/test', component: Test},
{path: '/', redirect: '/pc/practice'},
// {path: '/', redirect: '/pc/practice'},
]
const router = VueRouter.createRouter({