gallery-detail.blade.php 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>相册</title>
  8. <link rel="shortcut icon" href="/static//static/images/favicon.ico" type="image/x-icon">
  9. <link rel="icon" href="/static//static/images/favicon.ico" type="image/x-icon">
  10. <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
  11. <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  12. <link rel="stylesheet" href="/static/css/magnific-popup.min.css">
  13. <link rel="stylesheet" href="/static/css/animate.min.css">
  14. <link rel="stylesheet" href="/static/css/main.css">
  15. </head>
  16. <body>
  17. <div class="menu-overlay"></div>
  18. <main class="main">
  19. <section class="gallery">
  20. @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])
  21. <div class="update-content">
  22. <div class="update-log" >
  23. <a href="/update-log">
  24. <div class="timestamp"><i class="fa fa-volume-up"></i> <span class="update-time">&nbsp;</span></div>
  25. <div class="message"> <span class="action">&nbsp;</span> <span class="model">&nbsp;</span> <span class="highlight log-content">&nbsp;</span></div>
  26. </a>
  27. </div>
  28. </div>
  29. <div class="content-page gallery-content gallery-wrap">
  30. <div class="content-inner">
  31. <div class="title-wrapper text-center">
  32. <h2 class="title">{{$album['title']}}</h2>
  33. <div class="subtitle">
  34. <p></p>
  35. </div>
  36. </div>
  37. <div class="album-tab">
  38. @foreach($showTabs as $tab)
  39. <a href="#album-{{$tab['column']}}" @if($loop->first)class="is-active"@endif column={{$tab['column']}}>{{$tab['title']}}</a>
  40. @endforeach
  41. </div>
  42. <!-- Album Animals START -->
  43. <div class="gallery-album-line">
  44. <a href="javascript:void(0);" class="download-all">下载全部 <i class="fa fa-download"></i></a>
  45. <a href="javascript:history.back();" class="gallery-album-prev"><i class="fa fa-angle-double-left"></i> 返回 </a>
  46. </div>
  47. @foreach($showTabs as $tab)
  48. <div class="grid-album @if($loop->first)gallery-album is-active @endif" id="album-{{$tab['column']}}">
  49. <div class="grid-sizer"></div>
  50. @php
  51. $content = json_decode($album[$tab['column']], true);
  52. @endphp
  53. @if (empty($content))
  54. 数据为空
  55. @endif
  56. @if ($tab['column'] == 'video' || $tab['column'] == 'pdf')
  57. @if ($tab['column'] == 'video' && empty($content) == false)
  58. <table class="album_table">
  59. <thead>
  60. <tr>
  61. <th>图片</th>
  62. <th width="15%">操作</th>
  63. </tr>
  64. </thead>
  65. <tbody>
  66. @foreach($content as $item)
  67. <tr>
  68. <td>
  69. <a href="{{ossUrl($item['cover'])}}" target="_blank">
  70. <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_100" width="100">
  71. </a>
  72. </td>
  73. <td>
  74. <button data-src="{{$item['video_src']}}" class="video-btn">播放</button>
  75. <a href="{{$item['video_src']}}" download class="download-btn" target="_blank"><button>下载</button></a>
  76. </td>
  77. </tr>
  78. @endforeach
  79. </tbody>
  80. </table>
  81. @endif
  82. @if ($tab['column'] == 'pdf' && empty($content) == false)
  83. <table class="album_table">
  84. <thead>
  85. <tr>
  86. <th>PDF标题</th>
  87. <th width="15%">操作</th>
  88. </tr>
  89. </thead>
  90. <tbody>
  91. @foreach($content as $item)
  92. <tr>
  93. <td>{{$item['pdf_title']}}</td>
  94. <td>
  95. <a href="{{$item['pdf_src']}}" download class="download-btn" target="_blank"><button>下载</button></a>
  96. </td>
  97. </tr>
  98. @endforeach
  99. </tbody>
  100. </table>
  101. @endif
  102. @else
  103. @foreach($content as $item)
  104. <div class="grid-item album-item">
  105. <div class="album-thumb album-thumb-detail">
  106. <img data-src="{{ossUrl($item)}}" src="{{ossUrl($item)}}?x-oss-process=image/resize,m_fill,w_380,h_380" alt="1">
  107. <div class="album-mask">
  108. <!-- 下载图标 -->
  109. <a href="{{ossUrl($item)}}" download class="download-icon" target="_blank">
  110. <i class="fa fa-cloud-download"></i>
  111. </a>
  112. </div>
  113. </div>
  114. </div>
  115. @endforeach
  116. @endif
  117. </div>
  118. @endforeach
  119. <!-- Album Animals END -->
  120. </div><!-- end container-inner -->
  121. </div>
  122. <!-- 视频遮罩层 -->
  123. <div id="overlay" class="overlay">
  124. <div class="video-container">
  125. <video id="videoPlayer" controls>
  126. Your browser does not support the video tag.
  127. </video>
  128. </div>
  129. </div>
  130. </section> <!-- end gallery -->
  131. </main>
  132. <footer class="site-footer">
  133. <div class="footer-copyright">
  134. © 2025 <strong>mietub</strong>. All rights reserved.
  135. </div>
  136. </footer>
  137. <script src="/static/js/jquery-3.7.0.min.js"></script>
  138. <script src="/static/js/swiper-bundle.min.js"></script>
  139. <script src="/static/js/wow.min.js"></script>
  140. <script src="/static/js/masonry.pkgd.min.js"></script>
  141. <script src="/static/js/imagesloaded.pkgd.min.js"></script>
  142. <script src="/static/js/magnific-popup.min.js"></script>
  143. <script src="/static/js/blazy.min.js"></script>
  144. <script src="/static/js/parazoom.min.js"></script>
  145. <script src="/static/js/script.js"></script>
  146. </body>
  147. </html>