blog_detail.blade.php 11.1 KB
{!! $headerHtml !!}
<main>
    <section maskcolor class=" section-imagetext-wrap-block section-block-demo1-imagetext1"
             data-screen="screen-full" mask-color="mask-color-dark" id="sectionIdhuy4658">
        <div class="layout page-title-bar">
            @if(!empty($innerPageBanner))
                @if(isset($innerPageBanner->blog_banner) && !empty($innerPageBanner->blog_banner))
                    <img class="page-banner" src="{{$innerPageBanner->blog_banner}}" alt="">
                @else
                    <img class="page-banner" src="https://ecdn6.globalso.com/public/1.jpg" alt="">
                @endif
            @endif
            <h1 class="page-title"></h1>
        </div>
        <style>
            .section-imagetext-wrap-block .page-title-bar {
                position: relative;
            }
            .section-imagetext-wrap-block .page-title-bar:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

            }
            .section-imagetext-wrap-block[mask-color="mask-color-dark"] .page-title-bar:before {
                background-color: var(--bs-mask-dark);
                opacity: .5;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-dark"] .page-title-bar .page-title,
            .section-imagetext-wrap-block[mask-color="mask-color-theme"] .page-title-bar .page-title {
                color: #fff;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-white"] .page-title-bar:before {
                background-color: var(--bs-mask-white);
                opacity: .5;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-white"] .page-title-bar .page-title {
                color: #000;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-theme"] .page-title-bar:before {
                background-color: var(--bs-theme-color);
                opacity: .5;
            }
            .section-imagetext-wrap-block .page-title-bar .page-banner {
                width: 100%;
                min-height: 10rem;
                object-fit: cover;
            }
            .section-imagetext-wrap-block .page-title-bar .page-title {
                position: absolute;
                left: 50%;
                top: 50%;
                -moz-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </section>
    <section class="section-breadcrumb-wrap-block section-block-demo1-breadcrumb1 " data-screen="screen-large"
             id="sectionIdhyi0947">
        <ul class="breadcrumb-nav d-flex align-items-center layout">
            <li><a href="/">Home</a><i class="la"></i></li>
            @if(strpos($blog_detail->url, 'http://') !== false || strpos($blog_detail->url, 'https://') !== false)
                <li><a href="{{$blog_detail->url}}">{{$blog_detail->name}}</a><i class="la"></i></li>
            @else
                <li><a href="/{{$blog_detail->url}}/">{{$blog_detail->name}}</a><i class="la"></i></li>
            @endif
        </ul>
        <style>
            .section-breadcrumb-wrap-block {
                background-color: #eee;
            }
            .section-breadcrumb-wrap-block .breadcrumb-nav {
                padding: 20px 0;
            }
            .section-breadcrumb-wrap-block .breadcrumb-nav li {
                list-style: none;
                margin-right: 15px;
            }
            .section-breadcrumb-wrap-block .breadcrumb-nav li a {
                display: inline-block;
                margin-right: 10px;
            }
            .section-breadcrumb-wrap-block .breadcrumb-nav li .la:after {
                content: "\f105";
            }
            .section-breadcrumb-wrap-block .breadcrumb-nav li:last-of-type .la {
                display: none;
            }
            .section-breadcrumb-wrap-block .breadcrumb-nav li:last-of-type a {
                color: var(--bs-theme-color);
            }
        </style>
    </section>
    <div class="page-container" data-screen="screen-large">
        <div class="layout d-flex flex-wrap">
            <div class="page-aside">
                <section data-section="section" data-screen="screen-large"
                         class=" section-sidenav-wrap-block section-block-demo1-sidenav1" id="sectionIdpwm2857">
                    <div class="title-bar ">
                        <div class="title"> Blog Category </div>
                    </div>
                    <ul class="side-nav" data-module="6" data-unable="demo1-sidenav">
                        @if(!empty($nav))
                            @include('side_nav.news_side_nav', ['nav' => $nav])
                        @endif
                    </ul>
                </section>
                <section swiperNormal activeblock maskcolor asideProduct data-section="section"
                         data-screen="screen-large" mask-color="mask-color-dark" data-pagination=false
                         class="section-sideproduct-wrap-block section-block-demo1-sideproduct1" id="sectionIdhgy0375">
                    <div class="title-bar ">
                        <div class="title">Featured Blog</div>
                    </div>
                    <div class="outer-swiper-wrap layout" data-unable="demo1-sideproduct1" data-module="1"
                         data-type="recommend" data-totalnumber="5" data-image-type="1" data-ico-type="3">
                        <div class="execute-swiper-slide">
                            <div class="swiper-wrapper product-items" blockitems>
                                @if(!empty($blogList))
                                    @foreach($blogList as $item)
                                        <div class="swiper-slide product-item" blockitem>
                                            <a href="/{{$item['aUrl']}}/" class="item-inner">
                                                <div class="item-img"><img src="{{$item['image']}}" alt="" blockimagetype />
                                                </div>
                                                <h3 class="item-title" blocktitle style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
  text-overflow: ellipsis;">{{$item['name']}}</h3>
                                            </a>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="swiper-control ">
                            <div class="swiper-pagination"></div>
                            <div class="swiper-buttons">
                                <div class="swiper-button swiper-button-prev"><svg
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="64"
                                        height="64">
                                        <g>
                                            <path fill="none" d="M0 0h24v24H0z"></path>
                                            <path
                                                d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z">
                                            </path>
                                        </g>
                                    </svg>
                                </div>
                                <div class="swiper-button swiper-button-next"><svg
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="64"
                                        height="64">
                                        <g>
                                            <path fill="none" d="M0 0h24v24H0z"></path>
                                            <path
                                                d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z">
                                            </path>
                                        </g>
                                    </svg></div>
                            </div>
                        </div>
                    </div>
                    <script>
                        GlobalsoIframe.Swiper.swiperNormal({
                            container: "#sectionIdhgy0375 .execute-swiper-slide",
                            direction: "vertical",
                            delay: 30000,
                            speed: 1200,
                            slidesPerView: 6,
                            spaceBetween: 10,
                        })
                    </script>
                </section>
            </div>
            <div class="page-main">
                <section data-section="section" data-screen="screen-large"
                         class="section-pagenew-wrap-block section-block-demo1-pagenew1 " id="sectionIdxuua687">
                    <div class="layout blockitem">
                        <h2 class="new-title" blocktitle>{{$blog_detail->name}}</h2>
                        <div class="new-time">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="22"
                                 stroke-width="2">
                                <g>
                                    <path fill="none" d="M0 0h24v24H0z"></path>
                                    <path
                                        d="M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm3 8H4v8h16v-8zm-5-6H9v2H7V5H4v4h16V5h-3v2h-2V5zm-9 8h2v2H6v-2zm5 0h2v2h-2v-2zm5 0h2v2h-2v-2z">
                                    </path>
                                </g>
                            </svg>
                            <em blocktime>{{  $blog_detail->created_at->format('Y-m-d') }}</em>
                        </div>
                        <div class="item-desc" blockdesc>
                            {!! $blog_detail->text !!}
                        </div>
                    </div>
                    <style>
                        .section-block-demo1-pagenew1 {
                            position: relative;
                        }
                        .section-block-demo1-pagenew1 .new-title {
                            font-size: 1.8rem;
                            margin-bottom: 2rem;
                        }
                        .section-block-demo1-pagenew1 .new-time {
                            color: #aaa;
                        }
                        .section-block-demo1-pagenew1 .new-time svg {
                            fill: #aaa;
                        }
                        .section-block-demo1-pagenew1 .item-desc {
                            line-height: 2;
                            margin-top: 2rem;
                        }
                    </style>
                </section>
            </div>
        </div>
    </div>
</main>
{!! $footerHtml !!}