完善分割线组件内容

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-22 14:23:49
+ * @LastEditTime: 2024-08-29 14:52:43
  * @FilePath: /data-table/src/components/DividerField/index.vue
  * @Description: 分隔线组件
 -->
 <template>
   <div class="divider-field-page">
-    <van-divider :style="styleObj">
-      {{ item.component_props.content }}
-    </van-divider>
+    <div class="sep-line">
+      <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
+        <span>字段标题</span>
+      </div>
+      <div class="sep-right">
+        <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
+        <div class="right-line" :style="{ borderColor: bgColor }"></div>
+        <div class="right-parallelogram1" :style="{ backgroundColor: bgColor}"></div>
+        <div class="right-parallelogram2" :style="{ backgroundColor: bgColor}"></div>
+        <div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div>
+      </div>
+    </div>
+    <div class="fx-sub-html">这里是字段的描述信息</div>
   </div>
 </template>
 
@@ -18,17 +28,119 @@ const props = defineProps({
   item: Object,
 });
 
-const styleObj = ref({});
+const styleTitle = ref({});
+const styleBorder = ref({});
+
+const bgColor = ref('');
+const titleColor = ref('');
+
 onMounted(() => {
-  styleObj.value = {
-    color: props.item.component_props.color,
-    borderColor: props.item.component_props.color,
-    padding: props.item.component_props.padding,
+  // styleObj.value = {
+  //   color: props.item.component_props.color,
+  //   borderColor: props.item.component_props.color,
+  //   padding: props.item.component_props.padding,
+  // };
+  styleTitle.value = {
+    color: "blue",
+    fontSize: "0.9rem",
   };
+  styleBorder.value = {
+    border: "1px dashed",
+    borderColor: "red",
+    margin: "5px 0",
+  };
+
+  titleColor.value = 'rgb(250, 250, 24)';
+  bgColor.value = 'rgb(240, 168, 0)';
 });
 </script>
 
 <style lang="less" scoped>
 .divider-field-page {
+  padding: 1rem 1rem 0 1rem;
+  .sep-line {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 28px;
+    position: relative;
+
+    .sep-label {
+      -webkit-box-flex: 0;
+      -webkit-box-sizing: content-box;
+      box-sizing: content-box;
+      -ms-flex: none;
+      flex: none;
+      height: 100%;
+      line-height: 28px;
+      max-width: 80%;
+      min-width: 7%;
+      overflow: hidden;
+      padding: 0 10px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .sep-right {
+      -webkit-box-flex: 1;
+      -ms-flex: auto;
+      flex: auto;
+      position: relative;
+      .right-triangle {
+        height: 100%;
+        -webkit-transform: skew(26deg) translateX(-50%);
+        transform: skew(26deg) translateX(-50%);
+        width: 15px;
+      }
+    }
+
+    .right-line {
+      border-bottom: 3px solid;
+      bottom: 0;
+      height: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    .right-parallelogram1 {
+      height: 22px;
+      left: 15px;
+      opacity: 0.9;
+      position: absolute;
+      top: 0;
+      -webkit-transform: skew(26deg) translateX(-50%);
+      transform: skew(26deg) translateX(-50%);
+      width: 8px;
+    }
+    .right-parallelogram2 {
+      height: 22px;
+      left: 27px;
+      opacity: 0.6;
+      position: absolute;
+      top: 0;
+      -webkit-transform: skew(26deg) translateX(-50%);
+      transform: skew(26deg) translateX(-50%);
+      width: 8px;
+    }
+    .right-parallelogram3 {
+      height: 22px;
+      left: 39px;
+      opacity: 0.3;
+      position: absolute;
+      top: 0;
+      -webkit-transform: skew(26deg) translateX(-50%);
+      transform: skew(26deg) translateX(-50%);
+      width: 8px;
+    }
+  }
+  .fx-sub-html {
+    color: #000;
+    font-size: 0.85rem;
+    line-height: 1.4;
+    margin-top: 2px;
+    word-wrap: break-word;
+    line-height: 1.4;
+  }
 }
 </style>