fix mobile display issue

src/main.ts

@@ -1,17 +1,16 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
-import "element-plus/dist/index.css";
-import "element-plus/theme-chalk/dark/css-vars.css";
 import { useDarkMode } from "./composables/useDarkMode";
 import router from "./router";
 import "./styles/global.css";
-
+import "element-plus/theme-chalk/dark/css-vars.css";
+import "@mdi/font/css/materialdesignicons.css"
+import "vuetify/styles"
 // Vuetify
 import "vuetify/styles";
 import { createVuetify } from "vuetify";
 import { aliases, mdi } from "vuetify/iconsets/mdi";
-import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using
 
 const vuetify = createVuetify({
   icons: {

src/styles/global.css

@@ -23,6 +23,11 @@ body {
       sans-serif; /* 默认字体 */
 }
 
+html.dark body{
+  background-color: var(--bg-color-solid);
+  color: var(--text-color);
+}
+
 #app {
   height: 100%;
   width: 100%;

src/views/manage/SetListView.vue

@@ -52,7 +52,7 @@
                         </div>
                     </div>
                     <div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
-                        <v-icon>list</v-icon>
+                        <v-icon>mdi-format-list-bulleted</v-icon>
                     </div>
                 </div>
             </el-aside>
@@ -97,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted,nextTick } from 'vue';
+import { ref, reactive, onMounted, nextTick } from 'vue';
 import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
 import { useRouter } from 'vue-router';
 import { useMainStore } from '@/store';
@@ -137,6 +137,7 @@ const mode = ref<number>(0);
 const view = (classname: string): void => {
     mode.value = 0;
     view_wordsets.value = classname;
+    close_sidebar();
     nextTick(() => {
         anime({
             targets: ".wordset",
@@ -151,6 +152,7 @@ const view_online = (set_name: string, class_name: string): void => {
     mode.value = 1;
     viewing.set = set_name;
     viewing.book = class_name;
+    close_sidebar();
     nextTick(() => {
         anime({
             targets: ".wordset",
@@ -210,12 +212,21 @@ const import_set = async (): Promise<void> => {
 const taggle_sidebar = (): void => {
     let node = document.getElementById("sidebar");
     let class_name = "sidebar-hidden";
-    if (node?.classList.contains(class_name)) {
+    if (node) {
+        if (node.classList.contains(class_name)) {
             node.classList.remove(class_name);
         }
-    else if (node) {
+    }
+};
+
+const close_sidebar = (): void => {
+    let node = document.getElementById("sidebar");
+    let class_name = "sidebar-hidden";
+    if (node) {
+        if (!node.classList.contains(class_name)) {
             node.classList.add(class_name);
         }
+    }
 };
 
 // Convert created lifecycle hook to onMounted
@@ -245,25 +256,31 @@ onMounted(() => {
 
 <style>
 @media screen and (max-width: 500px) {
-    .list-view-header{
-        height: 70px;
+    .list-view-header {
+        height: 60px;
     }
-    .list-view-aside{
+
+    .list-view-aside {
         width: 0;
         position: relative;
     }
 }
 
-@media screen and (max-width: 500px) {
-    .list-view-header{
+@media screen and (min-width: 500px) {
+    .list-view-header {
         height: 60px;
     }
-    .list-view-aside{
+
+    .list-view-aside {
         width: 180px;
     }
 }
 
-.list-view-header{
+.list-view-aside {
+    z-index: 1000;
+}
+
+.list-view-header {
     justify-content: space-between;
     animation: enter ease-out .6s backwards;
 }
@@ -276,7 +293,6 @@ onMounted(() => {
         width: 180px;
         margin-top: 20px;
         transition: .5s;
-        z-index: 100;
     }
 
     .sidebar-hidden {
@@ -319,7 +335,7 @@ onMounted(() => {
 
     #show-sidebar {
         position: absolute;
-        display: flex;
+        display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
@@ -335,8 +351,13 @@ onMounted(() => {
         backdrop-filter: blur(10px);
     }
 
+    .sidebar-hidden #show-sidebar {
+        display: flex;
+    }
+
     #wordsets-container {
         width: 100%;
+        box-sizing: border-box;
         display: flex;
         transition: .5s;
     }
@@ -459,6 +480,7 @@ html.bgimged .wordset {
     box-sizing: border-box;
     padding-bottom: 20px;
     position: relative;
+    z-index: 1;
 }
 
 #main-container {