update

src/views/company/Grid.vue

@@ -82,6 +82,34 @@
 .org-tree-container {
   background: none;
 }
+.gridDetail {
+  .el-dialog__header{
+    background: #2D3A67;
+    .el-dialog__title{
+      color:#fff;
+    }
+  }
+  .el-dialog__body{
+    background: #2D3A67;
+    padding:10px 20px;
+    table{
+      td{
+        padding:10px;
+        color:#fff;
+        text-align: center;
+        img{
+          border-radius: 3px;
+        }
+        h4{
+          color:#30CEEE;
+        }
+      }
+    }
+  }
+  .el-dialog__footer{
+    background: #2D3A67;
+  }
+}
 </style>
 <template>
   <section>
@@ -318,37 +346,49 @@
         </el-col>
       </el-row>
       <el-dialog
-        title="责任人信息"
+        title="责任详情"
         :visible.sync="dialogFormVisible3"
         width="600px"
+        class="gridDetail"
       >
         <div>
-          <el-row :gutter="10">
-            <el-col :span="8">
-              <span>姓名：</span>
-              <span>{{form1.charge_person_name}}</span>
-            </el-col>
-            <el-col :span="8">
-              <span>手机：</span>
-              <span>{{form1.charge_person_phone}}</span>
-            </el-col>
-            <el-col :span="8">
-              <span>照片：</span>
-              <img width="100px" :src="form1.charge_person_photo" alt="">
-            </el-col>
-            <el-col :span="12">
-              <span>证件：</span>
-              <img width="100px" :src="form1.certificate" alt="">
-            </el-col>
-            <el-col :span="24">
-              <span>责任清单：</span>
-              <div>{{form1.duty_list}}</div>
-            </el-col>
-            <el-col :span="24">
-              <span>履职清单：</span>
-              <div>{{form1.job_list}}</div>
-            </el-col>
-          </el-row>
+          <table width="100%" border=1 cellspacing=0 cellpadding=0>
+            <tr>
+              <td style="text-align:left;padding-left:10px;">
+                <p>姓名：</p>
+                <p>李达康</p>
+              </td>
+              <td rowspan="2">
+                <img src="http://www.baianxi.com/images/test.jpg" width="80" alt="">
+              </td>
+              <td rowspan="2">
+                <img src="http://www.baianxi.com/images/zj.jpg" width="180" alt="">
+              </td>
+            </tr>
+            <tr>
+              <td style="text-align:left;padding-left:10px;">
+                <p>手机：</p>
+                <p>15982456282</p>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="3">
+                <h4 align="left" style="">责任清单</h4>
+                <div style="height:200px;">
+
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="3">
+                <h4 align="left" style="">履职清单</h4>
+                <div style="height:200px;">
+
+                </div>
+              </td>
+            </tr>
+            <tr></tr>
+          </table>
         </div>
         <div slot="footer">
           <el-button @click="dialogFormVisible3 = false" size="mini">取 消</el-button>