style: 抽屉+弹层全局样式调整

components.d.ts

@@ -11,10 +11,19 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePick: typeof import('element-plus/es')['ElDatePick']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     PageForm: typeof import('./src/components/pageForm/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/App.vue

@@ -1,21 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { useLang } from "@/utils/lang";
-import  { getUserList } from '@/api';
-const { t } = useI18n();
-const { changeLang } = useLang();
 
-
-onMounted(() => {
-  getUserList().then(res => {
-    console.log(res);
-  })
-})
 </script>
 
 <template>
-  <div>Hello Vue {{ t("message.title") }}</div>
+  <router-view />
 </template>
 
 <style scoped lang="scss"></style>

src/main.ts

@@ -7,6 +7,7 @@ import ElementPlus from "element-plus";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import en from "element-plus/es/locale/lang/en";
 import Directives from '@/utils/directives';
+import '@/styles/common.scss';
 
 const pinia = createPinia();
 const app = createApp(App);

src/pages/Layout/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="mj-layout">
+    <el-container>
+      <el-aside :width> 左侧菜单模块 </el-aside>
+      <el-container>
+        <el-header>头部模块</el-header>
+        <el-main>
+          内容区域模块
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script setup lang="ts">
+defineOptions({
+  name: "Layout",
+});
+const isCollapse = ref(false);
+const width = computed(() => {
+  return isCollapse.value ? "60px" : "240px";
+});
+</script>
+<style lang="scss" scoped>
+.mj-layout {
+  height: inherit;
+  :deep(.el-container) {
+    height: inherit;
+  }
+
+  :deep(.el-main) {
+    background-color: #f8fafc;
+  }
+}
+</style>

src/pages/Login/index.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="">
+  <div class="mj-login">
-    {{ t("message.title") }}
+      <el-button>登录</el-button>
   </div>
 </template>
 <script setup lang="ts">
 import { reactive, ref, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
+import { useLang } from "@/utils/lang";
 const { t } = useI18n();
+const { changeLang } = useLang();
 defineOptions({ name: "Login" });
 </script>
 <style lang="scss" scoped></style>

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createWebHistory, createRouter } from 'vue-router'
 
 import Login from '@/pages/Login/index.vue';
-import HomeView from '@/pages/Home/index.vue';
+import HomeView from '@/pages/Layout/index.vue';
 const routes = [
   { path: '/', component: HomeView },
   { path: '/login', component: Login },

src/styles/common.scss

@@ -0,0 +1,11 @@
+@use './element.scss' as *;
+
+html,body{
+    height: 100%;
+    margin:0;
+    padding:0;
+}
+
+#app{
+    height: inherit;
+}

src/styles/element.scss

@@ -0,0 +1,41 @@
+
+
+// 当前样式表修改element 全局的样式
+
+// 标砖抽屉样式
+.standard-ui-drawer{
+    .el-drawer__header{
+        position: relative;
+        margin-bottom: 0;
+        padding-bottom: var(--el-drawer-padding-primary);
+        &::after{
+            content:'';
+            position: absolute;
+            left: var(--el-drawer-padding-primary);
+            bottom: 0;
+            height: 1px;
+            background-color: #E5E7EB;
+            width: calc(100% - (var(--el-drawer-padding-primary) * 2));
+        }
+    }
+}
+
+
+// 标注弹窗样式
+.standard-ui-dialog{
+    --el-dialog-padding-primary:0;
+    --el-dialog-inset-padding-primary:16px;
+    .el-dialog__header{
+        border-bottom: 1px solid #E5E7EB;
+        padding: var(--el-dialog-inset-padding-primary);
+    }
+    .el-dialog__headerbtn{
+        height: 60px;
+    }
+    .el-dialog__body{
+        padding: var(--el-dialog-inset-padding-primary);
+    }
+    .el-dialog__footer{
+        padding: var(--el-dialog-inset-padding-primary);
+    }
+}