头部改侧边栏

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" class="app-container">
       <router-view></router-view>
   </div>
 </template>
@@ -13,5 +13,14 @@ export default {
 </script>
 
 <style scoped>
-/* 添加你的样式 */
+#app{
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 100%;
+}
+/* .app-container{
+  margin: 0;
+  padding: 0;
+} */
 </style>

src/components/Layout.vue

@@ -1,167 +1,81 @@
 <template>
-  <div id="layout">
-    <el-header >
+  <div id="layout" class="layout-container">
+    <el-aside width="200px" class="nav-sidebar">
       <div class="logo">
-        <span>管理平台</span>
+        <el-image src="/logo.png" fit="contain" />
       </div>
-      <div class="nav-menu">
-        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
-          <el-menu-item index="/" style="margin-left:230px">告警管理</el-menu-item>
-        </el-menu>
-      </div>
-      <div class="user-info">
-        <span>客流分析</span>
-        <span>|</span>
-        <span @click="showDialog = true" style="cursor: pointer;">选择摊位</span>
-        <span v-if="selectedStoreName">| 已选择: {{ selectedStoreName }}</span>
-        <span>|</span>
-        <span>区域管理</span>
-        <el-dropdown @command="handleCommand" placement="bottom-end">
-          <span class="el-dropdown-link">
-            {{ username }} <i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item command="logout">登出</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </div>
-    </el-header>
-    <router-view />
+      <el-menu :default-active="activeIndex" class="el-menu-part" router>
+        <el-menu-item index="/">告警管理</el-menu-item>
+        <el-menu-item index="/test">测试</el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-main class="main-content">
+      <router-view />
+    </el-main>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed, watch, onMounted } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-// import type { Store } from '@/utils/type'
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
-export default defineComponent({
-  name: 'Layout',
-  components: {
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
-    const token = ref(localStorage.getItem('token') || '');
-    const isUserLoggedIn = computed(() => !!token.value);
-    const username = ref(localStorage.getItem('username') || '');
-    // const isUserLoggedIn = computed(() => !!username.value);
-    const activeIndex = ref(route.path);
-    const showDialog = ref(false);
-    // const selectedStore = ref<Store | null>(null);
-    const selectedStoreName = ref(localStorage.getItem('store_name') || '');
+const route = useRoute();
+const activeIndex = ref(route.path);
 
-
-    const handleCommand = (command: string) => {
-      if (command === 'logout') {
-        localStorage.removeItem('username');
-        localStorage.removeItem('token');
-        localStorage.removeItem('store_id');
-        localStorage.removeItem('store_name');
-        token.value = '';
-        username.value = '';
-        selectedStoreName.value = '';
-        router.push('/login');
-      }
-    };
-
-
-
-    watch(
-      () => route.path,
-      (newPath) => {
-        activeIndex.value = newPath;
-        // if (!token.value && newPath !== '/login') {
-        //   router.push('/login');
-        // }
-      }
-    );
-
-    onMounted(() => {
-      // if (!token.value) {
-      //   router.push('/login');
-      // } else {
-      //   selectedStoreName.value = localStorage.getItem('store_name') || '';
-      // }
-    });
-
-    return {
-      username,
-      token,
-      isUserLoggedIn,
-      activeIndex,
-      handleCommand,
-      showDialog,
-      selectedStoreName,
-    };
-  },
-});
+watch(
+  () => route.path,
+  (newPath) => {
+    activeIndex.value = newPath;
+  }
+);
 </script>
 
 <style scoped>
-.el-header {
-  background-color: #1f2d3d;
-  color: #fff;
+.layout-container {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 20px;
-  margin: 10px 20x;
+  height: 100%;
+  width: 100%;
+  margin: 1px;
+  /* padding: 1px; */
+  
+}
+
+.nav-sidebar {
+  background-color: #1f2d3d;
+  /* width: 200px; */
+  color: #fff;
 }
 
 .logo {
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-}
-
-.nav-menu {
-  flex-grow: 1;
   display: flex;
   justify-content: center;
-  margin-left: 110px;
-  margin-right: 100px;
+  margin-bottom: 30px;
 }
 
-.el-menu-demo {
+.el-menu-part {
   background-color: transparent;
   color: #fff;
-  display: flex;
-  justify-content: space-between;
-  /* justify-content: flex-start; */
-  flex-grow: 1;
+  border: 1px;
+  /* width: 200px; */
 }
 
-.el-menu-demo .el-menu-item {
-  padding: 0 20px;
+.el-menu-part .el-menu-item {
+  /* padding:30px 0; */
+  padding: 0px;
+  margin: 0;
   text-align: center;
   font-size: 16px;
-  color: #fff;
   font-weight: bold;
+  color: #fff;
 }
 
-.el-menu-demo .el-menu-item:hover {
+.el-menu-part .el-menu-item:hover {
   color: #00aaff;
 }
 
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-left: 10px;
-}
-
-.user-info span {
-  color: #fff;
-}
-
-.el-dropdown-link {
-  cursor: pointer;
-  color: #fff;
-  display: flex;
-  align-items: center;
+.main-content {
+  flex-grow: 1;
+  padding: 20px;
 }
 </style>