用户管理-查看详情

src/views/userManagement/userList/index.vue

@@ -161,22 +161,21 @@
                      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
     </div>
     <!--    用户详细信息窗口-->
-    <el-dialog title="用户详情" :visible.sync="detailsDialogFormVisible" type="text" label-width="95px">
+    <el-dialog title="用户详情" :visible.sync="detailsDialogFormVisible" type="text" label-width="95px" class="user-list-dialog">
       <el-form>
-        <el-row>
         <el-row>
           <el-form-item label="基础信息">
             <span v-if="userDetails.status!=1">(状态-正常)</span>
             <span v-if="userDetails.status==1">(状态-已禁用)</span>
           </el-form-item>
         </el-row>
-          <el-row>
-            <el-col :span="6">
+        <el-row style="border-bottom: 1px dashed #ccc;padding: 10px 0;">
+          <el-col :span="3">
             <div class="demo-type">
-                <el-avatar :size="60"
+              <el-avatar
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                  @error="errorHandler">
-                  <img :src="userDetails.headimgurl"/>
+                <img :src="userDetails.headimgurl" style="width: 80px;"/>
               </el-avatar>
             </div>
           </el-col>
@@ -217,15 +216,13 @@
             </el-row>
           </el-col>
         </el-row>
-        </el-row>
-        <el-row>
         <el-row>
           <el-form-item label="实名认证状态">
             <span v-if="!statusBoolean">(状态-未认证)</span>
             <span v-if="statusBoolean">(状态-已认证)</span>
           </el-form-item>
         </el-row>
-          <el-row>
+        <el-row style="border-bottom: 1px dashed #ccc;padding-bottom: 10px;">
           <el-col :span="6">
             <el-form-item label="真实姓名: ">
               <span>{{userDetails.realName}}</span>
@@ -242,14 +239,9 @@
             </el-form-item>
           </el-col>
         </el-row>
-        </el-row>
         <el-row>
-          <el-row>
-            <el-form-item v label="会员信息">
-            </el-form-item>
-
+          <div style="margin: 20px 0;"><span style="font-size: 16px;font-weight: bold;">会员信息</span></div>
         </el-row>
-          <el-row>
         <el-row>
           <el-col :span="6">
             <el-form-item label="会员类型:">
@@ -271,35 +263,28 @@
               <span>{{userDetails.timeOfMembership}}</span>
             </el-form-item>
           </el-col>
-
         </el-row>
-            <el-row>
-              <el-col :span="8">
+        <el-row style="border-bottom: 1px dashed #ccc;padding-bottom: 10px;">
+          <el-col :span="12">
             <el-form-item label="最近充值时间:">
               <span>{{userDetails.recentRecharge}}</span>
             </el-form-item>
           </el-col>
-              <el-col :span="8">
+          <el-col :span="6">
             <el-form-item label="赠送总天数:">
               <span>{{userDetails.totalNumber}}</span>
             </el-form-item>
           </el-col>
-              <el-col :span="8">
+          <el-col :span="6">
             <el-form-item label="剩余总天数:">
               <span>{{userDetails.rentFreeDays}}</span>
             </el-form-item>
           </el-col>
-            </el-row>
 
         </el-row>
-        </el-row>
-        <el-row>
         <el-row>
-            <el-form-item v label="用户来源">
-            </el-form-item>
+          <div style="margin: 20px 0;"><span style="font-size: 16px;font-weight: bold;">用户来源</span></div>
         </el-row>
-          <el-row>
-
         <el-row>
           <el-col :span="6">
             <el-form-item label="来源:">
@@ -317,9 +302,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-          </el-row>
-        </el-row>
-
       </el-form>
 
 
@@ -1159,5 +1141,8 @@
   .member .el-dialog--small {
     width: 500px;
   }
+  .user-list-dialog .el-form-item{
+    margin-bottom: 0px;
+  }
 </style>