feat: 开发中...

blog-frontend/src/views/BlogEditView.vue

@@ -106,7 +106,7 @@ function handleCreated(editor: IDomEditor) {
         />
       </el-scrollbar>
     </el-aside>
-    <el-main>
+    <el-main class="edit-form-side">
       <el-form :model="editBlog">
         <el-form-item label="博文标题">
           <el-input
@@ -152,17 +152,15 @@ function handleCreated(editor: IDomEditor) {
 
 .edit-content-side {
   height: 100%;
-  width: 80%;
+  width: 61.8%;
+  display: flex;
+  flex-direction: column;
+  border-style: solid;
+  border-width: 0 1px 0 1px;
+  border-color: #ccc;
 }
 
 .edit-content-toolbar {
-  height: 80px;
-  border: 1px solid #ccc;
-  border-top-width: 0;
-}
-.edit-content-scrollbar {
-  height: calc(100% - 80px);
-  border: 1px solid #ccc;
-  border-bottom: 0;
+  border-bottom: 1px solid #ccc;
 }
 </style>

blog-frontend/src/views/BlogReadView.vue

@@ -28,16 +28,22 @@ function deleteBlog() {
 <template>
   <el-container class="blog-container">
     <el-header class="blog-header">
-      <el-row :gutter="20">
+      <el-row :gutter="20" style="height: 100%; padding: 0; margin: 0">
         <el-col :span="4">
-          <p>{{ blogInfo?.creator.nickname }}</p>
+          <div style="display: flex; width: 100% height: 100%">
+            <p>{{ blogInfo?.creator.nickname }}</p>
+            <div style="flex-grow: 1"></div>
+          </div>
         </el-col>
         <el-col :span="16">
           <h1 class="blog-title">{{ blogInfo?.title }}</h1>
         </el-col>
         <el-col :span="4" v-if="globalStore.currentUserInfo?.role === 'ADMIN'">
-          <el-button type="primary" @click="editBlog">编辑</el-button>
-          <el-button type="danger" @click="deleteBlog">删除</el-button>
+          <div style="display: flex; width: 100% height: 100%">
+            <div style="flex-grow: 1"></div>
+            <el-button type="primary" @click="editBlog">编辑</el-button>
+            <el-button type="danger" @click="deleteBlog">删除</el-button>
+          </div>
         </el-col>
       </el-row>
     </el-header>
@@ -62,6 +68,7 @@ function deleteBlog() {
   padding-bottom: 10px;
   margin: 0;
   text-align: center;
+  width: 100%;
 }
 
 .blog-author {