MOSE-Official-Website-20250712/src/components/about/CompanyModule.vue

<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>