fix: 简单调整一下问卷编辑页面头部样式

src/views/form/editor/RightPanel.vue

@@ -1404,9 +1404,16 @@ export default {
     addSelectItem() {
       let lastItem = _.last(this.activeData.__slot__.options);
       this.activeData.__slot__.options.push({
-        label: '',
-        value: lastItem ? lastItem.value === 0 ? _.max(_.values(this.activeData.__slot__.options.map(item =>
-          item.value))) + 1 : lastItem.value + 1 : 1
+        label: "",
+        value: lastItem
+          ? lastItem.value === 0
+            ? _.max(
+                _.values(
+                  this.activeData.__slot__.options.map((item) => item.value)
+                )
+              ) + 1
+            : lastItem.value + 1
+          : 1,
       });
     },
     async blukAddSelectItems() {
@@ -1617,7 +1624,7 @@ export default {
 .right-board {
   width: 350px;
   position: absolute;
-  right: 17px;
+  right: 0px;
   top: 0;
   padding-top: 3px;
   background-color: #fff;

src/views/form/editor/index.vue

@@ -37,7 +37,7 @@
             <el-scrollbar class="center-scrollbar">
                 <el-row v-if="formConf" :gutter="formConf.gutter" class="center-board-row">
                     <el-row align="middle" justify="center" type="flex">
-                        <el-col :span="20" class="text-center">
+                        <el-col class="form-head-title">
                             <h4 class="form-name-text" contenteditable="true"
                                 @blur="(event)=>{
                                     this.formConf.title=event.target.innerText;
@@ -48,7 +48,7 @@
                         </el-col>
                     </el-row>
                     <el-row align="middle" justify="center" type="flex">
-                        <el-col :span="23">
+                        <el-col class="form-head-desc">
                             <Tinymce v-if="editDescription" v-model="formConf.description"
                                      placeholder="请输入表单描述"
                                      @blur="editDescription=false" @input="saveProjectInfo"
@@ -64,7 +64,7 @@
                             <!--                            </p>-->
                         </el-col>
                     </el-row>
-                    <el-divider />
+                    <el-divider class="form-head-divider" />
                     <el-form
                         :disabled="formConf.disabled"
                         :label-position="formConf.labelPosition"
@@ -421,8 +421,33 @@ export default {
 @import '@/assets/styles/form/index';
 </style>
 <style lang="scss" scoped>
+
+.center-board {
+
+  .center-board-row {
+    margin-right: 10px;
+  }
+
+  .form-head-title {
+    padding: 0 10px;
+    text-align: center;
+
     .form-name-text:hover{
       border: 1px dashed #7b7b7b;
       min-height: 100px;
     }
+
+  }
+
+  .form-head-desc {
+    padding: 0 10px;
+  }
+
+  .form-head-divider {
+    margin-right: 10px;
+    margin-left: 10px;
+    width: auto;
+  }
+}
+
 </style>

src/views/form/index.vue

@@ -1,23 +1,16 @@
 <template>
     <div class="form-index-container">
         <el-card class="header-container">
-            <el-row align="middle" type="flex">
-                <el-col :span="2">
+            <el-row align="middle" type="flex" :gutter="5">
                 <i class="el-icon-back" @click="$router.back(-1)" />
-                </el-col>
-                <el-col :span="3" :xs="6">
                 <img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})">
-                </el-col>
-                <el-col :span="1" :xs="3">
-                    <el-button icon="el-icon-view" type="primary" @click="openPreviewHandle">
+                <el-col />
+                <el-button type="primary" icon="el-icon-view" @click="previewDialogVisible=true">
                     预览
                 </el-button>
-                </el-col>
-                <el-col :span="2" :xs="3">
-                    <el-button icon="el-icon-folder-add" type="success" @click="saveProjectAsTemplateHandle">
+                <el-button type="success" icon="el-icon-folder-add" @click="saveProjectAsTemplateHandle">
                     保存为模板
                 </el-button>
-                </el-col>
             </el-row>
         </el-card>
         <div class="main-container">
@@ -139,13 +132,14 @@ export default {
 .header-container {
   width: 100%;
   height: 50px;
+  padding: 0 20px;
 
   .el-icon-back {
     font-size: 22px;
     font-weight: 550;
     cursor: pointer;
     color: #000;
-    margin-left: 40px;
+    margin-right: 75px;
 
     &:hover {
       color: rgb(32, 160, 255);