问答列表详情页样式完善

src/views/asking/question/index.vue

@@ -128,7 +128,7 @@
     />
 
     <!-- 添加或修改问答列-问题对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body class="detail-dialog">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" maxlength="50"/>
@@ -190,10 +190,10 @@
         <el-form-item label="标题" prop="title">
           <el-input v-model="form1.title" placeholder="请输入标题" disabled/>
         </el-form-item>
-        <el-form-item label="正文" prop="text">
+        <el-form-item label="正文" prop="text" class="rich-text">
           <editor v-model="form1.text" :min-height="192" disabled/>
         </el-form-item>
-        <el-form-item label="是否首页展示" prop="whetherShow">
+        <el-form-item label="是否首页展示" prop="whetherShow" style="margin-left: 0;" class="inline">
           <el-select v-model="form1.whetherShow" placeholder="请选择是否首页展示" disabled>
             <el-option
               v-for="dict in dict.type.sys_yes_no"
@@ -203,7 +203,7 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="提问类型" prop="type">
+        <el-form-item label="提问类型" prop="type" class="inline">
           <el-select v-model="form1.typeId" filterable placeholder="请选择提问类型" disabled>
             <el-option
               v-for="dict in typeList"
@@ -213,20 +213,18 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="悬赏积分" prop="score">
+        <el-form-item label="悬赏积分" prop="score" class="inline">
           <el-input v-model="form1.score" placeholder="请输入悬赏积分" disabled />
         </el-form-item>
         <el-form-item label="图片" prop="path">
           <image-upload v-model="form1.path"/>
         </el-form-item>
 
-        <!-- 新增答案按钮 -->
-        <el-button type="primary" @click="addAnswerDialogVisible = true">新增答案</el-button>
         <!-- 答案列表 -->
-        <el-form :model="form1" ref="form1" :rules="rules" label-width="100px">
+        <el-form :model="form1" ref="form1" :rules="rules" label-width="100px" class="answer-list">
           <el-form-item label="答案列表">
             <ul>
-              <li v-for="(answer, index) in form1.answerList" :key="index">
+              <li v-for="(answer, index) in form1.answerList" :key="index" class="answer-item">
                 <p>{{ answer.answer }}</p>
                 <el-button type="danger" icon="el-icon-delete" @click="removeAnswer(index)">删除</el-button>
               </li>
@@ -235,6 +233,8 @@
         </el-form>
       </el-form>
       <div slot="footer" class="dialog-footer">
+        <!-- 新增答案按钮 -->
+        <el-button type="primary" @click="addAnswerDialogVisible = true">新增答案</el-button>
         <el-button v-if="form1.a == '1'" type="primary" @click="through(1)">通 过</el-button>
         <el-button v-if="form1.a == '1'" type="primary" @click="through(2)">不通过</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -447,7 +447,7 @@ export default {
         if (a === 1) {
           this.title = "审核";
         } else {
-          this.title = "查看";
+          this.title = "详情信息";
         }
       });
     },
@@ -522,3 +522,40 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+ ::v-deep .el-dialog {
+  width: 70% !important;
+  padding: 1% 4% 1% 1%;
+  .el-dialog__header{
+    display: none;
+  }
+  .el-dialog_body{
+    padding-right: 0;
+    padding-top: 0;
+  }
+  .inline{
+    display: inline-block;
+    margin-left: 11%;
+  }
+  .rich-text{
+    .el-form-item{
+      height: 0;
+    }
+    .ql-editor{
+      overflow: hidden;
+      overflow-y: scroll;
+      height: 250px;
+    }
+  }
+  .answer-list ul{
+    display: flex;
+    list-style: none;
+    flex-wrap: wrap;
+    padding-left: 0;
+    & li{
+      width: 50%;
+    }
+  }
+}
+</style>