fix : 修复文章详情排版

src/views/article-management/detail.vue

@@ -1,30 +1,15 @@
 <template>
   <div v-loading="loading" class="article-detail">
-    <baseTitle title="文章详情"></baseTitle>
     <el-form :model="formData" >
-      <el-row gutter="20" style="margin-left: 5px">
-        <el-col :span="6">
-          <el-form-item label="文章标题">
-            <span>{{ formData.articleTitle }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="文章类型">
-            <Tag dictType="article_type" :value="formData.articleType"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="创建时间">
-            <span>{{ formData.articleTime }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="备注">
-            <span>{{ formData.remarks }}</span>
-          </el-form-item>
-        </el-col>
+      <h2 class="article-title">{{ formData.articleTitle }}</h2>
+      <div class="article-title">
+        <Tag dictType="article_type" :value="formData.articleType"/>
+        <span>{{ formData.articleTime }}</span>
+        <span>备注：{{ formData.remarks }}</span>
+      </div>
+      <el-row gutter="20">
         <el-col :span="24">
-          <el-form-item label="文章内容">
+          <el-form-item >
             <div v-html="formData.articleContent"></div>
           </el-form-item>
         </el-col>
@@ -61,10 +46,19 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .article-detail{
   padding: 0 30px;
+  padding-top: 15px;
   width: 100%;
   height: 100%;
+  .article-title{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    >span:nth-child(2){
+      margin: 15px;
+    }
+  }
 }
 </style>