{include file="head.html"}

<style>
/* ==================== LOGO定制页面独有样式（PC官网风格，和新闻资讯统一变量） ==================== */
.logo-custom-wrap {
    background: var(--bg-white);
    border-radius: var(--radius-large);
    padding: 40px;
    box-shadow: var(--shadow-light);
}
/* 面包屑导航 */
.position-nav {
    margin-bottom: 30px;
    font-size: 15px;
    color: var(--text-gray);
}
.position-nav a {
    color: var(--primary);
    text-decoration: none;
}

/* 轮播Banner */
.banner {
    width: 100%;
    height: 360px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border-radius: var(--radius-normal);
    margin-bottom: 35px;
    user-select: none;
    -webkit-user-select: none;
}
.banner-slider {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.5s ease;
}
.banner-item {
    width: 100%;
    height: 100%;
}
.banner-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #ffeeee;
}
.banner-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.indicator {
    width: 32px;
    height: 4px;
    background-color: rgba(255,255,255,0.6);
    cursor: pointer;
    border-radius: 2px;
}
.indicator.active {
    background-color: #b40606;
}

/* 通用区块标题 */
.section-title {
    font-size: 22px;
    font-weight: 600;
    color:#b40606;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #b40606;
    display: inline-block;
}

/* 核心服务卡片 */
.service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
.service-card {
    background-color: #f9f9f9;
    border-radius: var(--radius-normal);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease;
}
.service-card:hover {
    transform: translateY(-6px);
}
.service-card-img {
    width: 100%;
    height: 220px;
}
.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-card-info {
    padding: 20px;
}
.service-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #b40606;
    margin-bottom: 8px;
}
.service-card-desc {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.7;
}

/* 案例展示网格 */
.case-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}
.case-item {
    border-radius: var(--radius-normal);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease;
    cursor: pointer;
}
.case-item:hover {
    transform: translateY(-5px);
}
.case-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.case-item-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    background-color: rgba(0,0,0,0.65);
    color: white;
    font-size: 14px;
    text-align: center;
}

/* 定制流程 */
.process-steps {
    max-width: 800px;
}
.process-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}
.process-step:first-child {
    border-top:none;
}
.step-number {
    width: 34px;
    height: 34px;
    background-color: #b40606;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 16px;
}
.step-content {
    flex: 1;
}
.step-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color:#b40606;
}
.step-desc {
    font-size: 15px;
    color: var(--text-light);
    line-height:1.7;
}
.contact-info {
    font-size: 15px;
    line-height: 2;
    margin-top:10px;
}
.contact-title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size:16px;
}
.contact-list span {
    color: #b40606;
    font-weight: 500;
}

/* 移动端响应式适配，和资讯页面保持一致 */
@media (max-width: 992px) {
    .banner {
        height: 260px;
    }
    .case-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .logo-custom-wrap {
        padding: 25px 20px;
    }
    .banner {
        height: 200px;
    }
    .service-cards {
        grid-template-columns: repeat(1, 1fr);
    }
    .case-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .section-title {
        font-size: 20px;
    }
}
</style>

<!-- 主体内容 -->
<section class="section section-bg-light">
    <div class="container">
        <div class="logo-custom-wrap">
            <!-- 面包屑位置 -->
            <div class="position-nav">
                您的位置：{pboot:position separator=>> }
            </div>

            <!-- 轮播Banner -->
            <div class="banner" id="bannerContainer">
                <div class="banner-slider" id="bannerSlider">
                    <div class="banner-item">
                        <img src="{pboot:siteurl}/static/images/sy09.jpg" alt="图1" onerror="this.src='https://picsum.photos/1200/500?random=1';">
                    </div>
                    <div class="banner-item">
                        <img src="{pboot:siteurl}/static/images/sy08.jpg" alt="图2" onerror="this.src='https://picsum.photos/1200/500?random=2';">
                    </div>
                    <div class="banner-item">
                        <img src="{pboot:siteurl}/static/images/sy07.jpg" alt="图3" onerror="this.src='https://picsum.photos/1200/500?random=3';">
                    </div>
                </div>
                <div class="banner-indicators" id="indicators">
                    <div class="indicator active" data-index="0"></div>
                    <div class="indicator" data-index="1"></div>
                    <div class="indicator" data-index="2"></div>
                </div>
            </div>

            <!-- 核心定制服务 -->
            <h2 class="section-title">核心定制服务</h2>
            <div class="service-cards">
                <div class="service-card">
                    <div class="service-card-img">
                        <img src="{pboot:siteurl}/static/images/yh06.png" alt="刺绣工艺">
                    </div>
                    <div class="service-card-info">
                        <h3 class="service-card-title">刺绣工艺</h3>
                        <p class="service-card-desc">质感高端，耐磨耐洗，适合企业LOGO、文字等精细图案，适用于工作服、衬衫、卫衣等。</p>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-card-img">
                        <img src="{pboot:siteurl}/static/images/yh05.png" alt="烫画工艺">
                    </div>
                    <div class="service-card-info">
                        <h3 class="service-card-title">烫画工艺</h3>
                        <p class="service-card-desc">色彩丰富，图案细腻，适合复杂图案和渐变色，适用于T恤、文化衫、广告衫等。</p>
                    </div>
                </div>
            </div>

            <!-- 定制案例展示 -->
            <h2 class="section-title">定制案例展示</h2>
            <div class="case-grid">
                <div class="case-item">
                    <img src="{pboot:siteurl}/static/images/yh01.png" alt="T恤烫画">
                    <div class="case-item-label">T恤烫画</div>
                </div>
                <div class="case-item">
                    <img src="{pboot:siteurl}/static/images/yh02.png" alt="工装丝印">
                    <div class="case-item-label">马夹丝印</div>
                </div>
                <div class="case-item">
                    <img src="{pboot:siteurl}/static/images/yh03.png" alt="衬衫刺绣">
                    <div class="case-item-label">衬衫刺绣</div>
                </div>
                <div class="case-item">
                    <img src="{pboot:siteurl}/static/images/yh04.png" alt="职业装烫画">
                    <div class="case-item-label">工作服刺绣</div>
                </div>
            </div>

            <!-- 定制流程 -->
            <h2 class="section-title">定制流程</h2>
            <div class="process-steps">
                <div class="process-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <div class="step-title">需求沟通</div>
                        <div class="step-desc">告知我们您的定制需求：服装类型、工艺选择、LOGO图案、数量等</div>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <div class="step-title">设计打样</div>
                        <div class="step-desc">我们根据您的需求制作效果图，确认后打样确认工艺效果</div>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <div class="step-title">确认下单</div>
                        <div class="step-desc">确认样品满意后，签订合同，支付定金，开始批量生产</div>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <div class="step-title">生产配送</div>
                        <div class="step-desc">按约定时间完成生产，质检合格后配送至指定地点</div>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <div class="step-title">联系我们</div>
                        <div class="contact-info">
                            <div class="contact-title">咨询报价</div>
                            <div class="contact-list">
                                <span>吴女士：</span>18969302712（微信同号）
                            </div>
                            <div class="contact-list">
                                <span>王先生：</span>13957331038（微信同号）
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
// 全局变量（轮播图相关）
let slider = null;
let indicators = [];
let bannerContainer = null;
let currentIndex = 0;
let startX = 0;
let isSliding = false;
let autoPlayTimer = null;

// 初始化轮播图
function initBanner() {
    slider = document.getElementById('bannerSlider');
    indicators = document.querySelectorAll('.indicator');
    bannerContainer = document.getElementById('bannerContainer');

    if (!slider || !bannerContainer || indicators.length === 0) {
        console.error('轮播图DOM元素获取失败');
        return;
    }

    indicators.forEach((ind, i) => {
        ind.addEventListener('click', () => switchSlide(i));
    });

    bannerContainer.addEventListener('touchstart', handleTouchStart);
    bannerContainer.addEventListener('touchmove', handleTouchMove);
    bannerContainer.addEventListener('touchend', handleTouchEnd);
    bannerContainer.addEventListener('touchcancel', handleTouchCancel);

    autoPlayTimer = setInterval(() => switchSlide(currentIndex + 1), 3000);
    switchSlide(0);
}

// 切换轮播图
function switchSlide(index) {
    currentIndex = index;
    if (currentIndex > 2) currentIndex = 0;
    if (currentIndex < 0) currentIndex = 2;
    slider.style.transition = 'transform 0.5s ease';
    slider.style.transform = `translateX(-${currentIndex / 3 * 100}%)`;
    indicators.forEach((ind, i) => {
        ind.classList.remove('active');
        if (i === currentIndex) ind.classList.add('active');
    });
}

// 触摸事件处理：触摸开始
function handleTouchStart(e) {
    startX = e.touches[0].clientX;
    isSliding = true;
    clearInterval(autoPlayTimer);
}

// 触摸事件处理：触摸移动
function handleTouchMove(e) {
    if (!isSliding || !slider) return;
    const moveX = e.touches[0].clientX;
    const diffX = startX - moveX;
    const translateX = -(currentIndex / 3 * 100) - (diffX / bannerContainer.offsetWidth * 100);
    slider.style.transition = 'none';
    slider.style.transform = `translateX(${translateX}%)`;
}

// 触摸事件处理：触摸结束
function handleTouchEnd(e) {
    if (!isSliding || !slider) return;
    isSliding = false;
    const endX = e.changedTouches[0].clientX;
    const diffX = startX - endX;
    const minSlideDistance = 50;

    if (Math.abs(diffX) > minSlideDistance) {
        diffX > 0 ? switchSlide(currentIndex + 1) : switchSlide(currentIndex - 1);
    } else {
        slider.style.transition = 'transform 0.5s ease';
        switchSlide(currentIndex);
    }

    autoPlayTimer = setInterval(() => switchSlide(currentIndex + 1), 3000);
}

// 触摸事件处理：触摸取消
function handleTouchCancel() {
    isSliding = false;
    autoPlayTimer = setInterval(() => switchSlide(currentIndex + 1), 3000);
}

// 页面加载完成后初始化轮播图
document.addEventListener('DOMContentLoaded', function() {
    initBanner();
});
</script>

{include file="foot.html"}