优化详情页

jianyun8023 · Aug 4, 2024 · c299c6c · c299c6c
1 parent e4a7a56
commit c299c6c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 12 deletions.
diff --git a/app/calibre-pages/src/App.vue b/app/calibre-pages/src/App.vue
@@ -1,20 +1,27 @@
 <template>
   <el-container>
     <el-header>
-      <Header />
+      <Header/>
+
     </el-header>
     <el-container>
-      <el-aside width="200px" class="sidebar hidden-sm-and-down">
-        <Sidebar/>
-      </el-aside>
-      <el-container>
-        <el-main>
-          <router-view></router-view>
-        </el-main>
-      </el-container>
+      <el-row>
+        <el-col :span="4" :sm="24" :xs="24" :lg="2">
+          <el-aside class="sidebar">
+            <Sidebar/>
+          </el-aside>
+        </el-col>
+        <el-col :span="20" :sm="24" :xs="24" :lg="22">
+          <el-container>
+            <el-main>
+              <router-view></router-view>
+            </el-main>
+          </el-container>
+        </el-col>
+      </el-row>
     </el-container>
     <el-footer>
-      <Footer />
+      <Footer/>
     </el-footer>
   </el-container>
 </template>
@@ -34,8 +41,15 @@ export default {
   data() {
     return {
       isSidebarVisible: true,
+      isPhone: document.documentElement.clientWidth < 993
     }
   },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.isPhone = document.documentElement.clientWidth < 993 // 小于993视为平板及手机
+      console.log("isPhone: " + this.isPhone)
+    })
+  },
   methods: {
     toggleSidebar() {
       this.isSidebarVisible = !this.isSidebarVisible
@@ -47,11 +61,14 @@ export default {
 <style scoped>
 .sidebar {
   display: block;
+  --el-aside-width: 100%;
 }
 
 @media (max-width: 768px) {
   .sidebar {
-    display: none;
+    display: block;
+    height: 100px;
+    --el-aside-width: 100%;
   }
 }
 </style>
diff --git a/app/calibre-pages/src/components/Sidebar.vue b/app/calibre-pages/src/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-menu default-active="1" @select="handleSelect" :router="true">
+  <el-menu class="hidden-sm-and-down" default-active="1" @select="handleSelect" :router="true">
     <el-menu-item index="/">
       <el-icon><House /></el-icon>
       <span>Home</span>
@@ -17,6 +17,28 @@
       <span>Setting</span>
     </el-menu-item>
   </el-menu>
+   <el-menu class="hidden-md-and-up" default-active="1" @select="handleSelect" :router="true" mode="horizontal" >
+    <el-menu-item index="/">
+      <el-icon><House /></el-icon>
+      <span>Home</span>
+    </el-menu-item>
+    <el-menu-item index="/books">
+      <el-icon><Files /></el-icon>
+      <span>Books</span>
+    </el-menu-item>
+    <el-menu-item index="/search">
+      <el-icon><Search /></el-icon>
+      <span>Search</span>
+    </el-menu-item>
+    <el-menu-item index="/setting">
+      <el-icon><Setting /></el-icon>
+      <span>Setting</span>
+    </el-menu-item>
+  </el-menu>
+
+
+
+
 </template>
 
 <script>