完善分割线显示多种类型

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-29 14:52:43
+ * @LastEditTime: 2024-09-02 14:47:57
  * @FilePath: /data-table/src/components/DividerField/index.vue
  * @Description: 分隔线组件
 -->
 <template>
   <div class="divider-field-page">
-    <div class="sep-line">
-      <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
-        <span>字段标题</span>
+    <div v-if="styleType === 'type1'" class="type1"></div>
+    <div v-if="styleType === 'type2'" class="type2">
+      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
+      <div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div>
+    </div>
+    <div v-if="styleType === 'type3'" class="type3">
+      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
+      <div :style="{ borderTop: '1px solid', borderColor: bgColor }"></div>
+    </div>
+    <div v-if="styleType === 'type4'" class="type4">
+      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
+      <div :style="{ borderTop: '2px solid', borderColor: bgColor }"></div>
+    </div>
+    <div v-if="styleType === 'type5'" class="type5">
+      <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="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 v-if="styleType === 'type6'" class="type6">
+      <div class="sep-style-select-field-label" :style="{ color: titleColor }">字段标题</div>
+      <div class="sep-style-select-item">
+        <div class="sep-line">
+          <div class="sep-bg-wrapper">
+            <div class="sep-bg" :style="{ borderColor: bgColor }"></div>
+          </div>
+          <div class="sep-label" style="background-color: rgb(250, 129, 24);">
+            <span>字段标题</span>
+          </div>
+        </div>
+        <!-- <div class="fx-sub-html">这里是字段的描述信息</div> -->
+      </div>
+    </div>
+    <div v-if="styleType === 'type7'" class="type7">
+      <div class="sep-line">
+        <div class="sep-bg-wrapper">
+          <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
+        </div>
+        <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
+          <span>字段标题</span>
+        </div>
+      </div>
+    </div>
+    <div v-if="styleType === 'type8'" class="type8">
+      <div class="sep-line">
+        <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
+        <div class="sep-center">
+          <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
+            <span>字段标题</span>
+          </div>
+          <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
+          <div class="left-border" :style="{ backgroundColor: bgColor}"></div>
+          <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
+          <div class="right-border" :style="{ backgroundColor: bgColor}"></div>
+        </div>
+      </div>
+    </div>
+    <div v-if="styleType === 'type9'" class="type9">
+      <div class="sep-line">
+        <div class="left-wrapper">
+          <div class="left-block" :style="{ backgroundColor: bgColor}"></div>
+          <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
+          <div class="left-square"></div>
+          <div class="left-line1" :style="{ borderColor: bgColor }"></div>
+          <div class="left-line2" :style="{ borderColor: bgColor }"></div>
+        </div>
+        <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
+          <span>字段标题</span>
+        </div>
+        <div class="right-wrapper">
+          <div class="right-block" :style="{ backgroundColor: bgColor}"></div>
+          <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
+          <div class="right-square"></div>
+          <div class="right-line1" :style="{ borderColor: bgColor }"></div>
+          <div class="right-line2" :style="{ borderColor: bgColor }"></div>
+        </div>
       </div>
     </div>
     <div class="fx-sub-html">这里是字段的描述信息</div>
@@ -34,104 +108,396 @@ const styleBorder = ref({});
 const bgColor = ref('');
 const titleColor = ref('');
 
+const styleType = ref('type8');
+
 onMounted(() => {
   // 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",
-  };
+  // 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)';
+  titleColor.value = '#FFF';
+  bgColor.value = '#FA8118';
 });
 </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;
+  .type5 {
+    .sep-line {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      height: 28px;
       position: relative;
-      .right-triangle {
+
+      .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: 15px;
+        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;
       }
     }
-
-    .right-line {
-      border-bottom: 3px solid;
-      bottom: 0;
-      height: 0;
-      left: 0;
-      position: absolute;
-      right: 0;
+  }
+  .type6 {
+    .sep-style-select-field-label {
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 5px;
     }
-
-    .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;
+    .sep-style-select-item {
+      -webkit-transform: scale(.8);
+      transform: scale(.8);
+      -webkit-transform-origin: 0 50%;
+      transform-origin: 0 50%;
+      width: 125%;
+      .sep-line {
+        height: 8px;
+        position: relative;
+        .sep-bg-wrapper {
+          bottom: 0;
+          left: 0;
+          padding-left: 8px;
+          position: absolute;
+          right: 0;
+          .sep-bg {
+            border-bottom: 4px solid;
+            height: 0;
+            opacity: .2;
+            width: 100%;
+          }
+        }
+        .sep-label {
+          border-radius: 0 8px;
+          bottom: 0;
+          left: 0;
+          max-width: 81%;
+          min-width: 1.25rem;
+          overflow: hidden;
+          position: absolute;
+          text-overflow: ellipsis;
+          top: 0;
+          white-space: nowrap;
+          span {
+            visibility: hidden;
+          }
+        }
+      }
     }
-    .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;
+  }
+  .type7 {
+    .sep-line {
+      height: 28px;
+      position: relative;
+      .sep-bg-wrapper {
+        bottom: 0;
+        left: 0;
+        padding-left: 20px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        .sep-bg {
+          height: 100%;
+          opacity: .2;
+          width: 100%;
+        }
+      }
+      .sep-label {
+        border-radius: 14px 0;
+        bottom: 0;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+        font-weight: 600;
+        left: 0;
+        line-height: 28px;
+        max-width: 76%;
+        min-width: 7%;
+        overflow: hidden;
+        padding: 0 20px;
+        position: absolute;
+        text-overflow: ellipsis;
+        top: 0;
+        white-space: nowrap;
+      }
     }
-    .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;
+  }
+  .type8 {
+    .sep-line {
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      height: 38px;
+      justify-content: center;
+      position: relative;
+      .sep-bg {
+        border-radius: 16px 16px 0 0;
+        bottom: 0;
+        height: 28px;
+        left: 0;
+        opacity: .15;
+        position: absolute;
+        right: 0;
+      }
+      .sep-center {
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+        max-width: 50%;
+        min-width: 7%;
+        overflow: hidden;
+        padding: 0 38px;
+        position: relative;
+        .sep-label {
+          font-weight: 600;
+          height: 100%;
+          line-height: 38px;
+          overflow: hidden;
+          padding: 0 1px;
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .left-triangle {
+          height: 10px;
+          left: 0;
+          position: absolute;
+          top: 0;
+          -webkit-transform: skew(-60deg) translateX(50%);
+          transform: skew(-60deg) translateX(50%);
+          width: 18px;
+        }
+        .left-border {
+          border-radius: 0 0 0 16px;
+          bottom: 0;
+          left: 18px;
+          position: absolute;
+          top: 0;
+          width: 21px;
+        }
+        .right-triangle {
+          height: 10px;
+          position: absolute;
+          right: 0;
+          top: 0;
+          -webkit-transform: skew(60deg) translateX(-50%);
+          transform: skew(60deg) translateX(-50%);
+          width: 18px;
+        }
+        .right-border {
+          border-radius: 0 0 16px;
+          bottom: 0;
+          position: absolute;
+          right: 18px;
+          top: 0;
+          width: 21px;
+        }
+      }
+    }
+  }
+  .type9 {
+    -webkit-transform: scale(.8);
+    transform: scale(.8);
+    -webkit-transform-origin: 0 50%;
+    transform-origin: 0 50%;
+    width: 125%;
+    .sep-line {
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      height: 28px;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      .left-wrapper {
+        width: 110px;
+        -webkit-box-flex: 0;
+        -ms-flex: none;
+        flex: none;
+        position: relative;
+        .left-block {
+          width: 33px;
+          bottom: 0;
+          position: absolute;
+          right: -1px;
+          top: 0;
+        }
+        .left-triangle {
+          right: 32px;
+          height: 20px;
+          position: absolute;
+          top: 0;
+          -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+          -webkit-transform-origin: 100% 0;
+          transform-origin: 100% 0;
+          width: 20px;
+        }
+        .left-square {
+          right: 25px;
+          background: #fff;
+          height: 10px;
+          position: absolute;
+          top: 9px;
+          -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+          width: 10px;
+        }
+        .left-line1 {
+          width: 28px;
+          border-top: 1px solid;
+          height: 0;
+          left: 27px;
+          position: absolute;
+          top: 9px;
+        }
+        .left-line2 {
+          width: 55px;
+          border-bottom: 1px solid;
+          bottom: 8px;
+          height: 0;
+          left: 0;
+          position: absolute;
+        }
+      }
+      .sep-label {
+        font-weight: 600;
+        height: 100%;
+        line-height: 28px;
+        max-width: 54%;
+        min-width: 10%;
+        overflow: hidden;
+        padding: 0 1px;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .right-wrapper {
+        width: 110px;
+        -webkit-box-flex: 0;
+        -ms-flex: none;
+        flex: none;
+        position: relative;
+        .right-block {
+          width: 33px;
+          bottom: 0;
+          left: -1px;
+          position: absolute;
+          top: 0;
+        }
+        .right-triangle {
+          left: 32px;
+          height: 20px;
+          position: absolute;
+          top: 0;
+          -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+          -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+          width: 20px;
+        }
+        .right-square {
+          left: 25px;
+          background: #fff;
+          height: 10px;
+          position: absolute;
+          top: 9px;
+          -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+          width: 10px;
+        }
+        .right-line1 {
+          width: 28px;
+          border-top: 1px solid;
+          height: 0;
+          position: absolute;
+          right: 27px;
+          top: 9px;
+        }
+        .right-line2 {
+          width: 55px;
+          border-bottom: 1px solid;
+          bottom: 8px;
+          height: 0;
+          position: absolute;
+          right: 0;
+        }
+      }
     }
   }
   .fx-sub-html {