提交路由文件

fhKeeper/formulahousekeeper/customerBuler-crm/src/App.vue

@@ -7,8 +7,9 @@
 <style>
 html,
 body,
-#app {
+#app, .layouts {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 </style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/home.vue

@@ -1,9 +1,54 @@
 <template>
-    <div>
-        <h1>abc</h1>
+    <div class="common-layout layouts">
+        <el-container class="flex flex-col layouts">
+            <!-- 头部 -->
+            <el-header></el-header>
+            <!-- 左侧菜单 -->
+            <el-container class="flex-1 layouts">
+                <el-aside class="home-el-aside" width="220px">
+                    <el-menu default-active="1" class="el-menu-vertical-demo">
+                        <el-menu-item :index="(index + 1) + ''" v-for="(item, index) in 10" :key="index">
+                            <el-icon><setting /></el-icon>
+                            <span>第{{ index + 1 }}个</span>
+                        </el-menu-item>
+
+                        <el-sub-menu index="11">
+                            <template #title>
+                                <el-icon>
+                                    <location />
+                                </el-icon>
+                                <span>第十一个</span>
+                            </template>
+                            <el-menu-item :index="'11'">
+                                <el-icon><icon-menu /></el-icon>
+                                <span>第11-1个</span>
+                            </el-menu-item>
+                        </el-sub-menu>
+                    </el-menu>
+                </el-aside>
+                <!-- 主体 -->
+                <el-main>
+                    <router-view></router-view>
+                </el-main>
+            </el-container>
+        </el-container>
     </div>
 </template>
 <script lang="ts" setup>
 
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.common-layout {
+    .el-header {
+        background: $darkBlue;
+    }
+
+    .el-menu-vertical-demo {
+        height: 100%;
+    }
+    .el-main {
+        padding: 0 20px;
+        background: $backColor;
+    }
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/thread/thread.vue

@@ -0,0 +1,9 @@
+<template>
+<div id="" class="h100">
+    线索文件
+</div>
+</template>
+<script setup lang="ts">
+</script>
+<style scoped lang="scss">
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/router/index.ts

@@ -19,7 +19,14 @@ export const routes = [
     {
         name: 'home',
         path: '/home',
-        component: () => import("../pages/home.vue")
+        component: () => import("../pages/home.vue"),
+        children: [
+            {
+                name: 'thread',
+                path: '/thread',
+                component: () => import("../pages/thread/thread.vue")
+            },
+        ]
     },
     {
         name: 'index',

fhKeeper/formulahousekeeper/customerBuler-crm/src/styles/global.scss

@@ -0,0 +1,13 @@
+$darkBlue: #3475C5;
+$ashen: #FEFEFE;
+$backColor: #EEF3F6;
+$black: #000;
+$fontBlack: #333;
+$fontGray: #999;
+
+.text-gray{
+    color : $fontGray
+}
+.text-black {
+    color : $fontBlack
+}