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.
86 lines
4.6 KiB
86 lines
4.6 KiB
<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>
|