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.
598 lines
22 KiB
598 lines
22 KiB
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue';
|
|
import { ref, onMounted, reactive, computed } from 'vue';
|
|
import ArchitectureModule from '@/components/technology/ArchitectureModule.vue';
|
|
import InnovationModule from '@/components/technology/InnovationModule.vue';
|
|
import EcosystemIntegrationModule from '@/components/technology/EcosystemIntegrationModule.vue';
|
|
import AppListModule from '@/components/ecosystem/AppListModule.vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useConfig } from '@/utils/config';
|
|
|
|
const { getConfigImage } = useConfig();
|
|
|
|
import { queryTechnologyList } from '@/api/modules/technology';
|
|
import { querySummaryList } from '@/api/modules/config';
|
|
|
|
import { useSummary } from '@/utils/config';
|
|
const { getSummaryDescription } = useSummary();
|
|
|
|
// 返回的是富文本 还需要分段
|
|
const tecDesList = computed(() => {
|
|
return getSummaryDescription('config_structural_of_technology').split('\n');
|
|
});
|
|
|
|
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 轮播控制
|
|
const currentAppIndex = ref(0);
|
|
const totalApps = 8; // 假设有8个应用
|
|
|
|
// 显示下一个应用
|
|
const showNextApp = () => {
|
|
currentAppIndex.value = (currentAppIndex.value + 1) % totalApps;
|
|
};
|
|
|
|
// 显示上一个应用
|
|
const showPrevApp = () => {
|
|
currentAppIndex.value = (currentAppIndex.value - 1 + totalApps) % totalApps;
|
|
};
|
|
|
|
// 技术架构数据
|
|
const architectures = [
|
|
{
|
|
title: '聚合层',
|
|
description: '负责汇总并优化来自各个区块链的交易请求，提高系统整体处理效率。',
|
|
icon: 'carbon:data-1',
|
|
color: 'primary',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
},
|
|
{
|
|
title: '跨链层',
|
|
description: '实现不同区块链之间资产和信息的互通互联，支持多链生态系统整合。',
|
|
icon: 'carbon:connect',
|
|
color: 'secondary',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
},
|
|
{
|
|
title: '路由层',
|
|
description: '提供智能路径规划和优化，确定交易的最佳执行路径，降低成本并提高效率。',
|
|
icon: 'carbon:path-finder',
|
|
color: 'accent',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
},
|
|
{
|
|
title: '应用层',
|
|
description: '提供各类去中心化应用接口和服务，支持第三方开发者基于平台构建创新应用。',
|
|
icon: 'carbon:application',
|
|
color: 'primary',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
}
|
|
];
|
|
|
|
// 核心技术数据
|
|
const technologies = [
|
|
{
|
|
title: '技术壁垒',
|
|
description: 'MOSE采用创新的多层零知识证明协议，确保交易隐私性的同时保持可验证性和安全性。该技术已申请多项国际专利，形成独特的技术壁垒。',
|
|
icon: 'carbon:security',
|
|
color: 'primary',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
},
|
|
{
|
|
title: '生态优势',
|
|
description: '基于创新的跨链技术，MOSE能够无缝连接多种主流区块链，使用户可以在不同链上自由转移和交易资产，同时保持完全隐私。',
|
|
icon: 'carbon:growth',
|
|
color: 'secondary',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
},
|
|
{
|
|
title: '混币器',
|
|
description: 'MOSE独创的"混币器"技术，将用户闲置的资产通过智能合约自动参与DeFi流动性挖矿，为用户创造被动收益，同时增强整个生态系统的流动性。',
|
|
icon: 'carbon:currency',
|
|
color: 'accent',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
},
|
|
{
|
|
title: '跨链桥',
|
|
description: 'MOSE跨链桥采用创新的多重签名和状态验证机制，实现资产在不同链间的安全高效转移，并保持交易隐私，解决了传统跨链桥容易成为黑客攻击目标的问题。',
|
|
icon: 'carbon:bridge',
|
|
color: 'primary',
|
|
image: '/LOGO.png' // 这里替换为实际图片路径
|
|
}
|
|
];
|
|
|
|
// 应用数据
|
|
const apps = reactive([
|
|
{
|
|
id: 1,
|
|
name: 'MOSE Wallet',
|
|
description: '多链资产管理钱包，支持所有主流区块链，内置隐私保护功能。',
|
|
image: '/LOGO.png',
|
|
color: 'from-blue-600 to-indigo-900',
|
|
icon: 'carbon:wallet'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'MOSE Exchange',
|
|
description: '去中心化交易所，支持跨链交易与隐私交易，流动性共享。',
|
|
image: '/LOGO.png',
|
|
color: 'from-purple-600 to-indigo-900',
|
|
icon: 'carbon:chart-line'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'MOSE Bridge',
|
|
description: '安全高效的跨链桥，支持资产在不同区块链之间的无缝转移。',
|
|
image: '/LOGO.png',
|
|
color: 'from-green-600 to-teal-900',
|
|
icon: 'carbon:bridge'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'MOSE Pay',
|
|
description: '隐私支付解决方案，为商家和用户提供安全、快速的支付服务。',
|
|
image: '/LOGO.png',
|
|
color: 'from-orange-600 to-red-900',
|
|
icon: 'carbon:purchase'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'MOSE DAO',
|
|
description: '去中心化自治组织工具，支持社区治理和决策。',
|
|
image: '/LOGO.png',
|
|
color: 'from-amber-600 to-orange-900',
|
|
icon: 'carbon:group'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'MOSE NFT',
|
|
description: '隐私NFT市场，支持创作者版权保护和数字资产交易。',
|
|
image: '/LOGO.png',
|
|
color: 'from-pink-600 to-rose-900',
|
|
icon: 'carbon:image'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: 'MOSE DeFi',
|
|
description: '去中心化金融套件，包括借贷、质押、流动性挖矿等功能。',
|
|
image: '/LOGO.png',
|
|
color: 'from-cyan-600 to-blue-900',
|
|
icon: 'carbon:money'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: 'MOSE ID',
|
|
description: '去中心化身份认证系统，保护用户隐私的同时满足合规要求。',
|
|
image: '/LOGO.png',
|
|
color: 'from-emerald-600 to-green-900',
|
|
icon: 'carbon:user'
|
|
}
|
|
]);
|
|
|
|
// Swiper实例
|
|
let swiper = null;
|
|
|
|
// 初始化
|
|
onMounted(() => {
|
|
// 初始化WOW.js动画
|
|
try {
|
|
const WOW = window.WOW;
|
|
if (WOW) {
|
|
new WOW({
|
|
boxClass: 'wow',
|
|
animateClass: 'animate__animated',
|
|
offset: 100,
|
|
mobile: true,
|
|
live: true
|
|
}).init();
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to initialize WOW.js:', error);
|
|
}
|
|
|
|
// 初始化Swiper
|
|
initSwiper();
|
|
});
|
|
|
|
// 初始化Swiper
|
|
const initSwiper = () => {
|
|
// 动态加载Swiper
|
|
import('swiper/bundle').then(({ Swiper }) => {
|
|
import('swiper/css/bundle').then(() => {
|
|
// 等待DOM更新
|
|
setTimeout(() => {
|
|
swiper = new Swiper('.swiper-container', {
|
|
effect: 'coverflow',
|
|
grabCursor: true,
|
|
centeredSlides: true,
|
|
slidesPerView: 'auto',
|
|
loop: true,
|
|
speed: 800,
|
|
autoplay: {
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
},
|
|
coverflowEffect: {
|
|
rotate: 0,
|
|
stretch: 80,
|
|
depth: 200,
|
|
modifier: 1,
|
|
slideShadows: true,
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
dynamicBullets: true,
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
});
|
|
}, 500);
|
|
});
|
|
}).catch(err => {
|
|
console.error('Failed to load Swiper:', err);
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-background min-h-screen">
|
|
<!-- Hero Section -->
|
|
<section class="relative py-24 px-6 md:px-12 lg:px-24 bg-background-dark overflow-hidden">
|
|
<div class="container mx-auto relative z-10">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-text mb-6 wow animate__animated animate__fadeInDown animate__duration-fast">
|
|
领先的区块链隐私技术
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-text-secondary mb-8 wow animate__animated animate__fadeIn animate__delay-xs animate__duration-fast">
|
|
MOSE通过创新的密码学和跨链技术，为区块链世界构建隐私保护的基础设施
|
|
</p>
|
|
|
|
<div class="flex justify-center gap-4">
|
|
<a href="#architecture" class="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200">
|
|
了解技术架构
|
|
<Icon icon="carbon:arrow-down" />
|
|
</a>
|
|
<a href="#innovation" class="inline-flex items-center gap-2 bg-transparent border border-primary hover:bg-primary-light/10 text-primary font-medium py-3 px-6 rounded-lg transition-colors duration-200">
|
|
核心创新
|
|
<Icon icon="carbon:launch" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Decoration -->
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
|
|
<div class="absolute -top-24 -left-24 w-64 h-64 rounded-full bg-primary-light blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
|
|
<div class="absolute top-1/2 right-0 w-80 h-80 rounded-full bg-secondary blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-sm"></div>
|
|
<div class="absolute -bottom-24 left-1/3 w-72 h-72 rounded-full bg-accent blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-md"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 技术架构模块 - 4列布局 带底图 -->
|
|
<section id="architecture" class="py-54 px-6 md:px-12 lg:px-32 bg-background-light" :style="{ backgroundImage: `url(${getConfigImage('tec_summary_bg')})` }">
|
|
<div class=" w-full">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-text mb-16 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
|
|
技术架构
|
|
</h2>
|
|
|
|
<div class="flex flex-wrap justify-between w-full">
|
|
<!-- 动态生成技术架构卡片 -->
|
|
<div
|
|
v-for="(arch, index) in tecDesList"
|
|
:key="index"
|
|
class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8 wow animate__animated animate__fadeInUp"
|
|
:class="[`animate__delay-${index}00ms`]"
|
|
>
|
|
<!-- 内容 -->
|
|
<div class="flex flex-col items-center text-center">
|
|
<p class="text-white text-xl font-medium mb-6" v-html="arch"></p>
|
|
|
|
<!-- 按钮 -->
|
|
<button class="px-6 py-2 bg-red-600 hover:bg-red-700 rounded-sm text-white text-sm flex items-center gap-2 transition-all duration-300">
|
|
了解更多
|
|
<Icon icon="carbon:arrow-right" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 核心技术模块 - 单行布局 带底图 -->
|
|
<section id="innovation" class="py-16 px-6 md:px-12 lg:px-24" :style="{ backgroundImage: `url(${getConfigImage('tec_created_bg')})` }">
|
|
<div class="container mx-auto">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-text mb-12 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
|
|
核心技术
|
|
</h2>
|
|
|
|
<!-- 核心技术卡片 - 一行一个 -->
|
|
<div class="space-y-8">
|
|
<div
|
|
v-for="(tech, index) in technologies"
|
|
:key="index"
|
|
class="relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 group wow animate__animated animate__fadeInUp"
|
|
:class="[`animate__delay-${index}00ms`]"
|
|
>
|
|
<!-- 背景图片 -->
|
|
<div class="absolute inset-0 w-full h-full">
|
|
<img :src="tech.image" :alt="tech.title" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
|
|
<div
|
|
class="absolute inset-0"
|
|
:class="{
|
|
'bg-gradient-to-r from-indigo-900/90 via-indigo-900/50 to-transparent': tech.color === 'primary',
|
|
'bg-gradient-to-r from-emerald-900/90 via-emerald-900/50 to-transparent': tech.color === 'secondary',
|
|
'bg-gradient-to-r from-amber-900/90 via-amber-900/50 to-transparent': tech.color === 'accent',
|
|
'bg-gradient-to-r from-blue-900/90 via-blue-900/50 to-transparent': tech.color === 'primary' && index === 3
|
|
}"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<div class="relative p-8 md:p-12 min-h-[300px] flex flex-col md:flex-row items-center">
|
|
<!-- 左侧内容 -->
|
|
<div class="md:w-1/2 mb-6 md:mb-0">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center mr-4">
|
|
<Icon :icon="tech.icon" class="h-8 w-8" :class="`text-${tech.color}`" />
|
|
</div>
|
|
<h3 class="text-3xl md:text-4xl font-bold text-white">{{ tech.title }}</h3>
|
|
</div>
|
|
<p class="text-white/90 text-lg md:text-xl leading-relaxed">
|
|
{{ tech.description }}
|
|
</p>
|
|
|
|
<!-- 按钮 -->
|
|
<div class="mt-8">
|
|
<button class="px-6 py-3 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full text-white text-base flex items-center gap-2 transition-all duration-300 border border-white/30">
|
|
技术详情
|
|
<Icon icon="carbon:arrow-right" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧装饰元素 -->
|
|
<div class="md:w-1/2 md:pl-8 flex justify-center md:justify-end">
|
|
<div
|
|
class="w-48 h-48 md:w-64 md:h-64 rounded-full border-2 border-white/20 flex items-center justify-center relative overflow-hidden"
|
|
:class="{
|
|
'bg-indigo-900/20': tech.color === 'primary',
|
|
'bg-emerald-900/20': tech.color === 'secondary',
|
|
'bg-amber-900/20': tech.color === 'accent',
|
|
'bg-blue-900/20': tech.color === 'primary' && index === 3
|
|
}"
|
|
>
|
|
<!-- 内圈 -->
|
|
<div class="w-32 h-32 md:w-40 md:h-40 rounded-full border border-white/40 absolute animate-spin-slow"></div>
|
|
|
|
<!-- 技术图标 -->
|
|
<div class="w-20 h-20 md:w-24 md:h-24 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center">
|
|
<Icon :icon="tech.icon" class="h-10 w-10 md:h-12 md:w-12" :class="`text-${tech.color}`" />
|
|
</div>
|
|
|
|
<!-- 装饰点 -->
|
|
<div class="absolute top-1/4 right-1/4 w-3 h-3 rounded-full bg-white"></div>
|
|
<div class="absolute bottom-1/4 left-1/4 w-3 h-3 rounded-full bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 序号装饰 -->
|
|
<div class="absolute bottom-4 right-8">
|
|
<span class="text-8xl font-bold text-white opacity-10">0{{ index + 1 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 应用程序模块 - Swiper轮播 -->
|
|
<section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light relative overflow-hidden" :style="{ backgroundImage: `url(${getConfigImage('eco_app_bg')})` }">
|
|
<div class="container mx-auto relative z-10">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-text mb-12 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
|
|
生态应用
|
|
</h2>
|
|
|
|
<div class="relative wow animate__animated animate__fadeIn animate__duration-fast">
|
|
<!-- Swiper轮播 -->
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<!-- 应用卡片 -->
|
|
<div
|
|
v-for="(app, index) in apps"
|
|
:key="app.id"
|
|
class="swiper-slide"
|
|
>
|
|
<div class="app-card relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 mx-4 my-8 h-[500px]">
|
|
<!-- 背景渐变 -->
|
|
<div class="absolute inset-0 bg-gradient-to-br" :class="app.color"></div>
|
|
|
|
<!-- 装饰图形 -->
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
|
|
<div class="absolute bottom-0 left-0 w-48 h-48 bg-black/10 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
|
|
|
|
<!-- 内容 -->
|
|
<div class="relative p-8 flex flex-col h-full">
|
|
<!-- 应用图标 -->
|
|
<div class="mb-6 flex justify-center">
|
|
<div class="w-24 h-24 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-4 border-white/30">
|
|
<Icon :icon="app.icon" class="h-12 w-12 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 应用名称 -->
|
|
<h3 class="text-3xl font-bold text-white text-center mb-4">{{ app.name }}</h3>
|
|
|
|
<!-- 应用描述 -->
|
|
<p class="text-white/90 text-center text-lg mb-8">
|
|
{{ app.description }}
|
|
</p>
|
|
|
|
<!-- 装饰线 -->
|
|
<div class="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
|
|
|
|
<!-- 功能列表 -->
|
|
<div class="space-y-4 mt-auto">
|
|
<div class="flex items-center text-white">
|
|
<Icon icon="carbon:checkmark" class="h-5 w-5 mr-3" />
|
|
<span>多链支持</span>
|
|
</div>
|
|
<div class="flex items-center text-white">
|
|
<Icon icon="carbon:checkmark" class="h-5 w-5 mr-3" />
|
|
<span>隐私保护</span>
|
|
</div>
|
|
<div class="flex items-center text-white">
|
|
<Icon icon="carbon:checkmark" class="h-5 w-5 mr-3" />
|
|
<span>安全加密</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 按钮 -->
|
|
<div class="mt-8 flex justify-center">
|
|
<button class="px-6 py-3 bg-white text-primary font-medium rounded-full hover:bg-opacity-90 transition-all duration-300 flex items-center gap-2">
|
|
立即体验
|
|
<Icon icon="carbon:launch" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 应用编号 -->
|
|
<div class="absolute top-6 right-6 bg-white/20 backdrop-blur-sm w-8 h-8 rounded-full flex items-center justify-center">
|
|
<span class="text-white font-bold">{{ app.id }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分页器 -->
|
|
<div class="swiper-pagination mt-8"></div>
|
|
</div>
|
|
|
|
<!-- 导航按钮 -->
|
|
<div class="swiper-button-prev !text-primary after:!text-lg"></div>
|
|
<div class="swiper-button-next !text-primary after:!text-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-5 pointer-events-none">
|
|
<div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full border border-primary"></div>
|
|
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full border border-secondary"></div>
|
|
<div class="absolute top-3/4 left-3/4 w-48 h-48 rounded-full border border-accent"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 保留原有模块 -->
|
|
<!-- <div class="py-16 px-6 md:px-12 lg:px-24 bg-background">
|
|
<ArchitectureModule />
|
|
</div> -->
|
|
|
|
<!-- 保留原有模块 -->
|
|
<!-- <div class="py-16 px-6 md:px-12 lg:px-24 bg-background-light">
|
|
<InnovationModule />
|
|
</div> -->
|
|
|
|
<!-- 保留原有模块 -->
|
|
<!-- <div class="py-16 px-6 md:px-12 lg:px-24">
|
|
<EcosystemIntegrationModule />
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 动画延迟类 */
|
|
.animate__delay-0ms {
|
|
animation-delay: 0ms;
|
|
}
|
|
|
|
.animate__delay-100ms {
|
|
animation-delay: 100ms;
|
|
}
|
|
|
|
.animate__delay-200ms {
|
|
animation-delay: 200ms;
|
|
}
|
|
|
|
.animate__delay-300ms {
|
|
animation-delay: 300ms;
|
|
}
|
|
|
|
/* 慢速旋转 */
|
|
@keyframes spin-slow {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin-slow {
|
|
animation: spin-slow 20s linear infinite;
|
|
}
|
|
|
|
/* Swiper样式覆盖 */
|
|
:deep(.swiper-container) {
|
|
padding: 30px 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
:deep(.swiper-slide) {
|
|
width: 350px;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
:deep(.swiper-slide-active) {
|
|
transform: scale(1.05);
|
|
z-index: 2;
|
|
}
|
|
|
|
:deep(.swiper-pagination-bullet) {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
opacity: 1;
|
|
}
|
|
|
|
:deep(.swiper-pagination-bullet-active) {
|
|
background: var(--color-primary);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
:deep(.swiper-button-prev),
|
|
:deep(.swiper-button-next) {
|
|
color: var(--color-primary);
|
|
background: rgba(255, 255, 255, 0.3);
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
backdrop-filter: blur(4px);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
:deep(.swiper-button-prev:hover),
|
|
:deep(.swiper-button-next:hover) {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
:deep(.swiper-button-prev:after),
|
|
:deep(.swiper-button-next:after) {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 卡片悬停效果 */
|
|
.app-card {
|
|
transition: all 0.5s;
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.app-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|