MOSE-Official-Website-20250712/src/components/home/ProjectIntroModule.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useSummary } from '@/utils/config';

const { t } = useI18n();
const { getSummaryDescription } = useSummary();
</script>

<template>
  <section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light">
    <div class="container mx-auto">
      <div class="max-w-4xl mx-auto bg-background p-8 md:p-10 rounded-2xl shadow-card relative overflow-hidden wow animate__animated animate__fadeIn animate__duration-normal">
        <div class="relative z-10">
          <h2 class="text-2xl md:text-3xl font-bold text-text mb-6 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
            {{ t('home.project_intro.title') }}
          </h2>
          
          <div class="prose prose-invert max-w-none text-text-secondary">
            <!-- 使用富文本内容 -->
            <div class="mb-6 text-lg leading-relaxed wow animate__animated animate__fadeIn animate__delay-xs rich-text-container" v-html="getSummaryDescription('config_Introduction_of_platform')"></div>
            
            <div class="flex flex-col md:flex-row items-center justify-center gap-4 mt-8 wow animate__animated animate__fadeIn animate__delay-sm">
              <div class="flex items-center bg-background-dark px-4 py-3 rounded-lg hover:bg-background-dark/80 transition-colors duration-300 transform hover:-translate-y-1">
                <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <span class="text-text font-medium">{{ t('home.project_intro.global_presence') }}</span>
              </div>
              
              <div class="flex items-center bg-background-dark px-4 py-3 rounded-lg hover:bg-background-dark/80 transition-colors duration-300 transform hover:-translate-y-1">
                <div class="w-10 h-10 rounded-full bg-secondary bg-opacity-20 flex items-center justify-center mr-3">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                </div>
                <span class="text-text font-medium">{{ t('home.project_intro.security_focus') }}</span>
              </div>
              
              <div class="flex items-center bg-background-dark px-4 py-3 rounded-lg hover:bg-background-dark/80 transition-colors duration-300 transform hover:-translate-y-1">
                <div class="w-10 h-10 rounded-full bg-accent bg-opacity-20 flex items-center justify-center mr-3">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
                <span class="text-text font-medium">{{ t('home.project_intro.innovation') }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 背景装饰 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-5">
          <div class="absolute top-1/3 right-1/4 w-64 h-64 rounded-full bg-primary-light blur-3xl"></div>
          <div class="absolute bottom-1/3 left-1/4 w-64 h-64 rounded-full bg-secondary blur-3xl"></div>
        </div>
      </div>
    </div>
  </section>
</template>

<style>
/* 富文本容器样式 */
.rich-text-container {
  color: var(--text-secondary);
}

/* 增强标题样式 */
.rich-text-container [style*="color: #df9a33"],
.rich-text-container [style*="color: #f99807"],
.rich-text-container [style*="color: #f9990a"] {
  color: var(--primary-light) !important;
  font-weight: 600;
}

/* 段落间距 */
.rich-text-container p {
  margin-bottom: 0.75rem;
}

/* 确保内容可读性 */
.rich-text-container div {
  margin-bottom: 0.5rem;
}
</style>