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
2023-12-30 22:45:59 +08:00
parent 5bd1235046
commit 9ace6240c3
8 changed files with 94 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/book2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 958 B

BIN
src/assets/img/books.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/img/collect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/img/complete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

135
src/pages/mobile/My.vue
View File

@@ -29,7 +29,7 @@ function $no() {
</script>
<template>
<div class="page setting">
<div class="page my">
<div ref="float" class="float">
<div class="right">
<IconWrapper>
@@ -65,47 +65,46 @@ function $no() {
</div>
<div class="grid">
<div class="item" @click="router.push('/mobile/data-manage')">
<Icon icon="uil:setting" width="22"/>
<img src="@/assets/img/collect.png" alt="">
<span>收藏</span>
</div>
<div class="item" @click="router.push('/mobile/data-manage')">
<Icon icon="uil:setting" width="22"/>
<img src="@/assets/img/book2.png" alt="">
<span>错词本</span>
</div>
<div class="item" @click="router.push('/mobile/data-manage')">
<Icon icon="uil:setting" width="22"/>
<img src="@/assets/img/complete.png" alt="">
<span>简单词</span>
</div>
</div>
<div class="list">
<div class="setting-list">
<div class="item" @click="router.push('/mobile/setting')">
<div class="left">
<Icon icon="uil:setting" width="22"/>
<Icon icon="uil:setting" width="22"/>
<div class="right">
<span>设置</span>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<div class="item" @click="router.push('/mobile/data-manage')">
<div class="left">
<Icon icon="uil:setting" width="22"/>
<Icon icon="mdi:database-cog-outline" width="22"/>
<div class="right">
<span>数据同步</span>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<div class="item" @click="router.push('/mobile/data-manage')">
<div class="left">
<Icon icon="uil:setting" width="22"/>
<span>反馈问题</span>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<div class="item">
<div class="left">
<Icon icon="mdi:about-circle-outline" width="22"/>
<span>关于我们</span>
<Icon icon="pepicons-pencil:letter-open" width="22"/>
<div class="right">
<span>反馈问题</span>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
</div>
<div class="item">
<Icon icon="mdi:about-circle-outline" width="22"/>
<div class="right" style="border-bottom: none">
<span>关于我们</span>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
</div>
</div>
@@ -114,15 +113,16 @@ function $no() {
</template>
<style scoped lang="scss">
$main-bg: rgb(21, 23, 36);
$second-btn-color: rgb(58, 58, 70);
@import "common.scss";
.setting {
.my {
font-size: 18rem;
display: flex;
flex-direction: column;
align-items: center;
background: $main-bg;
color: black;
background: var(--color-second-bg);
.float {
position: fixed;
@@ -154,30 +154,24 @@ $second-btn-color: rgb(58, 58, 70);
box-sizing: border-box;
}
//消息页面
$msg-bg: rgb(22, 22, 22);
$msg-subpage-card-bg: rgb(28, 30, 43); //二级页面，卡片背景
.detail {
transform: translateY(-50rem);
background: $main-bg;
//padding: 20rem;
background: var(--color-second-bg);
padding-top: 30rem;
border-radius: 20rem 20rem 0 0;
display: flex;
flex-direction: column;
gap: 20rem;
padding: 20rem;
.heat {
padding:0 20rem;
color: white;
display: flex;
align-items: center;
font-size: 16rem;
gap: 30rem;
.num {
color: white;
font-weight: bold;
}
@@ -189,16 +183,15 @@ $second-btn-color: rgb(58, 58, 70);
}
.description {
padding:0 20rem;
font-size: 16rem;
color: white;
}
.grid {
display: flex;
justify-content: space-between;
border-bottom: 1px solid gray;
padding: 20rem;
background: var(--color-header-bg);
border-radius: 8rem;
.item {
height: 60rem;
@@ -207,75 +200,13 @@ $second-btn-color: rgb(58, 58, 70);
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
}
}
.list {
padding: 20rem;
padding-top: 0;
.item {
margin-bottom: 10rem;
position: relative;
flex: 1;
font-size: 16rem;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 6rem;
//background: $second-btn-color;
height: 50rem;
color: white;
.left {
display: flex;
align-items: center;
gap: 10rem;
img {
width: 40rem;
}
}
}
}
}
.nav {
font-size: 16rem;
width: 100%;
height: 50rem;
top: 0;
left: 0;
right: 0;
z-index: 1;
background: $main-bg;
.tabs {
width: 100%;
display: flex;
justify-content: space-between;
.tab {
height: 45rem;
width: 45%;
display: flex;
justify-content: center;
align-items: center;
color: gray;
transition: color .3s;
&.active {
font-weight: bold;
color: white;
}
}
}
.indicator {
height: 2px;
background: gold;
width: 25%;
position: relative;
transition: all .3s;
//left: 50%;
}
}
}

87
src/pages/mobile/Setting.vue
View File

@@ -1,84 +1,63 @@
<script setup lang="ts">
import {Icon} from "@iconify/vue";
import IconWrapper from "@/components/IconWrapper.vue";
import useTheme from "@/hooks/theme.ts";
import {useSettingStore} from "@/stores/setting.ts";
import NavBar from "@/pages/mobile/components/NavBar.vue";
import router from "@/router.ts";
import {ref} from "vue";
const {toggleTheme} = useTheme()
const settingStore = useSettingStore()
// @ts-ignore
const gitLastCommitHash = ref(LATEST_COMMIT_HASH);
</script>
<template>
<div class="mobile-page setting">
<NavBar title="设置"/>
<div class="setting-list">
<div class="item">
<div class="left">
<Icon icon="uil:setting" width="22"/>
<span>音效设置</span>
<div class="content">
<div class="setting-list">
<div class="item">
<Icon icon="bx:headphone" width="22"/>
<div class="right">
<span>音效设置</span>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
</div>
<div class="item">
<Icon icon="icon-park-outline:setting-config" width="22"/>
<div class="right" style="border-bottom: none">
<span>其他设置</span>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<div class="item">
<div class="left">
<Icon icon="uil:setting" width="22"/>
<span>其他设置</span>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<div class="item" @click="router.push('/mobile/data-manage')">
<div class="left">
<Icon icon="uil:setting" width="22"/>
<span>数据管理</span>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<div class="item" @click="router.push('/mobile/data-manage')">
<div class="left">
<Icon icon="uil:setting" width="22"/>
<span>反馈问题</span>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
</div>
<div class="item">
<div class="left">
<Icon icon="mdi:about-circle-outline" width="22"/>
<span>关于我们</span>
</div>
<Icon class="arrow" icon="mingcute:right-line" width="20"/>
<div class="git-log">
Build {{ gitLastCommitHash }}
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@import "common";
.setting {
display: flex;
flex-direction: column;
align-items: center;
background: var(--color-second-bg);
.setting-list {
background: var(--color-third-bg);
border-radius: 8rem;
width: 90%;
.item {
height: 60rem;
padding: 0 20rem;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
gap: 10rem;
}
}
.content {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20rem;
box-sizing: border-box;
}
}
</style>

25
src/pages/mobile/common.scss Normal file
View File

@@ -0,0 +1,25 @@
.setting-list {
background: var(--color-header-bg);
color: black;
border-radius: 8rem;
width: 100%;
.item {
height: 60rem;
padding-left: 20rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10rem;
.right {
padding-right: 10rem;
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f1f1f1;
}
}
}

6
src/pages/mobile/index.vue
View File

@@ -24,15 +24,15 @@ onMounted(() => {
</div>
<div class="tabs">
<div class="tab" @click="index = 0">
<Icon width="30" icon="icon-park:word"/>
<Icon width="30" icon="ph:exam"/>
<span>单词</span>
</div>
<div class="tab" @click="index = 1">
<Icon width="30" icon="icon-park:word"/>
<Icon width="30" icon="iconoir:book"/>
<span>词典</span>
</div>
<div class="tab" @click="index = 2">
<Icon width="30" icon="icon-park:word"/>
<Icon width="30" icon="iconoir:user"/>
<span>我的</span>
</div>
</div>