diff --git a/Yi.BBS.Vue3/src/components/AvatarInfo.vue b/Yi.BBS.Vue3/src/components/AvatarInfo.vue
new file mode 100644
index 00000000..be51fe56
--- /dev/null
+++ b/Yi.BBS.Vue3/src/components/AvatarInfo.vue
@@ -0,0 +1,30 @@
+<template >
+
+<div class="avatar">
+    <el-avatar :size="props.size" />
+
+
+    <div>
+       <div> 大白子</div>
+       <div class="remarks"> 2022-03-05 23:33:20</div>
+    </div>
+</div>
+</template>
+<script setup>
+const props = defineProps(['size'])
+</script>
+<style scoped>
+.avatar
+{
+    display: flex;
+}
+.el-avatar
+{
+    margin-right: 1.2rem;
+}
+.remarks
+{
+    padding-top: 0.5rem;
+    color: #8C8C8C;
+}
+</style>
\ No newline at end of file
diff --git a/Yi.BBS.Vue3/src/views/Article.vue b/Yi.BBS.Vue3/src/views/Article.vue
index 1eb9cd21..445bf482 100644
--- a/Yi.BBS.Vue3/src/views/Article.vue
+++ b/Yi.BBS.Vue3/src/views/Article.vue
@@ -3,8 +3,9 @@
         <el-col :span="17">
 
             <el-row class="left-div">
-                <el-col :span="24">
-                    作者信息
+                <el-col :span="24" >
+                   <AvatarInfo :size="50"></AvatarInfo>
+
                     <el-divider />
                     <h2>面试题挑战</h2>
                     文章详情
@@ -51,6 +52,7 @@
 </template>
 <script setup>
 import { h, ref } from 'vue'
+import AvatarInfo from '@/components/AvatarInfo.vue'
 const spacer = h(ElDivider, { direction: 'vertical' })
 </script>
 <style scoped >