admin-manage/src/views/adminManage/adminDetail.vue

<template>
    <div class="adminDetail app-container">
      <TopBar ></TopBar>
  
      <div class="content">
        <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        用户名
                    </template>
                    kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        用户ID
                    </template>
                    12321515
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        用户状态
                    </template>
                    启用
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        手机号
                    </template>
                    13512546985
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        角色
                    </template>
                    商家
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        省份
                    </template>
                    四川
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        城市
                    </template>
                    成都
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        区县
                    </template>
                    高新区
                </el-descriptions-item>
                <el-descriptions-item>
                        <template slot="label">
                            详细地址
                        </template>
                        红星美凯龙2006
                    </el-descriptions-item>
                    <el-descriptions-item contentClassName="test">
                        <template slot="label">
                            申请审核时间
                        </template>
                        2023-05-26 16:55:30
                    </el-descriptions-item>
            </el-descriptions>
        
        <div class="img-box">
            <div class="img-item">
                <div class="img"></div>
                <div class="img-title">头像</div>
            </div>
            <div class="img-item">
                <div class="img"></div>
                <div class="img-title">身份证正面照</div>
            </div>
            <div class="img-item">
                <div class="img"></div>
                <div class="img-title">身份证反面照</div>
            </div>
            <div class="img-item">
                <div class="img"></div>
                <div class="img-title">手持身份证照</div>
            </div>
            <div class="img-item">
                <div class="img"></div>
                <div class="img-title">其他资质</div>
            </div>
        </div>

      </div>

  
    </div>
  </template>
  
  <script>
  export default {
    name: 'adminDetail',
    components: {
    },
    data() {
      return {
          
      }
    },

    methods: {
       
      
    },
      created () {
    },
  }
  </script>
  
  <style lang="scss" >
  .adminDetail {
      .content{
        border: 1px solid #ccc;
        padding: 40px 20px;
        border-radius: 4px;
        .table{
    .item{
        display: flex;
        align-items: center;
        font-size: 14px;
        text-align: center;
        .label{
            flex: 0 0 100px;
            line-height: 42px;
            background: #f1f1f1;
            border: 1px solid #ccc;
            font-weight: bold;
        }
        .value{
            flex: 1;
            line-height: 42px;
            border: 1px solid #ccc;
        }
    }
}

        .img-box{
            display: flex;
            align-items: center;
            margin-top: 80px;
            .img-item{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                .img{
                    width: 90%;
                    height: 150px;
                    background: #f1f1f1;
                }
                .img-title{
                    font-size: 14px;
                    margin-top: 15px;
                    font-weight: bold;
                }
            }
        }
 
      }
  }
  </style>