From 644268698adf3f81d19a44f54a951b882bf226bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E6=99=AF=E7=AB=8B?= <zoujingli@qq.com>
Date: Wed, 24 Nov 2021 23:43:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=A8=A1=E6=9D=BF=20less=20?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                 |  7 ++++---
 static/app.js              | 12 +++++++-----
 static/template/layout.vue | 39 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index e149fce4a..35f65085a 100644
--- a/index.html
+++ b/index.html
@@ -8,15 +8,16 @@
     <!-- 加载框架样式 -->
     <link rel="stylesheet" href="static/plugs/core/vue.element.plus.css">
 
+    <!-- 这页面配色还可以
+     https://microsoftedgewelcome.microsoft.com/zh-cn/update/96?channel=stable&version=96.0.1054.29&form=MT002S
+     -->
 
     <!-- 加载基础框架组件 -->
     <script src="static/plugs/core/vue.min.js"></script>
     <script src="static/plugs/core/vue.router.js"></script>
     <script src="static/plugs/core/vue.sfc.loader.js"></script>
     <script src="static/plugs/core/vue.element.plus.js"></script>
-    <script src="static/plugs/less/less.min.js" async></script>
-    
-    <link rel="stylesheet/less" href="static/app.less">
+    <script src="static/plugs/less/less.min.js"></script>
 
     <!-- 加载基础框架模块 -->
     <script type="module" src="static/app.js"></script>
diff --git a/static/app.js b/static/app.js
index 0acd35c44..7b09c49f0 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,16 +1,18 @@
 ;(async () => {
     const options = {
-        moduleCache: {vue: Vue},
+        moduleCache: {
+            vue: Vue,
+            less: less
+        },
         getFile(url) {
             return fetch(url).then(res => {
                 if (!res.ok) throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                 return res.text();
-            })
+            });
         },
         addStyle(textContent) {
-            document.head.insertBefore(
-                Object.assign(document.createElement('style'), {textContent}),
-                document.head.getElementsByTagName('style')[0] || null);
+            const object = Object.assign(document.createElement('style'), {textContent});
+            document.head.insertBefore(object, document.head.getElementsByTagName('style')[0] || null);
         },
     };
 
diff --git a/static/template/layout.vue b/static/template/layout.vue
index 06f4bfef9..68acdf973 100644
--- a/static/template/layout.vue
+++ b/static/template/layout.vue
@@ -13,6 +13,45 @@
   </el-container>
 </template>
 
+<style lang="less">
+html, body, #app {
+  height: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+#app > .el-container {
+  height: 100%;
+
+  > .el-header {
+    color: #fff;
+    background: #0d84ff;
+    line-height: 60px;
+  }
+
+  > .el-container {
+
+    > .el-aside {
+      background: #53a8ff;
+    }
+
+    > .el-container {
+
+      > .el-main {
+        background: gray;
+      }
+
+      > .el-footer {
+        color: #fff;
+        background: #333;
+        line-height: 60px;
+      }
+
+    }
+  }
+}
+</style>
 
 <script>
 export default {