{layout name="common/layout" /}
<style>
    .swiper-recommend .swiper-slide {

        width: 216px;
        float: left;
        margin-right: 15px;
    }

    .swiper-recommend .item {
        padding: 15px;
        background: #fff;
    }

    .swiper-recommend .item img {
        width: 100%;
    }

    .swiper-recommend .item h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }

    .index-tab h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }

    #index-focus .item {
        min-height: 500px;
        background-color: rgba(54, 63, 72, 0.34);
        background-size: cover;
        background-attachment: scroll;
        background-position: center;
    }

    #index-focus .item .carousel-text {
        width: 500px;
        margin-top: 114px;
    }

    #index-focus .item .carousel-text h2 {
        margin-top: 30px;
        margin-bottom: 25px;
        font-size: 50px;
        line-height: 56px;
        font-weight: bold;
        color: #fff;
    }

    #index-focus .item .carousel-text p {
        margin-bottom: 30px;
        font-size: 18px;
        color: #fff;
        line-height: 28px;
    }

    @media (max-width: 767px) {
        #index-focus .item .carousel-text {
            width: 100%;
        }
    }

</style>
<link rel="stylesheet" href="__ADDON__/css/animate.css"/>
<div class="swiper-container index-focus">
    <!-- S 焦点图 -->
    <div id="index-focus" class="carousel slide carousel-focus" data-ride="carousel">
        <ol class="carousel-indicators">
            {shop:blocklist id="block" name="indexfocus" row="5"}
            <li data-target="#index-focus" data-slide-to="{:$i-1}" class="{if $i==1}active{/if}"></li>
            {/shop:blocklist}
        </ol>
        <div class="carousel-inner" role="listbox">
            {shop:blocklist id="block" name="indexfocus" row="5"}
            <div class="item {if $i==1}active{/if}" style="background-image:linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.63)), url('{$block.image|htmlentities}')">
                <a href="{$block.url|htmlentities}">
                    <div class="container">
                        <div class="carousel-text pull-right">
                            {$block.content}
                        </div>
                    </div>
                </a>
            </div>
            {/shop:blocklist}
        </div>
        <a class="left carousel-control" href="#index-focus" role="button" data-slide="prev">
            <span class="icon-prev fa fa-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#index-focus" role="button" data-slide="next">
            <span class="icon-next fa fa-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <!-- E 焦点图 -->
    </div>
</div>

<div class="container">

    <!-- S 热门推荐 -->
    <h2 style="color:#444;font-size:16px;">热门推荐</h2>
    <div class="swiper-container swiper-recommend" style="margin:20px 0;">
        <div class="swiper-wrapper">
            {shop:goodslist flag="recommend" id="goods" row="10"}
            <div class="swiper-slide">
                <div class="item">
                    <a href="{$goods.url|htmlentities}" target="_blank">
                        <div class="embed-responsive embed-responsive-square img-zoom">
                            <img src="{$goods.image|cdnurl|htmlentities}" alt="{$goods.title|htmlentities}">
                        </div>
                    </a>
                    <div class="caption text-left">
                        <div class="my-1"><a href="{$goods.url|htmlentities}" title="{$goods.title|htmlentities}">{$goods.title|htmlentities}</a></div>
                        <p class="text-muted text-danger">￥{$goods.price|htmlentities}</p>
                    </div>
                </div>
            </div>
            {/shop:goodslist}
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- E 首页推荐 -->
    {shop:catelist flag="index" id="cate"}
    <div class="index-tab my-4">
        {php}$colorArr = ['4fae9d', '686fb4', '3688d8', '536070', '8782a4','4fae9d', '686fb4', '3688d8', '536070', '8782a4'];{/php}

        <h3><a href="{$cate.url|htmlentities}"><span style="color:#{$colorArr[$key]}">{:$key+1}F {$cate.name|htmlentities}</span></a></h3>
        <div class="product-list">
            <div class="product-grid">
                {shop:goodslist category="$cate->id" id="goods" row="8" orderby="weigh"}
                <div class="product-item text-center">
                    <a class="card-item" href="{$goods.url|htmlentities}" target="_blank">
                        <div class="mb-3">
                            <div class="embed-responsive embed-responsive-square img-zoom">
                                <img src="{$goods.image|cdnurl|htmlentities}" class="" alt="{$goods.title|htmlentities}">
                            </div>
                        </div>
                        <div class="item-info text-left">
                            <div class="item-title">{$goods.title|htmlentities}</div>
                            <div class="item-detail text-danger">
                                <span>¥</span>{$goods.price|htmlentities}
                            </div>
                        </div>
                    </a>
                </div>
                {/shop:goodslist}
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    {/shop:catelist}
</div>

<script data-render="script">
    var mySwiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        slidesPerView: 5,
        paginationClickable: true,
        spaceBetween: 15,
        breakpoints: {
            1200: {
                slidesPerView: 4,
                spaceBetween: 40
            },
            970: {
                slidesPerView: 3,
                spaceBetween: 50
            },
            640: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            320: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        }
    });
</script>