feat: 首页改版

src/App.vue

@@ -1,33 +1,49 @@
 <script setup lang="ts">
 import Header from '@/components/Layout/Header/Header.vue'
+import Left from '@/components/Layout/Left/Left.vue'
 import Floor from '@/components/Layout/Floor/Floor.vue'
-import Right from '@/components/Layout/Right/Right.vue'
+// import Right from '@/components/Layout/Right/Right.vue'
+import { useComponentStore } from '@/store/modules/component'
+
+//store
+const componentStore = useComponentStore()
+
 </script>
 
 <template>
-  <Header></Header>
-  <div class="w-full flex flex-col justify-between mb-20">
-    <el-row>
-      <el-col :xl="4" :lg="3" :sm="1" class=""></el-col>
-      <el-col :xl="16" :lg="18" :sm="22" class="mt-4">
-        <el-row class="flex-1">
-          <el-col :lg="19" :sm="19" class="">
-            <router-view v-slot="{ Component, route }">
-              <transition name="animation" mode="out-in">
-                <component :is="Component" :key="route.path"></component>
-              </transition>
-            </router-view>
-          </el-col>
-          <el-col :lg="5" :sm="5" class="">
-            <Right/>
-          </el-col>
-        </el-row>
-      </el-col>
-      <!-- <el-col :lg="4" :sm="1" class="flex bg-gray-200"></el-col> -->
-      <el-col :xl="4" :lg="3" :sm="1"></el-col>
-    </el-row>
-  </div>
-  <Floor></Floor>
+  <el-container>
+    <!-- left -->
+    <el-aside class="fixed top-0 left-0 h-full z-10 c-md:block c-sm:hidden c-xs:hidden" width="240px" v-show="!componentStore.leftCom">
+        <Left></Left>
+    </el-aside>
+    <el-drawer 
+      show-close
+      size="240px" 
+      :with-header="false" 
+      v-model="componentStore.leftComDrawer" 
+      direction="ltr"
+      >
+      <Left bgColor="#fff"></Left>
+    </el-drawer>
+
+    <!-- right -->
+    <el-container  :class="!componentStore.leftCom ? 'c-md:ml-[240px]' : ''">
+      <el-header>
+        <Header/>
+      </el-header>
+      <el-main>
+        <router-view v-slot="{ Component, route }">
+          <transition name="animation" mode="out-in">
+            <component :is="Component" :key="route.path"></component>
+          </transition>
+        </router-view>
+      </el-main>
+      <el-footer class="mb-6 mt-12">
+        <Floor />
+      </el-footer>
+    </el-container>
+
+  </el-container>
 </template>
 
 <style scoped>