kicc-ui/src/views/system/user/userInfo/index.vue

<template>
  <div>
    <PageWrapper dense
                 fixedHeight
                 contentFullHeight
                 contentClass="flex"
    >
      <ACard class="base-info w-2/5 xl:w-2/5">
        <template #title>
          <UserOutlined/> 基本信息
        </template>
        <div class="user-info-top">
          <AAvatar draggable
                   width="32px"
                   src="https://godolphinx.org/dolphin1024x1024.png"
                   :size="80"
          />
          <h2>管理员</h2>
          <p>全栈工程师</p>
          <a-button preIcon="fa6-solid:id-badge"
                    type="primary"
                    shape="round"
          >admin</a-button>
        </div>
        <ADivider/>
        <div class="user-info-main">
          <ADescriptions :labelStyle="getLabelStyle"
                         :contentStyle="getDescriptionsStyle"
                         :colon="false"
          >
            <ADescriptionsItem span="24">
              <template #label>
                <Icon icon="fa6-solid:building"/>
              </template>
              研发部
            </ADescriptionsItem>
            <ADescriptionsItem span="24">
              <template #label>
                <Icon icon="fa6-solid:envelope"/>
              </template>
              1827945911@qq.com
            </ADescriptionsItem>
            <ADescriptionsItem span="24">
              <template #label>
                <Icon icon="fa6-solid:mobile"/>
              </template>
              15374801233
            </ADescriptionsItem>
            <ADescriptionsItem span="24">
              <template #label>
                <Icon icon="fa6-solid:venus-double"/>
              </template>
              男
            </ADescriptionsItem>
            <ADescriptionsItem span="24">
              <template #label>
                <Icon icon="fa6-solid:city"/>
              </template>
              长沙康来多租户
            </ADescriptionsItem>
            <ADescriptionsItem span="24">
              <template #label>
                <Icon icon="fa6-solid:robot"/>
              </template>
              已认证
            </ADescriptionsItem>
          </ADescriptions>
        </div>
      </ACard>
      <ACard class="info-modify w-3/5 xl:w-3/5">
        <template #title>
          <SettingOutlined/> 资料修改
        </template>
      </ACard>
    </PageWrapper>
  </div>
</template>

<script lang="ts" setup>
  import { Card, Avatar, Descriptions, Divider } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { UserOutlined, SettingOutlined } from '@ant-design/icons-vue';
  import type { CSSProperties } from 'vue';
  import { computed } from 'vue';
  import { Icon } from '/@/components/Icon';

  const ACard = Card;
  const AAvatar = Avatar;
  const ADescriptions = Descriptions;
  const ADescriptionsItem = Descriptions.Item;
  const ADivider = Divider;

  const getLabelStyle = computed((): CSSProperties => ({
    fontSize: '14px',
    display: 'inline',
    width: '40px'
  }));

  const getDescriptionsStyle = computed((): CSSProperties => ({
    fontSize: '20px',
    color: '#606266',
    'text-align': 'left',
    'font-weight': 400,
    'line-height': '23px',
    'font-size': '14px'
  }));

</script>

<style lang="less" scoped>

.base-info {
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 10px 15px 10px 10px;
  scrollbar-width: none;

  .user-info-top {
    padding: 20px 0px;
    text-align: center;

    h2 {
      color: #515a6e;
      margin-top: 10px;
      font-size: 24px;
    }

    p {
      color: #999;
      margin-top: 5px;
      font-size: 12px;
      font-weight: 0;
    }
  }

  .user-info-main {
    padding: 20px 100px;
  }
}

.base-info::-webkit-scrollbar {
  display: none;
}

.info-modify {
  margin: 10px 10px 10px 0px;

}

</style>