'layout框架'

src/layout/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="layout_container">
+    <!--左侧菜单-->
+    <div class="layout_slider">
+      q
+    </div>
+    <!--顶部导航-->
+    <div class="layout_tabbar">
+      d
+    </div>
+    <!--内容展示区域-->
+    <div class="layout_main">
+      <div>
+        <p style="height: 1000px"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.layout_container{
+  height: 100vh;
+  width: 100%;
+  background: lightskyblue;
+
+  .layout_slider{
+    width: $base-menu-width;
+    height: 100vh;
+    background: $base-menu-background;
+  }
+
+  .layout_tabbar{
+    position: absolute;
+    width: calc(100% - $base-menu-width);
+    height: $base-tabbar-height;
+    background: grey;
+    top: 0px;
+    left:260px;
+  }
+
+  .layout_main{
+    position: absolute;
+    width: calc(100% - $base-menu-width);
+    height: calc(100vh - $base-tabbar-height);
+    background: white;
+    top: $base-tabbar-height;
+    left:260px;
+    padding: 20px;
+    overflow: auto;
+  }
+}
+
+</style>

src/main.ts

@@ -8,10 +8,15 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 //引入路由
 import router from '@/router'
-
+//引入仓库
 import pinia from '@/store'
 
 import App from '@/App.vue'
+//svg插件需要配置代码
+import 'virtual:svg-icons-register'
+//引入模板的全局的样式
+import '@/styles/index.scss'
+
 //获取应用实例对象
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -34,9 +39,7 @@ app.use(ElementPlus, {
 //   },
 // })
 
-//svg插件需要配置代码
+
-import 'virtual:svg-icons-register'
-import '@/styles/index.scss'
 app.use(router)
 app.use(pinia)
 // 将应用挂载到挂载点上

src/router/routes.ts

@@ -2,13 +2,13 @@
 export const constantRoute = [
   {
     name: 'login',
-    path: '/',
+    path: '/login',
     component: () => import('@/views/login/index.vue'),
   },
   {
     name: 'home',
-    path: '/home',
+    path: '/',
-    component: () => import('@/views/home/index.vue'),
+    component: () => import('@/layout/index.vue'),
   },
   {
     name: '404',

src/styles/index.scss

@@ -1,3 +1,18 @@
 //引入清除默认样式
-@import "reset";
+@import './reset.scss';
-//设置scss全局变量
+
+//滚动条外观设置
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  //background: $base-menu-background;
+  background: white;
+}
+
+::-webkit-scrollbar-thumb{
+  width: 10px;
+  background-color: whitesmoke;
+  border-radius: 10px;
+}

src/styles/reset.scss

@@ -1,161 +1,186 @@
-* {
+*,
+*:after,
+*:before {
   box-sizing: border-box;
-  background-repeat: no-repeat;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
 
-body {
+  outline: none;
-  margin: 0;
-  line-height: 1;
 }
 
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
 article,
 aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
 footer,
 header,
+hgroup,
+menu,
 nav,
+output,
+ruby,
 section,
-main,
+summary,
-figcaption,
+time,
-figure,
+mark,
-menu,
-details {
-  display: block;
-}
-
 audio,
-canvas,
 video {
-  display: inline-block;
+  font: inherit;
-}
+  font-size: 100%;
-
-img {
-  display: block;
-  border: 0;
-}
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
   margin: 0;
   padding: 0;
-  font-weight: normal;
-}
 
-p {
+  vertical-align: baseline;
-  margin: 0;
-  padding: 0;
-}
 
-address,
+  border: 0;
-cite,
-dfn,
-em,
-var {
-  font-style: normal;
 }
 
-ul,
+article,
-ol {
+aside,
-  margin: 0;
+details,
-  padding: 0;
+figcaption,
-  list-style-type: none;
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 
-a {
+body {
-  background-color: transparent;
+  line-height: 1;
-  font-size: inherit;
-  color: inherit;
-  text-decoration: none;
-
-  &:active,
-  &:hover {
-    outline: 0;
-  }
 }
 
-:focus {
+ol,
-  outline: 0;
+ul {
+  list-style: none;
 }
 
-button,
+blockquote,
-input,
+q {
-select,
+  quotes: none;
-textarea {
-  margin: 0;
-  font-size: inherit;
-}
 
-button,
+  &:before,
-html [type="button"],
+  &:after {
-[type="reset"],
+    content: '';
-[type="submit"] {
+    content: none;
-  padding: 0;
-  border: 0;
-  color: inherit;
-  background-color: transparent;
-  -webkit-appearance: button;
-  cursor: pointer;
   }
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
 }
 
-input {
+sub,
-  padding: 0;
+sup {
-  line-height: normal;
+  font-size: 75%;
+  line-height: 0;
+
+  position: relative;
 
-  &::-webkit-input-placeholder {
+  vertical-align: baseline;
-    font-weight: 300;
 }
 
-  &::-ms-input-placeholder {
+sup {
-    font-weight: 300;
+  top: -.5em;
 }
 
-  &::-moz-placeholder {
+sub {
-    font-weight: 300;
+  bottom: -.25em;
 }
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 
-[type="number"] {
+input,
-  -moz-appearance: textfield;
+textarea,
+button {
+  font-family: inhert;
+  font-size: inherit;
 
-  &::-webkit-inner-spin-button,
+  color: inherit;
-  &::-webkit-outer-spin-button {
-    margin: 0;
-    height: auto;
-    -webkit-appearance: none;
-  }
 }
 
-[type="search"] {
+select {
-  -webkit-appearance: textfield;
+  text-indent: .01px;
+  text-overflow: '';
 
-  &::-webkit-search-cancel-button,
+  border: 0;
-  &::-webkit-search-decoration {
+  border-radius: 0;
-    -webkit-appearance: none;
-  }
-}
 
-textarea {
-  overflow: auto;
-  resize: none;
   -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
-select {
+select::-ms-expand {
-  -webkit-appearance: none;
+  display: none;
-  background-color: #fff;
 }
 
-table {
+code,
-  border-collapse: collapse;
+pre {
-  border-spacing: 0;
+  font-family: monospace, monospace;
+  font-size: 1em;
 }

src/styles/variable.scss

@@ -1,4 +1,17 @@
-//引入清除默认样式
+//项目提供scss全局变量
-@import "reset";
+//定义项目主题颜色
-//给项目scss提供全局变量
+
-$h1-color:green;
+//左侧的菜单的宽度
+$base-menu-width:260px;
+//左侧菜单的背景颜色
+$base-menu-background:darkslateblue;
+$base-menu-min-width:50px;
+
+// 顶部导航的高度
+$base-tabbar-height:50px;
+
+//左侧菜单logo高度设置
+$base-menu-logo-height:50px;
+
+//左侧菜单logo右侧文字大小
+$base-logo-title-fontSize:20px;

src/views/404/index.vue

@@ -1,7 +1,24 @@
 <template>
-  <div>
+  <el-result title="404" sub-title="抱歉！ 请求地址错误！">
-    <h1>404</h1>
+    <template #icon>
-  </div>
+      <el-image class="image_error"
+          src="src/assets/images/error_images/404.png"
+      />
     </template>
-<script setup lang="ts"></script>
+    <template #extra>
-<style scoped></style>
+      <el-button  @click="backHandle" style="background: lightskyblue;width: 80px">返回操作</el-button>
+    </template>
+  </el-result>
+</template>
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+const router = useRouter();
+const backHandle = ()=>{
+  router.push('/login');
+}
+</script>
+<style scoped>
+.image_error{
+  margin-left: 31%;
+}
+</style>

src/views/home/index.vue

@@ -1,7 +1,17 @@
 <template>
-  <div>
+  <div class="common-layout">
-    <h1>2级路由</h1>
+    <el-container>
+      <el-aside width="20%" style="background: skyblue">Aside</el-aside>
+      <el-container>
+        <el-header style="background: blanchedalmond">Header</el-header>
+        <el-main style="background: hotpink">Main</el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
-<style scoped></style>
+
+</script>
+<style scoped>
+
+</style>

src/views/login/index.vue

@@ -78,7 +78,7 @@ const loginHandle = async () => {
     // 登录成功后设置一个2秒的延迟来跳转页面
     setTimeout(() => {
       // 跳转到首页
-      $router.push('/home')
+      $router.push('/')
       // 结束加载效果
       loading.value = false
     }, 1000) // 2000 毫秒 = 2 秒