@layout('parts.layout')
@php
/** 
 * Template Name:单页 || 首页
 */
@endphp


{{-- 单页-首页 --}}
@php
    $modelBanner = true;
    $navHeight = false;

    # 页面数据
    if (is_home()) {
        $pageid = 2;
    }else{
        Header("HTTP/1.1 301 Moved Permanently");
        Header("Location: /");
        die;
    }
    $pageField = get_fields($pageid);
@endphp


@section('banner')
{{-- 首页内容1 --}}
<section class="swiper c-home1">
    <div class="swiper-wrapper">

        @php $model = $pageField['banner']; @endphp
        @php
            $forData = $model;
            $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
        @endphp
        @foreach ($forData as $key => $value )
        <div class="swiper-slide center @if($value['color'] == 1) white @else @endif  ">
            <picture class="c-img">
                {{-- pc端 --}}
                <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                {{-- 移动端 --}}
                <img {{ $key === 0 ? '' : 'loading="lazy"' }} fetchpriority="{{ $key === 0 ? 'high' : 'auto' }}" {{ returnImage($value['m_image'], true, false, 'wide') }}>
            </picture>

            @if( ifFile($value['pc_video']) || ifFile($value['m_video']) )
            <video class="c-video" autoplay muted preload="metadata" playsinline webkit-playsinline x-webkit-airplay x5-video-player-fullscreen x5-video-player-type="h5">
                <source media="(min-width: 768px)" src="{{ returnImage($value['pc_video'], false, false) }}" type="video/mp4">
                <source media="(max-width: 767px)" src="{{ returnImage($value['m_video'], false, false) }}" type="video/mp4">
            </video>
            @endif

            <div class="c-box">
                <div class="container">
                    <div class="c-wrap">
                        <h3 class="c-title font80 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.4s">{{ nl2br($value['title']) }}</h3>
                        <p class="c-text font24 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s">{{ nl2br($value['text']) }}</p>
                        
                        @if($value['btn_name'])
                        <div class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.6s">
                            <a {{ returnLink($value['btn_link']) }} class="public-btn font18">
                                <span>{{ $value['btn_name'] }}</span>
                                <div class="c-ico">
                                    <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow2.svg" alt="{{ $webTitle }}" class="c-svg" onload="SVGInject(this)">
                                </div>
                            </a>
                        </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
        @endforeach

    </div>
    <div class="c-pagination">
        <div class="swiper-button-prev">
            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next">
            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
            <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>
        </div>
    </div>
</section>
@endsection


@section('main')
<div class="c-home-sticky">
    <div class="c-sticky">

        {{-- 首页内容2 --}}
        @php $modelName = 'model1'; $model = $pageField[$modelName]; @endphp
        @if($model['status'])
        <section class="c-home2">
            <div class="container">
                <div class="c-main">
                    <div class="swiper c-swiper1">
                        <div class="c-button-box">
                            <div class="swiper-button-prev">
                                <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                            </div>
                            <div class="swiper-button-next">
                                <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                                <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-wrapper">
                            
                            @php
                                $forData = $model['list'];
                                $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                            @endphp
                            @foreach ($forData as $key => $value )
                            <div class="swiper-slide @if($value['type']==2) @else c-style2 @endif">
                                <picture class="c-img">
                                    {{-- pc端 --}}
                                    <source media="(min-width: 768px)" srcset="{{ returnImage($value['pc_image'], false, false) }}">
                                    {{-- 移动端 --}}
                                    <img loading="lazy" src="{{ returnImage($value['m_image'], false, false) }}" alt="">
                                </picture>
                                <div class="c-box">
                                    <h3 class="c-title font40">{{ nl2br($value['title']) }}</h3>
                                    <p class="c-text font18">{{ nl2br($value['text']) }}</p>
                                    @if($value['btn_name'])
                                    <a {{ returnLink($value['btn_link']) }} class="public-btn font18">
                                        <span>{{ $value['btn_name'] }}</span>
                                        <div class="c-ico">
                                            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow2.svg" alt="{{ $webTitle }}" class="c-svg" onload="SVGInject(this)">
                                        </div>
                                    </a>
                                    @endif
                                </div>
                            </div>
                            @endforeach

                        </div>
                    </div>
                    <div class="swiper c-swiper2 font24">
                        <div class="swiper-wrapper">

                            @php
                                $forData = $model['list'];
                                $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                            @endphp
                            @foreach ($forData as $key => $value )
                            <div class="swiper-slide">{{ nl2br($value['title']) }}</div>
                            @endforeach
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif
        
        {{-- 首页内容3 --}}
        @php $modelName = 'model2'; $model = $pageField[$modelName]; @endphp
        @if($model['status'])
        <section class="c-home3">
            <h2 class="c-title font56">{{ nl2br($model['info']) }}</h2>
            <img loading="lazy" class="c-svg" {{ returnImage($model['icon'], true, false) }} />
        </section>
        @endif

        {{-- 首页内容4 --}}
        @php $modelName = 'model3'; $model = $pageField[$modelName]; @endphp
        @if($model['status'])
        <section class="c-home4">
            <div class="container">
                <div class="c-left">
                    <div class="c-title-box">
                        <h2 class="c-title font32">{{ nl2br($model['title']) }}</h2>
                        <p class="c-text">
                            <img loading="lazy" class="c-svg" {{ returnImage($model['icon'], true, false) }} onload="SVGInject(this)">
                        </p>
                    </div>
                    <div class="swiper">
                        <div class="c-line-box">
                            <div class="c-line"></div>
                        </div>
                        <div class="swiper-wrapper">

                            @php
                                $forData = $model['list'];
                                $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                            @endphp
                            @foreach ($forData as $key => $value )
                            <div class="swiper-slide">
                                <div class="c-box">
                                    <p class="c-title2 font56">{{ nl2br($value['tab']) }}</p>
                                </div>
                            </div>
                            @endforeach

                        </div>
                    </div>
                </div>
                <div class="c-right">
                    <div class="swiper">
                        <div class="swiper-button-prev">
                            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                        </div>
                        <div class="swiper-button-next">
                            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                            <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>
                        </div>
                        <div class="swiper-wrapper">

                            @php
                                $forData = $model['list'];
                                $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                            @endphp
                            @foreach ($forData as $key => $value )
                            <a {{ returnLink($value['btn_link']) }} class="swiper-slide">
                                <p class="c-bg">{{ nl2br($value['bgword']) }}</p>
                                <div class="c-img">
                                    <img class="dynamic-img" loading="lazy" data-pc="{{ returnImage($value['image'], false, false) }}" data-mobile="{{ returnImage($value['image_mobile'], false, false) }}" alt="{{ $webTitle }}">
                                </div>
                                <div class="c-box">
                                    <p class="c-title font40">{{ nl2br($value['info_title']) }}</p>
                                    <div class="c-text font18">
                                        @php
                                            $forDataTwo = explode("\n", $value['info']);
                                            $forDataTwo = is_object($forDataTwo) ? $forDataTwo : ( is_array($forDataTwo) ? $forDataTwo : array());
                                        @endphp
                                        @foreach ($forDataTwo as $keyTwo => $valueTwo )
                                        <p><img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-checked.svg" alt="{{ $webTitle }}">{{ nl2br($valueTwo) }}</p>
                                        @endforeach

                                    </div>
                                    @if($value['btn_name'])
                                    <div class="public-btn2 font18">
                                        <span>{{ $value['btn_name'] }}</span>
                                        <div class="c-ico">
                                            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow2.svg" alt="{{ $webTitle }}" class="c-svg" onload="SVGInject(this)">
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </a>
                            @endforeach
                        </div>
                        <script>
                        document.addEventListener("DOMContentLoaded",function(){const e=window.innerWidth<=768,t=document.querySelectorAll(".dynamic-img");if(!t.length)return;const n=t[0];let o=!1,i=!1;function c(t){const n=e?t.dataset.mobile:t.dataset.pc;n&&t.getAttribute("src")!==n&&t.setAttribute("src",n)}window.addEventListener("scroll",function t(){const d=window.pageYOffset||document.documentElement.scrollTop,r=window.innerHeight;if(!o&&d>=r/2&&(o=!0,c(n)),!i&&d>=r*(e?1.3:2)){i=!0;document.querySelectorAll(".dynamic-img").forEach(e=>{c(e)}),window.removeEventListener("scroll",t)}},{passive:!0})});
                        </script>
                    </div>
                </div>
            </div>
        </section>
        @endif

        {{-- 首页内容5 --}}
        @php $modelName = 'model4'; $model = $pageField[$modelName]; @endphp
        @if($model['status'])
        <section class="c-home5">
            <h2 class="c-title font56">
                <p>{{ str_replace("\n", '</p><p>', $model['text'])  }}</p>
            </h2>
            <p class="c-text">{{ nl2br($model['title']) }}</p>
        </section>
        <section class="c-home6">
            <div class="container">
                <div class="c-top">
                    <div class="swiper">
                        @php
                            $forData = $model['list'];
                            $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                        @endphp
                        <ul class="c-list swiper-wrapper font18">
                            @foreach ($forData as $key => $value )
                            <li class="swiper-slide">{{ nl2br($value['tab']) }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="c-bottom">
                    <div class="swiper">
                        <div class="swiper-button-prev">
                            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                        </div>
                        <div class="swiper-button-next">
                            <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                            <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>
                        </div>
                        @php
                            $forData = $model['list'];
                            $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                        @endphp
                        <ul class="c-list swiper-wrapper">
                            @foreach ($forData as $key => $value )
                            <li class="swiper-slide">
                                <div class="c-wrap">
                                    <div class="public-img">
                                        <img loading="lazy" {{ returnImage($value['image'], true, false, wp_is_mobile() ? 'image_500' : 'image_800') }}>
                                    </div>
                                    <div class="c-box">
                                        <h3 class="c-title font40">{{ nl2br($value['title']) }}</h3>
                                        <p class="c-text font18">{{ nl2br($value['text']) }}</p>
                                    </div>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        @endif


        {{-- 首页内容7 --}}
        <section class="c-home7">
            <div class="container">

                @php $modelName = 'model5'; $model = $pageField[$modelName]; @endphp
                <h2 class="c-title font56">{{ nl2br($model['text']) }}</h2>
                <p class="c-text">{{ nl2br($model['title']) }}</p>

                <div class="c-main">
                    
                    
                    @php $modelName = 'model7'; $model = $pageField[$modelName]; @endphp
                    @if($model['status'])
                    <div class="swiper swiper1">
                        <div class="swiper-wrapper">
                            
                            @php
                                $forDataTwo = $model['list'];
                                $forDataTwo = is_object($forDataTwo) ? $forDataTwo : ( is_array($forDataTwo) ? $forDataTwo : array());
                            @endphp
                            @foreach ($forDataTwo as $keyTwo => $valueTwo )
                            <div class="swiper-slide">
                                <div class="c-wrap">
                                    <img {{ returnImage($valueTwo['icon'], true, false) }} />
                                    <p class="c-num">{{ str_pad(($keyTwo+1), 2, '0', STR_PAD_LEFT) }}</p>
                                    <div class="c-box">
                                        <p class="c-title font24">{{ nl2br($valueTwo['title']) }}</p>
                                        <p class="c-text2 font18">{{ nl2br($valueTwo['text']) }}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    @endif
                    

                    @php $modelName = 'model5'; $model = $pageField[$modelName]; @endphp
                    @if($model['status'])
                    
                        @php
                            $forData = $model['list'];
                            $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                        @endphp
                        @foreach ($forData as $key => $value )
                        <div class="hi-steady-carousel">
                            <div class="c-box">

                                @php
                                    $forDataTwo = $value['image'];
                                    $forDataTwo = is_object($forDataTwo) ? $forDataTwo : ( is_array($forDataTwo) ? $forDataTwo : array());
                                @endphp
                                @foreach ($forDataTwo as $keyTwo => $valueTwo )
                                <div class="c-item">
                                    <img loading="lazy" {{ returnImage($valueTwo, true, false) }}>
                                </div>
                                @endforeach
                                
                            </div>
                        </div>
                        @endforeach

                    @endif
                    
                    
                    @php $modelName = 'model6'; $model = $pageField[$modelName]; @endphp
                    @if($model['status'])
                    <div class="swiper swiper2 ">
                        <div class="swiper-wrapper">

                            @php
                                $forData = $model['list'];
                                $forData = is_object($forData) ? $forData : ( is_array($forData) ? $forData : array());
                            @endphp
                            @foreach ($forData as $key => $value )
                            <div class="swiper-slide">
                                <div class="c-wrap">
                                    <div class="c-box">
                                        <img loading="lazy" src="{{ pathSite('web') }}/assets/images/yh.webp" alt="{{ $webTitle }}">
                                        <div class="c-text2 font22">
                                            <p>{{ nl2br($value['text']) }}</p>
                                        </div>
                                        <div class="c-name-box">
                                            <img loading="lazy" {{ returnImage($value['image'], true, false) }}>
                                            <div class="c-box2">
                                                <p class="c-name font20">{{ nl2br($value['name']) }}</p>
                                                <p class="c-text3">{{ nl2br($value['position']) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="c-button">
                            <div class="swiper-button-prev">
                                <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                            </div>
                            <div class="swiper-button-next">
                                <img loading="lazy" src="{{ pathSite('web') }}/assets/images/ico-arrow3.svg" alt="{{ $webTitle }}" onload="SVGInject(this)">
                            </div>
                        </div>
                    </div>
                    @endif

                </div>
            </div>
        </section>
    </div>
</div>

{{-- 公共联系 --}}
@include('parts.module.public_contact')

@endsection


@section('scripts')
<script>
$(".c-home4").each(function () {
  var obj = $(this);

  var time = 4000; // 自动轮播时间
  var speed = 800; // 切换过渡时间
  var homeHeight = $(".c-home2").outerHeight();

  var autoplay2 = false;
  var on2 = true;

  var home4swiper = new Swiper(obj.find(".c-left .swiper")[0], {
    slidesPerView: 2,
    spaceBetween: 20,
    freeMode: true,
    watchSlidesProgress: true,
    speed: speed,
    breakpoints: {
      768: {
        slidesPerView: 6,
        direction: "vertical",
        spaceBetween: 0,
      },
    },
  });

  var home4line = obj.find(".c-left .swiper .c-line");
  var home4length = obj.find(".c-left .swiper .swiper-slide").length;
  home4line.css("height", (1 / home4length) * 100 + "%");

  var round2 = obj.find(
    ".c-right .swiper-button-next svg:nth-child(2) circle"
  );

  var home4swiper2 = new Swiper(obj.find(".c-right .swiper")[0], {
    effect: "fade",
    fadeEffect: {
      crossFade: true,
    },
    loop: true,
    speed: speed,
    autoplay: {
      delay: time,
      disableOnInteraction: false,
    },
    thumbs: {
      swiper: home4swiper,
    },
    navigation: {
      nextEl: obj.find(".c-right .swiper .swiper-button-next")[0],
      prevEl: obj.find(".c-right .swiper .swiper-button-prev")[0],
    },
    pagination: {
      el: obj.find(".c-right .swiper .swiper-pagination")[0],
      clickable: true,
    },
    on: {
      init: function () {
        this.autoplay.stop();
      },
      slideChangeTransitionStart: function () {
        if (!autoplay2) return;

        round2.removeClass("on");
        round2.css("transition-duration", "0ms");

        setTimeout(function () {
          round2.css("transition-duration", time + 700 + "ms");
          round2.addClass("on");
        }, 10);
      },
    },
  });

  function startAutoplayOnScroll() {
    if ($(window).scrollTop() > homeHeight + $(window).height() * 2.5) {
      if (!on2) return;

      on2 = false;
      autoplay2 = true;

      round2.css("transition-duration", time + "ms");
      round2.addClass("on");

      home4swiper2.autoplay.start();
    }
  }

  startAutoplayOnScroll();
  $(window).on("scroll", startAutoplayOnScroll);
});
</script>
@endsection