<template>
  <el-dialog title="用户信息" :visible.sync="userDialogVisible">
    <el-form
      ref="userForm"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-col :span="12">
            <el-form-item label="用户名">{{userForm.name}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号状态">正常用户</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机账号">{{userForm.account}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="真实姓名">{{userForm.name}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">{{userForm.sex}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位">{{userForm.position}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在企业">{{userForm.company}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">{{userForm.tel}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱">{{userForm.mail}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在城市">{{userForm.city}}</el-form-item>
          </el-col>
        </el-col>
        <el-col :span="8">
          <div class="headImg" :style="{backgroundImage:'url('+ userForm.img +')'}"></div>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary">确定</el-button>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item align="right">
            <span>创建时间：2018/08/23 18：52：12</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        userDialogVisible: false,
        userForm: ''
      }
    },
    created() {
    },
    methods: {
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .form-main{
    width:100%;
  }
  .shortW{
    width:300px;
  }
  .headImg{
    width: 60px;
    height: 60px;
    background-size: cover;
  }

</style>
