diff --git "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md" "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md"
index 3e057d1f255e620c806210f6adbb3b5ac53b5d56..025445f97ff570ee233667e080785007d1b9c618 100644
--- "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md"
+++ "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md"
@@ -3,6 +3,11 @@
 ## 基本用法
 
 ### 图片
+
+```
+import { IMAGE_TYPE } from '@/common/constants'
+```
+
 ```typescript jsx
 <ImageComponent image={{
   type: IMAGE_TYPE.IMG,
@@ -11,6 +16,7 @@
 ```
 
 ### ant design图标
+
 ```typescript jsx
 <ImageComponent image={{
   type: IMAGE_TYPE.ANTD,
@@ -20,13 +26,14 @@
 
 ## API
 
-| 参数        | 说明                   | 类型              | 默认值 |
-|-----------|----------------------|-----------------|-----|
-| image     | 图片对象                 | [Image](#image) | -   |
-| className | 最外层 div className 属性 | string          | -   |
-| style     | 最外层 div style 属性     | CSSProperties   | -   |
+| 参数      | 说明                      | 类型            | 默认值 |
+| ----------- | --------------------------- | ----------------- | -------- |
+| image     | 图片对象                  | [Image](#image) | -      |
+| className | 最外层 div className 属性 | string          | -      |
+| style     | 最外层 div style 属性     | CSSProperties   | -      |
 
 ### <div id='image'>Image<div>
+
 ```typescript jsx
 export interface Image {
   type: number
@@ -36,6 +43,7 @@ export interface Image {
 ```
 
 ### type 类型常量
+
 ```typescript jsx
 // 图标类型
 const IMAGE_TYPE = {
@@ -44,3 +52,4 @@ const IMAGE_TYPE = {
   ALI: 2 // 阿里图标库
 }
 ```
+
diff --git "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md" "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md"
index 203b191a5050185952e8627d7ccbf900592fee7f..b23bdecef0c7a59dbb8cc2b7e131ebd1776d2300 100644
--- "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md"
+++ "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md"
@@ -16,20 +16,21 @@
 
 ## API
 
-| 参数         | 说明                    | 类型                                  | 默认值   |
-|------------|-----------------------|-------------------------------------|-------|
-| className  | 最外层 div className 属性  | string                              | -     |
-| breadcrumb | 面包屑                   | [BreadcrumbData](#BreadcrumbData)[] | -     |
-| back       | 后退方法                  | (e:MouseEvent) => void              | -     |
-| extra      | 操作区，位于 title 行的行尾行    | ReactNode                           | -     |
-| title      | 自定义标题文字               | ReactNode                           | -     |
-| subTitle   | 自定义二级标题文字             | ReactNode                           | -     |
-| footer     | View的页脚，一般用于渲染 TabBar | ReactNode                           | -     |
-| style      | 最外层 div style 属性      | CSSProperties                       | -     |
-| border     | 是否显示边框                | boolean                             | false |
-| margin     | 是否显示外边距，24px          | boolean                             | true  |
-| padding    | 是否显示内边距，24px          | boolean                             | true  |
-| radius     | 是否边框圆角                | boolean                             | true  |
+| 参数               | 说明                    | 类型                                  | 默认值   |
+|------------------|-----------------------|-------------------------------------|-------|
+| className        | 最外层 div className 属性  | string                              | -     |
+| breadcrumb       | 面包屑                   | [BreadcrumbData](#BreadcrumbData)[] | -     |
+| back             | 后退方法                  | (e:MouseEvent) => void              | -     |
+| extra            | 操作区，位于 title 行的行尾行    | ReactNode                           | -     |
+| title            | 自定义标题文字               | ReactNode                           | -     |
+| subTitle         | 自定义二级标题文字             | ReactNode                           | -     |
+| footer           | View的页脚，一般用于渲染 TabBar | ReactNode                           | -     |
+| style            | 最外层 div style 属性      | CSSProperties                       | -     |
+| border           | 是否显示边框                | boolean                             | false |
+| margin           | 是否显示外边距，24px          | boolean                             | true  |
+| padding          | 是否显示内边距，24px          | boolean                             | true  |
+| radius           | 是否边框圆角                | boolean                             | true  |
+| contentClassName | children className属性  | string                              | -     |
 
 ### children
 View内容定义
diff --git a/src/common/utils/common.ts b/src/common/utils/common.ts
index 87d3a8a3fc82dcc2a96a37db2c3d62328e98fc94..6d6a16fc28bcbb1ebfa0114470558816df181e4d 100644
--- a/src/common/utils/common.ts
+++ b/src/common/utils/common.ts
@@ -40,7 +40,9 @@ export function treeToList<T = any>(tree: any, config = DEFAULT_CONFIG): T {
   const { children } = config
   const result: any = [...tree]
   for (let i = 0; i < result.length; i++) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     if (!result[i][children!]) continue
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     result.splice(i + 1, 0, ...result[i][children!])
   }
   return result
diff --git a/src/components/View/index.tsx b/src/components/View/index.tsx
index b20a01886356da62c0ea6ff987876a49f084b788..9649de5586451b0a6bdca2447f8237bc1dba6feb 100644
--- a/src/components/View/index.tsx
+++ b/src/components/View/index.tsx
@@ -24,6 +24,7 @@ interface Props {
   margin?: boolean
   padding?: boolean
   radius?: boolean
+  contentClassName?: string
 }
 
 const View: React.FC<Props> = ({
@@ -39,7 +40,8 @@ const View: React.FC<Props> = ({
   border = false,
   margin = true,
   padding = true,
-  radius = true
+  radius = true,
+  contentClassName
 }) => {
   return (
     <div
@@ -87,7 +89,7 @@ const View: React.FC<Props> = ({
         </div>
         {extra && <div className={styles.extra}>{extra}</div>}
       </div>
-      {children}
+      <div className={contentClassName}>{children}</div>
       {footer && (
         <>
           <div className={styles.footerBox} />
diff --git a/src/pages/apps/management/user/userinfo/index.module.scss b/src/pages/apps/management/user/userinfo/index.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0b60c20dcbc45429ec83862e0d26de88655b3c3b
--- /dev/null
+++ b/src/pages/apps/management/user/userinfo/index.module.scss
@@ -0,0 +1,56 @@
+$color: #999;
+
+.box {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.userinfo {
+  min-width: 783px;
+}
+
+.header {
+  display: flex;
+}
+
+.icon {
+  width: 60px;
+  height: 60px;
+}
+
+.headerItemBox {
+  border-right: 1px solid $color;
+  padding: 6px 25px 0;
+}
+
+.headerItemLabel {
+  color: $color;
+}
+
+.headerItemValue {
+  margin-top: 4px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.nameBox {
+  padding-left: 15px;
+  width: 140px;
+}
+
+.name {
+  font-weight: bold;
+}
+
+.role {
+  color: $color;
+}
+
+.logout {
+  margin-top: 3px;
+}
+
+.date {
+  color: $color;
+}
diff --git a/src/pages/apps/management/user/userinfo/index.tsx b/src/pages/apps/management/user/userinfo/index.tsx
index 6c52668a88d5302dd3fc5cbbfa38dc484981c5b8..6dcb10791db9657fa3d306ffc9bbe6bb31bf48c7 100644
--- a/src/pages/apps/management/user/userinfo/index.tsx
+++ b/src/pages/apps/management/user/userinfo/index.tsx
@@ -1,29 +1,108 @@
 import React from 'react'
 import View from '@/components/View'
-import { Button, Tabs } from 'antd'
+import { Button, List, Typography } from 'antd'
+import { InfoCircleFilled } from '@ant-design/icons'
+import styles from './index.module.scss'
+import userIcon from '@img/icon/user/default.png'
+import ImageComponent from '@/components/ImageComponent'
+import { IMAGE_TYPE } from '@/common/constants'
+import classnames from 'classnames'
+
+const data = [
+  {
+    id: 1,
+    title: '你有一个事项未处理',
+    date: '2022/09/21 13:56',
+    typeText: '紧急',
+    type: 1
+  },
+  {
+    id: 2,
+    title: '你有一个事项未处理',
+    date: '2022/09/21 13:56',
+    typeText: '紧急',
+    type: 1
+  },
+  {
+    id: 3,
+    title: '你有一个事项未处理',
+    date: '2022/09/21 13:56',
+    typeText: '普通',
+    type: 0
+  }
+]
 
 const Userinfo: React.FC = () => {
-  const items = [
-    { label: '选项一', key: '1' },
-    { label: '选项二', key: '2' }
-  ]
   return (
-    <div>
-      <View
-        border
-        margin={false}
-        radius={false}
-        breadcrumb={[{ name: '中文', path: '/' }, { name: '个人中心' }]}
-        extra={<Button type="primary">按钮</Button>}
-        back={(e: any) => console.log(e)}
-        title="主标题"
-        subTitle="副标题asd"
-        footer={<Tabs defaultActiveKey="1" items={items} />}>
-        info
-      </View>
-      <View border title="标题" extra={<Button type="primary">按钮</Button>}>
-        content
-      </View>
+    <div className={styles.box}>
+      <div className={styles.userinfo}>
+        <View
+          contentClassName={styles.header}
+          border
+          margin={false}
+          radius={false}>
+          <div className={styles.headerIcon}>
+            <ImageComponent
+              className={styles.icon}
+              image={{
+                type: IMAGE_TYPE.IMG,
+                src: userIcon
+              }}
+            />
+          </div>
+          <div className={classnames(styles.headerItemBox, styles.nameBox)}>
+            <div className={styles.name}>李元芳</div>
+            <div className={styles.role}>集团总经理</div>
+          </div>
+          <div className={styles.headerItemBox}>
+            <div className={styles.headerItemLabel}>代办事项</div>
+            <div className={styles.headerItemValue}>12</div>
+          </div>
+          <div className={styles.headerItemBox}>
+            <div className={styles.headerItemLabel}>今日任务</div>
+            <div className={styles.headerItemValue}>16</div>
+          </div>
+          <div className={styles.headerItemBox}>
+            <div className={styles.headerItemLabel}>我的计划</div>
+            <div className={styles.headerItemValue}>7</div>
+          </div>
+          <div className={styles.headerItemBox}>
+            <div className={styles.headerItemLabel}>完成事项</div>
+            <div className={styles.headerItemValue}>10</div>
+          </div>
+          <div style={{ flexGrow: 1 }} />
+          <div>
+            <div>
+              <Button type="primary">切换角色</Button>
+            </div>
+            <div className={styles.logout}>
+              <Button type="primary" danger>
+                退出登录
+              </Button>
+            </div>
+          </div>
+        </View>
+        <View border title="代办事项">
+          <List
+            bordered={false}
+            split={false}
+            dataSource={data}
+            renderItem={item => (
+              <List.Item key={item.id}>
+                <List.Item.Meta
+                  avatar={
+                    <InfoCircleFilled
+                      style={{ color: item.type === 1 ? 'red' : 'blue' }}
+                    />
+                  }
+                  title={item.title}
+                />
+                <div className={styles.date}>{item.date}</div>
+              </List.Item>
+            )}
+          />
+        </View>
+      </div>
     </div>
   )
 }
diff --git a/src/public/img/icon/user/default.png b/src/public/img/icon/user/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..f26a73fc45953c7b4acd49789bad59a8f54b52a0
Binary files /dev/null and b/src/public/img/icon/user/default.png differ