From 4a96457bab35d78b233cce962a8f6c4806acfca7 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Tue, 7 Aug 2018 14:48:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B1=9E=E6=80=A7layout?=
 =?UTF-8?q?=E3=80=81size=E3=80=81col=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tool/DetailList.vue | 70 ++++++++++++++++++++++++++----
 1 file changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/components/tool/DetailList.vue b/src/components/tool/DetailList.vue
index d161ad7..0c1a90e 100644
--- a/src/components/tool/DetailList.vue
+++ b/src/components/tool/DetailList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="detail-list">
+  <div :class="['detail-list', size === 'small' ? 'small' : 'large', layout === 'vertical' ? 'vertical': 'horizontal']">
     <div v-if="title" class="title">{{title}}</div>
     <a-row>
       <slot></slot>
@@ -18,6 +18,11 @@ const Item = {
       required: false
     }
   },
+  inject: {
+    col: {
+      type: Number
+    }
+  },
   methods: {
     renderTerm (h, term) {
       return h(
@@ -48,21 +53,50 @@ const Item = {
     return h(
       ACol,
       {
-        props: {
-          xs: 24,
-          sm: 12,
-          md: 8
-        }
+        props: responsive[this.col]
       },
       [term, content]
     )
   }
 }
+
+const responsive = {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 }
+}
+
 export default {
   name: 'DetailList',
   Item: Item,
-  props: ['title'],
-  components: {ARow, ACol}
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    col: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'large'
+    },
+    layout: {
+      type: String,
+      required: false,
+      default: 'horizontal'
+    }
+  },
+  components: {ARow, ACol},
+  provide () {
+    return {
+      col: this.col > 4 ? 4 : this.col
+    }
+  }
 }
 </script>
 
@@ -93,8 +127,26 @@ export default {
       line-height: 22px;
       width: 100%;
       padding-bottom: 16px;
-      color: rgba(0,0,0,.85);
+      color: rgba(0,0,0,.65);
       display: table-cell;
     }
+    &.small{
+      .term,.content{
+        padding-bottom: 8px;
+      }
+    }
+    &.large{
+      .term,.content{
+        padding-bottom: 16px;
+      }
+    }
+    &.vertical{
+      .term {
+        padding-bottom: 8px;
+      }
+      .term,.content{
+        display: block;
+      }
+    }
   }
 </style>