Optimize UI interface

src/assets/css/style.scss

@@ -8,6 +8,7 @@
   --color-second-bg: rgb(238, 240, 244);
   --color-header-bg: white;
   --color-tooltip-bg: white;
+  --color-tooltip-shadow: #bbbbbb;
   --color-font-1: black;
   --color-font-2: gray;
   --color-font-active-1: white;
@@ -28,8 +29,8 @@ html[data-theme='dark'] {
   --color-header-bg: rgb(60, 63, 65);
   //--color-tooltip-bg: rgb(60, 63, 65);
   --color-tooltip-bg: #252525;
+  --color-tooltip-shadow: #3b3b3b;
   --color-font-1: white;
-
   --color-item-bg: gray;
 }
 
@@ -204,6 +205,7 @@ footer {
     gap: 8rem;
 
     .word {
+      font-size: 20rem;
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
       display: flex;
     }

src/components/Tooltip.vue

@@ -79,6 +79,7 @@ export default {
   padding: 10rem;
   color: var(--color-font-1);
   background: var(--color-tooltip-bg);
-  box-shadow: 1px 1px 6px #bbbbbb;
+  //box-shadow: 1px 1px 6px #bbbbbb;
+  box-shadow: 0 0 6px 1px var(--color-tooltip-shadow);
 }
 </style>

src/components/WordList.vue

@@ -81,7 +81,9 @@ const {
         <span class="phonetic">{{ word.usphone }}</span>
         <VolumeIcon class="volume" @click="playWordAudio(word.name)"></VolumeIcon>
       </div>
-      <div class="item-translate" v-if="word.trans.length">{{ word.trans.join('；') }}</div>
+      <div class="item-translate" v-if="word.trans.length">
+        <div v-for="item in word.trans">{{item}}</div>
+      </div>
     </ListItem>
   </div>
 </template>