封装一个分割线组件

最终样式

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>