@extends('layouts.app')

@section('title', '首页')

@section('content')

    <!-- 第一模板 -->
    <div class="idxOne ce-morgin-tb">
        <div class="contant idxOneCont">
            <div class="contant-left">
                <div class="idxTitle">
                    <div class="idxTitle-name">
                        {{ getOneCategory(7,'title') }}
                        <span>/ {{ getOneCategory(7,'description') }}</span>
                    </div>
                    <div class="idxTitle-more" data-href="{{ getOneCategory(7,'link') }}">
                        查看更多<img src="/assets/index/images/idxRow.png">
                    </div>
                </div>
                <div class="oneCont-top">
                    @if (getArticlesBYCate(7,5)->isNotEmpty())
                        <div class="ce-img oneCont-top-img">
                            <span style="background-image: url({{ getArticlesBYCate(7,5)->first()->cover_path }});"></span>
                        </div>
                        <div class="oneCont-top-cont" data-href="{{ getArticlesBYCate(7,5)->first()->link }}">
                            <div class="ce-nowrap oneCont-top-title">
                                {{ getArticlesBYCate(7,5)->first()->title }}
                            </div>
                            <div class="ce-nowrap-multi oneCont-top-text">
                                {{ getArticlesBYCate(7,5)->first()->description }}
                            </div>
                            <div class="oneCont-top-time">
                                <span>{{ getArticlesBYCate(7,5)->first()->created_at->format('Y-m-d') }}</span>
                            </div>
                        </div>
                        <ul class="oneCont-ul">
                            @foreach (getArticlesBYCate(7,5) as $article)
                                @if ($loop->iteration>1)
                                    <li data-href="{{ $article->link }}">
                                        <p class="ce-nowrap">{{ $article->title }}</p>
                                        <span>{{ $article->created_at->format('Y-m-d') }}</span>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>

            <div class="contant-right">
                <div class="idxTitle">
                    <div class="idxTitle-name">
                        {{ getOneCategory(6,'title') }}
                    </div>
                    <div class="idxTitle-more" data-href="{{ getOneCategory(6,'link') }}">
                        查看更多<img src="/assets/index/images/idxRow.png">
                    </div>
                </div>
                <ul class="contant-right-list">
                    @if (getArticlesBYCate(6,5)->isNotEmpty())
                        @foreach (getArticlesBYCate(6,5) as $article)
                            <li data-href="{{ $article->link }}">
                                <p class="ce-nowrap">{{ $article->title }}</p>
                                <span>{{ $article->created_at->format('Y-m-d') }}</span>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
    </div>
    <!-- end 第一模板 -->

    <!-- 第二模板 -->
    @if (getArticlesBYCate(24,4)->isNotEmpty())

        <div class="idxTwo ce-morgin-tb">
            <div class="contant">
                <div class="idxTitle">
                    <div class="idxTitle-name">
                        {{ getOneCategory(24,'title') }}<span>/ {{ getOneCategory(24,'description') }}</span>
                    </div>
                    <div class="idxTitle-more" data-href="{{ getOneCategory(24,'link') }}">
                        查看更多<img src="/assets/index/images/idxRow.png">
                    </div>
                </div>
                <ul class="newTwo-list">
                    @foreach (getArticlesBYCate(24,4) as $article)
                        <li data-href="{{ $article->link }}">
                            <div class="ce-img newTwo-list-img">
                                <span style="background-image: url({{ $article->cover_path }});"></span>
                            </div>
                            <div class="newTwo-list-cont">
                                <div class="ce-nowrap newTwo-list-title">{{ $article->title }}</div>
                                <div class="ce-nowrap newTwo-list-text">{{ $article->created_at->format('Y-m-d') }}</div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- end 第二模板 -->

    <!-- 第三模板 -->
    <div class="idxThree">
        <div class="contant">
            <div class="threeCont">
                <div class="idxThree-title">
                    <div class="idxThree-title-name">
                        <div class="idxThree-title-icon">
                            <img src="/assets/index/images/title_icon_00.png">
                            {{ getOneCategory(20,'title') }}
                        </div>
                    </div>
                    <div class="idxThree-title-more" data-href="{{ getOneCategory(20,'link') }}">
                        更多 +
                    </div>
                </div>
                @if (getArticlesBYCate(20,5)->isNotEmpty())
                    <div class="threeCont-top" data-href="{{ getArticlesBYCate(20,5)->first()->link }}">
                        <div class="ce-img threeCont-top-img">
                            <span style="background-image: url({{ getArticlesBYCate(20,5)->first()->cover_path }});"></span>
                        </div>
                        <div class="threeCont-top-cont">
                            <div class="ce-nowrap threeCont-top-title">{{ getArticlesBYCate(20,5)->first()->title }}</div>
                            <div class="ce-nowrap-multi threeCont-top-text">
                                {{ getArticlesBYCate(20,5)->first()->description }}
                            </div>
                        </div>
                    </div>
                @endif

                <ul class="threeCont-list">
                    @if (getArticlesBYCate(20,5)->isNotEmpty())
                        @foreach (getArticlesBYCate(20,5) as $article)
                            @if ($loop->iteration>1)
                                <li data-href="{{ $article->link }}">
                                    <p>{{ $article->title }}</p>
                                    <span>{{ $article->created_at->format('Y-m-d') }}</span>
                                </li>
                            @endif

                        @endforeach
                    @endif

                </ul>
            </div>
            <div class="threeCont">
                <div class="idxThree-title">
                    <div class="idxThree-title-name">
                        <div class="idxThree-title-icon">
                            <img src="/assets/index/images/title_icon_01.png">
                            {{ getOneCategory(21,'title') }}
                        </div>
                    </div>
                    <div class="idxThree-title-more" data-href="{{ getOneCategory(21,'link') }}">
                        更多 +
                    </div>
                </div>
                @if (getArticlesBYCate(21,5)->isNotEmpty())
                    <div class="threeCont-top" data-href="{{ getArticlesBYCate(21,5)->first()->link }}">
                        <div class="ce-img threeCont-top-img">
                            <span style="background-image: url({{ getArticlesBYCate(21,5)->first()->cover_path }});"></span>
                        </div>
                        <div class="threeCont-top-cont">
                            <div class="ce-nowrap threeCont-top-title">{{ getArticlesBYCate(21,5)->first()->title }}</div>
                            <div class="ce-nowrap-multi threeCont-top-text">
                                {{ getArticlesBYCate(21,5)->first()->description }}
                            </div>
                        </div>
                    </div>
                @endif

                <ul class="threeCont-list">
                    @if (getArticlesBYCate(21,5)->isNotEmpty())
                        @foreach (getArticlesBYCate(21,5) as $article)
                            @if ($loop->iteration>1)
                                <li data-href="{{ $article->link }}">
                                    <p>{{ $article->title }}</p>
                                    <span>{{ $article->created_at->format('Y-m-d') }}</span>
                                </li>
                            @endif
                        @endforeach
                    @endif

                </ul>
            </div>
        </div>
    </div>
    <!-- end 第三模板 -->

    <!-- 第四模板 -->
    @if (getArticlesBYCate(8,4)->isNotEmpty())

        <div class="idxFour ce-morgin-tb">
            <div class="contant">
                <div class="idxTitle">
                    <div class="idxTitle-name">
                        {{ getOneCategory(8,'title') }}<span>/ {{ getOneCategory(8,'description') }}</span>
                    </div>
                </div>
                <div class="idxFourSwiper">
                    <!-- Swiper -->
                    <div class="swiper-container idxFour-container">
                        <div class="swiper-wrapper">

                            @foreach (getArticlesBYCate(8,4) as $article)
                                <div class="swiper-slide idxFour-slide">
                                    <div class="ce-img idxFour-img">
                                        <span style="background-image: url({{ $article->cover_path }});"></span>
                                    </div>
                                    <div class="idxFour-cont">
                                        <div class="ce-nowrap idxFour-title">
                                            {{ $article->title }}
                                        </div>
                                        <div class="ce-nowrap-multi idxFour-text">
                                            {{ $article->description }}
                                        </div>
                                        <div class="idxFour-more" data-href="{{ $article->link }}">
                                            查看详情
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="idxFour-Arrows">
                        <div class="swiper-button-next">&gt;</div>
                        <div class="swiper-button-prev">&lt;</div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- end 第四模板 -->

@endsection

@push('script')
    <script>
        // banner轮播
        var banner = new Swiper('.idxBanner', {
            pagination: '.swiper-pagination-white'
        });

        // 轮播
        var idxFour = new Swiper('.idxFour-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 30,
        });
    </script>
@endpush