问答提问弹框

src/components/ImageUpload/artimgUpload.vue

@@ -16,7 +16,6 @@
       :show-file-list="false"
       :headers="headers"
       style="display: inline-block;">
-    
       <el-image v-if="!value" :src="value" style="width:100%;height:100%;">
         <div slot="error" class="image-slot" >
            <i class="el-icon-upload"></i>

src/components/Qa/addQuestion.vue

@@ -4,14 +4,16 @@
  * @Description:
 -->
 <template>
-  <el-dialog :close-on-click-modal='false' title="发布问题" width="800px" :visible.sync="askQuestionDialog">
+<div>
-    <el-form ref="askForm" :model="askForm" :rules="askFormRules" label-position="right" label-width="60px">
+   <el-row class="article-add">
-      <el-form-item label="标题:" prop="title"><el-input type="text" v-model="askForm.title" show-word-limit placeholder="请输入问题标题,字符长度不能高于100" maxlength="100"></el-input></el-form-item>
+       <el-form ref="form" :rules="rules" :model="addForm" label-position="right" label-width="80px">
-      <el-form-item label="内容:" prop="content">
+         <el-dialog :close-on-click-modal='false' title="提问题" label-width="80px" :visible.sync="askQuestionDialog">
-        <el-input type="textarea" v-model="askForm.content" placeholder="请输入问题内容" :rows="6"></el-input>
+           <!-- <el-form ref="askForm" :model="askForm" :rules="askFormRules" label-position="right" > -->
+             <el-form-item label="标题:" prop="title">
+        <el-input class="title-input"   v-model="askForm.title" show-word-limit placeholder="请输入问题标题,字符长度不能高于100" maxlength="100"></el-input>
       </el-form-item>
-      <el-form-item label="图片" class="imageUrls">
+        <el-form-item label="封面">
-        <imageUpload dir="qa" :value="imageShowUrl" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></imageUpload>
+        <imageUpload dir="qa" width="410px" height="168px" :value="imageShowUrl" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></imageUpload>
         <!-- <el-upload
           :action="uploadFileUrl"
           :show-file-list="false"
@@ -25,12 +27,24 @@
             <span class="icon-text">上传图片</span>
         </el-upload> -->
       </el-form-item>
-    </el-form>
+      <el-form-item label="内容:" prop="content">
-    <div slot="footer" class="dialog-footer" style="text-align: left;margin-left:60px">
+        <el-input type="textarea" v-model="askForm.content" placeholder="请输入问题内容" :rows="8"></el-input>
-      <el-button type="primary" @click="addQaData" :disabled="!askForm.checked">发布问题</el-button>
+      </el-form-item>
+    
+    <!-- </el-form> -->
+    <el-form-item   >
+      <div class="btnbox">
+        <div class="check-right">
+          <el-checkbox style="margin-left:10px" v-model="askForm.checked"> </el-checkbox><span style="font-size:14px;color:#787878;margin-left:10px">我已阅读并遵守</span><span style="font-size:14px;color:#588afc;margin-right:10px;cursor: pointer;" @click="askFormCheckedShow = true">平台内容发布要求</span>
+        </div>
+        <div class="button-left">
+ <el-button type="primary" @click="addQaData" :disabled="!askForm.checked">发布问题</el-button>
       <el-button @click="askQuestionDialog = false">取 消</el-button>
-      <el-checkbox style="margin-left:10px" v-model="askForm.checked"> </el-checkbox><span style="font-size:14px;color:#787878;margin-left:10px">我已阅读并遵守</span><span style="font-size:14px;color:#588afc;margin-right:10px;cursor: pointer;" @click="askFormCheckedShow = true">平台内容发布要求</span>
+        </div>
-    </div>
+       
+      </div>
+     
+    </el-form-item>
      <el-dialog class="checked-show" :visible.sync="askFormCheckedShow" top="14vh"  width="800px" :show-close="false" :modal="false">
         <agreement></agreement>
         <span slot="footer" class="dialog-footer">
@@ -39,12 +53,16 @@
         </span>
       </el-dialog>
   </el-dialog>
+    </el-form>
+   </el-row>
+</div>
+  
 </template>
 
 <script>
   import { mapGetters } from 'vuex';
   import apiQa from '@/api/modules/qa.js';
-  import imageUpload from '@/components/ImageUpload/index.vue';
+  import imageUpload from '@/components/ImageUpload/artimgUpload.vue';
   import agreement from '@/components/Portal/agreement.vue'
   export default{
     data(){
@@ -131,6 +149,57 @@
 </script>
 
 <style scoped lang="scss">
+::v-deep .el-dialog__header{
+  padding-top: 40px !important;
+}
+::v-deep .el-dialog__title{
+  font-size: 20px !important;
+  color: #333333 !important;
+  padding-left: 20px;
+  font-weight: 600 !important;
+}
+::v-deep.el-dialog__footer{
+  text-align: left !important;
+}
+.btnbox{
+  display: flex;
+  width: 100%;
+  .check-right{
+    flex: 1;
+  }
+  .button-left{
+    margin-left: auto;
+  }
+}
+::v-deep .el-textarea__inner{
+  width: 90% !important;
+}
+::v-deep .el-input{
+    width: 90% !important;
+  }
+  ::v-deep .el-form-item__label{
+  font-size: 18px !important;
+  color: #333 !important;
+  font-weight: 600 !important;
+}
+.el-form-item__content{
+   display: flex;
+  justify-content: flex-start;
+ 
+  dl {
+        margin: 0;
+        padding: 10px;
+        margin-left: 20px;
+        line-height: 1.5;
+        dt {
+          font-size: 18px;
+          font-weight: 600;
+        }
+        dd {
+          margin: 0;
+        }
+      }
+}
 ::v-deep .checked-show{
   .el-dialog__header{
     padding:0;