From ae365d5bc663d18c30d0ea0fc777ed852f990e78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Sun, 10 Apr 2022 13:50:27 +0800
Subject: [PATCH] docs: change bg color for layout container (#7077)

---
 docs/examples/container/common-layout.scss |  6 +++---
 docs/examples/container/example.vue        | 19 ++++++-------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/docs/examples/container/common-layout.scss b/docs/examples/container/common-layout.scss
index af865be1ac..c45ff5fcf7 100644
--- a/docs/examples/container/common-layout.scss
+++ b/docs/examples/container/common-layout.scss
@@ -10,19 +10,19 @@
 
   .el-header,
   .el-footer {
-    background-color: #b3c0d1;
+    background-color: var(--el-color-primary-light-7);
     color: var(--el-text-color-primary);
     text-align: center;
   }
 
   .el-aside {
-    background-color: #d3dce6;
+    background-color: var(--el-color-primary-light-8);
     color: var(--el-text-color-primary);
     text-align: center;
   }
 
   .el-main {
-    background-color: #e9eef3;
+    background-color: var(--el-color-primary-light-9);
     color: var(--el-text-color-primary);
     text-align: center;
 
diff --git a/docs/examples/container/example.vue b/docs/examples/container/example.vue
index 4b374a17cc..30719fe9de 100644
--- a/docs/examples/container/example.vue
+++ b/docs/examples/container/example.vue
@@ -1,9 +1,6 @@
 <template>
-  <el-container
-    class="layout-container-demo"
-    style="height: 500px; border: 1px solid #eee"
-  >
-    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+  <el-container class="layout-container-demo" style="height: 500px">
+    <el-aside width="200px">
       <el-scrollbar>
         <el-menu :default-openeds="['1', '3']">
           <el-sub-menu index="1">
@@ -108,15 +105,12 @@ const tableData = ref(Array.from({ length: 20 }).fill(item))
 <style scoped>
 .layout-container-demo .el-header {
   position: relative;
-  background-color: #b3c0d1;
+  background-color: var(--el-color-primary-light-7);
   color: var(--el-text-color-primary);
 }
 .layout-container-demo .el-aside {
-  width: 240px;
   color: var(--el-text-color-primary);
-  background: #fff !important;
-  border-right: solid 1px #e6e6e6;
-  box-sizing: border-box;
+  background: var(--el-color-primary-light-8);
 }
 .layout-container-demo .el-menu {
   border-right: none;
@@ -125,11 +119,10 @@ const tableData = ref(Array.from({ length: 20 }).fill(item))
   padding: 0;
 }
 .layout-container-demo .toolbar {
-  position: absolute;
   display: inline-flex;
   align-items: center;
-  top: 50%;
+  justify-content: center;
+  height: 100%;
   right: 20px;
-  transform: translateY(-50%);
 }
 </style>