From 51a0d8792ec0cf54c8c4142c38078beca63b4fcc Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sat, 2 Dec 2023 00:51:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6=E3=80=90?=
 =?UTF-8?q?=E5=88=86=E5=89=B2=E7=BA=BF=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/s-block-item/s-block-item.vue  |  4 +-
 .../components/s-line-block/s-line-block.vue  |  4 +-
 sheep/ui/su-subline/su-subline.vue            | 52 +++++++++++++------
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/sheep/components/s-block-item/s-block-item.vue b/sheep/components/s-block-item/s-block-item.vue
index e81d44c7..a9c795b8 100644
--- a/sheep/components/s-block-item/s-block-item.vue
+++ b/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" />
 
diff --git a/sheep/components/s-line-block/s-line-block.vue b/sheep/components/s-line-block/s-line-block.vue
index b454ef75..97e14f59 100644
--- a/sheep/components/s-line-block/s-line-block.vue
+++ b/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>
diff --git a/sheep/ui/su-subline/su-subline.vue b/sheep/ui/su-subline/su-subline.vue
index fa09765f..c11d176a 100644
--- a/sheep/ui/su-subline/su-subline.vue
+++ b/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,
-      default: 'thin',
+    // 线条宽度
+    lineWidth: {
+      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-color': props.color,
-      'border-top-style': props.lineStyle,
+      'border-top-width': `${props.lineWidth}px`,
+      'border-top-color': props.lineColor,
+      '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>