mod:样式 调整

frontend/src/views/components/PictureEditor/mixin/edit/index.scss

@@ -1,20 +1,24 @@
 .picture-editor-wrap_edit {
   position: fixed;
-  width: 300px;
+  width: 200px;
   right: 0px;
   top:80px;
   z-index: 10;
   bottom: 0px;
   background: #fff;
   border-radius: 5px;
-  padding: 10px;
+  padding: 0px;
   overflow-y: auto;
   overflow-x: hidden;
   color: #000;
   .title {
     font-size: 16px;
-    line-height: 30px;
-    height: 30px;
+    line-height: 40px;
+    height: 40px;
+    border-bottom: 1px solid #eee;
+    background: #fafafa;
+    text-align:left;
+    padding-left: 10px;
   }
   .title_two {
     color: #000;
@@ -22,6 +26,9 @@
     line-height: 30px;
     height: 30px;
     margin-top: 10px;
+    padding-left: 10px;
+    text-align: left;
+    margin-bottom:5px;
   }
 
   .edit-font-size {
@@ -31,11 +38,19 @@
     }
   }
   .el-button {
-    border: 1px solid #D8DCF4;
-    background: #D8DCF4;
-    color: #000;
+    padding: 15px !important;
+    height: 32px;
+    line-height: 32px;
   }
 
+
+  .edit-wrap
+  {
+    >div.flex {
+      margin-left: 10px;
+    }
+
+  }
   ::v-deep {
 
 /*    .el-input-number__decrease,.el-input-number__increase {

frontend/src/views/components/PictureEditor/mixin/edit/module/textbox.js

@@ -11,21 +11,22 @@ const textbox = () => {
   return `
       <div class="edit-wrap">
           <div class="title step-label"><span class="step-row_color">编辑内容</span></div>
-          <div class="label title_two">字体</div>
-          <div class="flex left">
+          <div class="flex left mar-top-10">
+            字体
             <el-select
             v-model="fontFamilyStyle || editLayer.fontFamily"
             :clearable="false"
+            style="width: 120px"
+            class="mar-left-10"
             placeholder="请选择"
             @change="setFontFamily"
-            size="small"
              >
               <el-option
                 v-for="item in options"
                 :key="item.name"
                 :label="item.name"
                 :value="item.name">
-                <img :src="item.thumbnail" style="max-width: 100%; height: 32px;">
+                <img :src="item.thumbnail" style="max-width: 80%; height: 32px;">
               </el-option>
             </el-select>
           </div>
@@ -34,7 +35,7 @@ const textbox = () => {
           <div class="flex left mar-top-10">
             <div class="edit-font-size flex left position-r">
                 <el-select :value="editLayer.fontSize" :clearable="false"
-                     size="small"
+                     style="width: 80px"
                  @change="(val)=>editObj({label:'fontSize',value:val})">
                      <el-option v-for="item,index in TextboxConfig.fontSize" :key="index" :value="item">{{item}}</el-option>
                  </el-select>
@@ -45,35 +46,31 @@ const textbox = () => {
                @change="(val)=>editObj({label:'fill',value:val})"></el-color-picker>
           </div>
           <div class="flex left">
-            <div class="flex-item">
                <div class="label title_two">行高</div>
-               <div class="value">
                  <el-input-number
                  v-model="editLayer.lineHeight"
-                     size="small"
-                   style="width:130px"
+                   style="width:80px"
                   controls-position="right"
                   :precision="2"
                   :step="0.01"
+                  class="mar-left-10"
                    @change="(val)=>editObj({label:'lineHeight',value:val} )"
                   :min="0.01"
                    :max="100"/>
-                 </div>
             </div>
-            <div class="flex-item mar-left-10">
+          </div>
+
+          <div class="flex left">
                <div class="label title_two">字距</div>
-               <div class="edit-font-size flex left">
 
                  <el-input-number
                  :value="editLayer.charSpacing"
-                     size="small"
-                   style="width:130px"
+                   style="width:80px"
+                  class="mar-left-10"
                   controls-position="right"
                   :precision="1"
                   :step="1"
-                   @change="(val)=>editObj({label:'charSpacing',value:val})"/>
-                 </div>
-             </div>
+                   @change="(val)=>editObj({label:'charSpacing',value:val})"/> 
           </div>
 
           <div class="flex line-20 mar-top-10">
@@ -85,17 +82,17 @@ const textbox = () => {
             </el-button>
           </div>
           <div class="title_two">对齐方式</div>
-          <div class="flex line-20">
-            <el-button size="small" class="flex-item"  @click="editObj({label:'textAlign',value:'left'})">
+          <div class="flex left line-20">
+            <el-button size="small" style="padding: 15px 10px !important;" @click="editObj({label:'textAlign',value:'left'})">
              <el-tooltip  effect="dark" content="左对齐" placement="top"><img src="${textalignLeft}" style="height: 12px"></el-tooltip>
             </el-button>
-            <el-button size="small" class="flex-item"  @click="editObj({label:'textAlign',value:'center'})">
+            <el-button size="small" style="padding: 15px 10px !important"   @click="editObj({label:'textAlign',value:'center'})">
              <el-tooltip  effect="dark" content="居中对齐" placement="top"><img src="${textalignCenter}" style="height: 12px"></el-tooltip>
             </el-button>
-            <el-button size="small" class="flex-item"  @click="editObj({label:'textAlign',value:'right'})">
+            <el-button size="small" style="padding: 15px 10px !important"   @click="editObj({label:'textAlign',value:'right'})">
              <el-tooltip  effect="dark" content="右对齐" placement="top"><img src="${textalignRight}" style="height: 12px"></el-tooltip>
             </el-button>
-            <el-button size="small" class="flex-item"  @click="editObj({label:'textAlign',value:'justify'})">
+            <el-button size="small" style="padding: 15px 10px !important"   @click="editObj({label:'textAlign',value:'justify'})">
              <el-tooltip  effect="dark" content="两端对齐" placement="top"><img src="${textalignLR}" style="height: 12px"></el-tooltip>
             </el-button>
           </div>
@@ -103,22 +100,12 @@ const textbox = () => {
           ${tools.straw()}
           ${tools.opacity()}
 
- /*      <div class="title_two">新增/修改</div>
-          <div>
-            <el-input
-            v-model="editLayer.text"
-             type="textarea"
-             :autosize="{ minRows: 2, maxRows: 8}"
-             maxlength="255"
-            />
-
-          </div>*/
-
+<!--
           <div class="title_two">描边</div>
-          <div class="flex left">
+          <div class="flex left" style="padding-left: 10px">
                 <el-slider
                   :value="editLayer.strokeWidth"
-                  style="width:100%"
+                  style="width:60%"
                   :step="0.1"
                    @input="(val)=>editObj({label:'strokeWidth',value:val} )"
                   :min="0"
@@ -171,7 +158,7 @@ const textbox = () => {
                         size="small" class="mar-left-10" v-model="shadowText.color" @change="(val)=>editObj({label:'shadow',value:shadow})"></el-color-picker>
                     </div>
                  </div>
-          </div>
+          </div>-->
       </div>
      `
 }

frontend/src/views/components/PictureEditor/mixin/edit/module/tools.js

@@ -26,7 +26,7 @@ export default  {
                 <el-slider
                  size="small"
                   v-model="editLayer.opacity"
-                  style="width:100%"
+                  style="width:80%"
                   :step="0.01"
                   :min="0.01"
                   :max="1"