moshaorui
/
mtb_album_frontend


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>相册</title>

    <link rel="shortcut icon" href="/static//static/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/static//static/images/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/magnific-popup.min.css">
    <link rel="stylesheet" href="/static/css/animate.min.css">
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/main.css">

</head>
<body class="main-body">

<div class="menu-overlay"></div>


<main class="main">

    <section class="gallery">

{{--        @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])--}}

        <div class="update-content">
            <div class="update-log" >
                <a href="/update-log">
                    <div class="timestamp"><i class="fa fa-volume-up"></i> <span class="update-time">&nbsp;</span> <span class="user_name">&nbsp;</span> <span class="action">&nbsp;</span> <span class="model">&nbsp;</span>  <span class="highlight log-content">&nbsp;</span></div>
                    <div class="message"></div>
                </a>
            </div>
        </div>


        <div class="content-page gallery-content gallery-wrap">
            <div class="content-inner">
                <div class="title-wrapper" style="margin-left: 0">
                    <h2 class="title">{{$album['title']}}</h2>
                    <div class="subtitle">
                        <p></p>
                    </div>
                </div>

                <div class="album-tab">
                    @foreach($showTabs as $tab)
                        <a href="#album-{{$tab['column']}}" @if($loop->first)class="is-active"@endif column={{$tab['column']}}>{{$tab['title']}}</a>
                    @endforeach
                </div>

                <!-- Album Animals START -->
                <div class="gallery-album-line">
                    <a href="javascript:history.back();" class="gallery-album-prev"><i class="fa fa-angle-double-left"></i> 返回 </a>
                    <a href="javascript:void(0);" class="download-all">下载全部 <i class="fa fa-download"></i></a>
                </div>

                @foreach($showTabs as $tab)
                <div class="grid-album @if($loop->first)gallery-album is-active @endif" id="album-{{$tab['column']}}">
                    @php
                        $content = json_decode($album[$tab['column']], true);
                    @endphp
                    @if (empty($content))
                        数据为空
                    @endif

                    @if ($tab['column'] == 'video' || $tab['column'] == 'pdf')
                        @if ($tab['column'] == 'video' && empty($content) == false)
                            <?php
                                //$content倒序
                                $content = array_reverse($content);
                            ?>
                            <table class="album_table">
                                <thead>
                                <tr>
                                    <th>图片</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($content as $item)
                                <tr>
                                    <td>
                                        <a href="{{ossUrl($item['cover'])}}" target="_blank">
                                            <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img">
                                        </a>
                                    </td>
                                    <td>
                                        <button data-src="{{$item['video_src']}}" class="video-btn">播放</button>
                                        <a href="{{$item['video_src']}}" download class="download-btn" target="_blank"><button>下载</button></a>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <br/>
                        @endif

                        @if ($tab['column'] == 'pdf' && empty($content) == false)
                                <table class="album_table">
                                    <thead>
                                    <tr>
                                        <th>PDF标题</th>
                                        <th width="15%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($content as $item)
                                        <tr>
                                            <td>{{$item['pdf_title']}}</td>
                                            <td>
                                                <a href="{{$item['pdf_src']}}" download class="download-btn" target="_blank"><button>下载</button></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            <br/>
                        @endif
                    @else
                        <div class="grid-sizer"></div>
                        @foreach($content as $item)
                        <div class="grid-item album-item">
                            <div class="album-thumb album-thumb-detail">
                                <img  data-src="{{ossUrl($item)}}" src="{{ossUrl($item)}}?x-oss-process=image/resize,w_380"  loading="lazy" alt="1">
                                <div class="album-mask">
                                    <!-- 下载图标 -->
                                    <a href="{{ossUrl($item)}}" download class="download-icon" target="_blank">
                                        <i class="fa fa-cloud-download"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>
                @endforeach
                <!-- Album Animals END -->
            </div><!-- end container-inner -->
        </div>

        <!-- 视频遮罩层 -->
        <div id="overlay" class="overlay">
            <div class="video-container">
                <video id="videoPlayer" controls>
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>

    </section> <!-- end gallery -->
</main>

{{--<footer class="site-footer">--}}
{{--    <div class="footer-copyright">--}}
{{--        © 2025 <strong>mietub</strong>. All rights reserved.--}}
{{--    </div>--}}
{{--</footer>--}}


<script src="/static/js/jquery-3.7.0.min.js"></script>
<script src="/static/js/swiper-bundle.min.js"></script>
<script src="/static/js/wow.min.js"></script>
<script src="/static/js/masonry.pkgd.min.js"></script>
<script src="/static/js/imagesloaded.pkgd.min.js"></script>
<script src="/static/js/magnific-popup.min.js"></script>
<script src="/static/js/blazy.min.js"></script>
<script src="/static/js/parazoom.min.js"></script>
<script src="/static/js/layui/layui.js"></script>
<script src="/static/js/script.js"></script>


<script>
    $(document).ready(function() {
        $('.grid-album:first').addClass('');
    });
</script>
</body>
</html>