<template>
	<div class="page_btn_box flex-row">
		<div class="box_group_left flex-row">
			<div v-for="item in btnGroup">
				<div class=" align-center justify-around flex-col" @click="toPage(item)"
					:class="item.isSelect == true ? 'item_select':'item_noselect'">
					<span class="itemName">{{item.name}}</span>
				</div>
			</div>
		</div>
		<div class="box_group_right justify-around align-center">
			<div>
				<span class="home_title">HOME</span>
				<img src="@/assets/common/home.png" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router/dist/vue-router';

	const props = defineProps({
		btnGroup: []
	})

	const router = useRouter()
	const toPage = (item) => {
		router.push(item.url)
	}
</script>

<style scoped>
	.page_btn_box {
		width: 86vw;
		height: 5.2vw;
		margin: 12.4vw 0 0 14vw;
		background-color: #00C7DA;
		background-size: 100% 100%;
	}

	.box_group_left {
		width: 70vw;
	}

	.box_group_right {
		width: 16vw;
	}

	.item_select {
		height: 5.2vw;
		background-color: #0052D9;
		background-size: 100% 100%;
		width: 18vw;
	}

	.item_noselect {
		height: 5.2vw;
		background-size: 100% 100%;
		width: 18vw;
	}

	.itemName {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 1.6vw;
		font-family: OPPOSans-R;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
	}

	.home_title {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 1vw;
		font-family: Gilroy-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		margin-right: 1vw;
		position: relative;
		top: -0.1vw;
	}
</style>