修改后台样式

static/template/index.vue

@@ -1,21 +1,26 @@
 <template>
-  <div>
+  <el-container>
-    <el-icon :size="16">
+    <el-header>
-      <edit></edit>
+      <el-row justify="space-between">
-    </el-icon>
+        <el-col :span="12">页面标题 导航条</el-col>
-    {{ userName }}: 你好 vue3
+        <el-col :span="12" style="text-align:right">
-  </div>
+          <el-button>功能按钮区</el-button>
+          <el-button>功能按钮区</el-button>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main>
+      {{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。
+    </el-main>
+  </el-container>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      userName: "张三"
+      userName: "ThinkAdmin"
     }
-  },
+  }
-  created() {
-  },
-  methods: {}
 }
 </script>

static/template/layout.vue

@@ -1,10 +1,12 @@
 <template>
   <el-container>
-    <el-header style="padding:0">
+    <el-header>
-      <el-menu class="think-header"
+      <el-menu
-               :default-active="1"
+          :default-active="1"
-               mode="horizontal" text-color="#fff" style="border-bottom:0"
+          mode="horizontal"
-               background-color="rgba(54,25,88,0.9)" active-text-color="rgba(54,25,88,1.0)"
+          text-color="#fff"
+          background-color="rgba(54,25,88,0.9)"
+          active-text-color="rgba(54,25,88,1.0)"
       >
         <el-menu-item route="/" index="1">ThinkAdmin For HTML</el-menu-item>
         <el-sub-menu index="2">
@@ -18,17 +20,17 @@
       </el-menu>
     </el-header>
     <el-container>
-      <el-aside width="280px">
+      <el-aside>
-        <el-tabs tab-position="left" style="height:100%">
+        <el-tabs tab-position="left">
           <el-tab-pane v-for="menu in menus">
             <template #label>{{ menu.name }}</template>
             <h5 v-text="menu.title">Default colors</h5>
             <el-menu default-active="2">
               <el-sub-menu index="1">
                 <template #title>
-<!--                  <el-icon>-->
+                  <!--                  <el-icon>-->
-<!--                    <location></location>-->
+                  <!--                    <location></location>-->
-<!--                  </el-icon>-->
+                  <!--                  </el-icon>-->
                   <span>Navigator One</span>
                 </template>
 
@@ -38,19 +40,19 @@
 
               </el-sub-menu>
               <el-menu-item index="2">
-<!--                <el-icon>-->
+                <!--                <el-icon>-->
-<!--                  <icon-menu></icon-menu>-->
+                <!--                  <icon-menu></icon-menu>-->
-<!--                </el-icon>-->
+                <!--                </el-icon>-->
                 <span>Navigator Two</span>
               </el-menu-item>
               <el-menu-item index="3">
-<!--                <el-icon>-->
+                <!--                <el-icon>-->
-<!--                  <document></document>-->
+                <!--                  <document></document>-->
-<!--                </el-icon>-->
+                <!--                </el-icon>-->
                 <span>Navigator Three</span>
               </el-menu-item>
               <el-menu-item index="4">
-<!--                <el-icon>-->
+                <!--                <el-icon>-->
                 <!--                  <setting></setting>-->
                 <!--                </el-icon>-->
                 <span>Navigator Four</span>
@@ -63,7 +65,7 @@
         <el-main>
           <router-view></router-view>
         </el-main>
-        <el-footer>Footer</el-footer>
+        <el-footer>©版权所有 2014-2021 ThinkAdmin</el-footer>
       </el-container>
     </el-container>
   </el-container>
@@ -74,117 +76,164 @@
 html, body {
   margin: 0;
   height: 100%;
-  display: block;
   padding: 0;
+  display: block;
 }
 
 body > .el-container {
   height: 100%;
 
   > .el-header {
-    color: #fff;
+    margin: 0;
-    line-height: 60px;
+    padding: 0;
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+
+    .el-menu {
+      border-bottom: 0;
+
+      .el-menu-item {
+        border-bottom: 0;
+
+        &:not(.is-disabled) {
+          &:first-child {
+            width: 280px;
+            padding: 0;
+            font-weight: bold;
+
+            &:hover, &:active, &:focus, &.is-active {
+              color: #FFFFFF !important;
+              background: rgba(0, 0, 0, 0) !important;
+            }
+          }
+
+          &:hover {
+            color: #FFFFFF !important;
+            background: rgba(54, 25, 88, 0.9) !important;
+          }
+
+          &.is-active {
+            color: #FFF !important;
+            background: rgba(0, 0, 0, 0.4);
+          }
+        }
+      }
+
+      .el-sub-menu {
+        .el-sub-menu__title {
+          color: #FFFFFF !important;
+          background: none !important;
+        }
+
+        &.is-opened {
+          .el-sub-menu__title {
+            background: rgba(0, 0, 0, 0.1) !important;
+          }
+        }
+      }
+    }
   }
 
   > .el-container {
     > .el-aside {
       background: #53a8ff;
+      --el-aside-width: 280px;
+      box-shadow: 10px 10px 5px #888888;
+
+      .el-tabs {
+        height: 100%;
+        user-select: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+
+        .el-tabs__header {
+          width: 60px;
+          margin: 0 !important;
+          background: rgba(54, 25, 88, 0.8);
+
+          .el-tabs__active-bar {
+            display: none !important;
+          }
+
+          .el-tabs__nav-wrap {
+            margin-right: 0 !important;
+
+            &::after {
+              display: none;
+            }
+          }
+
+          .el-tabs__item {
+            color: #FFF;
+            width: 100% !important;
+            height: 60px !important;
+            padding: 0 !important;
+            line-height: 60px !important;
+            text-align: center !important;
+
+            &.is-active {
+              color: #333333;
+              background: #FFFFFF;
+            }
+
+            &:hover:not(.is-active) {
+              background: rgba(0, 0, 0, 0.1);
+            }
+          }
+        }
+
+        .el-tabs__content {
+          width: 220px !important;
+          height: 100% !important;
+          background: #FFF;
+
+          h5 {
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            line-height: 60px;
+            display: none;
+            border-bottom: 1px solid #CCC;
+          }
+
+          .el-menu {
+            border: none !important;
+          }
+        }
+      }
     }
 
     > .el-container {
       > .el-main {
-        background: #efefef;
+        padding: 0;
+        background: #EFEFEF;
+
+        > .el-container {
+          > .el-header {
+            line-height: 60px;
+            background: rgb(255, 255, 255);
+          }
+
+          > .el-main {
+
+          }
+        }
       }
 
       > .el-footer {
-        color: #fff;
+        color: #333333;
-        background: #333;
+        background: #CCCCCC;
         line-height: 60px;
+        text-align: center;
       }
     }
   }
 }
-
-.think-header.el-menu {
-  .el-menu-item:not(.is-disabled) {
-    border-bottom: 0 !important;
-
-    &:hover {
-      color: #FFF !important;
-      background: rgba(54, 25, 88, 0.9) !important;
-    }
-
-    &.is-active {
-      color: #FFF !important;
-      background: rgba(0, 0, 0, 0.4);
-      border-bottom: 0 !important;
-    }
-  }
-
-  .el-sub-menu {
-    .el-sub-menu__title {
-      color: #FFF !important;
-      background: none !important;
-    }
-
-    &.is-opened {
-      .el-sub-menu__title {
-        background: rgba(0, 0, 0, 0.1) !important;
-      }
-    }
-  }
-}
-
-.el-tabs {
-
-  .el-tabs__header {
-    width: 60px;
-    margin: 0 !important;
-    background: rgba(54, 25, 88, 0.8);
-
-    .el-tabs__active-bar {
-      display: none !important;
-    }
-
-    .el-tabs__nav-wrap {
-      margin-right: 0 !important;
-
-      &::after {
-        display: none;
-      }
-    }
-
-    .el-tabs__item {
-      color: #FFF;
-      width: 100% !important;
-      height: 60px !important;
-      padding: 0 !important;
-      line-height: 60px !important;
-      text-align: center !important;
-
-      &.is-active {
-        background: rgba(0, 0, 0, 0.4);
-      }
-
-      &:hover:not(.is-active) {
-        background: rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-
-  .el-tabs__content {
-    width: 220px !important;
-    height: 100% !important;
-    //background: red;
-    text-align: center;
-    background: #FFF;
-  }
-}
 </style>
 
 <script>
 export default {
-  name: "layout",
   components: {},
   data() {
     return {