<template>
	<view class="el-divider">
		<view class="divider-line" :style="{'border-color': borderColor, 'width': width}"></view>
		<view class="text" :style="{'color': color,'font-size': fontSize}"><slot /></view>
		<view class="divider-line" :style="{'border-color': borderColor, 'width': width}"></view>
	</view>
</template>

<script setup>
	import { computed } from "vue";
	import { rpx2px } from "../../libs/utils.js";
	
	const props = defineProps({
		color: {
			type: String,
			default: '#666'
		},
		borderColor: {
			type: String,
			default: '#e4e7ed'
		},
		fontSize: {
			type: String,
			default: '28rpx'
		},
		width: {
			type: String,
			default: '160rpx'
		}
	});
	
	
</script>

<style lang="scss" scoped>
	.el-divider {
		width: 100%;
		position: relative;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		flex-direction: row;
		.text {
			white-space: nowrap;
			padding: 0 0.5rem;
			display: inline-flex;
			font-size: 28rpx;
		}
		.divider-line {
			border-bottom: 1px solid #e5e5e5;
			transform: scale(1, 0.5);
			transform-origin: center;
		}
	}
</style>