更新内容

app/Http/Controllers/HomeController.php

@@ -41,9 +41,9 @@ class HomeController extends Controller
         $search = $request->input('search', '');
         if ($search) {
             $search = trim($search);
-            $search = '%' . $search . '%';
-            $albums = SiteAlbum::where('model', 'like', $search)->orderBy('id', 'desc')->get();
-            $title = '搜索结果';
+            $searchLike = '%' . $search . '%';
+            $albums = SiteAlbum::where('model', 'like', $searchLike)->orderBy('id', 'desc')->get();
+            $title = '搜索'.$search.'结果:';
             $folder_id = 0;
             $father_id = 0;
             if ($albums) {
@@ -70,7 +70,11 @@ class HomeController extends Controller
         }
         // 面包屑导航
         $breadcrumb = getBreadcrumb($folder_id, $this->foldersTree);
-        $breadcrumb = implode(' / ', $breadcrumb);
+        if ($breadcrumb) {
+            $breadcrumb = implode('<span>/</span>', $breadcrumb) . '<span>/</span>';
+        } else {
+            $breadcrumb = '';
+        }
 
         return view('gallery',
             [

public/static/css/main.css

@@ -1,3 +1,4 @@
+
 /* 更新日志*/
 .breadcrumb-box {
     float: left;
@@ -6,6 +7,9 @@
     text-align: left;
 }
 
+.breadcrumb-box span {
+    padding: 0 15px;
+}
 .log-page {
     margin-bottom: 50px;
 }
@@ -198,7 +202,7 @@ input, textarea, div {
 }
 
 .title {
-  font-size: 46px;
+  font-size: 32px;
   line-height: 52px;
   margin-bottom: 15px;
   text-transform: uppercase;
@@ -559,6 +563,7 @@ a {
   transform: translateX(-100%);
   z-index: 0;
   position: relative;
+    min-width: 248px;
 }
 
 @media screen and (min-height: 610px) {
@@ -607,6 +612,7 @@ a {
 
 .menu-nav ul a:hover {
   transform: translateX(15px);
+    color: #ffffff;
 }
 
 .menu-nav ul a:hover:before {
@@ -695,7 +701,7 @@ a {
 }
 
 .menu-close__wrap {
-  margin-top: 30px;
+  margin-top: 10px;
 }
 
 .menu-close {
@@ -1277,8 +1283,7 @@ a {
 }
 .grid-album .grid-sizer,
 .grid-album .grid-item {
-    /*width: calc(25% - 15px);*/
-    width: 340px;
+    width: calc(24% - 18px);
     margin-bottom: 15px;
 }
 
@@ -1325,7 +1330,7 @@ a {
 }
 
 .gallery-wrap {
-  padding: 50px 0;
+  padding: 30px 0;
 }
 
 .gallery-wrap .def-title-wrapper {
@@ -1509,7 +1514,7 @@ a {
 }
 
 .menu-nav .menu-nav-son li a{
-  font-size: 16px;
+  font-size: 14px;
 }
 
 
@@ -1674,8 +1679,7 @@ a {
   margin-bottom: 30px;
   font-size: 16px;
   text-align: right;
-    line-height: 25px;
-    height: 25px;
+  line-height: 40px;
 }
 
 .gallery-album-line a{
@@ -1784,28 +1788,32 @@ video {
 .search-box {
     position: relative;
     float: left;
-    width: 290px;
-    display: flex;
-    align-items: center;
-    background-color: #f9f9f9;
-    border-radius: 20px;
-    padding: 2px 10px;
-    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
-    left: 10px;
-    top: -8px;
+
+    box-sizing: border-box;
 }
 
 /* 搜索输入框 */
-.search-box input {
-    flex: 1;
-    border: none;
-    outline: none;
-    background: transparent;
-    color: #888;
-    font-size: 14px;
-    padding: 8px;
+
+
+.search-box .srch-iput {
+    border: 1px solid #DDD;
+    border-radius: 50px;
+    background: url("/static/images/search.png") center no-repeat;
+    color: #999;
+    transition: all .5s;
+    width: 30px;
+    padding: 7.5px 15px;
+    font-size: 12px
 }
 
+.search-box:hover .srch-iput {
+    border: 1px solid #DDD;
+    width: 200px;
+    background: url("/static/images/search.png") right no-repeat;
+    padding: 7.5px 15px
+}
+
+
 /* 搜索图标 */
 .search-box .fa-search {
     color: #888;
@@ -1836,7 +1844,7 @@ video {
     min-height: 340px;
 }
 .main-body .album-thumb-gallery {
-    height: 340px;
+    height: calc(24% - 18px);
 }
 .main-body  {
     color: #2a2832;
@@ -1870,13 +1878,19 @@ video {
     border-radius: 50%;
     top: 90%;
 }
-
-
-
 .clear {
     clear: both;
 }
-
+.menu-login-out {
+    margin-top: 10px;
+    left: 25px;
+}
+.layui-layer-content {
+    color: #2B2C30;
+}
+.layui-layer-btn .layui-layer-btn0 {
+    background-color: #45a049;
+}
 
 
 
@@ -1891,6 +1905,12 @@ video {
     .grid-single .grid-item {
         width: calc(33% - 15px);
     }
+    .main-body .album-thumb-gallery {
+        height: calc(33% - 15px);
+    }
+    .main-body .album-thumb {
+        min-height: 197px;
+    }
 }
 
 @media screen and (max-width: 992px) {
@@ -1935,10 +1955,17 @@ video {
     .search-box {
         left: -2px;
     }
+
+    .grid-album .grid-sizer,
+    .grid-album .grid-item {
+        width: calc(33.3% - 25px);
+    }
+    .main-body .album-thumb-gallery {
+        height: calc(33.3% - 25px);
+    }
 }
 
 @media screen and (max-width: 768px) {
-
     /* Sidebar 768 START */
     .sidebar {
         height: auto;
@@ -2015,6 +2042,14 @@ video {
     }
 
     .album_table .void-img{width: 100px;}
+
+    .grid-album .grid-sizer,
+    .grid-album .grid-item {
+        width: calc(33.3% - 25px);
+    }
+    .main-body .album-thumb-gallery {
+        height: calc(33.3% - 25px);
+    }
 }
 
 @media screen and (max-width: 575px) {
@@ -2079,6 +2114,16 @@ video {
         min-width:auto;
     }
     .album_table .void-img{width: 100px;}
+
+    .grid-album .grid-sizer,
+    .grid-album .grid-item {
+        width: 100%;
+    }
+
+
+    .main-body .album-thumb {
+        min-height: 530px;
+    }
 }
 
 @media screen and (max-width: 480px) {
@@ -2124,5 +2169,17 @@ video {
     }
     /* Banner 480 END */
 
+    .grid-album .grid-sizer,
+    .grid-album .grid-item {
+        width: 100%;
+    }
+
+    .main-body .album-thumb {
+        min-height: 436px;
+    }
+
 }
 /* Responsive END */
+
+
+

public/static/js/script.js

@@ -117,7 +117,11 @@ $(document).ready(function() {
         hamburgerMenuWrap.removeClass('menu-active');
         hamburgerMenuItem.removeClass('menu-item-active');
         menuOverlay.removeClass('menu-overlay__active');
-        $(".content").css("padding-left","0px");
+        if ( window.innerWidth <= 768) {
+            $(".content").css("padding-left","0px");
+        } else {
+            $(".content").css("padding-left","80px");
+        }
     });
 	// Menu END
 
@@ -176,9 +180,33 @@ $(document).ready(function() {
 			columnWidth: '.grid-album .grid-sizer'
 		});
 		$gridAlbum.imagesLoaded().progress( function() {
-			$gridAlbum.masonry({
-				gutter: 44
-			});
+            console.log('innerWidth ....'+window.innerWidth);
+             if ( window.innerWidth <= 575) {
+                $gridAlbum.masonry({
+                    gutter: 50
+                });
+                return;
+            } else if ( window.innerWidth <= 768) {
+                 $gridAlbum.masonry({
+                     gutter: 38
+                 });
+                 return;
+             } else if ( window.innerWidth <= 992) {
+                 $gridAlbum.masonry({
+                     gutter: 35
+                 });
+                 return;
+             } else if ( window.innerWidth <= 1656) {
+                 $gridAlbum.masonry({
+                     gutter: 35
+                 });
+                 return;
+             }else   {
+                 $gridAlbum.masonry({
+                     gutter: 40
+                 });
+                 return;
+             }
 		});
 	}
 	albumMasonry();
@@ -498,5 +526,11 @@ function changeIframeSrc(url) {
 }
 
 function logout() {
-    window.top.location.href = "/logout";
+    layer.confirm('是否确定退出登录？', {
+        btn: ['确定', '关闭'] //按钮
+    }, function(){
+        window.top.location.href = "/logout";
+    }, function(){
+        layer.close();
+    });
 }

resources/views/__sidebar.blade.php

@@ -31,7 +31,7 @@
                 @endforeach
             </ul>
 
-            <div class="menu-contacts">
+{{--            <div class="menu-contacts">--}}
 
 {{--                <a href="#" class="menu-contacts__item">--}}
 {{--					<span class="menu-contacts__icon">--}}
@@ -39,10 +39,14 @@
 {{--					</span>--}}
 {{--                    <p>Marketing@mietubl.com</p>--}}
 {{--                </a>--}}
-            </div>
+{{--            </div>--}}
             <div class="menu-close__wrap">
                 <a href="javascript:void(0)" class="menu-close"><img style="transform: rotate(180deg);" src="/static/images/arrow-right.svg" alt=""></a>
             </div>
+
+            <div class="menu-login-out">
+                <a href="javascript:void(0)" onclick="logout()" class="">退出登录</a>
+            </div>
         </nav>
     </div>
 

resources/views/gallery-detail.blade.php

@@ -36,9 +36,9 @@
                 <a href="/update-log" class="update-log-link">
                     <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>
                 </a>
-                <a href="javascript:void(0)" onclick="logout()" class="login-out-link">
-                    退出登录
-                </a>
+{{--                <a href="javascript:void(0)" onclick="logout()" class="login-out-link">--}}
+{{--                    退出登录--}}
+{{--                </a>--}}
                 <div class="clear"></div>
             </div>
         </div>

resources/views/gallery.blade.php

@@ -34,9 +34,9 @@
                 <a href="/update-log" class="update-log-link">
                     <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>
                 </a>
-                <a href="javascript:void(0)" onclick="logout()" class="login-out-link">
-                    退出登录
-                </a>
+{{--                <a href="javascript:void(0)" onclick="logout()" class="login-out-link">--}}
+{{--                    退出登录--}}
+{{--                </a>--}}
                 <div class="clear"></div>
             </div>
         </div>
@@ -44,7 +44,7 @@
         <div class="content-page gallery-content gallery-wrap ">
             <div class="content-inner">
 
-                <div class="title-wrapper text-center">
+                <div class="title-wrapper">
                     <h2 class="title">{{$folderName}}</h2>
                     <div class="subtitle">
                         <p></p>
@@ -54,12 +54,11 @@
                 <form action="/gallery" method="get" enctype="multipart/form-data" id="search-form">
                 <div class="search-wrapper">
                     <div class="breadcrumb-box">
-                        {{$breadcrumb}}
+                        {!! $breadcrumb !!}
                     </div>
 
                     <div class="search-box">
-                        <input type="text" placeholder="搜索..." name="search" value="{{request('search')}}">
-                        <i class="fa fa-search"></i>
+                        <input type="text" class="srch-iput" name="search" value="{{request('search')}}">
                     </div>
 
 

resources/views/main.blade.php

@@ -11,6 +11,7 @@
     <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">
 
     <script src="/static/js/jquery-3.7.0.min.js"></script>
@@ -21,6 +22,7 @@
     <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>
 </head>
 <body>