no message

Former-commit-id: 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly 21c2eb17a98a8670e50e3c5a01992400b81770e9 [formerly dea08899083aa05e8d6f14614c025b48b97741e6 [formerly 1ce2023c82a4fcd9627e210eb274c69219fd7425]]]]]
Former-commit-id: 940e1f2395a642c9af922dab82dc23bac003f17f
Former-commit-id: 99acadc56e19d94f968c0d8e63a4b25dddde8c3b
Former-commit-id: 21cecee25d507ce21b21c9cbbfc811c8257cfb0d [formerly d218edea00350bf5c15b8c72263474467eea3e56]
Former-commit-id: 7d5e734f081616be0d3b49e7dcb460a9f38c9e11
Former-commit-id: 3b94c9ce56c268eb3b1866883f1c7805673f25b9
Former-commit-id: 642c47e68190eff32090d358c65df31f40854a3c
Former-commit-id: 36eb24536167392823e080fae3d21dde6f9d318c
Former-commit-id: a87d518565feff320f9f4de7b19d3165a5a3c51d

docs/zh/components/container.md

@@ -85,10 +85,12 @@ export default {
 
 ### 隐形页面容器
 
-不显示任何背景色和边框
+不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
 
 ``` vue
 <d2-container type="ghost">
   主体内容
 </d2-container>
 ```
+
+如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`

src/assets/style/theme/theme.scss

@@ -249,7 +249,8 @@
       .d2-theme-container-main-body {
         // 布局组件
         .container-component {
-          // [组件] d2-container-full
+          // [组件]
+          // d2-container-full 填充型
           .d2-container-full {
             border: $theme-container-border-outer;
             border-top: none;
@@ -266,16 +267,17 @@
               background: $theme-container-header-footer-background-color;
             }
           }
-          // [组件] d2-container-card
+          // [组件]
+          // d2-container-card 卡片型
           .d2-container-card {
             border: $theme-container-border-outer;
             border-top: none;
             background: transparent;
-            .el-card__header {
+            &>.el-card__header {
               border-bottom: $theme-container-border-inner;
               background: $theme-container-header-footer-background-color;
             }
-            .el-card__body {
+            &>.el-card__body {
               background: $theme-container-background-color;
             }
           }

src/pages/demo/components/container/ghost.vue

@@ -1,6 +1,6 @@
 <template>
   <d2-container type="ghost">
-    <el-card shadow="never" style="width: 50%;">
+    <el-card shadow="never" class="d2-mt" style="width: 50%;">
       <d2-markdown :source="doc"/>
     </el-card>
   </d2-container>

src/pages/demo/components/container/md/doc-ghost.md

@@ -1,9 +1,11 @@
 ## 隐形页面容器
 
-不显示任何背景色和边框
+不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
 
 ```
 <d2-container type="ghost">
   主体内容
 </d2-container>
 ```
+
+如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`

src/pages/demo/element/basic-color/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <d2-container type="ghost">
+  <d2-container>
     
-    <el-card shadow="never" class="d2-mb">
+    <h1 class="d2-mt-0">主色</h1>
-      <template slot="header">主色</template>
     <el-row :gutter="20">
       <el-col :span="6">
         <div class="color color-primary">
@@ -10,10 +9,8 @@
         </div>
       </el-col>
     </el-row>
-    </el-card>
 
-    <el-card shadow="never" class="d2-mb">
+    <h1>辅助色</h1>
-      <template slot="header">辅助色</template>
     <el-row :gutter="20">
       <el-col :span="6">
         <div class="color color-info">
@@ -36,10 +33,8 @@
         </div>
       </el-col>
     </el-row>
-    </el-card>
   
-    <el-card shadow="never">
+    <h1>中性色</h1>
-      <template slot="header">中性色</template>
     <el-row :gutter="20" class="d2-mb">
       <el-col :span="6">
         <div class="color color-text-main">
@@ -84,7 +79,6 @@
         </div>
       </el-col>
     </el-row>
-    </el-card>
     
   </d2-container>
 </template>

src/pages/demo/element/basic-layout/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <d2-container type="ghost">
+  <d2-container>
 
-    <el-card shadow="never" class="d2-mb">
+    <h1 class="d2-mt-0">基础布局</h1>
-      <template slot="header">基础布局</template>
     <el-row>
       <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
     </el-row>
@@ -29,20 +28,16 @@
       <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>
-    </el-card>
     
-    <el-card shadow="never" class="d2-mb">
+    <h1>分栏间隔</h1>
-      <template slot="header">分栏间隔</template>
     <el-row :gutter="20">
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
     </el-row>
-    </el-card>
     
-    <el-card shadow="never" class="d2-mb">
+    <h1>混合布局</h1>
-      <template slot="header">混合布局</template>
     <el-row :gutter="20">
       <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
@@ -58,10 +53,8 @@
       <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
     </el-row>
-    </el-card>
     
-    <el-card shadow="never" class="d2-mb">
+    <h1>分栏偏移</h1>
-      <template slot="header">分栏偏移</template>
     <el-row :gutter="20">
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
@@ -73,10 +66,8 @@
     <el-row :gutter="20">
       <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
     </el-row>
-    </el-card>
     
-    <el-card shadow="never" class="d2-mb">
+    <h1>对齐方式</h1>
-      <template slot="header">对齐方式</template>
     <el-row type="flex" class="row-bg">
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
@@ -102,17 +93,14 @@
       <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
     </el-row>
-    </el-card>
     
-    <el-card shadow="never" class="d2-mb">
+    <h1>响应式布局</h1>
-      <template slot="header">响应式布局</template>
     <el-row :gutter="10">
       <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
       <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
       <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
       <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>
-    </el-card>
     
   </d2-container>
 </template>

src/pages/demo/element/basic-typography/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <d2-container type="ghost">
+  <d2-container>
-    <el-card shadow="never" class="d2-mb">
+
-      <template slot="header">中文字体</template>
+    <template slot="header">字体</template>
+    
+    <h1 class="d2-mt-0">中文字体</h1>
     <el-row :gutter="10">
       <el-col :span="6">
         <el-card shadow="never">
@@ -22,9 +24,8 @@
         </el-card>
       </el-col>
     </el-row>
-    </el-card>
+  
-    <el-card shadow="never" class="d2-mb">
+    <h1>英文／数字字体</h1>
-      <template slot="header">英文／数字字体</template>
     <el-row :gutter="10">
       <el-col :span="6">
         <el-card shadow="never">
@@ -45,11 +46,10 @@
         </el-card>
       </el-col>
     </el-row>
-    </el-card>
+    
-    <el-card shadow="never">
+    <h1>Font-family 代码</h1>
-      <template slot="header">Font-family 代码</template>
     <d2-highlight :code="code"/>
-    </el-card>
+
   </d2-container>
 </template>