vue3+element-plus 搭建的后台系统业务分析笔记（1）

页面架构：

如图：

整体是左右结构，main的部分上下结构

结构主要分成：sideber和main

布局：分成两种情况，响应式，mobile和desk的形式，整个过程都有动画

默认的样式是，desk的展开形式，也就是sidebar-open的形式，左边是position：fiix；top：0

右边是有个margin-left = 左边的with

当hidesidebar的时候，右边的margin-left为54，左边width最大54px

第二种是：mobile形式

open：sidebar fix，有宽度；main 的margin-left为0；

hide：main的magin-left;0;sidebar隐藏

注意：这里的open和hidesidebar这个变量控制，以及设备控制都是在状态管理中。