gallery-detail.blade.php 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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/js/layui/css/layui.css">
  15. <link rel="stylesheet" href="/static/css/main.css">
  16. </head>
  17. <body class="main-body">
  18. <div class="menu-overlay"></div>
  19. <main class="main">
  20. <section class="gallery">
  21. {{-- @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])--}}
  22. <div class="update-content">
  23. <div class="update-log" >
  24. <a href="/update-log" class="update-log-link">
  25. <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>
  26. </a>
  27. {{-- <a href="javascript:void(0)" onclick="logout()" class="login-out-link">--}}
  28. {{-- 退出登录--}}
  29. {{-- </a>--}}
  30. <div class="clear"></div>
  31. </div>
  32. </div>
  33. <div class="content-page gallery-content gallery-wrap">
  34. <div class="content-inner">
  35. <div class="title-wrapper" style="margin-left: 0">
  36. <h2 class="title">{{$album['model']}}</h2>
  37. <div class="subtitle">
  38. <p></p>
  39. </div>
  40. </div>
  41. <div class="album-tab">
  42. @foreach($showTabs as $tab)
  43. <a href="#album-{{$tab['column']}}" @if($loop->first)class="is-active"@endif column={{$tab['column']}}>{{$tab['title']}}</a>
  44. @endforeach
  45. </div>
  46. <!-- Album Animals START -->
  47. <div class="gallery-album-line">
  48. <a href="javascript:history.back();" class="gallery-album-prev"><i class="fa fa-angle-double-left"></i> 返回 </a>
  49. <a href="javascript:void(0);" class="download-all">下载全部 <i class="fa fa-download"></i></a>
  50. </div>
  51. @foreach($showTabs as $tab)
  52. <div class="grid-album @if($loop->first)gallery-album is-active @endif" id="album-{{$tab['column']}}">
  53. @php
  54. $content = json_decode($album[$tab['column']], true);
  55. @endphp
  56. @if (empty($content))
  57. 数据为空
  58. @endif
  59. @if ($tab['column'] == 'video' || $tab['column'] == 'pdf')
  60. @if ($tab['column'] == 'video' && empty($content) == false)
  61. <?php
  62. //$content倒序
  63. $content = array_reverse($content);
  64. ?>
  65. <table class="album_table">
  66. <thead>
  67. <tr>
  68. <th>图片</th>
  69. <th>操作</th>
  70. </tr>
  71. </thead>
  72. <tbody>
  73. @foreach($content as $item)
  74. <tr>
  75. <td>
  76. <a href="{{ossUrl($item['cover'])}}" target="_blank">
  77. <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img">
  78. </a>
  79. </td>
  80. <td>
  81. <button data-src="{{$item['video_src']}}" class="video-btn">播放</button>
  82. <a href="{{$item['video_src']}}" download class="download-btn" target="_blank"><button>下载</button></a>
  83. </td>
  84. </tr>
  85. @endforeach
  86. </tbody>
  87. </table>
  88. <br/>
  89. @endif
  90. @if ($tab['column'] == 'pdf' && empty($content) == false)
  91. <table class="album_table">
  92. <thead>
  93. <tr>
  94. <th>PDF标题</th>
  95. <th>PDF标题(英文)</th>
  96. <th width="15%">操作</th>
  97. </tr>
  98. </thead>
  99. <tbody>
  100. @foreach($content as $item)
  101. <tr>
  102. <td>{{$item['pdf_title']}}</td>
  103. <td>{{@$item['pdf_title_en']}}</td>
  104. <td>
  105. <a href="{{$item['pdf_src']}}" download class="download-btn" target="_blank"><button>下载</button></a>
  106. </td>
  107. </tr>
  108. @endforeach
  109. </tbody>
  110. </table>
  111. <br/>
  112. @endif
  113. @elseif ($tab['column'] == 'parameters' && empty($content) == false)
  114. <table class="album_table">
  115. <thead>
  116. <tr>
  117. <th>属性名</th>
  118. <th>属性值</th>
  119. </tr>
  120. </thead>
  121. <tbody>
  122. @foreach($content as $item)
  123. <tr>
  124. <td>{{$item['key']}}</td>
  125. <td>
  126. {{$item['value']}}
  127. </td>
  128. </tr>
  129. @endforeach
  130. </tbody>
  131. </table>
  132. @else
  133. <div class="grid-sizer"></div>
  134. @foreach($content as $item)
  135. <div class="grid-item album-item">
  136. <div class="album-thumb album-thumb-detail">
  137. <img data-src="{{ossUrl($item)}}" src="{{ossUrl($item)}}?x-oss-process=image/resize,w_380" loading="lazy" alt="1">
  138. <div class="album-mask">
  139. <!-- 下载图标 -->
  140. <a href="{{ossUrl($item)}}" download class="download-icon" target="_blank">
  141. <i class="fa fa-cloud-download"></i>
  142. </a>
  143. </div>
  144. </div>
  145. </div>
  146. @endforeach
  147. @endif
  148. </div>
  149. @endforeach
  150. <!-- Album Animals END -->
  151. </div><!-- end container-inner -->
  152. </div>
  153. <!-- 视频遮罩层 -->
  154. <div id="overlay" class="overlay">
  155. <div class="video-container">
  156. <video id="videoPlayer" controls>
  157. Your browser does not support the video tag.
  158. </video>
  159. </div>
  160. </div>
  161. </section> <!-- end gallery -->
  162. </main>
  163. {{--<footer class="site-footer">--}}
  164. {{-- <div class="footer-copyright">--}}
  165. {{-- © 2025 <strong>mietub</strong>. All rights reserved.--}}
  166. {{-- </div>--}}
  167. {{--</footer>--}}
  168. <script src="/static/js/jquery-3.7.0.min.js"></script>
  169. <script src="/static/js/swiper-bundle.min.js"></script>
  170. <script src="/static/js/wow.min.js"></script>
  171. <script src="/static/js/masonry.pkgd.min.js"></script>
  172. <script src="/static/js/imagesloaded.pkgd.min.js"></script>
  173. <script src="/static/js/magnific-popup.min.js"></script>
  174. <script src="/static/js/blazy.min.js"></script>
  175. <script src="/static/js/parazoom.min.js"></script>
  176. <script src="/static/js/layui/layui.js"></script>
  177. <script src="/static/js/script.js"></script>
  178. <script>
  179. $(document).ready(function() {
  180. $('.grid-album:first').addClass('');
  181. });
  182. </script>
  183. </body>
  184. </html>