[V0_FILE]html:file="index.html" isMerged="true" 金朝阳集团有限公司 - SOUNDWILL HOLDINGS LIMITED

金朝阳集团有限公司

SOUNDWILL HOLDINGS LIMITED

新闻公布

更多 >

金朝阳（00878）全年纯利7.3亿元升64%，派息0.1元，连跌两日

金朝阳陈弘2011年收购铜锣湾商业楼盘大手笔

关于金朝阳360三维展厅暨平台作业新下架的通知

[V0_FILE]css:file="styles.css" isMerged="true" /* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f5f5f5; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header Styles */ .header { background-color: #fff; border-bottom: 3px solid #2d5016; position: relative; z-index: 100; } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; } .logo { display: flex; align-items: center; gap: 15px; } .logo-icon { width: 60px; height: 60px; position: relative; } .building-blocks { width: 100%; height: 100%; position: relative; } .block { position: absolute; background: linear-gradient(135deg, #4a7c59, #2d5016); border-radius: 2px; } .block-1 { width: 20px; height: 40px; left: 0; bottom: 0; } .block-2 { width: 18px; height: 50px; left: 22px; bottom: 0; } .block-3 { width: 16px; height: 35px; left: 42px; bottom: 0; } .logo-text h1 { font-size: 24px; color: #2d5016; font-weight: bold; margin-bottom: 2px; } .logo-text p { font-size: 12px; color: #666; letter-spacing: 1px; } .navigation ul { display: flex; list-style: none; gap: 30px; } .navigation a { text-decoration: none; color: #333; font-size: 16px; padding: 8px 15px; border-radius: 4px; transition: all 0.3s ease; } .navigation a:hover, .navigation a.active { background-color: #2d5016; color: #fff; } /* Carousel Styles */ .carousel-section { width: 100%; height: 400px; overflow: hidden; position: relative; background: linear-gradient(135deg, #87ceeb, #98fb98); } .carousel-container { width: 100%; height: 100%; position: relative; } .carousel-wrapper { display: flex; width: 400%; height: 100%; animation: scroll 12s infinite linear; } .carousel-slide { width: 25%; height: 100%; flex-shrink: 0; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; } @keyframes scroll { 0% { transform: translateX(0); } 25% { transform: translateX(-25%); } 50% { transform: translateX(-50%); } 75% { transform: translateX(-75%); } 100% { transform: translateX(0); } } /* Main Content Styles */ .main-content { background-color: #fff; padding: 30px 0; } .content-wrapper { display: flex; gap: 40px; align-items: flex-start; } .left-content { flex: 1; } .right-content { flex: 2; } /* Partner Logos */ .partner-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; } .logo-item { background-color: #f9f9f9; padding: 15px; border-radius: 8px; text-align: center; border: 1px solid #e0e0e0; transition: transform 0.3s ease; } .logo-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .logo-item img { max-width: 100%; height: auto; } /* News Section */ .news-section { background-color: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 4px solid #2d5016; } .news-title { color: #2d5016; font-size: 20px; margin-bottom: 15px; display: inline-block; } .news-more { float: right; margin-top: -35px; } .news-more a { color: #666; text-decoration: none; font-size: 14px; } .news-more a:hover { color: #2d5016; } .news-content { clear: both; margin-top: 10px; } .news-item { padding: 12px 0; border-bottom: 1px solid #e0e0e0; transition: background-color 0.3s ease; } .news-item:last-child { border-bottom: none; } .news-item:hover { background-color: #fff; padding-left: 10px; margin-left: -10px; border-radius: 4px; } .news-item p { font-size: 14px; line-height: 1.6; color: #555; } /* Footer Styles */ .footer { background-color: #2d5016; color: #fff; text-align: center; padding: 20px 0; margin-top: 30px; } .footer p { font-size: 14px; } /* Responsive Design */ @media (max-width: 768px) { .header .container { flex-direction: column; gap: 15px; } .navigation ul { flex-wrap: wrap; gap: 15px; justify-content: center; } .content-wrapper { flex-direction: column; } .partner-logos { grid-template-columns: repeat(4, 1fr); gap: 10px; } .carousel-section { height: 250px; } } @media (max-width: 480px) { .logo-text h1 { font-size: 18px; } .navigation a { font-size: 14px; padding: 6px 10px; } .partner-logos { grid-template-columns: repeat(2, 1fr); } } [V0_FILE]javascript:file="script.js" isMerged="true" // Enhanced Seamless Image Carousel class ImageCarousel { constructor(selector) { this.carousel = document.querySelector(selector) this.slides = this.carousel.querySelectorAll(".carousel-slide") this.currentIndex = 0 this.isAnimating = false this.autoPlayInterval = null this.init() } init() { // Clone slides for seamless loop this.cloneSlides() // Start auto-play this.startAutoPlay() // Add pause on hover this.addHoverEvents() // Add touch/swipe support for mobile this.addTouchEvents() } cloneSlides() { // Clone first and last slides for seamless transition const firstSlide = this.slides[0].cloneNode(true) const lastSlide = this.slides[this.slides.length - 1].cloneNode(true) this.carousel.appendChild(firstSlide) this.carousel.insertBefore(lastSlide, this.slides[0]) // Update slides collection this.slides = this.carousel.querySelectorAll(".carousel-slide") this.totalSlides = this.slides.length // Set initial position this.carousel.style.transform = `translateX(-${100 / this.totalSlides}%)` this.currentIndex = 1 } nextSlide() { if (this.isAnimating) return this.isAnimating = true this.currentIndex++ this.carousel.style.transition = "transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)" this.carousel.style.transform = `translateX(-${(this.currentIndex * 100) / this.totalSlides}%)` // Handle seamless loop setTimeout(() => { if (this.currentIndex >= this.totalSlides - 1) { this.carousel.style.transition = "none" this.currentIndex = 1 this.carousel.style.transform = `translateX(-${(this.currentIndex * 100) / this.totalSlides}%)` } this.isAnimating = false }, 800) } prevSlide() { if (this.isAnimating) return this.isAnimating = true this.currentIndex-- this.carousel.style.transition = "transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)" this.carousel.style.transform = `translateX(-${(this.currentIndex * 100) / this.totalSlides}%)` // Handle seamless loop setTimeout(() => { if (this.currentIndex <= 0) { this.carousel.style.transition = "none" this.currentIndex = this.totalSlides - 2 this.carousel.style.transform = `translateX(-${(this.currentIndex * 100) / this.totalSlides}%)` } this.isAnimating = false }, 800) } startAutoPlay() { this.autoPlayInterval = setInterval(() => { this.nextSlide() }, 4000) } stopAutoPlay() { if (this.autoPlayInterval) { clearInterval(this.autoPlayInterval) this.autoPlayInterval = null } } addHoverEvents() { const carouselSection = document.querySelector(".carousel-section") carouselSection.addEventListener("mouseenter", () => { this.stopAutoPlay() }) carouselSection.addEventListener("mouseleave", () => { this.startAutoPlay() }) } addTouchEvents() { let startX = 0 let endX = 0 this.carousel.addEventListener("touchstart", (e) => { startX = e.touches[0].clientX }) this.carousel.addEventListener("touchend", (e) => { endX = e.changedTouches[0].clientX const diff = startX - endX if (Math.abs(diff) > 50) { if (diff > 0) { this.nextSlide() } else { this.prevSlide() } } }) } } // Navigation Enhancement class Navigation { constructor() { this.navLinks = document.querySelectorAll(".navigation a") this.init() } init() { this.addClickEvents() this.addScrollEffect() } addClickEvents() { this.navLinks.forEach((link) => { link.addEventListener("click", (e) => { e.preventDefault() // Remove active class from all links this.navLinks.forEach((l) => l.classList.remove("active")) // Add active class to clicked link link.classList.add("active") // Add ripple effect this.createRipple(e, link) }) }) } createRipple(event, element) { const ripple = document.createElement("span") const rect = element.getBoundingClientRect() const size = Math.max(rect.width, rect.height) const x = event.clientX - rect.left - size / 2 const y = event.clientY - rect.top - size / 2 ripple.style.cssText = ` position: absolute; width: ${size}px; height: ${size}px; left: ${x}px; top: ${y}px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: scale(0); animation: ripple 0.6s ease-out; pointer-events: none; ` element.style.position = "relative" element.style.overflow = "hidden" element.appendChild(ripple) setTimeout(() => { ripple.remove() }, 600) } addScrollEffect() { const header = document.querySelector(".header") window.addEventListener("scroll", () => { if (window.scrollY > 100) { header.style.boxShadow = "0 2px 10px rgba(0,0,0,0.1)" } else { header.style.boxShadow = "none" } }) } } // News Animation class NewsAnimation { constructor() { this.newsItems = document.querySelectorAll(".news-item") this.init() } init() { this.addHoverEffects() this.addStaggeredAnimation() } addHoverEffects() { this.newsItems.forEach((item) => { item.addEventListener("mouseenter", () => { item.style.transform = "translateX(10px)" item.style.transition = "transform 0.3s ease" }) item.addEventListener("mouseleave", () => { item.style.transform = "translateX(0)" }) }) } addStaggeredAnimation() { const observer = new IntersectionObserver((entries) => { entries.forEach((entry, index) => { if (entry.isIntersecting) { setTimeout(() => { entry.target.style.opacity = "1" entry.target.style.transform = "translateY(0)" }, index * 200) } }) }) this.newsItems.forEach((item) => { item.style.opacity = "0" item.style.transform = "translateY(20px)" item.style.transition = "opacity 0.6s ease, transform 0.6s ease" observer.observe(item) }) } } // Add CSS for ripple animation const style = document.createElement("style") style.textContent = ` @keyframes ripple { to { transform: scale(2); opacity: 0; } } ` document.head.appendChild(style) // Initialize all components when DOM is loaded document.addEventListener("DOMContentLoaded", () => { new ImageCarousel("#carousel") new Navigation() new NewsAnimation() // Add loading animation document.body.style.opacity = "0" document.body.style.transition = "opacity 0.5s ease" setTimeout(() => { document.body.style.opacity = "1" }, 100) }) // Performance optimization window.addEventListener("load", () => { // Preload images for better performance const imageUrls = ["/placeholder.svg?height=400&width=900", "/placeholder.svg?height=80&width=120"] imageUrls.forEach((url) => { const img = new Image() img.src = url }) }) [V0_FILE]png:file="public/images/corporate-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-9s1iJcKkoYBW3SXpjSWXi8NbW2Gbw7.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useEffect, useRef } from "react" export default function CorporateWebsite() { const carouselRef = useRef(null) useEffect(() => { // 无缝滚动轮播图实现 const carousel = carouselRef.current if (!carousel) return let currentIndex = 0 const slides = carousel.children const totalSlides = slides.length const nextSlide = () => { currentIndex = (currentIndex + 1) % totalSlides carousel.style.transform = `translateX(-${currentIndex * 100}%)` } // 自动轮播，每4秒切换 const interval = setInterval(nextSlide, 4000) return () => clearInterval(interval) }, []) return (

{/* 内联样式 */} {/* 头部区域 */}

{/* Logo区域 */}

金朝阳集团有限公司

SOUNDWILL HOLDINGS LIMITED

{/* 导航菜单 */}

{/* 轮播图区域 */}

{/* 主要内容区域 */}

{/* 左侧 - 合作伙伴Logo */}

Soundwill

Plaza

建筑

camp

company

🛒

商城购物

{/* 右侧 - 新闻公布 */}

新闻公布

更多 >

金朝阳（00878）全年纯利7.3亿元升64%，派息0.1元，连跌两日

金朝阳陈弘2011年收购铜锣湾商业楼盘大手笔

关于金朝阳360三维展厅暨平台作业新下架的通知

{/* 页脚 */}

) } [V0_FILE]png:file="public/images/banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-ErhQhkGMm3SnbZvBDIqRqJBAp7R0GJ.png"