cli3改版基本完成

Former-commit-id: 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly fc66dcb2e437ff46b2c36ec1e3bcce71a6461250 [formerly b6451dc60d4c1e6006a9fcd380656d2023436e64]]]]]
Former-commit-id: c791410cda91e2df1b9808bfb032f0d3d68106ef
Former-commit-id: 0c5197800cfae6f27f7ab792c887fb25a73a23e0
Former-commit-id: 208a8e77c0fada6e9d191a7d495615ec2ef9704d [formerly af8c1367ed65b626196ac156c8521257cc804d60]
Former-commit-id: 1fdb571cea6ed9dba9ea02f4ba6ebfb5d89e1b2f
Former-commit-id: 774a145ae0694612edf988d9992ef797ddf4f21d
Former-commit-id: 03fc24d70365836d60360aa24e24dc7cb4520b91
Former-commit-id: bba4fd5552fa42da029fd6b310f5ee48558d5508
Former-commit-id: 2de81d34fb07248965677e8a3866c13089fa95e7

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

@@ -0,0 +1,115 @@
+<template>
+  <div class="container-component" :class="{responsive}" ref="container">
+    <!-- [card] 卡片容器 -->
+    <el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+    </el-card>
+    <!-- [ghost] 隐形的容器 -->
+    <div v-if="type === 'ghost'" class="d2-container-ghost">
+      <el-card v-if="$slots.header" shadow="never" class="d2-container-ghost-header">
+        <slot name="header"/>
+      </el-card>
+      <slot/>
+    </div>
+    <!-- [container-full] 填充 -->
+    <d2-container-full v-if="type === 'full' && !scroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-full>
+    <!-- [container-full-bs] 填充 滚动优化 -->
+    <d2-container-full-bs v-if="type === 'full' && scroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-full-bs>
+  </div>
+</template>
+
+<script>
+// 插件
+import BScroll from 'better-scroll'
+// 组件
+import d2ContainerFull from './components/d2-container-full.vue'
+import d2ContainerFullBs from './components/d2-container-full-bs.vue'
+export default {
+  name: 'd2-container',
+  props: {
+    // 容器样式
+    type: {
+      type: String,
+      required: false,
+      default: 'card'
+    },
+    // 滚动优化
+    scroll: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否开启响应式尺寸变化
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  components: {
+    'd2-container-full': d2ContainerFull,
+    'd2-container-full-bs': d2ContainerFullBs
+  },
+  data () {
+    return {
+      BS: null
+    }
+  },
+  mounted () {
+    if (this.type === 'card' || this.type === 'ghost') {
+      this.scrollInit()
+    }
+  },
+  beforeDestroy () {
+    if (this.type === 'card' || this.type === 'ghost') {
+      this.scrollDestroy()
+    }
+  },
+  methods: {
+    scrollInit () {
+      this.BS = new BScroll(this.$refs.container, {
+        mouseWheel: true,
+        scrollbar: {
+          fade: true,
+          interactive: false
+        }
+      })
+    },
+    scrollDestroy () {
+      if (this.BS) {
+        this.BS.destroy()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+@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>