92 lines
1.8 KiB
Vue
92 lines
1.8 KiB
Vue
<template>
|
||
<section class="digital-items2 bgw">
|
||
<img src="@/assets/images/home/digital-items-2.jpg" class="bg" />
|
||
<div class="content">
|
||
<div class="tip" v-html="$t('Home.DigitalItemsTip2')"></div>
|
||
<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'
|
||
const list = ref([
|
||
{
|
||
title: 'Girls’ Item',
|
||
tip: 'Meadow Wrap',
|
||
url: '/images/home/digital-items-5.png'
|
||
},
|
||
{
|
||
title: 'Women’s Item',
|
||
tip: 'Onyx Silhouette',
|
||
url: '/images/home/digital-items-6.png'
|
||
},
|
||
{
|
||
title: 'Boys’ Item',
|
||
tip: 'Autumn Roam',
|
||
url: '/images/home/digital-items-7.png'
|
||
},
|
||
{
|
||
title: 'Men’s Item',
|
||
tip: 'Archive Casual',
|
||
url: '/images/home/digital-items-8.png'
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.digital-items2 {
|
||
> .content {
|
||
top: 8rem;
|
||
left: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
> .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>
|