data-marketing-platform/src/views/home/user-info.vue

<template>
  <div class="user-info">
    <el-card>
      <div class="flex" style="height: 226px; ">
        <div class="avatar">
          <el-avatar :size="100" :src="user.avatar" @error="errorHandler">
            <img :src="user.avatar" />
          </el-avatar>
        </div>
        <div class="detail">
          <div class="nickname">{{ user.nickname }}</div>
          <div class="username">@{{ user.username }}</div>
          <div class="email">{{ user.email }}</div>
          <div class="postName">{{ user.postList[0].postName }}</div>
          <div class="dept">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_1_110)">
                <path d="M5.25 3.25L2.75 5V11" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 1L7.75 2.75V6L9.5 7.25V11H5.25V1Z"
                  stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M1 11H11" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
              </g>
              <defs>
                <clipPath id="clip0_1_110">
                  <rect width="12" height="12" fill="white" />
                </clipPath>
              </defs>
            </svg>
            {{ user.dept.name }}
          </div>
        </div>
      </div>
      <div class="task-list">
        <div class="task-item">
          <div class="task-title">代办任务</div>
          <div class="task-num">0</div>
          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.125 11.875H26.875V25.625C26.875 26.3154 26.3154 26.875 25.625 26.875H4.375C3.68464 26.875 3.125 26.3154 3.125 25.625V11.875Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
            <path d="M3.125 6.25C3.125 5.55964 3.68464 5 4.375 5H25.625C26.3154 5 26.875 5.55964 26.875 6.25V11.875H3.125V6.25Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
            <path d="M10 19.375L13.75 23.125L21.25 15.625" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10 3.125V8.125" stroke="#167AF0" stroke-width="2" stroke-linecap="round"/>
            <path d="M20 3.125V8.125" stroke="#167AF0" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="task-item">
          <div class="task-title">抄送任务</div>
          <div class="task-num">0</div>
          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M26.875 3.125L18.5625 26.875L13.8125 16.1875L3.125 11.4375L26.875 3.125Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
            <path d="M26.8751 3.125L13.8126 16.1875" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
const errorHandler = () => {
  return './src/assets/avatar.png'
}
const postName = computed(() => {
  return user.postList?.forEach((item: any) => {
    return item.postName
  })?.join('|')
})

const user = {
  "userId": "1",
  "username": "admin",
  "avatar": "/admin/sys-file/s3demo/063a1ea1f6714226851de23f1329672b.png",
  "dept": {
    "deptId": "4",
    "name": "销售部",
  },
  "postList": [
    {
      "postName": "CTO",
    }
  ],
  "nickname": "管理员",
  "name": "管理员",
  "email": "[email protected]"
}
</script>
<style scoped lang="scss">
.user-info {
  .flex {
    padding-top: 44px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    .avatar {
      margin-top: 8px;
      width: 50%;
      padding-left: calc(50% - 110px);
    }

    .detail {
      width: 50%;
      padding-left: 10px;
      .nickname {
        font-size: 20px;
        font-weight: 600;
      }

      .username {
        font-size: 12px;
        line-height: 14px;
        color: rgba(136, 136, 136, 1);
        margin-top: 8px;
      }

      .email {
        font-size: 12px;
        line-height: 14px;
        color: rgba(136, 136, 136, 1);
        margin-top: 8px;
      }

      .postName {
        display: inline-block;
        font-size: 12px;
        line-height: 14px;
        color: rgba(136, 136, 136, 1);
        margin-top: 8px;
        border: 1px solid rgba(22, 122, 240, 1);
        line-height: 20px;
        border-width: 1px;
        border-radius: 4px;
        font-family: Source Han Sans SC;
        font-size: 11px;
        color: rgba(22, 122, 240, 1);
        padding: 0 4px;
      }

      .dept {
        font-size: 12px;
        line-height: 14px;
        color: rgba(136, 136, 136, 1);
        margin-top: 8px;
      }
    }
  }

  .task-list {
    height: 140px; 
    padding-top: 60px; 
    width: 100%; 
    max-width: 280px;
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    border-top: 1px solid rgba(230, 230, 230, 1);
    .task-item {
      position: relative;
      padding-left: 42px;
      svg {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .task-title {
      line-height: 17px;
      color: rgba(100, 100, 100, 1);
      font-size: 14px;
    }
    .task-num {
      font-size: 18px;
      line-height: 22px;
      color: rgba(18, 18, 18, 1);
    }
  }
}
</style>