版本迭代

src/components/AiCard.vue

@@ -0,0 +1,64 @@
+<template>
+  <section class="ai-card" :class="{panel,headerPanel}">
+    <ai-bar v-if="!hideHeader" :title="title" v-bind="$attrs">
+      <template #title>
+        <slot name="title"></slot>
+      </template>
+      <template #right>
+        <slot name="right"></slot>
+      </template>
+    </ai-bar>
+    <div class="ai-card__body" :style="{paddingTop: hideHeader ? '20px' : 0}">
+      <slot v-if="$scopedSlots.content" name="content"/>
+      <slot v-else/>
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'AiCard',
+    props: {
+      title: {
+        type: String
+      },
+      hideTitle: Boolean,
+      panel: Boolean,
+      headerPanel: Boolean
+    },
+    computed: {
+      hideHeader: v => v.hideTitle || (v.panel && !v.title)
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.ai-card {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  background: #FFFFFF;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+  border-radius: 2px;
+
+  .ai-card__body {
+    height: calc(100% - 72px);
+    padding: 0 20px 0;
+    overflow-y: auto;
+  }
+
+  &.panel, &.headerPanel {
+    margin-bottom: 0;
+
+    .ai-card__body {
+      padding: 12px 16px;
+    }
+
+    .aibar {
+      margin-bottom: 0 !important;
+    }
+  }
+
+
+}
+</style>