diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index e1aedd5f..a98b221f 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -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; } diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue index bb215ba3..f5770e8c 100644 --- a/src/components/BaseButton.vue +++ b/src/components/BaseButton.vue @@ -11,7 +11,7 @@ const props = defineProps<{ @@ -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); } } } diff --git a/src/components/IconWrapper.vue b/src/components/IconWrapper.vue index 5982bd40..a5bb0747 100644 --- a/src/components/IconWrapper.vue +++ b/src/components/IconWrapper.vue @@ -26,7 +26,7 @@ $w: 20rem; border-radius: 3rem; background: transparent; transition: all .3s; - color: #0C8CE9; + color: $main; &:hover { background: $main; diff --git a/src/components/Modal/DictModal.vue b/src/components/Modal/DictModal.vue index 57c8b7e6..79c34f79 100644 --- a/src/components/Modal/DictModal.vue +++ b/src/components/Modal/DictModal.vue @@ -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) {
六级
-
{{ i.name }}
{{ i.description }}
{{ i.length }}词
+
@@ -89,7 +93,7 @@ async function selectDict(item: Dict) { v-model:active-index="currentSelectDict.chapterIndex" />
-
确定
+ 确定
@@ -124,8 +128,8 @@ async function selectDict(item: Dict) {
-
返回
-
确定
+ 返回 + 确定
@@ -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; - } } } diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue index 6857002d..e45bed19 100644 --- a/src/components/Modal/Modal.vue +++ b/src/components/Modal/Modal.vue @@ -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; } diff --git a/src/components/Side.vue b/src/components/Side.vue index d2b636e7..542599c4 100644 --- a/src/components/Side.vue +++ b/src/components/Side.vue @@ -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)" > -
+ 切换 -
+ diff --git a/src/components/Toolbar/FeedbackModal.vue b/src/components/Toolbar/FeedbackModal.vue index 300ee1b6..0a27c581 100644 --- a/src/components/Toolbar/FeedbackModal.vue +++ b/src/components/Toolbar/FeedbackModal.vue @@ -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; diff --git a/src/components/Toolbar/SettingModal.vue b/src/components/Toolbar/SettingModal.vue index 8d011a64..d052070e 100644 --- a/src/components/Toolbar/SettingModal.vue +++ b/src/components/Toolbar/SettingModal.vue @@ -201,6 +201,17 @@ const emit = defineEmits([ {{ store.setting.value2 }}px + +
+
+ +
+
+ +
+ {{ store.setting.value2 }}毫秒 +
+
@@ -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; diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue index 24359a97..f6fcde03 100644 --- a/src/components/Toolbar/Toolbar.vue +++ b/src/components/Toolbar/Toolbar.vue @@ -39,7 +39,7 @@ const showSettingModal = $ref(false)