{%#frame(frame.htm)%}
{%&title:首页%}
{%&css:
<link rel="stylesheet" href="{#root}cn/css/index.css">%}

<style>
    @media screen and (min-width: 1600px) {
        .swiper-slide a .banner {
            height: 480px;
            width: 1920px;
        }
    }
</style>



<main class="clearfix">
    <!-- 轮播图 -->
    <div class="product">
        <div class="swiper-container container_dd">
            <div class="swiper-wrapper">


                {%#bind(bannerList,@bannerList)%}
                {%&bannerList:
                <div class="swiper-slide">
                    <a href="{*Description}">
                        <img class="banner" src="{*Pic}" alt="{*Title}">
                    </a>
                </div>
                %}
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 图表 -->
    <div class="graph">
        <!-- 优势系列 -->
        <div class="biology wrap">
            <div class="advantage_ff">
                <div class="divide_ys"><a  href="goods/goods-list">优势系列</a></div>
                <div class="divide"></div>
            </div>
            <div class="divide_li divide_show">
                <ul class="efficient">

                    <li id="cata145">
                        <a href="{%#root%}cn/goods/goods-list?CatalogId=146" style="color:white">试剂</a>
                    </li>
                    <li id="cata13">
                        <a href="{%#root%}cn/goods/goods-list?CatalogId=18" style="color:white">实验仪器</a>
                    </li>
                    <li id="cata12">
                        <a href="{%#root%}cn/goods/goods-list?CatalogId=12" style="color:white">办公用品</a>
                    </li>
                    <li id="cata9">
                        <a href="{%#root%}cn/service/custom" style="color:white">技术服务</a>
                    </li>
                    <li id="cata6">
                        <a href="{%#root%}cn/goods/goods-list?CatalogId=68" style="color:white">实验耗材</a>
                    </li>

                </ul>
            </div>
            <div class="divide_li divide_hied">
                <ul class="efficient">
                    <li>分析科学</li>
                    <li>生命科学</li>
                    <li>材料科学</li>
                    <li>高端化学</li>
                    <li>医药中间体</li>
                    <li>抑制剂</li>
                    <li>催化剂及配体</li>
                    <li>实验耗材</li>
                    <li>定制合成</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 特色产品 -->
    <!--<div class="regard">
        <div class="advantage_ff wrap">
            <div class="swiper-button-next hide_no"></div>
            <div class="swiper-button-prev hide_no"></div>
            <div class="divide_ys">特色产品</div>
            <div class="divide"></div>
        </div>

        <div class="slideshow">
            <div class="swiper-container swiper-container-ff">
                <div class="swiper-wrapper">
                    {%#bind(goodsList,@goodsList)%}
                    {%&goodsList:
                    <div class="swiper-slide swiper-slide-cont">
                        <div class="commodity">
                            <a href="{#root}cn/goods/goods-view/{*Guid}?type=1" style="width:100%;height:50%">
                                <div class="pic" style="width:100%;height:100%">
                                    <img src="{*Pic}"
                                        onerror="this.onerror=null;this.src='{#root}cn/images/login/logo.png'"
                                        alt="{*GoodsName}">
                                </div>
                            </a>
                            <div style="font-size:20px;">
                                <div class="serial">
                                    <div class="ellipsis">CAS：{*CAS}</div>
                                    <div class="spot">现货</div>
                                </div>
                                <div class="serial_02">品名:{*GoodsName}</div>
                                <div class="serial_03">
                                    <div><i>￥</i>{*Price}</div>
                                    <span>{*ItemName}</span>
                                </div>
                                <div class="serial_04">
                                    <div><a href="{#root}cn/goods/goods-view/{*Guid}?type=1"
                                            style="width:100%;height:50%;color:white">查看详情</a></div>
                                    <div onclick=fav({*GoodsId},this) class="sc">{*IsFav}</div>
                                </div>
                            </div>
                        </div>

                    </div>

                    %}


                </div>

            </div>
        </div>
    </div>-->
    <!-- 积分商城 -->
    <nav class="integral">
        <div class="integral_hh wrap">
            <div class="advantage_ff">
                <div class="divide_ys">积分商城</div>
                <div class="divide"></div>
            </div>
            <div class="commodity">
                <ul>
                    {%#bind(giftList,@giftList)%}
                    {%&giftList:
                    <li>
                        <div><img src="{*Pic}"
                                onerror="this.onerror=null;this.src='yulangshengwu/cn/images/login/logo.png'" alt="">
                        </div>
                        <div class="ellipsis">{*GiftName}</div>
                        <div><span>{*Points}</span><i>积分</i></div>
                        <div><a href="{#root}cn/order/point?giftid={*GiftId}" class="exchange">立即兑换</a></div>
                    </li>%}
                    <!--<li>
                                  <div> <img src="./upload/commodity_02.png" alt=""></div>
                                  <div>资生堂惠润洗护套装</div>
                                  <div><span>8000</span><i>积分</i></div>
                                  <div>立即兑换</div>
                              </li>-->
                </ul>
            </div>
            <div class="more"><a href="{%#root%}cn/gift/gift-list">查看更多</a></div>
        </div>
    </nav>
    <!-- 新闻中心 -->
    <div class="journalism">
        <div class="integral_hh wrap">
            <div class="advantage_ff">
                <div class="divide_ys">新闻中心</div>
                <div class="divide"></div>
            </div>
            <div class="journalism_cont">
                <ul>
                    {%#bind(contentList,@contentList)%}
                    {%&contentList:
                    <li>
                        <a href="{#root}cn/content/content-view?id={*ContentId}">
                            <img src="{*Pic}"
                                onerror="this.onerror=null;this.src='yulangshengwu/cn/images/login/logo.png'"
                                alt="{*Title}" />
                        </a>
                        <div class="chemistry_tx">
                            <div>{*PublishDate}</div>
                            <div>{*Title}</div>
                        </div>
                    </li>%}
                </ul>
            </div>
            <div class="more"><a href="content/content-list">查看更多</a></div>
        </div>
    </div>
    <div class="collaborate divide_show">
        <div class="collaborate_cont wrap">
            <div class="advantage_ff">
                <div class="divide_ys">合作伙伴</div>
                <div class="divide"></div>
            </div>
            <div class="logo_fg">
                <ul>
                    <li><img src="./images/cooperation_01.png" alt=""></li>
                    <li><img src="./images/cooperation_02.png" alt=""></li>
                    <li><img src="./images/cooperation_03.png" alt=""></li>
                    <li><img src="./images/cooperation_04.png" alt=""></li>
                    <li><img src="./images/cooperation_05.png" alt=""></li>
                    <li><img src="./images/cooperation_06.png" alt=""></li>
                </ul>
            </div>
            <div class="deep_txt">立足科技 , 创造未来</div>
        </div>
        <div class="take_fert">
            <div class="take">
            </div>
        </div>
    </div>


</main>
<style>
    .ri-3 {
        width: 170px;
        padding: 21px 22px 16px 22px;
    }

    .ri-1 {
        padding: 21px 21px 15px 21px;
    }

    ul,
    li,
    dl,
    dt,
    dd {
        list-style: none;
        font-weight: normal;
        text-decoration: none;
        font-style: normal;
    }

    a,
    em,
    span,
    b,
    i {
        list-style: none;
        font-weight: normal;
        text-decoration: none;
        font-style: normal;
        display: inline-block;
    }

    .ri-1 h2 {
        margin-bottom: 13px;
        font-weight: 400;
    }

    h2 {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }

    .ri-1 a i {
        width: 16px;
        height: 18px;
        background: url(../images/sub-qq-hui.png) no-repeat center;
        vertical-align: middle;
        margin-top: -2px;
    }

    .ri-1 a {
        width: 100%;
        line-height: 38px;
        border: 1px solid #e5e5e5;
        color: #666;
        margin-bottom: 10px;
    }

    a,
    em,
    span,
    b,
    i {
        list-style: none;
        font-weight: normal;
        text-decoration: none;
        font-style: normal;
        display: inline-block;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .right-fixed>li.li-th .more-info,
    .right-fixed>li.li-t .more-info {
        top: 50%;
        transform: translateY(-50%);
    }

    .ri-2 {
        padding: 21px;
    }

    element.style {
        display: none;
    }



    .more-info {
        position: absolute;
        top: 0;
        right: 62px;
        transition: 0.5s;
        background: #89c997;
        text-align: center;
        z-index: 1;
        width: 184px;
        box-shadow: -5px 0 10px #ccc;
        display: none;
    }

    html,
    body,
    div,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    form,
    fieldset,
    input,
    button,
    textarea,
    p,
    blockquote,
    table,
    tr,
    th,
    td {
        padding: 0;
        margin: 0;
    }

    * {
        box-sizing: border-box;
    }

    user agent stylesheet div {
        display: block;
    }

    .right-fixed li {
        padding: 20px 0 16px 0;
        border-bottom: 1px solid #eeeeee;
        cursor: pointer;
        position: relative;
        /* margin: 0 7px; */
    }

    ul,
    li,
    dl,
    dt,
    dd {
        list-style: none;
        font-weight: normal;
        text-decoration: none;
        font-style: normal;
    }

    user agent stylesheet li {
        text-align: -webkit-match-parent;
    }
</style>




<script>

   
    $(function () {

        let w = window.screen.width;
        if (w > 768) {
            var swiper = new Swiper('.swiper-container-ff', {
                loop: true,
                slidesPerView: 6,
                direction: getDirection(),
                slidesPerGroup: 1,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    resize: function () {
                        swiper.changeDirection(getDirection());
                    }
                }
            });
        } else {
            var swiper = new Swiper('.swiper-container-ff', {
                loop: true,
                slidesPerView: 2,
                direction: getDirection(),
                slidesPerGroup: 1,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    resize: function () {
                        swiper.changeDirection(getDirection());
                    }
                }
            });
        }


        function getDirection() {
            var windowWidth = window.innerWidth;
            var direction = window.innerWidth <= 65 ? 'vertical' : 'horizontal';

            return direction;
        }



    })

    xmlsRequest.define({ ParameterException: "参数异常", NoData: "数据缺失", Already: "该产品已收藏" });
    function fav(id, that) {
        xmlsRequest.onOk = function () {
            layer.msg("收藏成功");
            $(that).parents(".commodity").find(".sc").html("已收藏");
        }
        xmlsRequest.post({ path: _jbody["root"] + 'cn/my/user/collect/collect-list', method: 'Insert', GoodsId: id });
    }
</script>