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

优化ui

Browse Source
This commit is contained in:
zyronon
2023-08-24 18:44:50 +08:00
parent d7e2884dc1
commit 0fbdfbb187
13 changed files with 74 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,6 @@
@import "@icon-park/vue-next/styles/index.css";
@import '/node_modules/element-plus/dist/index.css';
@import "/node_modules/hover.css";
@import "colors";
@import "anim";
@@ -6,19 +8,23 @@
--color-main-bg: rgb(226, 226, 226);
--color-second-bg: rgb(238, 240, 244);
--color-header-bg: white;
--color-font: black;
//--color-item-hover: ;
--color-font-1: black;
--color-font-2: gray;
--color-font-active-1: white;
--color-font-active-2: whitesmoke;
--color-item-bg: white;
--color-item-hover: white;
--color-item-active: rgb(75, 110, 175);
}
html[data-theme='dark'] {
--color-main-bg: rgba(0, 5, 24, 1);
--color-second-bg: rgb(60, 63, 65);
--color-header-bg: white;
}
$anim-time: 0.3s;
div {
.anim {
transition: background $anim-time, color $anim-time;
}

2
src/components/BaseButton.vue
View File

@@ -11,7 +11,7 @@ const props = defineProps<{
<template>
<Tooltip :disabled="!keyboard" :title="`快捷键: ${keyboard}`">
<div class="my-button" :class="active && 'active'">
<div class="my-button hvr-grow" :class="active && 'active'">
<span><slot></slot></span>
<div class="key-notice" v-if="keyboard">
<keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>

10
src/components/ChapterList.vue
View File

@@ -18,7 +18,7 @@ function next() {
<div class="list">
<div class="item" :class="activeIndex === index && 'active'"
v-for="(item,index) in list" @click="$emit('update:activeIndex', index)">
<div class="title">{{ index + 1 }}.</div>
<div class="title">第{{ index + 1 }}章</div>
</div>
</div>
</template>
@@ -41,11 +41,13 @@ function next() {
margin-bottom: 10rem;
padding: 10rem;
border-radius: 10rem;
border: 1px solid gray;
background: var(--color-item-bg);
color: var(--color-font-1);
&.active {
background: $second;
border: 1px solid $second;
background: var(--color-item-active);
color: var(--color-font-active-1);
}
}
}

2
src/components/IconWrapper.vue
View File

@@ -26,7 +26,7 @@ $w: 20rem;
border-radius: 3rem;
background: transparent;
transition: all .3s;
color: #0C8CE9;
color: $main;
&:hover {
background: $main;

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

@@ -9,6 +9,8 @@ import {$computed, $ref} from "vue/macros";
import WordList from "@/components/WordList.vue";
import ChapterList from "@/components/ChapterList.vue"
import Modal from "@/components/Modal/Modal.vue";
import IconWrapper from "@/components/IconWrapper.vue";
import BaseButton from "@/components/BaseButton.vue";
const store = useBaseStore()
let currentSelectDict: Dict = $ref({
@@ -16,7 +18,7 @@ let currentSelectDict: Dict = $ref({
chapterList: [],
chapterIndex: -1
} as any)
let step = $ref(1)
let step = $ref(0)
const currentSelectChapter: Word[] = $computed(() => {
return currentSelectDict.chapterList?.[currentSelectDict.chapterIndex] ?? []
@@ -68,16 +70,18 @@ async function selectDict(item: Dict) {
<div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
</div>
<div class="dict-list">
<div class="dict-item"
<div class="dict-item anim"
:class="currentSelectDict.name === i.name && 'active'" v-for="i in childrenEnglish"
@click="selectDict(i)"
>
<div class="name">{{ i.name }}</div>
<div class="desc">{{ i.description }}</div>
<div class="num">{{ i.length }}词</div>
<arrow-right v-if="currentSelectDict.name === i.name"
@click.stop="step = 1"
class="go" theme="outline" size="20" fill="#ffffff"
class="go"
theme="outline" size="20" fill="#ffffff"
:strokeWidth="2"/>
</div>
</div>
@@ -89,7 +93,7 @@ async function selectDict(item: Dict) {
v-model:active-index="currentSelectDict.chapterIndex"
/>
<div class="footer">
<div class="my-button">确定</div>
<BaseButton>确定</BaseButton>
</div>
</div>
</div>
@@ -124,8 +128,8 @@ async function selectDict(item: Dict) {
<div class="other">
<WordList class="word-list" :list="currentSelectChapter" :activeIndex="-1" :isActive="false"/>
<div class="footer">
<div class="my-button">返回</div>
<div class="my-button">确定</div>
<BaseButton>返回</BaseButton>
<BaseButton>确定</BaseButton>
</div>
</div>
</div>
@@ -144,7 +148,7 @@ $time: 0.3s;
$header-height: 60rem;
.slide {
width: 75vw;
width: 60vw;
height: 70vh;
.slide-list {
@@ -163,9 +167,22 @@ $header-height: 60rem;
cursor: pointer;
padding: 10rem;
border-radius: 10rem;
background: $dark-main-bg;
border: 1px solid $dark-main-bg;
position: relative;
background: var(--color-item-bg);
color: var(--color-font-1);
font-size: 14rem;
.name {
font-size: 18rem;
}
.desc {
color: var(--color-font-2);
}
.num {
font-weight: bold;
}
.go {
position: absolute;
@@ -174,15 +191,20 @@ $header-height: 60rem;
}
&.active {
background: $second;
border: 1px solid $second;
background: var(--color-item-active);
color: var(--color-font-active-1);
.desc {
color: var(--color-font-active-2);
}
}
}
$footer-height: 40rem;
.chapter-wrapper {
min-width: 25%;
min-width: 300rem;
.chapter-list {
height: calc(100% - $footer-height);
@@ -256,7 +278,6 @@ $footer-height: 40rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15rem;
}
}
}

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

@@ -153,14 +153,14 @@ $header-height: 60rem;
border-radius: $radius $radius 0 0;
.title {
color: var(--color-font);
color: var(--color-font-1);
font-weight: 500;
font-size: 28rem;
line-height: 33rem;
}
.sub-title {
color: var(--color-font);
color: var(--color-font-1);
font-weight: 500;
font-size: 14rem;
}

5
src/components/Side.vue
View File

@@ -10,6 +10,7 @@ import 'swiper/css';
import {Swiper as SwiperClass} from "swiper/types"
import {Dict, DictType} from "@/types.ts"
import PopConfirm from "@/components/PopConfirm.vue"
import BaseButton from "@/components/BaseButton.vue";
const store = useBaseStore()
const swiperIns0: SwiperClass = $ref(null as any)
@@ -102,9 +103,9 @@ function changeDict(dict: Dict, i: number) {
:title="`确认切换？`"
@confirm="store.changeDict(store.wrongDict)"
>
<div class="my-button hvr-grow">
<BaseButton>
切换
</div>
</BaseButton>
</PopConfirm>
</footer>
</div>

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

@@ -65,7 +65,7 @@ const store = useBaseStore()
align-items: center;
padding: $space;
//justify-content: center;
color: var(--color-font);
color: var(--color-font-1);
p {
font-size: 30rem;

13
src/components/Toolbar/SettingModal.vue
View File

@@ -201,6 +201,17 @@ const emit = defineEmits([
<span>{{ store.setting.value2 }}px</span>
</div>
</div>
<div class="line"></div>
<div class="row">
<label class="item-title">其他设置</label>
</div>
<div class="row">
<label class="sut-title">切换下一个单词时间</label>
<div class="wrapper">
<span>{{ store.setting.value2 }}毫秒</span>
</div>
</div>
</div>
</div>
</div>
@@ -214,7 +225,7 @@ const emit = defineEmits([
width: 40vw;
height: 80vh;
display: flex;
color: var(--color-font);
color: var(--color-font-1);
.tabs {
padding: 10rem 20rem;

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

@@ -39,7 +39,7 @@ const showSettingModal = $ref(false)
<template>
<header :class="!store.setting.showToolbar && 'hide'">
<div class="info" @click="store.dictModalIsOpen = true">
CTE-4 第5章
{{ store.currentDict.name }} 第{{ store.currentDict.chapterIndex + 1}}章
</div>
<div class="options">
<Tooltip title="切换主题">
@@ -126,7 +126,7 @@ header {
transition: all .3s;
.info {
font-size: 22rem;
font-size: 18rem;
color: black;
display: flex;
justify-content: center;

2
src/components/Tooltip.vue
View File

@@ -74,7 +74,7 @@ export default {
z-index: 999;
border-radius: 4rem;
padding: 10rem;
color: var(--color-font);
color: var(--color-font-1);
background: var(--color-header-bg);
box-shadow: 1px 1px 6px #bbbbbb;
}

3
src/components/WordList.vue
View File

@@ -80,11 +80,10 @@ watch(() => props.list, () => {
background: var(--color-header-bg);
border-radius: 6rem;
padding: 12rem;
//border: 1px solid gray;
display: flex;
justify-content: space-between;
transition: all .3s;
//color: black;
color: var(--color-font-1);
&.active {
background: $second;

1
src/main.ts
View File

@@ -4,7 +4,6 @@ import App from './App.vue'
// import Mobile from './Mobile.vue'
import {createPinia} from "pinia"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const pinia = createPinia()
// const app = createApp(Mobile)