<template>
	<section class="digital-items1 bgw">
		<img src="@/assets/images/home/digital-items-1.jpg" class="bg" />
		<div class="content">
			<div class="title">{{ $t('Home.DigitalItems') }}</div>
			<div class="tip" v-html="$t('Home.DigitalItemsTip1')"></div>
			<button custom="black" @click="onShopAll">Shop All</button>
			<div class="list">
				<div v-for="v in list" :key="v.url">
					<img :src="v.url" alt="" />
					<div class="title">{{ v.title }}</div>
					<div class="tip">{{ v.tip }}</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()

	const list = ref([
		{
			title: 'Women’s Item',
			tip: 'Blue Pleat Aria',
			url: '/images/home/digital-items-1.png'
		},
		{
			title: 'Girls’ Item',
			tip: 'Candy Riot',
			url: '/images/home/digital-items-2.jpg'
		},
		{
			title: 'Men’s Item',
			tip: 'Void Armour',
			url: '/images/home/digital-items-3.png'
		},
		{
			title: 'Boys’ Item',
			tip: 'Jester Edit',
			url: '/images/home/digital-items-4.png'
		}
	])
	const onShopAll = () => {
		router.push({ name: 'digitalItem' })
	}
</script>

<style lang="less">
	.digital-items1 {
		> .content {
			top: 8rem;
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			> .title {
				font-family: KaiseiOpti-Bold;
				font-size: 5.6rem;
				line-height: 6.2rem;
				margin-bottom: 2rem;
			}
			> .tip {
				font-family: KaiseiOpti-Regular;
				font-size: 2rem;
				line-height: 2.8rem;
				margin-bottom: 2rem;
				color: #585858;
				text-align: center;
			}
			> .list {
				margin-top: 6rem;
				display: flex;
				gap: 2.4rem;
				> div {
					padding: 1rem;
					border: 0.1rem solid #979797;
					background-color: #fff;
					> img {
						width: 27.4rem;
						height: 34.6rem;
						margin-bottom: 1.2rem;
					}
					> .title {
						font-family: KaiseiOpti-Regular;
						font-size: 1.8rem;
						line-height: 2.2rem;
						color: #232323;
						margin-bottom: 0.6rem;
					}
					> .tip {
						font-family: KaiseiOpti-Regular;
						font-size: 1.2rem;
						line-height: 2.2rem;
						color: #979797;
					}
				}
			}
		}
	}
</style>
