diff --git a/novel-front/src/main/resources/templates/mobile/book/book_ranking.html b/novel-front/src/main/resources/templates/mobile/book/book_ranking.html
index f43f4ab..18de2e8 100644
--- a/novel-front/src/main/resources/templates/mobile/book/book_ranking.html
+++ b/novel-front/src/main/resources/templates/mobile/book/book_ranking.html
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-<html lang="en">
-<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
@@ -16,8 +14,6 @@
 
     <div th:include="mobile/common/css :: css"></div>
 
-    </div>
-
     <style type="text/css">
 
 
@@ -62,6 +58,15 @@
             height: 180px;
         }
 
+        .book_desc {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            white-space: pre-wrap;
+        }
+
     </style>
 </head>
 <body>
@@ -187,19 +192,19 @@
                             book.bookDesc = book.bookDesc.replace(/<[^>]+>/g, "").replace(/\s+/g, "").replace(/&nbsp;/g, "");
                         }
 
-                        bookListHtml += ("<div class=\"layui-row\" style=\"margin-bottom:10px;padding:10px;background: #f2f2f2\">\n" +
+                        bookListHtml += ("<div class=\"layui-row\" style=\"margin-bottom:10px;padding:5px 0px;background: #f2f2f2\">\n" +
                             "        <a href=\"/book/" + book.id + ".html\">\n" +
-                            "            <div class=\"layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
-                            "                <img style='width: 130px;height: 180px' align=\"center\"\n" +
+                            "            <div class=\"layui-col-xs5 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
+                            "                <img style='width: 130px;height: 190px' align=\"center\"\n" +
                             "                     src=\"" + book.picUrl + "\"/>\n" +
                             "\n" +
                             "            </div>\n" +
                             "        </a>\n" +
-                            "        <div style=\"padding: 10px\" class=\"layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-lg8\">\n" +
+                            "        <div style=\"padding: 0px 10px 0px 0px\" class=\"layui-col-xs7 layui-col-sm9 layui-col-md10 layui-col-lg10\">\n" +
                             "            <a href=\"/book/" + book.id + ".html\">\n" +
                             "                <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">" + book.bookName + "</div>\n" +
                             "            </a>\n" +
-                            "            <div style=\";color: #4c6978;float: right;\"><i style=\"color: red\"></i></div>\n" +
+                            "            <div style=\"height: 5px;color: #4c6978;\"><i style=\"color: red\"></i></div>\n" +
                             "            <a href=\"/book/book_ranking.html?keyword=" + encodeURI(book.authorName) + "\">\n" +
                             "                <div style=\";color: #a6a6a6;\" class=\"line-limit-length\">作者：" + book.authorName + "</div>\n" +
                             "            </a>\n" +
@@ -207,7 +212,7 @@
                             "            <div style=\"margin-top: 5px;color: #a6a6a6;\">状态：" + (book.bookStatus == 0 ? '连载' : '完结') + "</div>\n" +
                             "            <div style=\"margin-top: 5px;color: #a6a6a6;\">更新：<i style='color: red'>" + book.lastIndexUpdateTime.substr(0, 11) + "</i>\n" +
                             "            </div>\n" +
-                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">简介：" + (book.bookDesc ? (book.bookDesc.length > 15 ? (book.bookDesc.substr(0, 15) + "...") : book.bookDesc) : book.bookDesc) + "</div>\n" +
+                            "            <div class='book_desc' style=\"margin-top: 5px;color: #a6a6a6;\">简介：" + (book.bookDesc) + "</div>\n" +
                             "\n" +
                             "\n" +
                             "        </div>\n" +
diff --git a/novel-front/src/main/resources/templates/mobile/common/css.html b/novel-front/src/main/resources/templates/mobile/common/css.html
index e40c070..a6da973 100644
--- a/novel-front/src/main/resources/templates/mobile/common/css.html
+++ b/novel-front/src/main/resources/templates/mobile/common/css.html
@@ -26,6 +26,15 @@
             }
         }
 
+        .book_name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            white-space: pre-wrap;
+        }
+
         #footer {
             position: absolute;
             bottom: 0px;
diff --git a/novel-front/src/main/resources/templates/mobile/index.html b/novel-front/src/main/resources/templates/mobile/index.html
index 0cc9db3..799ca61 100644
--- a/novel-front/src/main/resources/templates/mobile/index.html
+++ b/novel-front/src/main/resources/templates/mobile/index.html
@@ -53,6 +53,44 @@
             color: #3eaf7c;
         }
 
+        .container {
+            display: flex;
+            overflow-x: auto; /* 允许内容水平滚动 */
+            white-space: nowrap; /* 禁止换行 */
+            scroll-snap-type: x mandatory; /* 在滚动时强制对齐 snap-points */
+            -ms-overflow-style: none; /* Internet Explorer 10+ */
+            scrollbar-width: none; /* Firefox */
+        }
+
+        .container::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+
+        .container::-webkit-scrollbar-track,
+        .container::-webkit-scrollbar-thumb {
+            display: none;
+        }
+
+
+        .item {
+            flex: 0 0 calc(100% / 10); /* 每个元素宽度为容器的十分之一 */
+            scroll-snap-align: start;
+            box-sizing: border-box;
+            text-align: center;
+            border-radius: 5px;
+            margin-right: 5px;
+        }
+
+        .book_desc {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            white-space: pre-wrap;
+        }
+
     </style>
 
 
@@ -107,60 +145,58 @@
             精品推荐
         </blockquote>
 
+        <div class="container" style="padding-bottom: 10px">
 
-        <div class="layui-container" style="padding: 0px">
+            <div class="item" style="position: relative;padding:1%;" th:if="${bookMap['4']}" th:each="book,iterStat:${bookMap['4']}">
+                <a th:href="'/book/'+${book.bookId}+'.html'">
 
-            <div class="layui-row" style="text-align: center" id="currentWeek" th:if="${bookMap['4']}">
-                    <span th:each="book,iterStat : ${bookMap['4']}" th:if="${iterStat.index<3}">
-                        <a th:href="'/book/'+${book.bookId}+'.html'">
-                            <div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">
-                                <img style=" width:100px; height:125px; max-width:100%; max-height:100%;"
-                                     th:src="${book.picUrl}">
+                    <img style=" width:100px; height:125px; max-width:100%; max-height:100%;"
+                         th:src="${book.picUrl}">
+                    <br>
+                    <span style="width: 100px" class="book_name" th:text="${book.bookName}"></span>
 
-                                <br>
-                                <span th:text="${#strings.length(book.bookName) > 5}? (${#strings.substring(book.bookName,0,5)}+'...'): ${book.bookName}  "></span>
+                </a>
 
-                            </div>
-                        </a>
-                   </span>
             </div>
         </div>
     </div>
-    <div class="layui-colla-item">
-        <blockquote class="layui-elem-quote" style="text-align: left;font-size: 16px">
-            热门推荐
-        </blockquote>
-
-        <div class="layui-container">
-            <div class="layui-row" id="hotRecBooks" th:if="${bookMap['3']}">
-                <div th:each="book,iterStat : ${bookMap['3']}" th:if="${iterStat.index<6}" style="margin-bottom: 5px"
-                     class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4">
-                    <a th:href="'/book/'+${book.bookId}+'.html'">
-                        <div class="layui-col-xs5 layui-col-sm4 layui-col-md4 layui-col-lg4">
-                            <img style=" width:100px; height:125px;" th:src="${book.picUrl}">
-
-                        </div>
-                        <div class="layui-col-xs5 layui-col-sm6 layui-col-md6 layui-col-lg6">
-                            <ul>
-                                <li style="padding-bottom: 2px" class="line-limit-length"
-                                    th:text="${book.bookName}"></li>
-                                <li style="padding-bottom: 2px;color: #a6a6a6" th:text="'作者：'+${book.authorName}"></li>
-                                <li style="color: #a6a6a6;width: 180px;height:60px;overflow: hidden"
-                                    th:utext="${book.bookDesc}"></li>
-                            </ul>
-                        </div>
-                        <div style="font-style: italic;color: red"
-                             class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2"></div>
-                    </a>
-                </div>
 
 
-            </div>
-
-        </div>
-
-    </div>
 </div>
+<div style="clear: both"></div>
+<div class="layui-colla-item">
+    <blockquote class="layui-elem-quote" style="text-align: left;font-size: 16px">
+        热门推荐
+    </blockquote>
+
+    <div class="layui-container">
+        <div class="layui-row" id="hotRecBooks" th:if="${bookMap['3']}">
+            <div th:each="book,iterStat : ${bookMap['3']}" th:if="${iterStat.index<6}" style="margin-bottom: 5px"
+                 class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4">
+                <a th:href="'/book/'+${book.bookId}+'.html'">
+                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">
+                        <img style=" width:100px; height:125px;" th:src="${book.picUrl}">
+
+                    </div>
+                    <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 layui-col-lg8">
+                        <ul>
+                            <li style="padding-bottom: 5px" class="line-limit-length"
+                                th:text="${book.bookName}"></li>
+                            <li style="padding-bottom: 5px;color: #a6a6a6" th:text="'作者：'+${book.authorName}"></li>
+                            <li class='book_desc' style="color: #a6a6a6;padding-right:10px;"
+                                th:utext="${book.bookDesc}"></li>
+                        </ul>
+                    </div>
+                    <div style="font-style: italic;color: red"
+                         class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2"></div>
+                </a>
+            </div>
+
+
+        </div>
+
+    </div>
+
 </div>
 <div style="clear: both"></div>
 <div style="height: 1px" class="layui-col-lg1"></div>
@@ -184,7 +220,6 @@
 
     </div>
 </div>
-</div>
 
 <div style="clear: both"></div>
 <div th:replace="mobile/common/footer :: footer">
@@ -226,7 +261,7 @@
                         "\n" +
                         "                        <div style=\"clear: both\"></div>\n" +
                         "                        <div style=\"color: #a6a6a6;padding-left: 5px;padding-top: 5px\"\n" +
-                        "                             class=\"layui-elip layui-col-md11 layui-col-sm11 layui-col-lg11\">简介：　　" + updateRankBook.bookDesc + "" +
+                        "                             class=\"layui-elip layui-col-md11 layui-col-sm11 layui-col-lg11\">简介：" + updateRankBook.bookDesc + "" +
                         "                    </div></a>\n" +
                         "                </div>");
 
