Explorar o código

Merge branch 'master' of moshaorui/mtb_album_frontend into stable

moshaorui hai 2 semanas
pai
achega
7c17556c38
Modificáronse 2 ficheiros con 60 adicións e 5 borrados
  1. 58 3
      public/static/css/main.css
  2. 2 2
      resources/views/gallery-detail.blade.php

+ 58 - 3
public/static/css/main.css

@@ -1739,7 +1739,7 @@ table.album_table td {
   color: #555;
 }
 table.album_table img {
-    max-height: 200px;
+    /*max-height: 200px;*/
   border-radius: 5px;
 }
 table.album_table button {
@@ -1754,6 +1754,60 @@ table.album_table button {
 table.album_table button:hover {
   background-color: #d97707;
 }
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+    /* 隐藏表头 */
+    .album_table thead {
+        display: none;
+    }
+    .album_table tbody tr {
+        display: block;
+        margin-bottom: 20px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+    }
+
+    .album_table td {
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        border: none;
+    }
+
+    .album_table td::before {
+        content: attr(data-label);
+        font-weight: bold;
+        margin-bottom: 4px;
+        color: #666;
+    }
+
+    .album_table td[data-label] {
+        display: flex;
+        text-align: left;
+    }
+
+    /* 为每个td添加数据标签 */
+    .album_table td:nth-child(1) { data-label: "图片"; }
+    .album_table td:nth-child(2) { data-label: "中文标题"; }
+    .album_table td:nth-child(3) { data-label: "英文标题"; }
+    .album_table td:nth-child(4) { data-label: "操作"; }
+
+    /* 调整操作按钮布局 */
+    .album_table td:last-child {
+        flex-direction: row;
+        gap: 8px;
+    }
+
+    .album_table button {
+        padding: 6px 12px;
+        font-size: 14px;
+    }
+}
+
+
+
+
 /* 视频遮罩层样式 */
 .overlay {
   display: none;
@@ -2067,7 +2121,7 @@ video {
         padding: 10px 10px;
     }
 
-    .album_table .void-img{width: 100px;}
+    /*.album_table .void-img{width: 100px;}*/
 
     .grid-album .grid-sizer,
     .grid-album .grid-item {
@@ -2139,7 +2193,8 @@ video {
         float: left;
         min-width:auto;
     }
-    .album_table .void-img{width: 100px;}
+    /*.album_table .void-img{width: 100px;}*/
+
 
     .grid-album .grid-sizer,
     .grid-album .grid-item {

+ 2 - 2
resources/views/gallery-detail.blade.php

@@ -17,7 +17,7 @@
     <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">
+    <link rel="stylesheet" href="/static/css/main.css?v=2025041601">
 
 </head>
 <style>
@@ -126,7 +126,7 @@
                                 @foreach($content as $item)
                                 <tr>
                                     <td class="video-hover-container">
-                                        <a href="{{ossUrl($item['cover'])}}" target="_blank">
+                                        <a href="javascript:void(0)" style="display: inline-block;">
                                             <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img" data-index="{{$loop->index}}" data-preview="{{ossUrl($item['preview_url'])}}" data-poster="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260">
                                         </a>
                                     </td>