<template>
	<view class="promo-header">
		<view class="promo-header-content">
			<view class="promo-header-content-item" :class="active == 0 ? 'active' : ''" @click="changeActive(0)">{{ $t('promo.header.promo') }}</view>
			<view class="promo-header-content-item" :class="active == 1 ? 'active' : ''" @click="changeActive(1)">{{ $t('promo.header.community') }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['get-header-active']);
let active = ref(0);
const changeActive = (value) => {
	active.value = value;
	emit('get-header-active', value);
};
</script>

<style lang="scss" scoped>
.promo-header {
	width: 100%;
	height: 88rpx;
	background: #610606;
	box-sizing: border-box;
	padding-top: 23rpx;
	.promo-header-content {
		width: 534rpx;
		height: 64rpx;
		background: #410505;
		border-radius: 30rpx;
		display: flex;
		margin: 0 auto;
		justify-content: flex-start;
		.promo-header-content-item {
			width: 50%;
			line-height: 64rpx;
			color: #e7ffff;
			text-align: center;
		}
		.active {
			background: linear-gradient(0deg, #fa4c49, #9a140c);
			border-radius: 30rpx;
		}
	}
}
</style>
