UI modify

src/App.vue

@@ -4,6 +4,22 @@
 
 <script>
 
+window.htmlClasses = [];
+window.addHtmlclasses = (classname)=>{
+  let index = window.htmlClasses.indexOf(classname);
+  if(index===-1){
+    window.htmlClasses.push(classname);
+    document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
+  }
+}
+window.delHtmlclasses = (classname)=>{
+  let index = window.htmlClasses.indexOf(classname);
+  if(index!=-1){
+    window.htmlClasses.splice(index,1);
+    document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
+  }
+}
+
 export default {
   name: 'App',
   data() {
@@ -22,14 +38,18 @@ export default {
       window.wordsets = JSON.parse(wordsets);
     } else window.wordsets = {};
     let res = localStorage.getItem("bgimg");
-    document.body.style.backgroundImage = `url("${res}")`;
+    if(res){
+      document.body.style.backgroundImage = `url("${res}")`;
+      document.body.style.backgroundSize = "cover";
+      window.addHtmlclasses("bgimged");
+    }
     const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
-    if(isDarkTheme.matches) document.getElementsByTagName("html")[0].className= "dark";
+    if(isDarkTheme.matches) window.addHtmlclasses("dark");
     isDarkTheme.addEventListener('change', (event) => {
       if (event.matches) {
-        document.getElementsByTagName("html")[0].className= "dark";
+        window.addHtmlclasses("dark");
       } else {
-        document.getElementsByTagName("html")[0].className= "";
+        window.delHtmlclasses("dark");
       }
     });
   }
@@ -37,6 +57,7 @@ export default {
 </script>
 
 <style>
+
 html {
   --bg-color: #ffffffae;
   --text-color: #464646;
@@ -51,11 +72,13 @@ html.dark {
   0% {
     translate: 100px 0;
     opacity: 0;
+    filter: blur(20px);
   }
 
   100% {
     translate: 0 0;
     opacity: 1;
+    filter: blur(0px);
   }
 }
 
@@ -63,7 +86,7 @@ html.dark {
   height: calc(100%-20px);
   width: calc(100%-20px);
   padding: 20px;
-  animation: enter ease-out .6s;
+  animation: enter ease-out .6s backwards;
 }
 
 .colbox {
@@ -81,10 +104,14 @@ html.dark {
   box-shadow: var(--el-box-shadow);
   padding: 20px;
   margin: 10px;
-  background-color: var(--bg-color);
   color: var(--text-color);
 }
 
+html.bgimged .card{
+  background-color: var(--bg-color);
+  backdrop-filter: blur(15px);
+}
+
 
 .wordset {
   border-radius: 13px;

src/components/Editor.vue

@@ -4,7 +4,7 @@
             <span class="text-large font-600 mr-3"> 编辑单词本 </span>
         </template>
     </el-page-header>
-    <el-container v-if="mode < 2" class="container card">
+    <el-container v-if="mode < 2" id="main-container" class="container card">
         <el-header id="header" class="colbox">
             <div class="no">共有{{ Object.keys(this.wordsets).length }}个单词集合</div>
             <div>
@@ -15,12 +15,12 @@
                 <el-button @click="mode = 1" type="primary"><box-icon color="white" name='plus'></box-icon>新建单词本</el-button>
             </div>
         </el-header>
-        <el-main>
-            <div v-if="mode === 0" class="colbox" if="sets-container">
-                <el-collapse accordion v-model="active_set_class" style="width: 100%;">
+        <el-main id="wordsets-container">
+            <div v-if="mode === 0"  class="colbox" if="sets-container">
+                <el-collapse  accordion v-model="active_set_class" style="width: 100%;border: none;">
                     <el-collapse-item v-for="(set_class, class_name) in wordsets" :title="class_name" :key="class_name"
                         :name="class_name">
-                        <div class="colbox">
+                        <div class="colbox wordclass">
                             <div v-for="(wordset, index) in set_class" :key="index" class="wordset rowbox">
                                 <div class="no">
                                     {{ index + 1 }}
@@ -40,7 +40,6 @@
                         </div>
                     </el-collapse-item>
                 </el-collapse>
-
             </div>
             <div v-if="mode === 1" id="new" class="rowbox">
                 <el-page-header @back="mode = 0">
@@ -201,8 +200,13 @@ export default {
             return;
         },
         del_word(index) {
+            let word = this.table[index].word.concat();
             this.table.splice(index, 1);
             localStorage.setItem(this.editing.id, JSON.stringify(this.table));
+            ElMessage({
+                message: `已删除 ${word}`,
+                type: 'warning',
+            });
         },
         async export_set() {
             let fileHandle = await window.showSaveFilePicker({
@@ -269,15 +273,11 @@ export default {
 
 <style scoped>
 #header {
-    border-bottom: solid 1px #bcbcbc;
+    /* border-bottom: solid 1px #bcbcbc; */
     justify-content: space-between;
     height: 40px;
 }
 
-html.dark #header {
-    border-bottom: solid 1px #616161;
-}
-
 .no {
     font-size: 20px;
     font-weight: 700;
@@ -291,6 +291,7 @@ html.dark #header {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-height: 60px;
 }
 
 .option {
@@ -319,4 +320,23 @@ html.dark #header {
 }
 
 
+.el-collapse{
+    --el-collapse-header-bg-color:#FFFFFF00;
+    --el-collapse-content-bg-color:#FFFFFF00;
+    --el-collapse-header-font-size:18px;
+}
+
+.wordclass{
+    flex-wrap: wrap
+}
+
+#wordsets-container{
+    overflow-x: auto;
+    height: 100%;
+}
+
+#main-container{
+    height: 87%;
+}
+
 </style>

src/components/Home.vue

@@ -46,17 +46,16 @@ export default {
         open_setting_dialog() {
             this.settingVisible = true;
         },
-        toggleDark(){
-            if(this.isdark){
-                document.getElementsByTagName("html")[0].className= "dark";
-            }
-            else{
-                document.getElementsByTagName("html")[0].className= "";
+        toggleDark() {
+            if (this.isdark) {
+                window.addHtmlclasses("dark");
+            } else {
+                window.delHtmlclasses("dark");
             }
         }
     },
-    created(){
-        if(document.getElementsByTagName("html")[0].className === "dark"){
+    created() {
+        if (document.getElementsByTagName("html")[0].className.indexOf("dark")!=-1) {
             this.isdark = true;
         }
     }
@@ -107,7 +106,7 @@ export default {
     text-decoration: none;
 }
 
-html.dark .button{
+html.dark .button {
     background-color: rgba(56, 56, 56, 0.301);
     border: solid 1px #848484;
     box-shadow: 0px 12px 32px 4px rgba(198, 198, 198, 0.078), 0px 8px 20px rgba(216, 216, 216, 0.171);
@@ -119,8 +118,8 @@ html.dark .button{
 
 #ball {
     background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
-    width: 1500px;
-    height: 1500px;
+    width: 1350px;
+    height: 1350px;
     border-radius: 100%;
     position: absolute;
     top: -100%;
@@ -129,6 +128,10 @@ html.dark .button{
     z-index: -1;
 }
 
+html.bgimged #ball{
+    backdrop-filter: blur(20px);
+}
+
 #main {
     margin: 80px;
 }

src/components/Recite.vue

@@ -41,7 +41,7 @@
                 <el-button v-if="current < answered" @click="next">下一个</el-button>
                 <el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
                 <el-button @click="terminate" type="danger">停止背诵</el-button>
-                <box-icon class="btn" style="margin-left: 10px;translate: 0 4px;" @click="audio_play"
+                <box-icon color="var(--text-color)" class="btn" style="margin-left: 10px;translate: 0 4px;" @click="audio_play"
                     name='volume-full'></box-icon>
             </p>
             <div id="trans">{{ word.type }} {{ word.trans }}</div>