调整按钮

2023-08-23 02:10:29 +08:00
parent 9d79637bc5
commit 2770c43542
6 changed files with 104 additions and 89 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,8 @@ import Statistics from "@/components/Modal/Statistics.vue";
 import useThemeColor from "@/hooks/useThemeColor";
 import Tooltip from "@/components/Tooltip.vue";
 import Toolbar from "@/components/Toolbar.vue"
+import {KeyboardOne} from "@icon-park/vue-next";
+import BaseButton from "@/components/BaseButton.vue";

 let input = $ref('')
 let wrong = $ref('')
@@ -188,9 +190,15 @@ const {appearance, toggle} = useThemeColor()
          </div>
          <div class="phonetic">{{ store.word.usphone }}</div>
          <div class="options">
-            <div class="option" :class="activeIndex === 0 &&'active'">忽略</div>
-            <div class="option" :class="activeIndex === 1 &&'active'">收藏</div>
-            <div class="option" :class="activeIndex === 2 &&'active'">下一个</div>
+            <BaseButton keyboard="`" :active="activeIndex === 0">
+              忽略
+            </BaseButton>
+            <BaseButton keyboard="Enter" :active="activeIndex === 1">
+              收藏
+            </BaseButton>
+            <BaseButton keyboard="Tab" :active="activeIndex === 2">
+              下一个
+            </BaseButton>
          </div>
        </div>
      </div>
@@ -248,22 +256,6 @@ const {appearance, toggle} = useThemeColor()
          gap: 15rem;
          font-size: 18rem;

-          .option {
-            cursor: pointer;
-            padding: 6rem 10rem;
-            border-radius: 4rem;
-            background: gray;
-            color: white;
-
-            &:hover {
-              //background: rgb(70, 67, 67) !important;
-              background: red;
-            }
-
-            &.active {
-              background: red;
-            }
-          }
        }

        .phonetic, .translate {
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -62,30 +62,4 @@ footer {
  cursor: pointer;
 }

-.my-button {
-  //font-size: 13rem;
-  cursor: pointer;
-  border-radius: 6rem;
-  padding: 0 15rem;
-  height: 28rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 18rem;
-  transition: all .3s;
-  background: rgb(75, 85, 99);

-  &:hover {
-    opacity: .7;
-  }
-
-  &.large {
-    height: 50rem;
-    font-size: 18rem;
-    padding: 0 18rem;
-  }
-
-  &.primary {
-    background: $main;
-  }
-}
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {KeyboardOne} from "@icon-park/vue-next";
+import Tooltip from "@/components/Tooltip.vue";
+
+const props = defineProps<{
+  keyboard: string,
+  active?: boolean
+}>()
+
+</script>
+
+<template>
+  <Tooltip :title="`快捷键: ${keyboard}`">
+    <div class="my-button" :class="active && 'active'">
+      <span><slot></slot></span>
+      <div class="key-notice">
+        <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
+        <span class="key">{{ keyboard }}</span>
+      </div>
+    </div>
+  </Tooltip>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/style";
+
+.my-button {
+  cursor: pointer;
+  border-radius: 6rem;
+  padding: 0 15rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all .3s;
+  background: rgb(75, 85, 99);
+  //background: rgb(60, 63, 65);
+  //background: var(--color-second-bg);
+  color: white;
+  height: 40rem;
+  line-height: 1;
+
+  & > span {
+    font-size: 16rem;
+  }
+
+  &:hover {
+    opacity: .7;
+  }
+
+  &.large {
+    height: 50rem;
+    font-size: 18rem;
+    padding: 0 18rem;
+  }
+
+  &.primary {
+    background: $main;
+  }
+
+  &.active {
+    opacity: .4;
+  }
+}
+
+.key-notice {
+  margin-left: 10rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12rem;
+  //gap: 2rem;
+
+  .key {
+    transform: scale(0.8);
+  }
+}
+</style>
--- a/src/components/Modal/Statistics.vue
+++ b/src/components/Modal/Statistics.vue
@@ -5,6 +5,7 @@ import {KeyboardOne, Like, ShareThree, Tea} from '@icon-park/vue-next'
 import Ring from "@/components/Ring.vue";
 import Tooltip from "@/components/Tooltip.vue";
 import Fireworks from "@/components/Fireworks.vue";
+import BaseButton from "@/components/BaseButton.vue";

 const store = useBaseStore()
 </script>
@@ -46,37 +47,19 @@ const store = useBaseStore()
        </div>
      </div>
      <div class="footer">
-        <Tooltip title="Ctrl + Enter键默写本章节">
-          <div class="my-button large">
-            默写本章节
-            <div class="key-notice">
-              <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
-              <span>Ctrl + Enter</span>
-            </div>
-          </div>
-        </Tooltip>
-        <Tooltip title="按Enter键重复本章节">
-          <div class="my-button large">
-            重复本章节
-            <div class="key-notice">
-              <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
-              <span>Enter</span>
-            </div>
-          </div>
-        </Tooltip>
-        <Tooltip title="按Tab键进行下一章节">
-          <div class="my-button large  ">
-            下一章节
-            <div class="key-notice">
-              <keyboard-one theme="outline" size="14" fill="#ffffff" :strokeWidth="2"/>
-              <span>Tab</span>
-            </div>
-          </div>
-        </Tooltip>
+        <BaseButton keyboard="Ctrl + Enter" >
+          默写本章节
+        </BaseButton>
+        <BaseButton keyboard="Enter" >
+          重复本章节
+        </BaseButton>
+        <BaseButton keyboard="Tab" >
+          下一章节
+        </BaseButton>
      </div>
    </div>
  </Modal>
-  <Fireworks v-if="store.dictModalIsOpen2"/>
+<!--  <Fireworks v-if="store.dictModalIsOpen2"/>-->
 </template>
 <style scoped lang="scss">
@import "@/assets/css/style";
@@ -160,15 +143,6 @@ const store = useBaseStore()
    align-items: center;
    justify-content: center;
    gap: 20rem;
-
-    .key-notice {
-      margin-left: 10rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12rem;
-      gap: 2rem;
-    }
  }
 }

--- a/src/components/Ring.vue
+++ b/src/components/Ring.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="ring">
    <svg height="100%" width="100%">
-      <circle class="circle-full" cx="45" cy="45" r="40" fill="none" stroke-width="8"
+      <circle class="circle-full" cx="45rem" cy="45rem" r="40rem" fill="none" stroke-width="8rem"
              stroke-linecap="round"></circle>
-      <circle ref="circleEl" class="circle-detail" cx="45" cy="45" r="40" fill="none" stroke-width="8"
+      <circle ref="circleEl" class="circle-detail" cx="45rem" cy="45rem" r="40rem" fill="none" stroke-width="8rem"
              stroke-linecap="round"
              stroke-dasharray="0,10000"></circle>
    </svg>
@@ -25,7 +25,7 @@ const circleEl = $ref(null)
 onMounted(() => {
  let circleLength = Math.floor(2 * Math.PI * 40);
  let val = Number(props.percentage.toFixed(0));
-  circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + ",10000");
+  circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + "rem,10000");
 })
 </script>
 <style scoped lang="scss">
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -34,7 +34,7 @@ const setting = reactive({

 <template>
  <header :class="!setting.showToolbar && 'hide'">
-    <div class="info">
+    <div class="info"  @click="store.dictModalIsOpen = true">
      CTE-4 第5章
    </div>
    <div class="options">
@@ -52,14 +52,11 @@ const setting = reactive({
      <Tooltip title="音效设置">
        <volume-notice theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
      </Tooltip>
-
      <IconRepeat></IconRepeat>
-
      <Tooltip title="单词本">
        <preview-open theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
        <preview-close-one theme="filled" size="20" fill="#0C8CE9" :strokeWidth="2"/>
      </Tooltip>
-      <div class="my-button" @click="store.dictModalIsOpen = true">ok</div>
      <div class="my-button" @click="store.dictModalIsOpen2 = true">ok</div>
      <Tooltip title="单词本">
        <menu-fold class="menu" @click="store.sideIsOpen = !store.sideIsOpen"
@@ -280,6 +277,7 @@ header {
    display: flex;
    justify-content: center;
    align-items: center;
+    cursor: pointer;
  }

  .options {