详情样式修改

components/page/filed.vue

 <template>
   <Col :span="span" class="filed-col">
-    <label v-text="name" class="label"></label>
-    <span>
+    <div v-text="name" class="label"></div>
+    <p>
       <slot></slot>
-    </span>
+    </p>
   </Col>
 </template>
 <script>
 export default {
-  name: 'filed',
+  name: "filed",
   props: {
     name: {
       type: String
@@ -18,29 +18,51 @@ export default {
       default: 12
     }
   }
-}
+};
 </script>
 <style lang="less">
 .detail {
   display: table;
+  height: 100%;
   border-collapse: collapse;
   .ivu-row {
-    display: table-row;
-    border-top: 1px solid #ddd;
-    border-left: 1px solid #ddd;
+    border: 1px solid #ddd;
+    border-top: none;
+    height: 100%;
     .filed-col {
-      display: table-cell;
-      border-bottom: 1px solid #ddd;
-      border-right: 1px solid #ddd;
-      //  margin: 0 0 -1px -1px;
-      line-height: 30px;
+      max-width: 970px;
+      border: 1px solid #ddd;
+      border-right: none;
+      margin: 0 -1px -1px -1px;
       box-sizing: border-box;
+      line-height: 70px;
       .label {
         background: #e8eaf1;
         display: inline-block;
         width: 100px;
         text-align: right;
         padding: 0 5px;
+        line-height: 40px;
+        float: left;
+        height: 100%;
+      }
+      p {
+        max-width: 870px;
+        height: 100%;
+        word-break: break-all;
+        word-wrap: break-word;
+        margin: 0 10px 0 110px;
+        line-height: 20px;
+        padding-top: 10px;
+      }
+    }
+    .ivu-col-span-24 {
+      .label {
+        height: 100%;
+        padding: 0.5% 5px;
+      }
+      p {
+        padding-top: 1%;
       }
     }
   }