完善

Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]] Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55 Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a] Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938 Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02 Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9 Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5
2018-07-17 21:54:38 +08:00
parent db62c21964
commit 14c921e6b1
214 changed files with 157 additions and 139 deletions
--- a/src/pages/demo/element/basic-container/index.vue
+++ b/src/pages/demo/element/basic-container/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <d2-container type="full">
+
+    <el-container class="d2-mb">
+      <el-header>顶栏</el-header>
+      <el-main>主体</el-main>
+    </el-container>
+
+    <el-container class="d2-mb">
+      <el-header>顶栏</el-header>
+      <el-main>主体</el-main>
+      <el-footer>底栏</el-footer>
+    </el-container>
+
+    <el-container class="d2-mb">
+      <el-aside width="200px">侧边栏</el-aside>
+      <el-main>主体</el-main>
+    </el-container>
+
+    <el-container class="d2-mb">
+      <el-header>顶栏</el-header>
+      <el-container>
+        <el-aside width="200px">侧边栏</el-aside>
+        <el-main>主体</el-main>
+      </el-container>
+    </el-container>
+
+    <el-container class="d2-mb">
+      <el-header>顶栏</el-header>
+      <el-container>
+        <el-aside width="200px">侧边栏</el-aside>
+        <el-container>
+          <el-main>主体</el-main>
+          <el-footer>底栏</el-footer>
+        </el-container>
+      </el-container>
+    </el-container>
+
+    <el-container class="d2-mb">
+      <el-aside width="200px">侧边栏</el-aside>
+      <el-container>
+        <el-header>顶栏</el-header>
+        <el-main>主体</el-main>
+      </el-container>
+    </el-container>
+
+    <el-container>
+      <el-aside width="200px">侧边栏</el-aside>
+      <el-container>
+        <el-header>顶栏</el-header>
+        <el-main>主体</el-main>
+        <el-footer>底栏</el-footer>
+      </el-container>
+    </el-container>
+
+  </d2-container>
+</template>
+
+<style lang="scss" scoped>
+.el-header, .el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  background-color: #D3DCE6;
+  color: #333;
+  text-align: center;
+  line-height: 200px;
+}
+
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 160px;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+</style>