no message

Former-commit-id: fa1070f5fcb35fc52abb413635e934c37355e6c6
Former-commit-id: 776e9b6d9de589b0b8cfddd6fb9c344d2e18e1e0
Former-commit-id: 5a91fe2b8da25531e4f0d322d5cb5ab12b9e22be

src/components/core/Container/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-component">
+  <div class="container-component" :class="{responsive}">
     <!-- [card] 卡片容器 -->
     <el-card v-if="type === 'card'">
       <div v-if="$slots.header" slot="header">
@@ -17,11 +17,42 @@
 <script>
 export default {
   props: {
+    // 容器样式
     type: {
       type: String,
       required: false,
       default: 'card'
+    },
+    // 是否开启响应式尺寸变化
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   }
 }
 </script>
+
+<style lang="scss">
+.container-component {
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+@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>