perf:完善样式

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

@@ -3,7 +3,7 @@
     <div class="avatar-left">
       <el-avatar :size="props.size" :src="iconUrl" />
 
-      <div v-if="props.isSelf">
+      <div v-if="props.isSelf" class="avatar-center">
         <div class="nick">{{ userInfo.nick }}</div>
       </div>
 
@@ -20,15 +20,14 @@
         <el-tag class="ml-2" type="warning">V8</el-tag>
         <el-tag class="ml-2" type="danger">会员</el-tag>
       </div>
+      <el-button
+        v-if="props.showWatching"
+        type="primary"
+        size="small"
+        icon="Plus"
+        >关注</el-button
+      >
     </div>
-
-    <el-button
-      v-if="props.showWatching"
-      type="primary"
-      size="default"
-      icon="Plus"
-      >关注</el-button
-    >
   </div>
 </template>
 <script setup>
@@ -110,6 +109,7 @@ const Init = () => {
 }
 
 .info {
+  flex: 1;
   margin-top: 0.6rem;
   margin-left: 1rem;
 }
@@ -123,16 +123,19 @@ const Init = () => {
 }
 
 .avatar {
+  flex: 1;
   display: flex;
   justify-content: space-between;
 }
 
 .avatar-left {
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
 }
-
+.avatar-center {
+  flex: 2;
+}
 .el-avatar {
   margin-right: 1rem;
   --el-avatar-bg-color: none;

Yi.Bbs.Vue3/src/layout/AppBody.vue

@@ -15,6 +15,7 @@
   display: flex;
   justify-content: center;
   width: 1300px;
+  max-width: 1400px;
   min-height: 1150px;
 }
 </style>

Yi.Bbs.Vue3/src/views/Article.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="article-box">
-    <!-- <div style="width: 1200px;"> -->
     <el-row :gutter="20" class="top-div">
       <el-col :span="5">
         <el-row class="art-info-left">
@@ -382,7 +381,7 @@ watch(
   }
 );
 </script>
-<style scoped>
+<style scoped lang="scss">
 .article-box {
   width: 100%;
   height: 100%;