提交修改

ruoyi-admin/src/main/resources/templates/home/base.html

@@ -79,12 +79,9 @@
             flex-wrap: wrap;
             align-items: center;
             height: 400px;
-            overflow:hidden;
+            justify-content: center;
         }
         .zhuanti li{
-            margin:9px;
-            margin-bottom: -7px;
-            margin-top: 20px;
             overflow:hidden;
             display: flex;
             flex-direction: column;
@@ -92,6 +89,9 @@
             white-space: nowrap; /* 防止文本换行 */
             text-overflow: ellipsis; /* 显示省略号 */
             position: relative;
+            width: 259px;
+            border-radius: 5px;
+
         }.zhuanti li span{
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -99,20 +99,27 @@
             display: inline-block;
             width: 100%;
             position: absolute;
-            bottom: 0;
+            bottom: 20px;
             height: 25px;
             line-height: 25px;
             background-color: rgb(0 0 0 / 0.7);
             color: white;
+         border-radius: 5px;
         }
         .zhuanti li img{
             transition: all 0.3s;
+            width: 100%;
+            border-radius: 5px;
         }
         .zhuanti li:hover img{
             transform:scale(1.1)
         }
+        .zhuanti li span{
+            transition: all 0.3s;
+        }
         .zhuanti li:hover span{
             color: #ffbb3f;
+            transform:scale(1.1) translateY(7px);
         }
         .more a {
             display: inline-block;
@@ -757,15 +764,20 @@
                                 <a href="special_view.html" target="_blank">更多+</a>
                             </span>
                         </div>
-                        <div class="layui-card-body">
-                            <ul  class="newslist zhuanti">
-                                <li  th:each="column,status : ${specialColumns}">
-                                    <a th:href="@{/special_view.html(columnId=${column.columnId})}" th:title="${column.columnName}" target="_blank">
-                                        <img style="height:155px;width: 190px "  th:src="${column.columnUrl}">
-                                    </a>
-                                    <span style="margin-top: 5px;font-size: 15px;">[[${column.columnName}]]</span >
-                                </li>
-                            </ul>
+                        <div class="layui-card-body" style="min-height:400px ">
+                            <div class="myscroll" style="height:380px;overflow:hidden;font-size:13px;color:#666;padding:0 20px;line-height:25px;">
+                                <ul  class="newslist zhuanti" style="margin-top: 5px">
+                                    <li  th:each="column,status : ${specialColumns}">
+                                        <a th:href="@{/special_view.html(columnId=${column.columnId})}" th:title="${column.columnName}" target="_blank">
+                                            <img style="height:155px;width: 100% "  th:src="${column.columnUrl}">
+                                        </a>
+                                        <span style="margin-top: 5px;font-size: 15px;">[[${column.columnName}]]</span >
+                                        <div style="width: 100%;height: 20px;background-color: white;border-radius: 5px;">
+
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -979,6 +991,57 @@
     }
 
     setInterval(showNextSlide, 3000); // Change every 3 seconds
+
+
+    (function($){
+        $.fn.myScroll = function(options){
+
+            var defaults = {
+                speed:30,
+            };
+
+            var opts = $.extend({}, defaults, options),intId = [];
+
+            function marquee(obj, step){
+                obj.find("ul").animate({
+                    marginTop: '-=1'
+                },0,function(){
+                    var s = Math.abs(parseInt($(this).css("margin-top")));
+                    if(s >= $(this).find("li").height()){
+                        $(this).find("li").slice(0, 1).appendTo($(this));
+                        $(this).css("margin-top", 0);
+                    }
+                });
+            }
+
+            this.each(function(i){
+                var sh = speed = opts["speed"],_this = $(this);
+                intId[i] = setInterval(function(){
+                    if(_this.find("ul").height()<=_this.height()){
+                        clearInterval(intId[i]);
+                    }else{
+                        marquee(_this, sh);
+                    }
+                }, speed);
+
+                _this.hover(function(){
+                    clearInterval(intId[i]);
+                },function(){
+                    intId[i] = setInterval(function(){
+                        if(_this.find("ul").height()<=_this.height()){
+                            clearInterval(intId[i]);
+                        }else{
+                            marquee(_this, sh);
+                        }
+                    }, speed);
+                });
+
+            });
+        }
+    })(jQuery);
+    $('.myscroll').myScroll({
+        speed: 30,
+    });
 </script>
 </body>
 </html>