<template>
	<view class="contentItem" :style="{background: bgColor, height: height, paddingTop: paddingTopValue }">
		<view class="topRow" :style="{ '--component-color': textColor }">
			<view class="title">{{title}}</view>
			<view class="enTitle">{{enTitle}}</view>
		</view>
		
		<view class="content">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script setup>
defineProps({
	title: { type: String, default: ""},
	enTitle: { type: String, default: "" },
	bgColor: { type: String, default: "#262626" },
	height: { type: String, default: "320rpx" },
	textColor: { type: String, default: "#B2B2B2" },
	paddingTopValue: { type: String, default: "0rpx" },
})
</script>

<style lang="scss" scoped>
	.contentItem {
		width: 750rpx;

		.topRow {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 50rpx 0;
			color: var(--component-color);

			.title {
				font-size: 20rpx;
			}

			.enTitle {
				width: 200rpx;
				font-size: 15rpx;
				text-align: center;
				margin-top: 10rpx;
				position: relative;
				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					width: calc(50% - 60rpx); // 减去左右 padding 的宽度
					height: 1rpx;
					background-color: var(--component-color);
					transform: translateY(-90%);
				}
				
				&::before {
					left: 0;
				}
				
				&::after {
					right: 0;
				}
			}
		}
	}
</style>