💄 Updating the UI and style files.

public/css/common.css

@@ -242,39 +242,19 @@ progress::-webkit-progress-value {
 .viewer-backdrop {
   background-color: rgba(0, 0, 0, 0.75);
 }
-#albums-grid a:hover,
 #photos-grid a:hover,
-#albums-grid a.selected,
 #photos-grid a.selected {
   outline-color: #3b82f6;
 }
-#albums-grid a:hover .album-select,
-#photos-grid a:hover .album-select,
-#albums-grid a.selected .album-select,
-#photos-grid a.selected .album-select,
-#albums-grid a:hover .photo-select,
 #photos-grid a:hover .photo-select,
-#albums-grid a.selected .photo-select,
 #photos-grid a.selected .photo-select {
   display: block;
 }
-#albums-grid a:hover.selected .album-select,
-#photos-grid a:hover.selected .album-select,
-#albums-grid a.selected.selected .album-select,
-#photos-grid a.selected.selected .album-select,
-#albums-grid a:hover.selected .photo-select,
 #photos-grid a:hover.selected .photo-select,
-#albums-grid a.selected.selected .photo-select,
 #photos-grid a.selected.selected .photo-select {
   border-color: white;
 }
-#albums-grid a:hover.selected .album-select > i,
-#photos-grid a:hover.selected .album-select > i,
-#albums-grid a.selected.selected .album-select > i,
-#photos-grid a.selected.selected .album-select > i,
-#albums-grid a:hover.selected .photo-select > i,
 #photos-grid a:hover.selected .photo-select > i,
-#albums-grid a.selected.selected .photo-select > i,
 #photos-grid a.selected.selected .photo-select > i {
   color: #0061ff;
 }

resources/css/common.less

@@ -36,14 +36,14 @@ progress::-webkit-progress-value {
 }
 
 // 我的图片
-#albums-grid, #photos-grid {
+#photos-grid {
     a:hover, a.selected {
         outline-color: #3b82f6;
-        .album-select, .photo-select {
+        .photo-select {
             display: block;
         }
         &.selected {
-            .album-select, .photo-select {
+            .photo-select {
                 border-color: white;
                 &>i {
                     color: #0061ff;

resources/views/images.blade.php

@@ -42,22 +42,13 @@
             </div>
         </x-container>
     </div>
-    <div id="albums-grid" class="mt-10 md:mt-6 px-3 space-x-2 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
-        <a href="javascript:void(0)" class="relative inline-flex flex-col mb-2 text-center rounded outline outline-2 outline-offset-2 outline-transparent">
-            <div class="album-select absolute z-[1] top-1 right-1 rounded-full overflow-hidden text-white text-lg bg-white border border-gray-500 cursor-pointer hidden group-hover:block">
-                <i class="fas fa-check-circle block"></i>
-            </div>
-            <i class="fas fa-folder-open text-7xl m-4 text-blue-500"></i>
-            <p class="truncate text-sm text-gray-500 mx-2 mb-2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
-        </a>
-    </div>
-    <div id="photos-grid" class="overflow-hidden mt-4 md:mt-2"></div>
+    <div id="photos-grid" class="overflow-hidden mt-6 md:mt-2"></div>
     <div id="photos-loading" class="flex justify-center items-center pt-6 pb-6">
         <a href="javascript:void(0)" class="flex justify-center items-center text-sm text-gray-400 text-gray-700 cursor-not-allowed">加载中...</a>
     </div>
 
     <script type="text/html" id="photos-item">
-        <a href="javascript:void(0)" class="relative rounded outline outline-2 outline-offset-2 outline-transparent">
+        <a href="javascript:void(0)" class="relative cursor-default rounded outline outline-2 outline-offset-2 outline-transparent">
             <div class="photo-select absolute z-[1] top-1 right-1 rounded-full overflow-hidden text-white text-lg bg-white border border-gray-500 cursor-pointer hidden group-hover:block">
                 <i class="fas fa-check-circle block"></i>
             </div>
@@ -84,7 +75,7 @@
             };
             let gridConfigs = {
                 rowHeight : 180,
-                margins: 20,
+                margins: 16,
                 captions: false,
                 border: 10,
                 waitThumbnailsLoad: false,
@@ -158,12 +149,9 @@
                 $(this).siblings('img').trigger('click');
             })
 
-            $('#albums-grid, #photos-grid').on('click', 'a', function (e) {
+            $photos.on('click', 'a', function (e) {
                 e.stopPropagation();
                 $(this).css('transform', 'scale(1)').toggleClass('selected');
-            }).on('mousedown', 'a', function () {
-                // TODO 鼠标按下动画
-            }).on('mouseup', 'a', function () {
             });
         </script>
     @endpush