You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.5 KiB
89 lines
2.5 KiB
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 全球战略部署数据
|
|
const companyLocations = ref([
|
|
{
|
|
id: 1,
|
|
city: '香港',
|
|
country: '中国',
|
|
address: '香港中环金融街88号',
|
|
role: '区块链研发中心',
|
|
image: '/LOGO.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
city: '新加坡',
|
|
country: '新加坡',
|
|
address: '新加坡金融区10号',
|
|
role: '全球运营总部',
|
|
image: '/LOGO.png'
|
|
},
|
|
{
|
|
id: 3,
|
|
city: '伦敦',
|
|
country: '英国',
|
|
address: '伦敦金融城15号',
|
|
role: '欧洲市场拓展中心',
|
|
image: '/LOGO.png'
|
|
},
|
|
{
|
|
id: 4,
|
|
city: '迪拜',
|
|
country: '阿联酋',
|
|
address: '迪拜国际金融中心28号',
|
|
role: '中东市场拓展中心',
|
|
image: '/LOGO.png'
|
|
},
|
|
{
|
|
id: 5,
|
|
city: '东京',
|
|
country: '日本',
|
|
address: '东京涩谷区105号',
|
|
role: '亚太技术中心',
|
|
image: '/LOGO.png'
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light">
|
|
<div class="container mx-auto">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-text mb-8 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
|
|
全球战略部署
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div
|
|
v-for="(location, index) in companyLocations"
|
|
:key="location.id"
|
|
class="flex bg-background rounded-xl overflow-hidden shadow-card hover:shadow-lg transition-all duration-300 wow animate__animated animate__fadeInUp"
|
|
:class="{
|
|
'animate__delay-xs': index % 5 === 1,
|
|
'animate__delay-sm': index % 5 === 2,
|
|
'animate__delay-md': index % 5 === 3,
|
|
'animate__delay-lg': index % 5 === 4
|
|
}"
|
|
>
|
|
<!-- 地点图片 -->
|
|
<div class="w-1/3">
|
|
<img :src="location.image" :alt="location.city" class="w-full h-full object-cover" />
|
|
</div>
|
|
|
|
<!-- 地点信息 -->
|
|
<div class="w-2/3 p-5">
|
|
<div class="flex items-center mb-2">
|
|
<h3 class="text-lg font-bold text-text">{{ location.city }}</h3>
|
|
<span class="text-text-secondary text-sm ml-2">{{ location.country }}</span>
|
|
</div>
|
|
<p class="text-primary-light text-sm font-medium mb-2">{{ location.role }}</p>
|
|
<p class="text-text-secondary text-sm">{{ location.address }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|