0905-2

src/components/CustomScrollContainer.vue

@@ -244,7 +244,7 @@ defineExpose({
   height: calc(100vh - var(--top-offset));
   background: var(--track-color);
   border-radius: calc(var(--scrollbar-width) / 2);
-  z-index: 5998;
+  z-index: 1998;
   pointer-events: none;
   opacity: var(--scrollbar-visible);
   transition: opacity 0.3s ease;
@@ -260,7 +260,7 @@ defineExpose({
   height: var(--thumb-height);
   background: var(--thumb-color);
   border-radius: calc(var(--scrollbar-width) / 2);
-  z-index: 5999;
+  z-index: 1999;
   transition: background 0.3s ease, opacity 0.3s ease;
   pointer-events: auto;
   cursor: pointer;

src/layouts/MainLayout.vue

@@ -3,7 +3,7 @@
     <q-header elevated>
       <q-toolbar class="bg-white" style="height: 80px;padding: 0 40px;box-sizing: border-box;">
         <div class="row items-center no-wrap">
-          <q-btn dense flat round icon="menu" style="color: black;" @click="toggleLeftDrawer" />
+          <q-btn flat round class="bg-grey-3 rounded-borders" icon="menu" style="color: black;" @click="toggleLeftDrawer" />
           <img src="~assets/images/logo.png" alt="logo" style="width: 83px; height: 62px;margin-right: 60px;" />
           <q-btn flat no-caps @click="$router.push('/test')">
             <div style="position: relative;">
@@ -127,7 +127,7 @@
       </q-toolbar>
     </q-header>
 
-    <q-drawer :v-model="leftDrawerOpen" side="left" bordered>
+    <q-drawer v-model="leftDrawerOpen" side="left" behavior="mobile" bordered>
       <q-btn color="primary" label="index" @click="goToPage('/')" />
       <q-btn color="primary" label="test" @click="goToPage('/test')" />
       <q-btn color="primary" label="reg" @click="goToPage('/reg')" />
@@ -194,13 +194,21 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
 import CustomScrollContainer from 'src/components/CustomScrollContainer.vue'
 
+
+const $q = useQuasar()
+
+watch(() => $q.screen.name, (newName) => {
+  console.log(`Screen size changed to: ${newName}`)
+})
+
+
 const leftDrawerOpen = ref(false)
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value
-  console.log(leftDrawerOpen.value)
 }
 
 // 搜索文本