diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index 7c402b49ef52e69d6f8ce4573f06d6b7e22db39c..2e694e93717d50a823c1305c6e6110efc84dd972 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -11,7 +11,8 @@
       ]"
     >
       <!-- side -->
-      <lay-side :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark':'light'">
+      <div v-if="!appStore.collapse" class="layui-layer-shade hidden-sm-and-up" style="opacity: 0.1; z-index: 9999;"></div>
+      <lay-side id="lay-side" :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark':'light'">
         <lay-logo v-if="appStore.logo"></lay-logo>
         <lay-scroll style="height: calc(100% - 62px)">
           <global-menu :collapse="appStore.collapse"></global-menu>
@@ -28,10 +29,10 @@
               ></lay-icon>
               <lay-icon v-else type="layui-icon-shrink-right"></lay-icon>
             </lay-menu-item>
-            <lay-menu-item @click="refresh">
+            <lay-menu-item class="hidden-xs-only" @click="refresh">
               <lay-icon type="layui-icon-refresh-one"></lay-icon>
             </lay-menu-item>
-            <lay-menu-item v-if="appStore.breadcrumb" style="padding: 0px 15px;">
+            <lay-menu-item class="hidden-xs-only" v-if="appStore.breadcrumb" style="padding: 0px 15px;">
               <GlobalBreadcrumb></GlobalBreadcrumb>
             </lay-menu-item>
           </lay-menu>
@@ -141,6 +142,7 @@ export default {
       // mobile
       if(document.body.clientWidth < 768) {
         appStore.collapse = true;
+        document.addEventListener('click', checkClick);
       }
       userInfoStore.loadMenus();
       userInfoStore.loadPermissions();
@@ -152,6 +154,19 @@ export default {
       })
     })
 
+    const checkClick = (event: any) => {
+      let dom = document.getElementById("lay-side"); // 这里是侧边栏元素
+
+      if (dom) {
+        if (!dom.contains(event.target) && !event.target.classList.contains("layui-icon-spread-left")) {
+          // 不在侧边栏内点击，隐藏即可
+          if (!appStore.collapse) {
+            appStore.collapse = true;
+          }
+        }
+      }
+    }
+
     const changeVisible = function () {
       visible.value = !visible.value;
     };
@@ -193,6 +208,13 @@ export default {
 </script>
 
 <style>
+@media screen and (max-width: 767px) {
+  .layui-side {
+    position: absolute;
+    height: 100vh;
+  }
+}
+
 /*鼠标经过背景色，增加了improtant，否则设置无效*/
 .layui-header .layui-nav-item .layui-icon:hover {
   background: whitesmoke !important;
diff --git a/src/store/app.ts b/src/store/app.ts
index 69d6ca8b960c31ad82a2f325dc8ab353980bb69a..9aa34a6fdf7967342b56b3ed17b816922e38dfb7 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -9,7 +9,7 @@ export const useAppStore = defineStore({
       level: true,
       inverted: false,
       routerAlive: true,
-      collapse: false,
+      collapse: document.body.clientWidth < 768, // 移动端默认收起，PC端默认展开
       subfield: false,
       theme: 'light',
       breadcrumb: true,
diff --git a/src/styles/admin.css b/src/styles/admin.css
index 2dbef452f7b83c344ec79404852e47f5e8583bd5..2f83362b843063e744aeb1a0921305e1c4d88fac 100644
--- a/src/styles/admin.css
+++ b/src/styles/admin.css
@@ -69,7 +69,7 @@
   color: #393d49;
 }
 .layui-side {
-  z-index: 9999;
+  z-index: 10000;
   width: 230px !important;
   background: rgb(34, 36, 37, 98%);
   box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
@@ -87,8 +87,15 @@
 .layui-layout.collapse .layui-logo {
   width: 60px;
 }
-.layui-layout.collapse .layui-side {
-  width: 60px !important;
+@media screen and (max-width: 767px) {
+  .layui-layout.collapse .layui-side {
+    width: 0 !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .layui-layout.collapse .layui-side {
+    width: 60px !important;
+  }
 }
 .layui-layout.collapse .layui-body {
   left: 60px;
diff --git a/src/styles/display.css b/src/styles/display.css
new file mode 100644
index 0000000000000000000000000000000000000000..70be0e7c62e99a3451ea496db3fdb61f827bd13d
--- /dev/null
+++ b/src/styles/display.css
@@ -0,0 +1,65 @@
+@media screen and (max-width: 767px) {
+  .hidden-xs-only {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .hidden-sm-and-down {
+    display: none !important;
+  }
+
+  @media screen and (min-width: 768px) {
+    .hidden-sm-only {
+      display: none !important;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .hidden-sm-and-up {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  .hidden-md-and-down {
+    display: none !important;
+  }
+
+  @media screen and (min-width: 992px) {
+    .hidden-md-only {
+      display: none !important;
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .hidden-md-and-up {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1919px) {
+  .hidden-lg-and-down {
+    display: none !important;
+  }
+
+  @media screen and (min-width: 1200px) {
+    .hidden-lg-only {
+      display: none !important;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .hidden-lg-and-up {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .hidden-xl-only {
+    display: none !important;
+  }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 600a0ae9dc3f53d101dafeab6a510529b7ac56a5..32e8a0951ba9a81c0ec5faf4becffdd2e4f1b0e1 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,4 +1,5 @@
 @import url(./admin.css);
+@import url(./display.css);
 @import url(./mobile.css);
 @import url(./reset.css);