品牌营销双轨策略:顶天立地 + 铺天盖地edit icon

创建者:
用户LRsc7F04
Fork(复制)
下载
嵌入
BUG反馈
index.html
index.html
            
            // 导航栏滚动效果
window.addEventListener('scroll', function() {
    const navbar = document.querySelector('.navbar');
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// 移动导航菜单
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', function() {
    navLinks.classList.toggle('active');
});

// 轮播图功能
const carouselItems = document.querySelectorAll('.carousel-item');
const carouselIndicators = document.querySelectorAll('.carousel-indicators span');
const prevBtn = document.querySelector('.carousel-control.prev');
const nextBtn = document.querySelector('.carousel-control.next');
let currentSlide = 0;
let slideInterval;

function showSlide(index) {
    // 隐藏所有幻灯片
    carouselItems.forEach(item => {
        item.classList.remove('active');
    });

    // 重置所有指示器
    carouselIndicators.forEach(indicator => {
        indicator.classList.remove('active');
    });

    // 显示当前幻灯片
    carouselItems[index].classList.add('active');
    carouselIndicators[index].classList.add('active');
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % carouselItems.length;
    showSlide(currentSlide);
}

function prevSlide() {
    currentSlide = (currentSlide - 1 + carouselItems.length) % carouselItems.length;
    showSlide(currentSlide);
}

// 启动自动轮播
function startSlideInterval() {
    slideInterval = setInterval(nextSlide, 5000);
}

// 停止自动轮播
function stopSlideInterval() {
    clearInterval(slideInterval);
}

// 事件监听
prevBtn.addEventListener('click', function() {
    stopSlideInterval();
    prevSlide();
    startSlideInterval();
});

nextBtn.addEventListener('click', function() {
    stopSlideInterval();
    nextSlide();
    startSlideInterval();
});

carouselIndicators.forEach((indicator, index) => {
    indicator.addEventListener('click', function() {
        stopSlideInterval();
        currentSlide = index;
        showSlide(currentSlide);
        startSlideInterval();
    });
});

// 鼠标悬停时停止轮播
const carousel = document.querySelector('.carousel');
carousel.addEventListener('mouseenter', stopSlideInterval);
carousel.addEventListener('mouseleave', startSlideInterval);

// 初始化轮播
showSlide(currentSlide);
startSlideInterval();

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;

        const targetElement = document.querySelector(targetId);
        if (targetElement) {
            window.scrollTo({
                top: targetElement.offsetTop - 80,
                behavior: 'smooth'
            });
        }
    });
});

// 表单提交处理
const contactForm = document.getElementById('contactForm');
if (contactForm) {
    contactForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const message = document.getElementById('message').value;

        // 简单验证
        if (!name || !email || !message) {
            alert('请填写必填字段!');
            return;
        }

        // 模拟表单提交
        alert('感谢您的留言,我们会尽快回复您!');
        contactForm.reset();
    });
}

// 动态加载项目
function loadProjects() {
    const projectGrid = document.querySelector('.project-grid');
    if (!projectGrid || !window.projectsData) return;

    projectGrid.innerHTML = '';

    // 只显示前6个项目作为精选
    const featuredProjects = window.projectsData.slice(0, 6);

    featuredProjects.forEach(project => {
        const projectCard = document.createElement('div');
        projectCard.className = 'project-card';

        projectCard.innerHTML = `
            <div class="project-image">
                <img src="${project.image}" alt="${project.title}">
            </div>
            <div class="project-info">
                <span class="project-category">${project.category}</span>
                <h3>${project.title}</h3>
                <p>${project.description.substring(0, 100)}...</p>
                <a href="project-detail.html?id=${project.id}" class="btn-secondary">查看详情</a>
            </div>
        `;

        projectGrid.appendChild(projectCard);
    });
}

// 动态加载用户评价
function loadTestimonials() {
    const testimonialSlider = document.querySelector('.testimonial-slider');
    if (!testimonialSlider || !window.testimonialsData) return;

    testimonialSlider.innerHTML = '';

    window.testimonialsData.forEach((testimonial, index) => {
        const testimonialItem = document.createElement('div');
        testimonialItem.className = 'testimonial-item';
        if (index === 0) {
            testimonialItem.classList.add('active');
        }

        testimonialItem.innerHTML = `
            <div class="testimonial-content">
                <p>${testimonial.content}</p>
                <div class="testimonial-author">
                    <div class="author-image">
                        <img src="${testimonial.authorImage}" alt="${testimonial.authorName}">
                    </div>
                    <div class="author-info">
                        <h4>${testimonial.authorName}</h4>
                        <p>${testimonial.authorTitle}</p>
                    </div>
                </div>
            </div>
        `;

        testimonialSlider.appendChild(testimonialItem);
    });

    // 简单的评价轮播
    let currentTestimonial = 0;
    const testimonialItems = document.querySelectorAll('.testimonial-item');

    function showTestimonial(index) {
        testimonialItems.forEach(item => {
            item.style.transform = `translateX(-${index * 100}%)`;
        });
    }

    function nextTestimonial() {
        currentTestimonial = (currentTestimonial + 1) % testimonialItems.length;
        showTestimonial(currentTestimonial);
    }

    // 自动轮播评价
    setInterval(nextTestimonial, 5000);
}

// 页面加载完成后初始化
window.addEventListener('load', function() {
    loadProjects();
    loadTestimonials();
});

// 发布需求表单处理
const publishForm = document.getElementById('publishForm');
if (publishForm) {
    publishForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const title = document.getElementById('projectTitle').value;
        const category = document.getElementById('projectCategory').value;
        const description = document.getElementById('projectDescription').value;
        const budget = document.getElementById('projectBudget').value;
        const deadline = document.getElementById('projectDeadline').value;
        const contact = document.getElementById('contactInfo').value;

        // 简单验证
        if (!title || !category || !description || !contact) {
            alert('请填写必填字段!');
            return;
        }

        // 生成AI评论(模拟)
        const aiComments = [
            "这个项目很有创意,我们很期待看到它的实施!",
            "想法不错,但建议进一步明确目标受众。",
            "这是一个很有挑战性的项目,但我们有信心完成它!",
            "创意很好,预算也很合理,值得尝试。",
            "项目描述很详细,我们可以提供专业的支持。"
        ];
        const randomComment = aiComments[Math.floor(Math.random() * aiComments.length)];

        alert(`项目发布成功!\nAI评论:${randomComment}`);
        publishForm.reset();
    });
}

// 项目列表页筛选功能
function setupProjectFilters() {
    const categoryFilter = document.getElementById('categoryFilter');
    const projectList = document.querySelector('.project-list');

    if (!categoryFilter || !projectList || !window.projectsData) return;

    // 初始加载所有项目
    renderProjects(window.projectsData);

    // 筛选事件监听
    categoryFilter.addEventListener('change', function() {
        const selectedCategory = this.value;
        let filteredProjects;

        if (selectedCategory === 'all') {
            filteredProjects = window.projectsData;
        } else {
            filteredProjects = window.projectsData.filter(project => project.category === selectedCategory);
        }

        renderProjects(filteredProjects);
    });

    function renderProjects(projects) {
        projectList.innerHTML = '';

        if (projects.length === 0) {
            projectList.innerHTML = '<p class="no-results">没有找到相关项目</p>';
            return;
        }

        projects.forEach(project => {
            const projectCard = document.createElement('div');
            projectCard.className = 'project-card';

            projectCard.innerHTML = `
                <div class="project-image">
                    <img src="${project.image}" alt="${project.title}">
                </div>
                <div class="project-info">
                    <span class="project-category">${project.category}</span>
                    <h3>${project.title}</h3>
                    <p>${project.description.substring(0, 100)}...</p>
                    <a href="project-detail.html?id=${project.id}" class="btn-secondary">查看详情</a>
                </div>
            `;

            projectList.appendChild(projectCard);
        });
    }
}

// 项目详情页加载
function loadProjectDetail() {
    const projectDetail = document.querySelector('.project-detail');
    if (!projectDetail || !window.projectsData) return;

    // 获取URL中的项目ID
    const urlParams = new URLSearchParams(window.location.search);
    const projectId = urlParams.get('id');

    if (!projectId) {
        projectDetail.innerHTML = '<p class="error">无效的项目ID</p>';
        return;
    }

    // 查找项目
    const project = window.projectsData.find(p => p.id === projectId);

    if (!project) {
        projectDetail.innerHTML = '<p class="error">未找到该项目</p>';
        return;
    }

    // 渲染项目详情
    projectDetail.innerHTML = `
        <div class="project-header">
            <span class="project-category">${project.category}</span>
            <h1>${project.title}</h1>
            <div class="project-meta">
                <span><i class="fa fa-calendar"></i> ${project.date}</span>
                <span><i class="fa fa-user"></i> ${project.client}</span>
            </div>
        </div>
        <div class="project-gallery">
            <img src="${project.image}" alt="${project.title}">
            ${project.gallery ? project.gallery.map(img => `<img src="${img}" alt="${project.title}">`).join('') : ''}
        </div>
        <div class="project-description">
            <h2>项目描述</h2>
            <p>${project.description}</p>
        </div>
        <div class="project-objectives">
            <h2>项目目标</h2>
            <ul>
                ${project.objectives.map(obj => `<li>${obj}</li>`).join('')}
            </ul>
        </div>
        <div class="project-results">
            <h2>项目成果</h2>
            <p>${project.results}</p>
        </div>
        <div class="ai-comment">
            <h2>AI评论</h2>
            <div class="comment-content">
                <i class="fa fa-robot"></i>
                <p>${project.aiComment}</p>
            </div>
        </div>
        <div class="project-comments">
            <h2>用户评论 (${project.comments.length})</h2>
            ${project.comments.length > 0 ? 
                project.comments.map(comment => `
                <div class="comment-item">
                    <div class="comment-author">
                        <img src="${comment.authorImage}" alt="${comment.authorName}">
                        <div class="author-info">
                            <h4>${comment.authorName}</h4>
                            <p>${comment.date}</p>
                        </div>
                    </div>
                    <div class="comment-content">
                        <p>${comment.content}</p>
                    </div>
                </div>
                `).join('') : 
                '<p class="no-comments">暂无评论</p>'
            }
        </div>
        <div class="add-comment">
            <h2>添加评论</h2>
            <form id="commentForm">
                <div class="form-group">
                    <label for="commentName">姓名</label>
                    <input type="text" id="commentName" name="commentName" required>
                </div>
                <div class="form-group">
                    <label for="commentEmail">邮箱</label>
                    <input type="email" id="commentEmail" name="commentEmail" required>
                </div>
                <div class="form-group">
                    <label for="commentContent">评论内容</label>
                    <textarea id="commentContent" name="commentContent" rows="4" required></textarea>
                </div>
                <button type="submit" class="btn-primary">提交评论</button>
            </form>
        </div>
    `;

    // 评论表单处理
    const commentForm = document.getElementById('commentForm');
    if (commentForm) {
        commentForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const name = document.getElementById('commentName').value;
            const email = document.getElementById('commentEmail').value;
            const content = document.getElementById('commentContent').value;

            // 简单验证
            if (!name || !email || !content) {
                alert('请填写必填字段!');
                return;
            }

            alert('评论提交成功,等待审核!');
            commentForm.reset();
        });
    }
}

// 页面加载完成后初始化特定页面功能
window.addEventListener('load', function() {
    // 检查当前页面是否为项目列表页
    if (document.getElementById('categoryFilter')) {
        setupProjectFilters();
    }

    // 检查当前页面是否为项目详情页
    if (document.querySelector('.project-detail')) {
        loadProjectDetail();
    }
});
        
编辑器加载中
预览
控制台