封装一个分割线组件

最终样式

Vue2代码

<template>
  <div class="sep-line">
    <div class="sep-label">
      <span class="sep-box-text">
        <slot>{{ title }}</slot> <!-- 默认插槽内容，如果没有传递内容则使用title -->
      </span>
    </div>
    <div class="sep-right">
      <div class="right-triangle"></div>
      <div class="right-line"></div>
      <div class="right-parallelogram1"></div>
      <div class="right-parallelogram2"></div>
      <div class="right-parallelogram3"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SepLine',
  props: {
    title: {
      type: String,
      default: '照片元数据' // 默认值
    }
  }
}
</script>

<style  lang="less" scoped>
/* 样式7 */
.sep-line {
  position: relative;
  height: 28px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 11px 0;
  padding: 0 7px;

  .sep-label {
    font-family: 'fangsong';
    font-weight: 600;
    font-size: 16px;
    -webkit-box-flex: none;
    -moz-box-flex: none;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    height: 100%;
    min-width: 4%;
    max-width: 80%;
    padding: 0 10px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background-color: #409eff;
    line-height: 28px;
    color: #fff;
    text-align: center;
  }
  .sep-left {
    -webkit-box-flex: auto;
    -moz-box-flex: auto;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    display: flex;
    justify-content: flex-end;
    position: relative;
    .left-triangle {
      width: 15px;
      height: 99%;
      -webkit-transform: skew(-26deg) translateX(50%);
      -moz-transform: skew(-26deg) translateX(50%);
      -ms-transform: skew(-26deg) translateX(50%);
      -o-transform: skew(-26deg) translateX(50%);
      transform: skew(-26deg) translateX(50%);
      background-color: #409eff;
    }
    .left-line {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      height: 3px;
      background-color: #409eff;
    }
    .left-parallelogram1 {
      -webkit-transform: skew(-26deg) translateX(50%);
      -moz-transform: skew(-26deg) translateX(50%);
      -ms-transform: skew(-26deg) translateX(50%);
      -o-transform: skew(-26deg) translateX(50%);
      transform: skew(-26deg) translateX(50%);
      opacity: 0.9;
    }
    .left-parallelogram2 {
      -webkit-transform: skew(-26deg);
      -moz-transform: skew(-26deg);
      -ms-transform: skew(-26deg);
      -o-transform: skew(-26deg);
      transform: skew(-26deg);
      opacity: 0.6;
    }
    .left-parallelogram3 {
      -webkit-transform: skew(-26deg) translateX(-50%);
      -moz-transform: skew(-26deg) translateX(-50%);
      -ms-transform: skew(-26deg) translateX(-50%);
      -o-transform: skew(-26deg) translateX(-50%);
      transform: skew(-26deg) translateX(-50%);
      opacity: 0.3;
    }
    .left-parallelogram2,
    .left-parallelogram3,
    .left-parallelogram1 {
      background-color: #409eff;
      width: 8px;
      height: 22px;
    }
  }
  .sep-right {
    -webkit-box-flex: auto;
    -moz-box-flex: auto;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    position: relative;
    .right-triangle {
      width: 15px;
      height: 99%;
      -webkit-transform: skew(26deg) translateX(-50%);
      -moz-transform: skew(26deg) translateX(-50%);
      -ms-transform: skew(26deg) translateX(-50%);
      -o-transform: skew(26deg) translateX(-50%);
      transform: skew(26deg) translateX(-50%);
      background-color: #409eff;
    }
    .right-line {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      height: 3px;
      background-color: #409eff;
    }
    .right-parallelogram1 {
      top: 0;
      left: 15px;
      width: 8px;
      height: 22px;
      background-color: #409eff;
      opacity: 0.9;
    }
    .right-parallelogram2 {
      left: 27px;
      width: 8px;
      transform: skew(26deg) translateX(-50%);
      opacity: 0.6;
    }
    .right-parallelogram3 {
      left: 39px;
      width: 8px;
      transform: skew(26deg) translateX(-50%);
      opacity: 0.3;
    }
    .right-parallelogram2,
    .right-parallelogram3,
    .right-parallelogram1 {
      position: absolute;
      -webkit-transform: skew(26deg) translateX(-50%);
      -moz-transform: skew(26deg) translateX(-50%);
      -ms-transform: skew(26deg) translateX(-50%);
      -osep-left-transform: skew(26deg) translateX(-50%);
      transform: skew(26deg) translateX(-50%);
      background-color: #409eff;
      top: 0;
      height: 22px;
    }
  }
}
</style>

组件使用

<el-collapse v-model="activeNames">
   <el-collapse-item name="1">
     <template slot="title">
        <SepLine title="标题" />
      </template>
   </el-collapse-item>
</el-collapse>