no message

Former-commit-id: afef3af60139bd559aa150052fc3a72ec2f384a4
Former-commit-id: e2b324d8476ca2a52c625f2aee16972708a43bec
Former-commit-id: ab3a3d9097c684c0fb1b54b1a5f228157b2f81ff

src/components/core/d2-container/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="container-component" :class="{responsive}">
+    <!-- [card] 卡片容器 -->
+    <el-card v-if="type === 'card'" class="d2-mr d2-mb">
+      <slot v-if="$slots.header" name="header" slot="header"></slot>
+      <slot></slot>
+    </el-card>
+    <!-- [ghost] 隐形的容器 -->
+    <div v-if="type === 'ghost'" class="d2-mr d2-mb">
+      <slot name="header"></slot>
+      <slot></slot>
+    </div>
+    <!-- [container-full] 撑满 -->
+    <d2-container-full v-if="type === 'full'" :right="20" :bottom="0">
+      <slot v-if="$slots.header" name="header" slot="header"></slot>
+      <slot></slot>
+      <slot v-if="$slots.footer" name="footer" slot="footer"></slot>
+    </d2-container-full>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-container',
+  props: {
+    // 容器样式
+    type: {
+      type: String,
+      required: false,
+      default: 'card'
+    },
+    // 是否开启响应式尺寸变化
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  components: {
+    'd2-container-full': () => import('../d2-container-full/index.vue')
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.container-component {
+  // margin-right: 20px;
+  // margin-bottom: 20px;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  // padding-right: $margin;
+  // padding-bottom: $margin;
+  overflow: auto;
+}
+@media (min-width: 576px) {
+  // 根据你的需要在这里添加样式
+}
+@media (min-width: 768px) {
+  // 根据你的需要在这里添加样式
+}
+@media (min-width: 992px) {
+  // 根据你的需要在这里添加样式
+}
+// 在大于1920分辨率的时候
+@media (min-width: 1921px) {
+  .container-component.responsive {
+    margin: 0px auto;
+    margin-bottom: 20px;
+    max-width: 1920px - 200px;
+  }
+}
+</style>