yico/resources/views/previews/news/show.blade.php

@extends('previews.layouts.main')
@section('content')
    <div class="article__container">
        <div class="link__container pc">
            <div class="link-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M12.0844 29.333V17.6023H8V13.3787H12.0844V9.77113C12.0844 6.93631 14.4971 4.33301 20.0565 4.33301C22.3074 4.33301 23.9718 4.49688 23.9718 4.49688L23.8406 8.44103C23.8406 8.44103 22.1432 8.42848 20.2909 8.42848C18.2861 8.42848 17.9649 9.13011 17.9649 10.2946V13.3787H24L23.7374 17.6023H17.9649V29.333H12.0844Z"
                        fill="black"></path>
                </svg></div>
            <div class="link-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M29.3196 14.1172C29.3196 8.17152 23.3443 3.33301 15.9918 3.33301C8.63935 3.33301 2.66406 8.17152 2.66406 14.1172C2.66406 19.4429 7.40653 23.916 13.815 24.7575C14.2481 24.8461 14.8368 25.0454 14.9923 25.4108C15.1255 25.7429 15.0811 26.2744 15.0367 26.6176C15.0367 26.6176 14.8812 27.5588 14.8479 27.7581C14.7923 28.0902 14.5813 29.0756 16.0029 28.4778C17.4246 27.8799 23.6775 23.9714 26.4764 20.7605C28.4089 18.6457 29.3307 16.5088 29.3307 14.1283L29.3196 14.1172ZM11.2938 17.2949C11.2938 17.4389 11.1827 17.5496 11.0384 17.5496H7.29547C7.15108 17.5496 7.04002 17.4389 7.04002 17.2949V11.4931C7.04002 11.3492 7.15108 11.2385 7.29547 11.2385H8.23952C8.3839 11.2385 8.49497 11.3492 8.49497 11.4931V16.0991H11.0384C11.1827 16.0991 11.2938 16.2099 11.2938 16.3538V17.2949ZM13.5484 17.2949C13.5484 17.4389 13.4374 17.5496 13.293 17.5496H12.3489C12.2045 17.5496 12.0935 17.4389 12.0935 17.2949V11.4931C12.0935 11.3492 12.2045 11.2385 12.3489 11.2385H13.293C13.4374 11.2385 13.5484 11.3492 13.5484 11.4931V17.2949ZM19.9791 17.2949C19.9791 17.4389 19.868 17.5496 19.7236 17.5496H18.7796C18.7796 17.5496 18.7351 17.5496 18.7129 17.5496C18.7129 17.5496 18.7018 17.5496 18.6907 17.5496C18.6907 17.5496 18.6907 17.5496 18.6796 17.5496C18.6796 17.5496 18.6796 17.5496 18.6685 17.5496C18.6685 17.5496 18.6685 17.5496 18.6574 17.5496C18.6352 17.5274 18.613 17.5164 18.5908 17.4832L15.9252 13.8958V17.3392C15.9252 17.4832 15.8141 17.5939 15.6698 17.5939H14.7257C14.5813 17.5939 14.4703 17.4832 14.4703 17.3392V11.5374C14.4703 11.3935 14.5813 11.2828 14.7257 11.2828H15.6698C15.6698 11.2828 15.6698 11.2828 15.6809 11.2828C15.6809 11.2828 15.6809 11.2828 15.692 11.2828C15.692 11.2828 15.692 11.2828 15.7031 11.2828C15.7031 11.2828 15.7031 11.2828 15.7142 11.2828C15.7142 11.2828 15.7142 11.2828 15.7253 11.2828C15.7253 11.2828 15.7253 11.2828 15.7364 11.2828C15.7364 11.2828 15.7364 11.2828 15.7475 11.2828C15.7475 11.2828 15.7475 11.2828 15.7586 11.2938C15.7586 11.2938 15.7586 11.2938 15.7697 11.3049C15.7697 11.3049 15.7808 11.3271 15.7919 11.3271L18.4575 14.9144V11.471C18.4575 11.3271 18.5685 11.2163 18.7129 11.2163H19.657C19.8014 11.2163 19.9124 11.3271 19.9124 11.471V17.2728L19.9791 17.2949ZM25.1436 12.4343C25.1436 12.5782 25.0325 12.6889 24.8881 12.6889H22.3448V13.6633H24.8881C25.0325 13.6633 25.1436 13.774 25.1436 13.9179V14.8591C25.1436 15.003 25.0325 15.1137 24.8881 15.1137H22.3448V16.0881H24.8881C25.0325 16.0881 25.1436 16.1988 25.1436 16.3427V17.2839C25.1436 17.4278 25.0325 17.5385 24.8881 17.5385H21.1453C21.0009 17.5385 20.8898 17.4278 20.8898 17.2839V11.4931C20.8898 11.3492 21.0009 11.2385 21.1453 11.2385H24.8881C25.0325 11.2385 25.1436 11.3492 25.1436 11.4931V12.4343Z"
                        fill="black"></path>
                </svg></div>
            <div class="link-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M22.6641 9.33301H17.3307V11.9997H22.6641C24.8641 11.9997 26.6641 13.7997 26.6641 15.9997C26.6641 18.1997 24.8641 19.9997 22.6641 19.9997H17.3307V22.6663H22.6641C26.3441 22.6663 29.3307 19.6797 29.3307 15.9997C29.3307 12.3197 26.3441 9.33301 22.6641 9.33301ZM14.6641 19.9997H9.33073C7.13073 19.9997 5.33073 18.1997 5.33073 15.9997C5.33073 13.7997 7.13073 11.9997 9.33073 11.9997H14.6641V9.33301H9.33073C5.65073 9.33301 2.66406 12.3197 2.66406 15.9997C2.66406 19.6797 5.65073 22.6663 9.33073 22.6663H14.6641V19.9997ZM10.6641 14.6663H21.3307V17.333H10.6641V14.6663Z"
                        fill="black"></path>
                </svg></div>
            <div class="link-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M8.0026 21.333V22.6663C8.0026 23.4027 8.59956 23.9997 9.33594 23.9997H22.6693C23.4057 23.9997 24.0026 23.4027 24.0026 22.6663V21.333H26.6693V22.6663C26.6693 24.8755 24.8784 26.6663 22.6693 26.6663H9.33594C7.1268 26.6663 5.33594 24.8755 5.33594 22.6663V21.333H8.0026Z"
                        fill="black"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M17.3359 5.33301V15.4474L20.0026 12.7807L21.8882 14.6663L16.9454 19.6091C16.4247 20.1299 15.5805 20.1299 15.0598 19.6091L10.117 14.6663L12.0026 12.7807L14.6693 15.4474V5.33301H17.3359Z"
                        fill="black"></path>
                </svg></div>
            <div class="link-icon"><a
                    href="mailto:?body= %0D%0A%0D%0A 圖片提供／Bito %0D%0A%0D%0A  %0D%0A%0D%0A  %0D%0A%0D%0A 圖片提供／Bito %0D%0A%0D%0A  %0D%0A%0D%0A  %0D%0A%0D%0A 圖片提供／Bito %0D%0A%0D%0A  %0D%0A%0D%0A報導詳情請至：%0D%0A https%3A%2F%2Fwww.taipeitwins.com%2Ftw%2Farticle%2F%3Ftype%3Darticle%26id%3D6&amp;subject=%E3%80%90%E5%8F%B0%E5%8C%97%E9%9B%99%E6%98%9F%20%E5%AA%92%E9%AB%94%E5%A0%B1%E5%B0%8E%E3%80%91%20%E9%87%8D%E6%96%B0%E5%AE%9A%E7%BE%A9%E5%8F%B0%E7%81%A3%E6%96%BD%E5%B7%A5%E7%BE%8E%E5%AD%B8%EF%BC%8127%20%E6%AC%BE%E5%9C%96%E5%83%8F%20X%204%20%E6%AC%BE%20AR%20%E6%BF%BE%E9%8F%A1%EF%BC%8CBito%20%E8%A8%AD%E8%A8%88%E5%8F%B0%E5%8C%97%E9%9B%99%E6%98%9F%E5%A4%A7%E6%A8%93%E4%B8%BB%E9%A1%8C%E5%9C%8D%E7%B1%AC"
                    target="_blank"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M6.66667 22.667H25.3333V9.33366L6.66667 9.33366L6.66667 22.667ZM25.3333 25.3337H6.66667C5.19391 25.3337 4 24.1398 4 22.667V9.33366C4 7.8609 5.19391 6.66699 6.66667 6.66699H25.3333C26.8061 6.66699 28 7.8609 28 9.33366V22.667C28 24.1398 26.8061 25.3337 25.3333 25.3337Z"
                            fill="black"></path>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M12.3207 17.5727L5.03519 13.9299L5.63148 12.7374L16 17.9216L26.3685 12.7374L26.9648 13.9299L19.6793 17.5727L21.2 19.6003L20.1333 20.4003L18.4672 18.1788L16 19.4123L13.5328 18.1788L11.8667 20.4003L10.8 19.6003L12.3207 17.5727Z"
                            fill="black"></path>
                    </svg></a>
            </div>
        </div>
        <div class="pdf-content">
            <div class="page-article__heading">
                <div class="category__box">
                    <div class="category__box-text">{{ !empty($news["news_category_id"])?$news->newsCategory->getTranslation('name', $locale):"" }}</div>
                    <div class="mb__link__container">
                        <div class="mb__link-icon"><svg width="32" height="32"
                                viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12.0844 29.333V17.6023H8V13.3787H12.0844V9.77113C12.0844 6.93631 14.4971 4.33301 20.0565 4.33301C22.3074 4.33301 23.9718 4.49688 23.9718 4.49688L23.8406 8.44103C23.8406 8.44103 22.1432 8.42848 20.2909 8.42848C18.2861 8.42848 17.9649 9.13011 17.9649 10.2946V13.3787H24L23.7374 17.6023H17.9649V29.333H12.0844Z"
                                    fill="black"></path>
                            </svg></div>
                        <div class="mb__link-icon"><svg width="32" height="32"
                                viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M29.3196 14.1172C29.3196 8.17152 23.3443 3.33301 15.9918 3.33301C8.63935 3.33301 2.66406 8.17152 2.66406 14.1172C2.66406 19.4429 7.40653 23.916 13.815 24.7575C14.2481 24.8461 14.8368 25.0454 14.9923 25.4108C15.1255 25.7429 15.0811 26.2744 15.0367 26.6176C15.0367 26.6176 14.8812 27.5588 14.8479 27.7581C14.7923 28.0902 14.5813 29.0756 16.0029 28.4778C17.4246 27.8799 23.6775 23.9714 26.4764 20.7605C28.4089 18.6457 29.3307 16.5088 29.3307 14.1283L29.3196 14.1172ZM11.2938 17.2949C11.2938 17.4389 11.1827 17.5496 11.0384 17.5496H7.29547C7.15108 17.5496 7.04002 17.4389 7.04002 17.2949V11.4931C7.04002 11.3492 7.15108 11.2385 7.29547 11.2385H8.23952C8.3839 11.2385 8.49497 11.3492 8.49497 11.4931V16.0991H11.0384C11.1827 16.0991 11.2938 16.2099 11.2938 16.3538V17.2949ZM13.5484 17.2949C13.5484 17.4389 13.4374 17.5496 13.293 17.5496H12.3489C12.2045 17.5496 12.0935 17.4389 12.0935 17.2949V11.4931C12.0935 11.3492 12.2045 11.2385 12.3489 11.2385H13.293C13.4374 11.2385 13.5484 11.3492 13.5484 11.4931V17.2949ZM19.9791 17.2949C19.9791 17.4389 19.868 17.5496 19.7236 17.5496H18.7796C18.7796 17.5496 18.7351 17.5496 18.7129 17.5496C18.7129 17.5496 18.7018 17.5496 18.6907 17.5496C18.6907 17.5496 18.6907 17.5496 18.6796 17.5496C18.6796 17.5496 18.6796 17.5496 18.6685 17.5496C18.6685 17.5496 18.6685 17.5496 18.6574 17.5496C18.6352 17.5274 18.613 17.5164 18.5908 17.4832L15.9252 13.8958V17.3392C15.9252 17.4832 15.8141 17.5939 15.6698 17.5939H14.7257C14.5813 17.5939 14.4703 17.4832 14.4703 17.3392V11.5374C14.4703 11.3935 14.5813 11.2828 14.7257 11.2828H15.6698C15.6698 11.2828 15.6698 11.2828 15.6809 11.2828C15.6809 11.2828 15.6809 11.2828 15.692 11.2828C15.692 11.2828 15.692 11.2828 15.7031 11.2828C15.7031 11.2828 15.7031 11.2828 15.7142 11.2828C15.7142 11.2828 15.7142 11.2828 15.7253 11.2828C15.7253 11.2828 15.7253 11.2828 15.7364 11.2828C15.7364 11.2828 15.7364 11.2828 15.7475 11.2828C15.7475 11.2828 15.7475 11.2828 15.7586 11.2938C15.7586 11.2938 15.7586 11.2938 15.7697 11.3049C15.7697 11.3049 15.7808 11.3271 15.7919 11.3271L18.4575 14.9144V11.471C18.4575 11.3271 18.5685 11.2163 18.7129 11.2163H19.657C19.8014 11.2163 19.9124 11.3271 19.9124 11.471V17.2728L19.9791 17.2949ZM25.1436 12.4343C25.1436 12.5782 25.0325 12.6889 24.8881 12.6889H22.3448V13.6633H24.8881C25.0325 13.6633 25.1436 13.774 25.1436 13.9179V14.8591C25.1436 15.003 25.0325 15.1137 24.8881 15.1137H22.3448V16.0881H24.8881C25.0325 16.0881 25.1436 16.1988 25.1436 16.3427V17.2839C25.1436 17.4278 25.0325 17.5385 24.8881 17.5385H21.1453C21.0009 17.5385 20.8898 17.4278 20.8898 17.2839V11.4931C20.8898 11.3492 21.0009 11.2385 21.1453 11.2385H24.8881C25.0325 11.2385 25.1436 11.3492 25.1436 11.4931V12.4343Z"
                                    fill="black"></path>
                            </svg></div>
                        <div class="mb__link-icon"><svg width="32" height="32"
                                viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M22.6641 9.33301H17.3307V11.9997H22.6641C24.8641 11.9997 26.6641 13.7997 26.6641 15.9997C26.6641 18.1997 24.8641 19.9997 22.6641 19.9997H17.3307V22.6663H22.6641C26.3441 22.6663 29.3307 19.6797 29.3307 15.9997C29.3307 12.3197 26.3441 9.33301 22.6641 9.33301ZM14.6641 19.9997H9.33073C7.13073 19.9997 5.33073 18.1997 5.33073 15.9997C5.33073 13.7997 7.13073 11.9997 9.33073 11.9997H14.6641V9.33301H9.33073C5.65073 9.33301 2.66406 12.3197 2.66406 15.9997C2.66406 19.6797 5.65073 22.6663 9.33073 22.6663H14.6641V19.9997ZM10.6641 14.6663H21.3307V17.333H10.6641V14.6663Z"
                                    fill="black"></path>
                            </svg></div>
                        <div class="mb__link-icon"><svg width="32" height="32"
                                viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8.0026 21.333V22.6663C8.0026 23.4027 8.59956 23.9997 9.33594 23.9997H22.6693C23.4057 23.9997 24.0026 23.4027 24.0026 22.6663V21.333H26.6693V22.6663C26.6693 24.8755 24.8784 26.6663 22.6693 26.6663H9.33594C7.1268 26.6663 5.33594 24.8755 5.33594 22.6663V21.333H8.0026Z"
                                    fill="black"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M17.3359 5.33301V15.4474L20.0026 12.7807L21.8882 14.6663L16.9454 19.6091C16.4247 20.1299 15.5805 20.1299 15.0598 19.6091L10.117 14.6663L12.0026 12.7807L14.6693 15.4474V5.33301H17.3359Z"
                                    fill="black"></path>
                            </svg></div>
                        <div class="mb__link-icon"><a
                                href="mailto:?body= %0D%0A%0D%0A 圖片提供／Bito %0D%0A%0D%0A  %0D%0A%0D%0A  %0D%0A%0D%0A 圖片提供／Bito %0D%0A%0D%0A  %0D%0A%0D%0A  %0D%0A%0D%0A 圖片提供／Bito %0D%0A%0D%0A  %0D%0A%0D%0A報導詳情請至：%0D%0A https%3A%2F%2Fwww.taipeitwins.com%2Ftw%2Farticle%2F%3Ftype%3Darticle%26id%3D6&amp;subject=%E3%80%90%E5%8F%B0%E5%8C%97%E9%9B%99%E6%98%9F%20%E5%AA%92%E9%AB%94%E5%A0%B1%E5%B0%8E%E3%80%91%20%E9%87%8D%E6%96%B0%E5%AE%9A%E7%BE%A9%E5%8F%B0%E7%81%A3%E6%96%BD%E5%B7%A5%E7%BE%8E%E5%AD%B8%EF%BC%8127%20%E6%AC%BE%E5%9C%96%E5%83%8F%20X%204%20%E6%AC%BE%20AR%20%E6%BF%BE%E9%8F%A1%EF%BC%8CBito%20%E8%A8%AD%E8%A8%88%E5%8F%B0%E5%8C%97%E9%9B%99%E6%98%9F%E5%A4%A7%E6%A8%93%E4%B8%BB%E9%A1%8C%E5%9C%8D%E7%B1%AC"
                                target="_blank"><svg width="32" height="32" viewBox="0 0 32 32"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M6.66667 22.667H25.3333V9.33366L6.66667 9.33366L6.66667 22.667ZM25.3333 25.3337H6.66667C5.19391 25.3337 4 24.1398 4 22.667V9.33366C4 7.8609 5.19391 6.66699 6.66667 6.66699H25.3333C26.8061 6.66699 28 7.8609 28 9.33366V22.667C28 24.1398 26.8061 25.3337 25.3333 25.3337Z"
                                        fill="black"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M12.3207 17.5727L5.03519 13.9299L5.63148 12.7374L16 17.9216L26.3685 12.7374L26.9648 13.9299L19.6793 17.5727L21.2 19.6003L20.1333 20.4003L18.4672 18.1788L16 19.4123L13.5328 18.1788L11.8667 20.4003L10.8 19.6003L12.3207 17.5727Z"
                                        fill="black"></path>
                                </svg></a></div>
                    </div>
                </div>
                <div class="title__box-2">
                    <div class="title-main">{{ $news->getTranslation('title', $locale) }}</div>
                    <div class="title-sub title-sub-2">{{ $news->getTranslation('description', $locale) }}</div>
                </div>
                <div class="info">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M16.0026 23.9997C20.4209 23.9997 24.0026 20.418 24.0026 15.9997C24.0026 11.5814 20.4209 7.99967 16.0026 7.99967C11.5843 7.99967 8.0026 11.5814 8.0026 15.9997C8.0026 20.418 11.5843 23.9997 16.0026 23.9997ZM16.0026 26.6663C21.8936 26.6663 26.6693 21.8907 26.6693 15.9997C26.6693 10.1086 21.8936 5.33301 16.0026 5.33301C10.1116 5.33301 5.33594 10.1086 5.33594 15.9997C5.33594 21.8907 10.1116 26.6663 16.0026 26.6663Z"
                              fill="#949495"></path>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M15.0026 15.4474L15.0026 9.33301H17.0026V15.4474C17.0026 15.5358 17.0377 15.6206 17.1002 15.6831L20.043 18.6259L18.6288 20.0401L15.686 17.0973C15.2484 16.6597 15.0026 16.0662 15.0026 15.4474Z"
                              fill="#949495"></path>
                    </svg>
                    <span>{{ \Illuminate\Support\Carbon::parse($news->post_date)->format("Y.m.d") }}</span><span
                        class="separate">|</span><span>{{ $news->getTranslation('written_by', $locale) }}</span></div>
                @foreach($paragraphs as $paragraph)
                    {{--repeater relations為手動放入陣列 --}}
                    @if($paragraph['paragraph_type'] == \App\Models\NewsParagraph::TEXT)
                        <div class="p-content"><!---->
                            <p class="title-sub">
                                {!! nl2br($paragraph['text_content'][$locale]) !!}
                            </p>
                        </div>
                    @endif
                    @if($paragraph['paragraph_type'] == \App\Models\NewsParagraph::IMAGE)
                        <div class="img-content">
                            <div class="img__box title__box"><img
                                    src="{{ $paragraph['image_url'] ? Storage::disk('s3')->url(collect($paragraph['image_url'])->first()) : '' }}"
                                    alt="{{ $paragraph['image_alt'][$locale]}}">
                                <div class="img__des title-sub">{{ $paragraph['image_alt'][$locale]}} </div>
                            </div><!---->
                        </div>
                    @endif
                    @if($paragraph['paragraph_type'] == \App\Models\NewsParagraph::VIDEO)
                        <div class=""><!----><!---->
                            <div class="video__box"><img
                                    src="{{ $paragraph['video_img'] ? Storage::disk('s3')->url(collect($paragraph['video_img'])->first()) : '' }}">
                                <div class="home-kv-player__play --is-active"><svg width="60"
                                        height="60" viewBox="0 0 60 60" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g filter="url(#filter0_b_2753_14079)">
                                            <rect width="60" height="60" rx="30" fill="black"
                                                fill-opacity="0.4"></rect>
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M23.3333 37.589L36.6148 29.9996L23.3333 22.4102V37.589ZM20 19.5383V40.461C20 41.7407 21.3825 42.543 22.4936 41.9081L40.801 31.4467C41.9207 30.8069 41.9206 29.1924 40.801 28.5526L22.4936 18.0912C21.3825 17.4563 20 18.2586 20 19.5383Z"
                                                fill="white"></path>
                                        </g>
                                        <defs>
                                            <filter id="filter0_b_2753_14079" x="-12" y="-12" width="84"
                                                height="84" filterUnits="userSpaceOnUse"
                                                color-interpolation-filters="sRGB">
                                                <feFlood flood-opacity="0" result="BackgroundImageFix">
                                                </feFlood>
                                                <feGaussianBlur in="BackgroundImageFix"
                                                    stdDeviation="6"></feGaussianBlur>
                                                <feComposite in2="SourceAlpha" operator="in"
                                                    result="effect1_backgroundBlur_2753_14079">
                                                </feComposite>
                                                <feBlend mode="normal" in="SourceGraphic"
                                                    in2="effect1_backgroundBlur_2753_14079"
                                                    result="shape"></feBlend>
                                            </filter>
                                        </defs>
                                    </svg></div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
    <div>
        @if($extraImages)
            <div class="img-gallery__container">
                @php $i = 0; @endphp
                @foreach($extraImages as $key => $image)
                    @php $i++; @endphp
                    <div class="img-gallery__box"><!-- pc -->
                        <div class="pc"><!-- 前三個顯示 -->
                            <div class="img-gallery__box-item">
                                <div class="img-gallery__box-item__overlay"></div><img @if($i > 3) class="--is-hidden" @endif
                                    src="{{ $image['image_url'] ? Storage::disk('s3')->url(collect($image['image_url'])->first()) : '' }}"
                                    alt="item.alt">
                                    @if($i > 3)
                                    <div class="img-gallery__box-link">
                                        <div class="img-gallery__box-link__text">查看圖片輯</div>
                                        <div><svg width="29" height="29" viewBox="0 0 29 29" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <rect x="0.5" y="0.5" width="28" height="28" rx="14"
                                                    fill="#C7C7C7"></rect>
                                                <path
                                                    d="M21.5 7.5V21.5H7.5V7.5H21.5ZM21.5 5.5H7.5C6.4 5.5 5.5 6.4 5.5 7.5V21.5C5.5 22.6 6.4 23.5 7.5 23.5H21.5C22.6 23.5 23.5 22.6 23.5 21.5V7.5C23.5 6.4 22.6 5.5 21.5 5.5ZM16.64 14.36L13.64 18.23L11.5 15.64L8.5 19.5H20.5L16.64 14.36Z"
                                                    fill="#292F36"></path>
                                            </svg></div></div>
                                    @endif
                            </div>
                        </div><!-- mb -->
                        <div class="mb"><!-- 前三個顯示 -->
                            <div class="img-gallery__box-item">
                                <img @if($i > 3) class="--is-hidden" @endif
                                    src="{{ $image['image_url'] ? Storage::disk('s3')->url(collect($image['image_url'])->first()) : '' }}"
                                    alt="item.alt">
                                    @if($i > 3)
                                        <div class="img-gallery__box-link">
                                        <div class="img-gallery__box-link__text">查看圖片輯</div>
                                        <div><svg width="29" height="29" viewBox="0 0 29 29" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <rect x="0.5" y="0.5" width="28" height="28" rx="14"
                                                    fill="#C7C7C7"></rect>
                                                <path
                                                    d="M21.5 7.5V21.5H7.5V7.5H21.5ZM21.5 5.5H7.5C6.4 5.5 5.5 6.4 5.5 7.5V21.5C5.5 22.6 6.4 23.5 7.5 23.5H21.5C22.6 23.5 23.5 22.6 23.5 21.5V7.5C23.5 6.4 22.6 5.5 21.5 5.5ZM16.64 14.36L13.64 18.23L11.5 15.64L8.5 19.5H20.5L16.64 14.36Z"
                                                    fill="#292F36"></path>
                                            </svg></div>
                                        </div>
                                    @endif
                            </div>
                        </div>
                    </div>
                    @if($i > 3) @php break; @endphp @endif
                @endforeach
            </div>
        @endif
    </div>
@endsection