营销：适配商城装修组件【分割线】

sheep/components/s-block-item/s-block-item.vue

@@ -21,8 +21,8 @@
     <s-image-cube v-if="type === 'MagicCube'" :data="data" :styles="styles" />
     <!-- 图文组件：视频播放 -->
     <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
-    <!-- 基础组件：辅助线 -->
+    <!-- 基础组件：分割线 -->
-    <s-line-block v-if="type === 'lineBlock'" :data="data" />
+    <s-line-block v-if="type === 'Divider'" :data="data" />
     <!-- 图文组件：热区 -->
     <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" />
 

sheep/components/s-line-block/s-line-block.vue

@@ -1,12 +1,12 @@
 <template>
-  <su-subline :color="data.lineColor" :lineStyle="data.style"></su-subline>
+  <su-subline v-bind="data"></su-subline>
 </template>
 
 <script setup>
   const props = defineProps({
     data: {
       type: Object,
-      default() {},
+      default: {},
     },
   });
 </script>

sheep/ui/su-subline/su-subline.vue

@@ -1,42 +1,62 @@
 <template>
-  <view class="ui-subline-wrap" :style="[elStyle]"></view>
+  <view class="wrap" :style="{height: `${height}px`}">
+    <view class="divider" :style="[elStyle]"></view>
+  </view>
 </template>
 
 <script setup>
   /**
-   * 辅助线
+   * 分割线
-   *
-   * @property {String} width = ['thin', 'medium', 'thick', '10px']				- 线条宽度
-   * @property {String} color = #000 												- 线条颜色
-   * @property {String} style = ['dotted', 'solid', 'double', 'dashed']			- 线条样式,圆点，实线，双线，虚线
-   *
    */
 
   import { computed } from 'vue';
 
   // 接收参数
   const props = defineProps({
-    color: {
+    // 线条颜色
+    lineColor: {
       type: String,
       default: '#000',
     },
-    lineStyle: {
+    // 线条样式：'dotted', 'solid', 'double', 'dashed'
+    borderType: {
       type: String,
       default: 'dashed',
     },
-    width: {
+    // 线条宽度
-      type: String,
+    lineWidth: {
-      default: 'thin',
+      type: Number,
+      default: 1,
     },
+    // 高度
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    // 左右边距：none - 无边距，horizontal - 左右留边
+    paddingType: {
+      type: String,
+      default: 'none'
+    }
   });
 
   const elStyle = computed(() => {
     return {
-      'border-top-width': props.width,
+      'border-top-width': `${props.lineWidth}px`,
-      'border-top-color': props.color,
+      'border-top-color': props.lineColor,
-      'border-top-style': props.lineStyle,
+      'border-top-style': props.borderType,
+      margin: props.paddingType === 'none' ? '0' : '0px 16px'
     };
   });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.wrap {
+  display: flex;
+  align-items: center;
+
+  .divider {
+    width: 100%;
+  }
+}
+</style>