统一风格

src/assets/css/base.css

@@ -17,6 +17,7 @@ html,body,#app {
     height: 100%;
     margin: 0;
     padding: 0;
+    background-color: #e8eaf6!important;
 }
 
 a {

src/components/content/Layout.vue

@@ -1,34 +1,34 @@
 <template>
     <el-container style="height: 100%; border: 1px solid #eee">
         <el-aside width="250px" style="background-color: #545c64">
+            <header class="title">
+                <div class="title-inner">SEEC-ANALY</div>
+            </header>
             <el-menu
                     :default-active="this.$route.path"
                     class="el-menu-vertical-demo"
-                    background-color="#545c64"
-                    text-color="#fff"
+                    background-color="#fff"
+                    text-color="#000000DE"
                     @open="handleOpen"
                     @close="handleClose"
-                    active-text-color="#ffd04b"
+                    active-text-color="#7e57c2"
                     router>
 				<el-menu-item index="/studentPage" v-if="permit([ROLE.STUDENT, ROLE.ADMIN])">
-				    <i class="el-icon-sort"></i>
-				    <span slot="title">HOME</span>
+				    <i class="el-icon-s-data"></i>
+				    <span slot="title">Competency-tree</span>
 				</el-menu-item>
                 <el-menu-item index="/teacherPage" v-if="permit([ROLE.TEACHER, ROLE.ADMIN])">
                     <i class="el-icon-receiving"></i>
-                    <span slot="title">HOME</span>
+                    <span slot="title">TeacherPage</span>
                 </el-menu-item>
             </el-menu>
+            <div class="logout-fix">
+                <div class="logout-name">{{getUsername()}}</div>
+                <div class="logout" @click="logout()">退出登录</div>
+            </div>
         </el-aside>
 
         <el-main>
-            <div class="main-header">
-                <div class="logout">欢迎你，
-                    <el-tooltip class="item" effect="dark" content="点击登出" placement="bottom-end">
-                        <span @click="logout()" class="logout-name">{{getUsername()}}</span>
-                    </el-tooltip>
-                </div>
-            </div>
             <slot></slot>
         </el-main>
     </el-container>
@@ -71,21 +71,71 @@
 </script>
 
 <style>
-    .el-aside {
-        color: #333;
+    .title {
+        padding: 16px;
+        margin-bottom: 10px;
     }
-    .logout-name {
-        text-decoration: underline;
-        color: #1f94ff;
-        cursor: pointer;
+    .title-inner {
+            background-color: #9fa8da!important;
+            border-color: #9fa8da!important;
+            border-radius: 8px!important;
+            line-height: 40px;
+            height: 40px;
+            text-align: center;
+            font-size: 21px;
+            font-weight: bold;
     }
-    .main-header {
-        height: 70px;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
+    .el-aside {
+        background-color: #fff !important;
+        margin-right: 10px;
     }
     .el-menu {
-        border-right: solid 1px rgb(84, 92, 100);
+        border-right: solid 1px #fff;
+    }
+    .el-menu-item {
+        width: 92%;
+        margin: 0 auto;
+        padding: 0 10px!important;
+        height: 40px;
+        line-height: 40px;
+        font-size: 13px;
+    }
+    .el-menu-item > i {
+        margin-right: 30px!important;
+    }
+    .el-menu-item:focus, .el-menu-item:hover {
+        outline: 0;
+        background-color: #f6f6f6!important;
+    }
+    .el-menu-item.is-active {
+        color: #7e57c2;
+        background-color: #f0ebf8!important;
+    }
+    .logout-fix {
+        position: fixed;
+        left: 30px;
+        bottom: 30px;
+    }
+    .logout-fix .logout-name {
+        min-width: 60px;
+        background-color: #7e57c2 !important;
+        border-color: #7e57c2 !important;
+        color: #fff;
+        border-radius: 16px;
+        font-size: 14px;
+        height: 32px;
+        text-align: center;
+        padding: 0 10px;
+        margin-left: -10px;
+        line-height: 32px;
+        margin-bottom: 14px;
+    }
+    .logout-fix  .logout {
+        color: #00000099;
+        font-size: 14px;
+        cursor: pointer;
+    }
+    .logout-fix  .logout:hover {
+        color: #000000;
     }
 </style>

src/components/content/Title.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="common-title">
+    <h1>{{title}}</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Title",
+    components: {},
+    props: {
+      title: String,
+    },
+    data() {
+      return {};
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+    computed: {},
+    watch: {},
+  };
+</script>
+
+<style scoped>
+h1 {
+  font-weight: 400;
+  font-family: Roboto,sans-serif;
+  font-size: 3rem!important;
+  line-height: 3.125rem;
+  letter-spacing: normal!important;
+  margin: 0px;
+}
+.common-title {
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: solid 1px rgb(204, 204, 204);
+}
+</style>

src/views/StudentPage.vue

@@ -1,12 +1,17 @@
 <template>
-  <Layout>Hello, SEEC ANALYSIS!</Layout>
+  <Layout>
+    <Title title="能力树模型"></Title>
+    TODO
+  </Layout>
 </template>
 
 <script>
   import Layout from "@/components/content/Layout";
+  import Title from "@/components/content/Title";
   export default {
     components: {
-        Layout
+        Layout,
+        Title
     },
   };
 </script>

src/views/TeacherPage.vue

@@ -1,12 +1,17 @@
 <template>
-  <Layout>Hello, TEACHER!</Layout>
+  <Layout>
+    <Title title="Teacher Page"></Title>
+    Hello, TEACHER!
+  </Layout>
 </template>
 
 <script>
   import Layout from "@/components/content/Layout";
+  import Title from "@/components/content/Title";
   export default {
     components: {
-        Layout
+        Layout,
+        Title
     },
   };
 </script>