详情

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,22 +18,22 @@ 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;
       .label {
         background: #e8eaf1;
@@ -41,6 +41,27 @@ export default {
         width: 100px;
         text-align: right;
         padding: 0 5px;
+        line-height: 35px;
+        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: 7px;
+      }
+    }
+    .ivu-col-span-24 {
+      .label {
+        height: 100%;
+        line-height: 70px;
+      }
+      p {
+        padding-top: 10px;
       }
     }
   }

pages/crm/customer/detail.vue

@@ -3,7 +3,10 @@
     <Row>
       <Filed :span="12" :name="l('name')">{{entity.name}}</Filed>
       <Filed :span="12" :name="l('abbre')">{{entity.abbre}}</Filed>
-      <Filed :span="24" :name="l('address')">{{entity.address}}</Filed>
+      <Filed
+        :span="24"
+        :name="l('address')"
+      >{{entity.address}}发来的肌肤就啦啦啦说了涓涓流水附近的否定了放假江东父老飞机轮的风景搭街坊的简历就解决解决了fffffffffffffffffggggggggggggggggggggggggggggggggggggggggggggggggggggggggggfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</Filed>
       <Filed :span="12" :name="l('principal')">{{entity.principal}}</Filed>
       <Filed :span="12" :name="l('telephone')">{{entity.telephone}}</Filed>
       <Filed :span="12" :name="l('mobile')">{{entity.mobile}}</Filed>
@@ -15,49 +18,49 @@
       <Filed :span="12" :name="l('status')">
         <state code="crm.customer.status" :value="entity.status" type="text"></state>
       </Filed>
-      <Filed :span="24" :name="l('notes')">{{entity.notes}}</Filed>
       <Filed :span="12" :name="l('code')">{{entity.code}}</Filed>
       <Filed :span="12" :name="l('trade')">{{entity.trade}}</Filed>
+      <Filed :span="24" :name="l('notes')">{{entity.notes}}</Filed>
     </Row>
   </div>
 </template>
 <script>
-import Api from './api'
+import Api from "./api";
 export default {
-  name: 'Add',
+  name: "Add",
   data() {
     return {
       entity: {},
       rules: {
-        name: [{ required: true, message: '必填', trigger: 'blur' }],
-        code: [{ required: true, message: '必填', trigger: 'blur' }]
+        name: [{ required: true, message: "必填", trigger: "blur" }],
+        code: [{ required: true, message: "必填", trigger: "blur" }]
       }
-    }
+    };
   },
   props: {
     eid: Number
   },
   methods: {
     load(v) {
-      Api.get({ id: v }).then((r) => {
-        this.entity = r.result
-        this.$emit('on-load')
-      })
+      Api.get({ id: v }).then(r => {
+        this.entity = r.result;
+        this.$emit("on-load");
+      });
     },
     handleClose() {
-      this.$emit('on-close')
+      this.$emit("on-close");
     },
     l(key) {
-      key = 'Customer' + '.' + key
-      return this.$t(key)
+      key = "Customer" + "." + key;
+      return this.$t(key);
     }
   },
   watch: {
     eid(v) {
       if (v != 0) {
-        this.load(v)
+        this.load(v);
       }
     }
   }
-}
+};
 </script>