{extend name="home/base.html" /}
{block name="header"}
{include file='home/header.html' /}
{/block}
{block name="content"}
<style>
    .index_product_title {width: 100% !important;display: flex;justify-content: center;}
    .index_product_show_item img{width: 284px;height: 300px;}
    .ams{display: none !important;}
</style>
<div style="position: relative;">
    <!-- 轮播图区域 -->
    <div class="index_lunbo swiper swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="/home/static/lunbo.jpg" alt="">
                <!--<div class="index_lunbo_button"><a href="">{:session('lang')=='ch'?'更多':'MORE'} →</a></div>-->
            </div>
            <!--<div class="swiper-slide">
                <img src="/home/static/lunbo.jpg" alt="">
                <div class="index_lunbo_button"><a href="">{:session('lang')=='ch'?'更多':'MORE'} →</a></div>
            </div>
            <div class="swiper-slide">
                <img src="/home/static/lunbo.jpg" alt="">
                <div class="index_lunbo_button"><a href="">{:session('lang')=='ch'?'更多':'MORE'} →</a></div>
            </div>-->
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination index_page swp1"></div>
</div>

<!-- 产品服务和关于我们 -->
<div class="index_center">
    <div class="position_k">
        <!-- 关于我们 -->
        <div class="index_about">
            <img src="{$about.thumb|default='/home/static/indeximg5.jpg'}" alt="" class="wow animated fadeInUp"
                 data-wow-delay="300ms">
            <div class="wow animated fadeInUp" data-wow-delay="300ms">
                <p>
                    {if session('lang')!=null && session('lang') == 'ch'}{$about.name}{else}{$about.en_name}{/if}
                    <!--                    {$about.name}-->
                </p>
                <!--                <p>{$about.en_name}</p>-->
                <p>
                    {if session('lang')!=null && session('lang') == 'ch'}{$about.abstract}{else}{$about.en_abstract}{/if}
                    <!--                    {$about.abstract}-->
                </p>
                <div style="margin-left: 60px;margin-top: 20px;">
                    <div class="index_about_item">
                        <div>
                            <p>1971</p>
                            <p>公司成立</p>
                        </div>
                        <img src="/home/static/shuzibiao.jpg" alt="">
                    </div>
                    <div class="index_about_item">
                        <div>
                            <p>1991</p>
                            <p>港交所上市</p>
                        </div>
                        <img src="/home/static/shuzibiao.jpg" alt="">
                    </div>
                    <div class="index_about_item">
                        <div>
                            <p>2022</p>
                            <p>健康转型发展</p>
                        </div>
                        <img src="/home/static/shuzibiao.jpg" alt="">
                    </div>
                </div>
                <div>
                    <div class="index_about_go"><a href="{$about['url']}">更多 →</a></div>
                </div>
            </div>
        </div>
        <div class="index_pro">
            <div class="index_pro_title">
                <p>
                    {if session('lang')!=null && session('lang') == 'ch'}{$product.name}{else}{$product.en_name}{/if}
<!--                    {$product.name}-->
                </p>
<!--                <p>{$product.en_name}</p>-->
            </div>
            <div class="index_pro_abstract">
                {if session('lang')!=null && session('lang') == 'ch'}{$product.abstract}{else}{$product.en_abstract}{/if}
<!--                {$product.abstract}-->
            </div>
        </div>
        <!-- 产品图片区域 -->
        <div class="product_pic">
            {foreach $pro_list as $k=>$v}
            {if $k<4}
            <div class="index_product wow animated fadeInUp" data-wow-delay="300ms">
                <img src="{$v.thumb|default='/home/static/indeximg1.jpg'}" alt="">
                <p>
                    {if session('lang')!=null && session('lang') == 'ch'}{$v.name}{else}{$v.en_name}{/if}
<!--                    {$v.name}-->
                </p>
<!--                <p>{:msubstr($v.en_name, 0, 50)}</p>-->
                <a href="{$v.url}">更多 →</a>
            </div>
            {/if}
            {/foreach}
        </div>


    </div>
</div>

<!-- 产品展示区域 -->
<!--<div class="index_product_show">
    <div class="position_k">
        <p>{if session('lang')!=null && session('lang') == 'ch'}{$product.name}{else}{$product.en_name}{/if}</p>
        <p></p>
        <div class="index_product_title">
            {foreach $pro_img as $k=>$v}
            {if $v.id!=61}
            <div {if $k==0}class="active"{/if} data-set="{$v.id}"><a href="javascript:void(0);">{$v.name}</a></div>
            {/if}
            {/foreach}
        </div>

        &lt;!&ndash; 轮播图区域 &ndash;&gt;
        <div class="carousel slide index_product_show_kk" id="myCarousel" data-ride="carousel">
            <div class="carousel-inner">
                {foreach $def_imgs as $k=>$val}
                <div class="item {if $k==0}active{/if}">
                    {foreach $val.list as $j=>$v}
                    <div class="index_product_show_item">
                        <a href="{$v.url}">
                            <img src="{$v.thumb|default='/home/static/yaopin1.jpg'}" alt="">
                            <p class="index_product_show_title">{$v.title}</p>
                            <p class="index_product_show_text">{:msubstr($v.abstract,0,20)}</p>
                        </a>
                    </div>
                    {/foreach}
                </div>
                {/foreach}
            </div>

            &lt;!&ndash; 轮播（Carousel）指标 &ndash;&gt;
            <ol class="carousel-indicators index_product_dot" id="">
                {foreach $def_imgs as $k=>$val}
                <li data-target="#myCarousel" data-slide-to="{$k}" class="{if $k==0}active{/if}"></li>
                {/foreach}
            </ol>
        </div>
    </div>
</div>-->

<!-- 股票定价区域 -->
<div class="index_shares">
    <div class="position_k">
        <p>
            {if session('lang')!=null && session('lang') == 'ch'}{$stock.name}{else}{$stock.en_name}{/if}
        </p>
<!--        <p>Stock pricing delayed by 15 minutes.</p>-->
        <div style="margin-top: 30px;text-align: center;">
            <iframe src="http://iportal5.infocast.hk/ban-loong-portal/html/quote/stockQuote2?locale=zh_TW" frameborder="0" style="width: 49%;height: 348px;background: white;"></iframe>
<!--            <img src="/home/static/gupiao1.jpg" alt="" class="wow animated bounceInLeft" data-wow-delay="300ms" style="width: 49%;height: 430px;">-->
            <!--<div class="index_shares_right wow animated bounceInRight" data-wow-delay="300ms">
                <p>{:session('lang')=='ch'?'股票号码':'Stock number'}:0030.HK</p>
                <p>HK $ 0.29</p>
                <div style="text-align: center;">
                    <img src="/home/static/gotop.png" alt="">
                    <span>0.01</span>
                    <span>|</span>
                    <span>0.77%</span>
                </div>
                <p>{:session('lang')=='ch'?'截止2022年2月15日北京时间下午16:23':'As of 16:23 PM Beijing time on February 15, 2022'}</p>
            </div>-->
        </div>
    </div>
</div>

<!-- 新闻资讯区域 -->
<div class="index_news">
    <div class="position_k">
        <img src="/home/static/news.png" alt="">
        <p>
            {if session('lang')!=null && session('lang') == 'ch'}{$news.name}{else}{$news.en_name}{/if}
<!--            {$news.name}-->
        </p>
<!--        <p>{$news.en_name}</p>-->
        <div>
            {foreach $news.list as $k=>$v}
            {if $k<2}
            <div style="float: left;width: 48%;{if $k==0}margin-right:4%;{/if}" >
                <div class="index_news_top">
                    <div>{$v.name}</div>
                    <div><a href="{$v.url|default=''}">Read More +</a></div>
                </div>
                <div class="index_news_all">
                    {foreach $v.article as $j=>$val}
                    <div class="index_news_item wow animated fadeInUp" data-wow-delay="300ms">
                        <p>{$val.created_at|date='Y-m-d'}</p>
                        <div><a href="{$val.url}">{:msubstr($val.title,0,30)}</a></div>
                    </div>
                    {/foreach}
                </div>
            </div>
            {/if}
            {/foreach}
        </div>
    </div>
</div>
{/block}
{block name="footer"}
{include file='home/footer.html' /}
{/block}
{block name="script"}
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/home/js/wow.js"></script>
<script src="/home/js/swiper-bundle.min.js"></script>
<script src="/home/js/jquery.min.js"></script>
<script src="/home/js/main.js"></script>
<script>
    var mySwiper = new Swiper('.swiper1', {
        // loop: true, // 循环模式选项
        // autoplay: true,//自动播放
        paginationClickable: true,
        autoplay:3000,
        // 如果需要分页器
        // pagination: {
        //     el: '.swp1',
        //     bulletClass: 'swiper-pagination-bullet',
        //     bulletActiveClass: 'my-bullet-active',
        // },
    })
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();
    $(".index_product_title div").click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var id = $(this)[0].dataset.set;
        $.ajax({
            url: '/product/list',
            data: {
                'id': id
            },
            success: function (msg) {
                if (msg.status) {
                    $('#pro_list').children().remove();
                    var itemHtml = $('.carousel-inner');
                    itemHtml.children().remove();
                    $('.index_product_dot').children().remove();
                    var html1 = '';
                    var html2 = '';
                    var html3 = '';
                    var item = msg.content;
                    for (var i = 0; i < item.length; i++) {
                        if(i==0){
                            var classname = 'active';
                        }else{
                            classname = '';
                        }
                        html2 = '';
                        html1 = '<div class="item ' + classname + ' ">' ;
                        for(var j = 0; j < item[i].list.length; j++){
                            if (item[i].list[j].thumb == '') {
                                item[i].list[j].thumb = '/home/static/yaopin1.jpg';
                            }
                            html2 += '<div class="index_product_show_item">' +
                                        '<a href="' + item[i].list[j].url + '">' +
                                            '<img src="' + item[i].list[j].thumb + '" alt="">' +
                                            '<p class="index_product_show_title">' + item[i].list[j].title + '</p>' +
                                            '<p class="index_product_show_text">' + item[i].list[j].abstract + '</p>' +
                                        '</a>' +
                                    '</div>';
                        }
                        html3 = '</div>';
                        itemHtml.append(html1 + html2 + html3);
                        var dot = '<li data-target="#myCarousel" data-slide-to=" ' + i + ' " class=" ' + classname + ' "></li>';
                        $('.index_product_dot').append(dot);
                    }
                }
                console.log(msg);
            },
            error: function (msg) {
                console.log(msg);
            }
        })
    });
</script>
{/block}