feat: 添加文章页面

Yi.BBS.Vue3/src/components/AvatarInfo.vue

@@ -1,22 +1,36 @@
 <template >
 
 <div class="avatar">
-    <el-avatar :size="props.size" />
-
-
-    <div>
+    <div class="avatar-left">
+        <el-avatar :size="props.size" />
+         <div>
        <div> 大白子</div>
        <div class="remarks"> 2022-03-05 23:33:20</div>
     </div>
+    </div>
+
+    <el-button type="primary" size="default" icon="Plus" >关注</el-button>
+
 </div>
 </template>
 <script setup>
 const props = defineProps(['size'])
 </script>
 <style scoped>
+.el-icon
+{
+color: white;
+
+}
 .avatar
 {
     display: flex;
+    justify-content:space-between;
+}
+.avatar-left
+{
+    display: flex;
+    justify-content:flex-start;
 }
 .el-avatar
 {

Yi.BBS.Vue3/src/components/ScrollbarInfo.vue

@@ -0,0 +1,28 @@
+<template>
+         <el-scrollbar>
+    <div class="scrollbar-flex-content">
+      <p v-for="item in 50" :key="item" class="scrollbar-item">
+        推荐{{ item }}
+      </p>
+    </div>
+  </el-scrollbar>
+    </template>
+    <style scoped>
+
+.scrollbar-flex-content {
+  display: flex;
+}
+.scrollbar-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 2.6rem;
+  margin: 0 0.2rem ;
+  text-align: center;
+  border-radius: 4px;
+  background-color:#FAFAFA;
+  font-size: 14px;
+}
+</style>