feat：【商城】店铺装修-标题栏：增加 skew 标题栏。

Author: YunaiV

src/components/DiyEditor/components/mobile/TitleBar/config.ts

@@ -4,6 +4,8 @@ import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
 export interface TitleBarProperty {
   // 偏移
   marginLeft: number
+  // 偏移量
+  skew: number
   // 显示位置
   textAlign: 'left' | 'center'
   // 主标题
@@ -52,6 +54,7 @@ export const component = {
     descriptionWeight: 200,
     titleColor: 'rgba(50, 50, 51, 10)',
     descriptionColor: 'rgba(150, 151, 153, 10)',
+    skew: 0,
     more: {
       //查看更多
       show: false,

src/components/DiyEditor/components/mobile/TitleBar/index.vue

@@ -17,7 +17,8 @@
           fontSize: `${property.titleSize}px`,
           fontWeight: property.titleWeight,
           color: property.titleColor,
-          textAlign: property.textAlign
+          textAlign: property.textAlign,
+          marginLeft: property.skew + 'px'
         }"
       >
         {{ property.title }}
@@ -29,7 +30,8 @@
           fontSize: `${property.descriptionSize}px`,
           fontWeight: property.descriptionWeight,
           color: property.descriptionColor,
-          textAlign: property.textAlign
+          textAlign: property.textAlign,
+          marginLeft: property.skew + 'px'
         }"
         class="m-t-8px"
       >

src/components/DiyEditor/components/mobile/TitleBar/property.vue

@@ -16,6 +16,16 @@
             </el-tooltip>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="偏移量" prop="skew">
+          <el-slider
+            v-model="formData.skew"
+            :max="100"
+            :min="0"
+            :step="1"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
       </el-card>
       <el-card class="property-group" header="主标题" shadow="never">
         <el-form-item label="文字" label-width="40px" prop="title">