<template>
	<view class="select-types-box">
		<view class="types-item" :class="{active: activeSelect == 1}">学</view>
		<icon class="jt-item" :class="{active: activeSelect == 1}"></icon>
		<view class="types-item" :class="{active: activeSelect == 2}">拼</view>
		<icon class="jt-item" :class="{active: activeSelect == 2}"></icon>
		<view class="types-item" :class="{active: activeSelect == 3}">读</view>
		<icon class="jt-item" :class="{active: activeSelect == 3}"></icon>
		<view class="types-item" :class="{active: activeSelect == 4}">选</view>
		<icon class="jt-item" :class="{active: activeSelect == 4}"></icon>
		<view class="types-item" :class="{active: activeSelect == 5}">背</view>
	</view>
</template>

<script setup>
	defineProps({
		activeSelect: {
			type: String,
			required: true
		}
	})
</script>

<style lang="scss" scoped>
	.select-types {
		display: flex;
		justify-content: space-between;
	}
	.active {
		color: red;
	}
</style>