<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title th:text="${article.title}">文章详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
            max-width: 100%;
            overflow-x: hidden;
        }
        .container {
            max-width: 500px;
            margin: 0 auto;
            background-color: #fff;
            min-height: 100vh;
            position: relative;
        }
        .header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        .back-button {
            font-size: 20px;
            margin-right: 15px;
            text-decoration: none;
            color: #333;
        }
        .title {
            font-size: 18px;
            font-weight: 500;
            flex-grow: 1;
            text-align: center;
        }
        .status-bar {
            display: flex;
            justify-content: space-between;
            padding: 5px 15px;
            font-size: 12px;
            color: #666;
        }
        .status-bar-left {
            display: flex;
            align-items: center;
        }
        .status-bar-right {
            display: flex;
            align-items: center;
        }
        .swiper-container {
            width: 100%;
            height: 250px;
            position: relative;
            overflow: hidden;
        }
        .swiper-wrapper {
            display: flex;
            transition: transform 0.3s ease;
            height: 100%;
        }
        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
        }
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .swiper-pagination {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 5px;
        }
        .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }
        .swiper-pagination-bullet-active {
            background-color: #fff;
        }
        .content {
            padding: 20px 15px;
        }
        .article-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .article-subtitle {
            font-size: 16px;
            color: #666;
            margin-bottom: 15px;
        }
        .article-meta {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #999;
            margin-bottom: 20px;
        }
        .article-content {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
        }
        .article-content p {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">12:22 &#9992;</div>
            <div class="status-bar-right">&#128246; &#128279; &#128267;</div>
        </div>
        
        <!-- 头部 -->
        <div class="header">
            <a href="javascript:history.back();" class="back-button">&#8592;</a>
            <div class="title" th:text="${article.title}">文章标题</div>
        </div>
        
        <!-- 轮播图 -->
        <div class="swiper-container" th:if="${article.rotaImg != null && article.rotaImg != ''}">
            <div class="swiper-wrapper" id="swiperWrapper">
                <!-- 轮播图将通过JavaScript动态添加 -->
            </div>
            <div class="swiper-pagination" id="swiperPagination"></div>
        </div>
        
        <!-- 文章内容 -->
        <div class="content">
            <h1 class="article-title" th:text="${article.title}">文章标题</h1>
            <h2 class="article-subtitle" th:text="${article.subTitle}">文章副标题</h2>
            <div class="article-meta">
                <span>作者：<span th:text="${article.author}">作者名</span></span>
                <span th:text="${#dates.format(article.createTime, 'yyyy-MM-dd')}">发布日期</span>
            </div>
            <div class="article-content" th:utext="${article.content}">
                <!-- 文章内容 -->
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 处理轮播图
            const rotaImg = '[[${article.rotaImg}]]';
            if (rotaImg) {
                const imgArray = rotaImg.split(',');
                const swiperWrapper = document.getElementById('swiperWrapper');
                const swiperPagination = document.getElementById('swiperPagination');
                
                // 添加轮播图片
                imgArray.forEach((img, index) => {
                    const slide = document.createElement('div');
                    slide.className = 'swiper-slide';
                    
                    const imgElement = document.createElement('img');
                    imgElement.src = img;
                    imgElement.alt = '轮播图' + (index + 1);
                    
                    slide.appendChild(imgElement);
                    swiperWrapper.appendChild(slide);
                    
                    // 添加分页指示器
                    const bullet = document.createElement('div');
                    bullet.className = 'swiper-pagination-bullet';
                    if (index === 0) {
                        bullet.className += ' swiper-pagination-bullet-active';
                    }
                    bullet.onclick = function() {
                        goToSlide(index);
                    };
                    swiperPagination.appendChild(bullet);
                });
                
                // 初始化轮播
                let currentSlide = 0;
                const slides = document.querySelectorAll('.swiper-slide');
                const bullets = document.querySelectorAll('.swiper-pagination-bullet');
                
                // 自动轮播
                setInterval(() => {
                    currentSlide = (currentSlide + 1) % slides.length;
                    goToSlide(currentSlide);
                }, 3000);
                
                // 切换到指定幻灯片
                function goToSlide(index) {
                    swiperWrapper.style.transform = `translateX(-${index * 100}%)`;
                    
                    // 更新分页指示器
                    bullets.forEach((bullet, i) => {
                        if (i === index) {
                            bullet.classList.add('swiper-pagination-bullet-active');
                        } else {
                            bullet.classList.remove('swiper-pagination-bullet-active');
                        }
                    });
                    
                    currentSlide = index;
                }
            }
        });
    </script>
</body>
</html>