From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期五, 26 九月 2025 09:24:03 +0800
Subject: [PATCH] H5静态化
---
admin/src/layouts/AppLayout.vue | 85 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 85 insertions(+), 0 deletions(-)
diff --git a/admin/src/layouts/AppLayout.vue b/admin/src/layouts/AppLayout.vue
new file mode 100644
index 0000000..51bb3e9
--- /dev/null
+++ b/admin/src/layouts/AppLayout.vue
@@ -0,0 +1,85 @@
+<template>
+ <el-container class="app-layout">
+ <el-aside :class="{collapse:menuData.collapse}">
+ <Menu/>
+ </el-aside>
+ <el-main>
+ <header>
+ <AppHeader/>
+ </header>
+ <main>
+ <transition name="fade">
+ <router-view></router-view>
+ </transition>
+ </main>
+ </el-main>
+ </el-container>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Header from '@/components/common/Header'
+import Menu from '@/components/common/Menu'
+export default {
+ name: 'DefaultLayout',
+ components: { AppHeader: Header, Menu },
+ computed: {
+ ...mapState(['menuData'])
+ }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/assets/style/variables.scss";
+.el-container {
+ background: #F7F8F9;
+ height: 100%;
+ display: flex;
+ overflow: hidden;
+ // 宸﹁竟鑿滃崟
+ .el-aside {
+ width: $menu-width !important;
+ flex-shrink: 0;
+ height: 100%;
+ overflow-y: auto;
+ background: $primary-color;
+ color: #fff;
+ transition: width ease .3s;
+ &.collapse {
+ width: 64px !important;
+ }
+ }
+ // 鍙宠竟鍐呭
+ .el-main {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ overflow-y: hidden !important;
+ & > header {
+ height: $header-height;
+ flex-shrink: 0;
+ }
+ & > main {
+ height: 100%;
+ /* overflow-y: auto;*/
+ }
+ }
+}
+// 椤甸潰杩囨浮鍔ㄧ敾
+.fade-enter-active, .fade-leave-active {
+ transition: all .5s;
+ opacity: 1;
+ position: absolute;
+ width: 100%;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+ transform: translateY(200px);
+ opacity: 0;
+ transition: all .5s;
+ position: absolute;
+}
+</style>
--
Gitblit v1.9.3