{eyou:include file="header.htm" /}
{eyou:include file="banner.htm" /}
{eyou:include file="nav.htm" /}
<style>
    .log-l a{padding:0 15px;}
</style>

<div class="cpzx-z w2 w30 margin">
    <div class="ny-zpal-t w100">
        <div class="ny-zpal-z-t-l w100">
            <div class="magnifierContainer">
                <div class="imgLeft">
                    <!-- 中号图片 -->
                    <div class="imgMedium" id="imgMedium">
                        <!-- 放大镜 -->
                        <div class="magnifier" id="magnifier" style="display: none; left: 262px; top: 76px;">
                            <img src="http://product.dangdang.com/images/zoom_pup.png">
                        </div>
                        <!-- 图片 -->
                        <div class="mediumContainer display-y" id="mediumContainer">
                            <img src="">
                        </div>
                        <div id="zhezhao"></div>
                    </div>

                    <!-- 缩略图 -->
                    <div class="imasf">

                        <div class="imasf-bb bd">
                            <div class="swiper-container swiper-container2 ">
                                <div class="swiper-wrapper">
                                    {eyou:volist name="$eyou.field.image_list" key="pro_k"}
                                    <div class="swiper-slide swiper-slide-active">
                                        <a href="##"><img src="{$field.image_url}" alt="{$field.title}"></a>
                                    </div>
                                    {/eyou:volist}
                                    {if $pro_k eq 0}
                                    <div class="swiper-slide swiper-slide-active">
                                        <a href="##"><img src="{$eyou.field.litpic}"></a>
                                    </div>
                                    {/if}
                                </div>
                                <!-- Add Pagination -->
                                <div class="swiper-button-next">></div>
                                <div class="swiper-button-prev"><</div>
                            </div>
                            <script>
                                var swiper = new Swiper('.swiper-container2', {
                                    slidesPerView: 5,
                                    spaceBetween: 20,
                                    pagination: {
                                        el: '.swiper-pagination',
                                        clickable: true,
                                    },
                                    navigation: {
                                        nextEl: '.swiper-button-next',
                                        prevEl: '.swiper-button-prev',
                                    },
                                    breakpoints: {
                                        320: {  //当屏幕宽度大于等于320
                                            slidesPerView: 1,
                                            spaceBetween: 10
                                        },
                                        768: {  //当屏幕宽度大于等于768
                                            slidesPerView: 2,
                                            spaceBetween: 20
                                        },
                                        1200: {  //当屏幕宽度大于等于1280
                                            slidesPerView: 5,
                                            spaceBetween: 30
                                        }
                                    }

                                });
                            </script>
                        </div>

                    </div>
                </div>

                <div class="imgRight">
                    <!-- 大图 -->
                    <div class="img_u" id="img_u" style="display: none;">
                        <img src="{$eyou.field.litpic}" style="margin-left: -567.1px; margin-top: -283.899px;">
                    </div>
                </div>
            </div>
            <script>
                jQuery(".imasf").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",vis:6});

                /*$('#img_x li').eq(0).css('border', '2px solid coral');*/
                $('#zhezhao').mousemove(function(e){
                    $('#img_u').show();
                    $('#magnifier').show();
                    var left = e.offsetX - parseInt($('#magnifier').width()) / 2;
                    var top = e.offsetY - parseInt($('#magnifier').height()) / 2;
                    left = left < 0 ? 0 : left;
                    left = left > (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) ? (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) : left;
                    top = top < 0 ? 0 : top;
                    top = top > (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) ? (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) : top;

                    $('#magnifier').css('left', left + 'px');
                    $('#magnifier').css('top', top + 'px');

                    var leftRate = left / parseInt($('#zhezhao').outerWidth());
                    var bigLeft = leftRate * parseInt($('#img_u img').outerWidth());
                    $('#img_u img').css('margin-left', -bigLeft + 'px');

                    var topRate = top / parseInt($('#zhezhao').outerHeight());
                    var bigTop =  topRate * parseInt($('#img_u img').outerHeight());
                    $('#img_u img').css('margin-top', -bigTop + 'px');
                })
                $('#zhezhao').mouseleave(function(){
                    $('#img_u').hide();
                    $('#magnifier').hide();
                })

                var b=$('.swiper-container2  img').eq(0).attr('src');
                $('#mediumContainer img').attr('src', b);
                var c=$('#mediumContainer img').attr('src');
                $("#img_u img").attr('src',c);

                var c=$('#mediumContainer img').attr('src');
                $("#img_u img").attr('src',c);
                $("iframe").hide();
                $('.swiper-container2  img').mouseover(function(){
                    var abc=$(this).attr('selected');
                    if(abc){
                        $('#mediumContainer img').hide();
                        $("iframe").show();
                        $("iframe").attr('src',abc);
                    }else{
                        var a=$(this).attr('src');
                        $('#mediumContainer img').show();
                        $('#mediumContainer img').attr('src', a);

                        var c=$('#mediumContainer img').attr('src');
                        $("#img_u img").attr('src',c);
                        $("iframe").hide();
                    }

                });
                $(document).ready(function() {
                    $(".imasf-bb .swiper-slide").mouseover(function() {
                        $(".imasf-bb .swiper-slide").eq($(this).index()).addClass("swiper-slide-active").siblings().removeClass('swiper-slide-active');

                    });
                });

                setInterval(function(){
                    var a=$(".swiper-slide-active img").attr('src');
                    $(".mediumContainer img").attr('src',a);
                }, 100);
            </script>
        </div>
        <div class="ny-zpal-z-t-r w100">
            <h3>{$eyou.field.title}</h3>
            {$eyou.field.content}
        </div>
    </div>
    <div class="cpzx-z-t2 m-t2 m-b">
        <dl class="w100 m-b2">
            <h3><b>Characteristics</b></h3>
            <dd>
                {$eyou.field.characteristics}
            </dd>
        </dl>
        <dl class="w100 m-b2">
            <h3><b>Applications</b></h3>
            <dd>
                {$eyou.field.applications}
            </dd>
        </dl>
    </div>
    
    <style>
        .cpzx-z-t2{display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 50px auto;}
        .cpzx-z-t2 dl{width: 45%;}
        .cpzx-z-t2 dl>h3{padding: 10px;
    font-size: 20px;
    font-weight: normal;
    /* border-bottom: 1px solid #ccc; */
    margin-bottom: 20px;
    color: #fff;
    background: #515151;}
        .cpzx-z-t2 dl dd{}
        .cpzx-z-t2 dl dd *{font-size: 16px!important;
    line-height: 24px!important;}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
        .cpzx-z-t2{}
    </style>
    
    <div class="ny-zpal-z-c">
        <h3>Project details</h3>{$eyou.field.detail}
    </div>
    <div class="ny-zpal-z-b">
        {eyou:prenext get='pre'}
        <a href="{$field.arcurl}" class="a1">{eyou:lang name='sys11' /}</a>
        {eyou:else /}
        <a href="{$field.arcurl}" class="a1">{eyou:lang name='sys11' /}</a>
        {/eyou:prenext}
        {eyou:prenext get='next'}
        <a href="{$field.arcurl}" class="a2">{eyou:lang name='sys12' /}</a>
        {eyou:else /}
        <a href="{$field.arcurl}" class="a2">{eyou:lang name='sys12' /}</a>
        {/eyou:prenext}
    </div>
</div>
{eyou:include file="footer.htm" /}