732 lines
24 KiB
JavaScript
732 lines
24 KiB
JavaScript
// GSAP动画配置文件
|
||
// 确保在DOM加载完成后执行动画
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 检查GSAP是否已加载
|
||
if (typeof gsap === 'undefined') {
|
||
console.warn('GSAP library is not loaded. Please include GSAP before this script.');
|
||
// 如果GSAP未加载，确保所有元素可见
|
||
const allElements = document.querySelectorAll('.navbar, .contact-buttons .btn, .skill-category, .contact-item, .other-experience, .modern-project-showcase');
|
||
allElements.forEach(el => {
|
||
if (el) {
|
||
el.style.opacity = '1';
|
||
el.style.visibility = 'visible';
|
||
el.style.transform = '';
|
||
console.log(`Made ${el.className} visible (GSAP fallback)`);
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
console.log('GSAP loaded successfully, initializing animations...');
|
||
|
||
// ===== 页面加载动画 =====
|
||
function initLoadingAnimations() {
|
||
// 隐藏加载器的动画
|
||
gsap.to("#loader", {
|
||
opacity: 0,
|
||
duration: 0.5,
|
||
delay: 1,
|
||
onComplete: function() {
|
||
document.getElementById('loader').style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 导航栏动画
|
||
// 首先确保导航栏存在
|
||
const navbarElement = document.querySelector(".navbar");
|
||
if (navbarElement) {
|
||
gsap.from(".navbar", {
|
||
y: -100,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
delay: 1.2,
|
||
ease: "back.out(1.7)"
|
||
});
|
||
} else {
|
||
console.warn('Navbar element not found for animation');
|
||
}
|
||
}
|
||
|
||
// ===== 首页英雄区域动画 =====
|
||
function initHeroAnimations() {
|
||
// 确保元素初始可见，然后应用动画
|
||
gsap.set([".hero-avatar", ".hero h1", ".hero .subtitle", ".hero .description", ".contact-buttons .btn"], {
|
||
clearProps: "all"
|
||
});
|
||
|
||
const tl = gsap.timeline({ delay: 1.5 });
|
||
|
||
tl.from(".hero-avatar", {
|
||
scale: 0,
|
||
rotation: 360,
|
||
duration: 1,
|
||
ease: "back.out(1.7)"
|
||
})
|
||
.from(".hero h1", {
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
}, "-=0.5")
|
||
.from(".hero .subtitle", {
|
||
y: 30,
|
||
opacity: 0,
|
||
duration: 0.6,
|
||
ease: "power2.out"
|
||
}, "-=0.3")
|
||
.from(".hero .description", {
|
||
y: 30,
|
||
opacity: 0,
|
||
duration: 0.6,
|
||
ease: "power2.out"
|
||
}, "-=0.2")
|
||
.from(".contact-buttons .btn", {
|
||
y: 30,
|
||
opacity: 0,
|
||
duration: 0.5,
|
||
stagger: 0.1,
|
||
ease: "power2.out"
|
||
}, "-=0.2");
|
||
}
|
||
|
||
// ===== 滚动触发动画 =====
|
||
function initScrollAnimations() {
|
||
// 注册ScrollTrigger插件
|
||
if (typeof ScrollTrigger !== 'undefined') {
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
} else {
|
||
console.warn('ScrollTrigger plugin not found. Elements will be visible immediately.');
|
||
// 如果ScrollTrigger不可用，确保所有元素可见
|
||
gsap.set([".skill-category", ".contact-item", ".other-experience", ".modern-project-showcase"], {
|
||
opacity: 1,
|
||
y: 0,
|
||
x: 0
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 基本资料部分动画
|
||
gsap.from("#basic-info .section-title", {
|
||
scrollTrigger: {
|
||
trigger: "#basic-info",
|
||
start: "top 80%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
gsap.from("#basic-info .project-card", {
|
||
scrollTrigger: {
|
||
trigger: "#basic-info",
|
||
start: "top 70%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 80,
|
||
opacity: 0,
|
||
duration: 1,
|
||
delay: 0.2,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
gsap.from("#basic-info .education-item", {
|
||
scrollTrigger: {
|
||
trigger: "#basic-info .education-item",
|
||
start: "top 80%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
x: -80,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 技能卡片动画
|
||
gsap.from("#skills .section-title", {
|
||
scrollTrigger: {
|
||
trigger: "#skills",
|
||
start: "top 80%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
gsap.to(".skill-category", {
|
||
scrollTrigger: {
|
||
trigger: "#skills",
|
||
start: "top 70%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
opacity: 1,
|
||
duration: 2,
|
||
scale: 1,
|
||
delay: 0.5,
|
||
ease: "cire.out"
|
||
});
|
||
|
||
// 项目展示动画
|
||
gsap.from("#experience .section-title", {
|
||
scrollTrigger: {
|
||
trigger: "#experience",
|
||
start: "top 80%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 只为可见的项目卡片设置动画
|
||
gsap.from("#industrial-design-content .modern-project-showcase", {
|
||
scrollTrigger: {
|
||
trigger: "#experience",
|
||
start: "top 70%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
x: -100,
|
||
opacity: 0,
|
||
duration: 1.2,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 为其他标签的项目卡片设置初始可见状态
|
||
gsap.set("#machining-content .modern-project-showcase, #automation-content .modern-project-showcase, #non-standard-content .modern-project-showcase", {
|
||
opacity: 1,
|
||
x: 0
|
||
});
|
||
|
||
// 实习经历标签动画
|
||
gsap.from(".experience-tab-btn", {
|
||
scrollTrigger: {
|
||
trigger: ".experience-tabs",
|
||
start: "top 80%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 30,
|
||
opacity: 0,
|
||
duration: 0.6,
|
||
stagger: 0.1,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
gsap.from(".placeholder-card", {
|
||
scrollTrigger: {
|
||
trigger: ".experience-tab-content",
|
||
start: "top 70%",
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 个人总结动画 - 极宽松触发条件，适应所有标签页面高度
|
||
gsap.from("#summary .section-title", {
|
||
scrollTrigger: {
|
||
trigger: "#summary",
|
||
start: "top 50%", // 极宽松触发阈值，页面滚动即触发
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
gsap.from("#summary .summary-content", {
|
||
scrollTrigger: {
|
||
trigger: "#summary",
|
||
start: "top 50%", // 极宽松触发阈值，页面滚动即触发
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 30,
|
||
opacity: 0,
|
||
duration: 1,
|
||
delay: 0.2,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 联系信息动画 - 极宽松触发条件，适应所有标签页面高度
|
||
gsap.from("#contact .section-title", {
|
||
scrollTrigger: {
|
||
trigger: "#contact",
|
||
start: "top 100%", // 极宽松触发阈值，页面滚动即触发
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
gsap.from(".contact-item", {
|
||
scrollTrigger: {
|
||
trigger: "#contact",
|
||
start: "top 100%", // 极宽松触发阈值，页面滚动即触发
|
||
toggleActions: "play none none reverse"
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 0.6,
|
||
stagger: 0.15,
|
||
ease: "power2.out"
|
||
});
|
||
}
|
||
|
||
// ===== 悬停交互动画 =====
|
||
function initHoverAnimations() {
|
||
// 项目卡片悬停动画
|
||
const projectCard = document.querySelector('.modern-project-showcase');
|
||
if (projectCard) {
|
||
projectCard.addEventListener('mouseenter', function() {
|
||
gsap.to(this, {
|
||
y: -15,
|
||
scale: 1.02,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
});
|
||
|
||
projectCard.addEventListener('mouseleave', function() {
|
||
gsap.to(this, {
|
||
y: 0,
|
||
scale: 1,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
});
|
||
}
|
||
|
||
// 技能卡片悬停动画
|
||
document.querySelectorAll('.skill-category').forEach(card => {
|
||
card.addEventListener('mouseenter', function() {
|
||
gsap.to(this, {
|
||
y: -8,
|
||
scale: 1.01,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
});
|
||
|
||
card.addEventListener('mouseleave', function() {
|
||
gsap.to(this, {
|
||
y: 0,
|
||
scale: 1,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
// ===== 弹窗动画增强 =====
|
||
function initModalAnimations() {
|
||
// 替换原有的职责弹窗动画
|
||
window.openResponsibilitiesModalGSAP = function() {
|
||
const modal = document.getElementById('responsibilitiesModal');
|
||
const content = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
modal.style.display = 'block';
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
// GSAP弹窗动画
|
||
gsap.fromTo(modal,
|
||
{ opacity: 0 },
|
||
{ opacity: 1, duration: 0.3 }
|
||
);
|
||
|
||
gsap.fromTo(content,
|
||
{ x: '-100%', opacity: 0 },
|
||
{ x: '0%', opacity: 1, duration: 0.4, ease: "power2.out" }
|
||
);
|
||
};
|
||
|
||
window.closeResponsibilitiesModalGSAP = function() {
|
||
const modal = document.getElementById('responsibilitiesModal');
|
||
const content = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// GSAP关闭动画
|
||
gsap.to(content, {
|
||
x: '100%',
|
||
opacity: 0,
|
||
duration: 0.4,
|
||
ease: "power2.in",
|
||
onComplete: function() {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
});
|
||
|
||
gsap.to(modal, {
|
||
opacity: 0,
|
||
duration: 0.3,
|
||
delay: 0.1
|
||
});
|
||
};
|
||
|
||
// 智能手表项目弹窗动画
|
||
window.openWatchProjectModalGSAP = function() {
|
||
const modal = document.getElementById('watchProjectModal');
|
||
const content = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
modal.style.display = 'block';
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
// GSAP弹窗动画
|
||
gsap.fromTo(modal,
|
||
{ opacity: 0 },
|
||
{ opacity: 1, duration: 0.3 }
|
||
);
|
||
|
||
gsap.fromTo(content,
|
||
{ x: '-100%', opacity: 0 },
|
||
{ x: '0%', opacity: 1, duration: 0.4, ease: "power2.out" }
|
||
);
|
||
};
|
||
|
||
window.closeWatchProjectModalGSAP = function() {
|
||
const modal = document.getElementById('watchProjectModal');
|
||
const content = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// GSAP关闭动画
|
||
gsap.to(content, {
|
||
x: '100%',
|
||
opacity: 0,
|
||
duration: 0.4,
|
||
ease: "power2.in",
|
||
onComplete: function() {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
});
|
||
|
||
gsap.to(modal, {
|
||
opacity: 0,
|
||
duration: 0.3,
|
||
delay: 0.1
|
||
});
|
||
};
|
||
}
|
||
|
||
// ===== 机械加工工艺项目弹窗动画 =====
|
||
function initMachiningProjectModalAnimations() {
|
||
window.openMachiningProjectModalGSAP = function() {
|
||
const modal = document.getElementById('machiningProjectModal');
|
||
if (!modal) return;
|
||
|
||
modal.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
const modalContent = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 重置初始状态
|
||
gsap.set(modal, { opacity: 0 });
|
||
gsap.set(modalContent, { x: '-100%', opacity: 0 });
|
||
|
||
// 弹窗背景淡入
|
||
gsap.to(modal, {
|
||
opacity: 1,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 内容区域从左侧滑入
|
||
gsap.to(modalContent, {
|
||
x: '0%',
|
||
opacity: 1,
|
||
duration: 0.5,
|
||
delay: 0.1,
|
||
ease: "power3.out"
|
||
});
|
||
};
|
||
|
||
window.closeMachiningProjectModalGSAP = function() {
|
||
const modal = document.getElementById('machiningProjectModal');
|
||
if (!modal) return;
|
||
|
||
const modalContent = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 内容区域向右侧滑出
|
||
gsap.to(modalContent, {
|
||
x: '100%',
|
||
opacity: 0,
|
||
duration: 0.4,
|
||
ease: "power2.in",
|
||
onComplete: function() {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
});
|
||
|
||
gsap.to(modal, {
|
||
opacity: 0,
|
||
duration: 0.3,
|
||
delay: 0.1
|
||
});
|
||
};
|
||
}
|
||
|
||
// ===== 自动化控制项目弹窗动画 =====
|
||
function initAutomationProjectModalAnimations() {
|
||
window.openAutomationProjectModalGSAP = function() {
|
||
const modal = document.getElementById('automationProjectModal');
|
||
if (!modal) return;
|
||
|
||
modal.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
const modalContent = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 重置初始状态
|
||
gsap.set(modal, { opacity: 0 });
|
||
gsap.set(modalContent, { x: '-100%', opacity: 0 });
|
||
|
||
// 弹窗背景淡入
|
||
gsap.to(modal, {
|
||
opacity: 1,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 内容区域从左侧滑入
|
||
gsap.to(modalContent, {
|
||
x: '0%',
|
||
opacity: 1,
|
||
duration: 0.5,
|
||
delay: 0.1,
|
||
ease: "power3.out"
|
||
});
|
||
};
|
||
|
||
window.closeAutomationProjectModalGSAP = function() {
|
||
const modal = document.getElementById('automationProjectModal');
|
||
if (!modal) return;
|
||
|
||
const modalContent = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 内容区域向右侧滑出
|
||
gsap.to(modalContent, {
|
||
x: '100%',
|
||
opacity: 0,
|
||
duration: 0.4,
|
||
ease: "power2.in",
|
||
onComplete: function() {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
});
|
||
|
||
gsap.to(modal, {
|
||
opacity: 0,
|
||
duration: 0.3,
|
||
delay: 0.1
|
||
});
|
||
};
|
||
}
|
||
|
||
// ===== 非标自动化项目弹窗动画 =====
|
||
function initNonStandardProjectModalAnimations() {
|
||
window.openNonStandardProjectModalGSAP = function() {
|
||
const modal = document.getElementById('nonStandardProjectModal');
|
||
if (!modal) return;
|
||
|
||
modal.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
const modalContent = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 重置初始状态
|
||
gsap.set(modal, { opacity: 0 });
|
||
gsap.set(modalContent, { x: '-100%', opacity: 0 });
|
||
|
||
// 弹窗背景淡入
|
||
gsap.to(modal, {
|
||
opacity: 1,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 内容区域从左侧滑入
|
||
gsap.to(modalContent, {
|
||
x: '0%',
|
||
opacity: 1,
|
||
duration: 0.5,
|
||
delay: 0.1,
|
||
ease: "power3.out"
|
||
});
|
||
};
|
||
|
||
window.closeNonStandardProjectModalGSAP = function() {
|
||
const modal = document.getElementById('nonStandardProjectModal');
|
||
if (!modal) return;
|
||
|
||
const modalContent = modal.querySelector('.responsibilities-modal-content');
|
||
|
||
// 内容区域向右侧滑出
|
||
gsap.to(modalContent, {
|
||
x: '100%',
|
||
opacity: 0,
|
||
duration: 0.4,
|
||
ease: "power2.in",
|
||
onComplete: function() {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
});
|
||
|
||
gsap.to(modal, {
|
||
opacity: 0,
|
||
duration: 0.3,
|
||
delay: 0.1
|
||
});
|
||
};
|
||
}
|
||
|
||
// ===== 粒子背景动画增强 =====
|
||
function initParticleAnimations() {
|
||
// 可以在这里添加与粒子背景的GSAP交互
|
||
// 例如：鼠标移动时的粒子响应动画
|
||
}
|
||
|
||
// ===== 返回顶部按钮动画管理 =====
|
||
function initScrollTopButtonAnimation() {
|
||
let scrollTopAnimation = null;
|
||
const scrollTopButton = document.getElementById('scrollTop');
|
||
|
||
if (!scrollTopButton) return;
|
||
|
||
// 全局函数供外部调用
|
||
window.startScrollTopAnimation = function() {
|
||
if (!scrollTopAnimation) {
|
||
scrollTopAnimation = gsap.to(scrollTopButton, {
|
||
y: -10,
|
||
duration: 1.5,
|
||
repeat: -1,
|
||
yoyo: true,
|
||
ease: "power2.inOut"
|
||
});
|
||
}
|
||
};
|
||
|
||
window.stopScrollTopAnimation = function() {
|
||
if (scrollTopAnimation) {
|
||
scrollTopAnimation.kill();
|
||
gsap.set(scrollTopButton, { y: 0 });
|
||
scrollTopAnimation = null;
|
||
}
|
||
};
|
||
}
|
||
|
||
// ===== 统一的元素可见性确保机制 =====
|
||
function ensureElementsVisible() {
|
||
// 确保关键元素始终可见，防止动画失败导致元素消失
|
||
const criticalElements = [
|
||
'.navbar', // 导航栏
|
||
'.contact-buttons .btn', // 首页按钮
|
||
'.skill-category', // 技能卡片
|
||
'.contact-item', // 联系方式
|
||
'.experience-tab-btn', // 实习经历标签
|
||
'.modern-project-showcase' // 项目展示
|
||
];
|
||
|
||
criticalElements.forEach(selector => {
|
||
const elements = document.querySelectorAll(selector);
|
||
elements.forEach(el => {
|
||
if (el) {
|
||
// 检查元素是否可能被隐藏
|
||
const computedStyle = window.getComputedStyle(el);
|
||
const isHidden = el.style.opacity === '0' ||
|
||
el.style.visibility === 'hidden' ||
|
||
computedStyle.opacity === '0' ||
|
||
computedStyle.visibility === 'hidden';
|
||
|
||
if (isHidden) {
|
||
console.log(`Making ${selector} visible as fallback`);
|
||
if (typeof gsap !== 'undefined') {
|
||
// 优先使用GSAP设置
|
||
gsap.set(el, { opacity: 1, visibility: 'visible', y: 0, x: 0 });
|
||
} else {
|
||
// 回退到原生CSS
|
||
el.style.opacity = '1';
|
||
el.style.visibility = 'visible';
|
||
el.style.transform = '';
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// ===== 初始化所有动画 =====
|
||
function initAllAnimations() {
|
||
try {
|
||
initLoadingAnimations();
|
||
initHeroAnimations();
|
||
initScrollAnimations();
|
||
initHoverAnimations();
|
||
initModalAnimations();
|
||
initMachiningProjectModalAnimations();
|
||
initAutomationProjectModalAnimations();
|
||
initNonStandardProjectModalAnimations();
|
||
initParticleAnimations();
|
||
initScrollTopButtonAnimation();
|
||
|
||
// 延迟检查元素可见性
|
||
setTimeout(ensureElementsVisible, 2000);
|
||
} catch (error) {
|
||
console.error('GSAP animation initialization failed:', error);
|
||
// 如果动画初始化失败，确保所有元素可见
|
||
ensureElementsVisible();
|
||
}
|
||
}
|
||
|
||
// 启动动画系统
|
||
initAllAnimations();
|
||
|
||
// 暴露一些函数到全局作用域，以便HTML中调用
|
||
window.gsapAnimations = {
|
||
openModal: window.openResponsibilitiesModalGSAP,
|
||
closeModal: window.closeResponsibilitiesModalGSAP,
|
||
openWatchModal: window.openWatchProjectModalGSAP,
|
||
closeWatchModal: window.closeWatchProjectModalGSAP
|
||
};
|
||
});
|
||
|
||
// ===== 工具函数 =====
|
||
function createTextAnimation(selector, options = {}) {
|
||
const defaults = {
|
||
y: 30,
|
||
opacity: 0,
|
||
duration: 0.6,
|
||
stagger: 0.1,
|
||
ease: "power2.out"
|
||
};
|
||
|
||
const settings = { ...defaults, ...options };
|
||
|
||
return gsap.from(selector, settings);
|
||
}
|
||
|
||
function createFadeInAnimation(selector, direction = 'up', distance = 50) {
|
||
const transforms = {
|
||
up: { y: distance },
|
||
down: { y: -distance },
|
||
left: { x: distance },
|
||
right: { x: -distance }
|
||
};
|
||
|
||
return gsap.from(selector, {
|
||
...transforms[direction],
|
||
opacity: 0,
|
||
duration: 0.8,
|
||
ease: "power2.out"
|
||
});
|
||
}
|