bug修改

src/views/article-management/article-detail.vue

@@ -2,12 +2,12 @@
   <!--  文章详情页-->
   <div class="pet-owner-detail">
       <!--   头部标题-->
-      <div style="padding-top:30px;text-align: center;">
+      <div class="topTitle">
         <span
           class="top-title-style"
         >详情</span>
       </div>
-      <div style="padding: 30px 20px 20px 20px;">
+      <div class="box-card">
         <div style="display: flex">
           <!--  文章信息 -->
           <div class="tip-green" />
@@ -25,7 +25,6 @@
               :rules="rules"
               label-width="6.8rem"
               label-position="right"
-              style="padding-left: 13px"
             >
               <el-form-item label="文章标题" prop="articleTitle" style="padding-top: 32px">
                 <el-input v-model="form.articleTitle" disabled placeholder="暂无数据" />
@@ -58,13 +57,17 @@
                   </div>
                 </div>
               </el-form-item>
+              <div class="lastRow">
                 <el-form-item label="文章内容" prop="articleCover">
                   <!--   0-- 文章信息的页面--文章封面 -->
                   <editor v-model="form.articleContent" read-only />
                 </el-form-item>
+              </div>
+              <div class="lastRow footerButton">
                 <el-form-item label="" prop="">
                   <el-button class="resetBtn" icon="el-icon-back" @click="goBack">返 回</el-button>
                 </el-form-item>
+              </div>
             </el-form>
           </div>
         </div>
@@ -178,9 +181,12 @@ export default {
 <style lang="scss" scoped>
 //整个页面整体布局
 .pet-owner-detail {
+  min-height: calc(100vh - 100px);
   //最外层嵌套卡片的样式
   .box-card {
-    min-height: calc(100vh - 100px);
+    //padding: 30px 20px 20px 20px;
+    padding-left: 32px;
+    padding-right: 32px;
   }
   background-color: #fff;
   //模块tip样式--绿色
@@ -271,4 +277,17 @@ export default {
 ::v-deep .ql-snow {
   border-color: #e5e5e5 !important;
 }
+.topTitle {
+  padding-top: 30px;
+  padding-bottom: 30px;
+  text-align: center;
+}
+.lastRow {
+  ::v-deep .el-form-item {
+    margin-bottom: 0;
+  }
+}
+.footerButton {
+  margin-top: 30px;
+}
 </style>

src/views/article-management/article-edit.vue

@@ -2,12 +2,12 @@
   <!--  文章详情页-->
   <div class="pet-owner-detail">
       <!--   头部标题-->
-      <div style="padding-top:30px;text-align: center;">
+    <div class="topTitle">
         <span
           class="top-title-style"
         >编辑</span>
     </div>
-      <div style="padding: 30px 20px 20px 20px;">
+    <div class="box-card">
         <div style="display: flex">
           <!--   0-- 文章信息--标签头 -->
           <div class="tip-green" />
@@ -46,9 +46,12 @@
                   </div>
                 </div>
               </el-form-item>
+              <div class="lastRow">
                 <el-form-item label="文章内容" prop="articleContent">
                   <editor v-model="form.articleContent" min-height="200" />
                 </el-form-item>
+              </div>
+              <div class="lastRow footerButton">
                 <el-form-item>
                   <div>
                     <el-button class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
@@ -61,6 +64,7 @@
                     />
                   </div>
                 </el-form-item>
+              </div>
             </el-form>
           </div>
         </div>
@@ -253,9 +257,12 @@ export default {
 <style lang="scss" scoped>
 //整个页面整体布局
 .pet-owner-detail {
+  min-height: calc(100vh - 100px);
   //最外层嵌套卡片的样式
   .box-card {
-    //margin: 20px 20px 20px 20px;
+    //padding: 30px 20px 20px 20px;
+    padding-left: 32px;
+    padding-right: 32px;
   }
   background-color: #ffffff;
   //模块tip样式--绿色
@@ -299,9 +306,8 @@ export default {
     color: #666666;
     //display: grid !important;
     //grid-template-columns: repeat(3, auto);
-    margin-top: 20px;
+    margin-top: 30px;
     margin-bottom: 20px;
-    margin-left: 13px;
   }
 
   //表格内容选中后的样式-all
@@ -335,4 +341,17 @@ export default {
 ::v-deep .ql-snow {
   border-color: #e5e5e5 !important;
 }
+.topTitle {
+  padding-top: 30px;
+  padding-bottom: 30px;
+  text-align: center;
+}
+.lastRow {
+  ::v-deep .el-form-item {
+    margin-bottom: 0;
+  }
+}
+.footerButton {
+  margin-top: 30px;
+}
 </style>

src/views/article-management/article-insert.vue

@@ -2,12 +2,12 @@
   <!--  文章详情页-->
   <div class="pet-owner-detail">
       <!--   头部标题-->
-      <div style="padding-top:30px;text-align: center;">
+      <div class="topTitle">
         <span
           class="top-title-style"
         >新增</span>
       </div>
-      <div style="padding: 30px 20px 20px 20px;">
+      <div class="box-card">
         <div style="display: flex">
           <!--   0-- 文章信息--标签头 -->
           <div class="tip-green" />
@@ -50,6 +50,7 @@
                   </div>
                 </div>
               </el-form-item>
+              <div class="lastRow">
                 <el-form-item label="文章内容" prop="articleContent">
                   <editor
                     v-model.trim="form.articleContent"
@@ -57,6 +58,8 @@
                     @change="changeQuillEditor('articleContent')"
                   />
                 </el-form-item>
+              </div>
+              <div class="lastRow footerButton">
                 <el-form-item>
                   <div>
                     <el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
@@ -69,6 +72,7 @@
                     />
                   </div>
                 </el-form-item>
+              </div>
             </el-form>
           </div>
         </div>
@@ -226,7 +230,9 @@ export default {
   background-color: #ffffff;
   //最外层嵌套卡片的样式
   .box-card {
-    //margin: 20px 20px 20px 20px;
+    //padding: 30px 20px 20px 20px;
+    padding-left: 32px;
+    padding-right: 32px;
   }
 
   //模块tip样式--绿色
@@ -260,11 +266,8 @@ export default {
   //1--基本信息--模块内信息整体样式
   .base-msg {
     color: #666666;
-    //display: grid !important;
-    //grid-template-columns: repeat(3, auto);
-    margin-top: 20px;
+    margin-top: 30px;
     margin-bottom: 20px;
-    margin-left: 13px;
   }
 
   //表格内容选中后的样式-all
@@ -306,6 +309,11 @@ export default {
   font-weight: bold;
   color: #333333;
 }
+.topTitle {
+  padding-top: 30px;
+  padding-bottom: 30px;
+  text-align: center;
+}
 .dialog-footer{
   margin-bottom: 20px;
   margin-top: 60px;
@@ -313,4 +321,12 @@ export default {
 ::v-deep .ql-snow {
   border-color: #e5e5e5 !important;
 }
+.lastRow {
+  ::v-deep .el-form-item {
+    margin-bottom: 0;
+  }
+}
+.footerButton {
+  margin-top: 30px;
+}
 </style>