commit

src/main/resources/views/layouts/v4/home/act.js

@@ -76,6 +76,10 @@ const act = {
         },
         /*初始化Swiper*/
         initSwiper() {
+            if (this.swiper) {
+                this.swiper.destroy(true, true)
+                this.swiper = null
+            }
             this.swiper = new Swiper('.activity-swiper', {
                 slidesPerView: 1,
                 spaceBetween: 18,
@@ -133,6 +137,7 @@ const act = {
     style: /*language=CSS*/ `
         .activity-section-wrapper {
             width: 100%;
+            min-width: 0;
         }
 
         .section-act .section-act-title span {
@@ -176,17 +181,23 @@ const act = {
         .activity-swiper-container {
             position: relative;
             width: 100%;
+            min-width: 0;
+            box-sizing: border-box;
             padding: 9px 14px;
             /*margin-top: 30px;*/
+            overflow: hidden;
         }
 
         .activity-swiper {
             width: 100%;
+            min-width: 0;
             /*padding: 0 50px 20px 50px;*/
+            overflow: hidden;
         }
 
         .activity-swiper .swiper-slide {
             height: auto;
+            min-width: 0;
         }
 
         /* 导航按钮样式 */
@@ -235,6 +246,8 @@ const act = {
             height: auto;
             position: relative;
             cursor: pointer;
+            min-width: 0;
+            overflow: hidden;
         }
 
         .activity-swiper .swiper-slide .item .img-box {
@@ -260,9 +273,12 @@ const act = {
 
 
         .activity-swiper .swiper-slide .item .img-box img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+            display: block;
+            width: 100% !important;
+            height: 100% !important;
+            max-width: 100% !important;
+            max-height: 128px !important;
+            object-fit: cover !important;
             transition: transform 0.3s ease;
         }
 
@@ -298,6 +314,9 @@ const act = {
             margin: 0;
             line-height: 1.4;
             color: #666;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .activity-swiper .swiper-slide .item .time i {

src/main/resources/views/layouts/v4/home/entry.js

@@ -17,7 +17,8 @@ const entry = {
                              :key="item.id || index"
                              @click="openService(item, section.key)">
                             <div class="app-icon">
-                                <img :src="item.picIcon" alt="" />
+                                <img v-if="item.picIcon" class="app-icon-img" :src="item.picIcon" alt="" />
+                                <i v-else class="fa fa-cube app-icon-fallback"></i>
                             </div>
                             <div class="app-name">{{ item.name }}</div>
                         </div>
@@ -167,7 +168,7 @@ const entry = {
 
         .app-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
             justify-items: center;
             justify-content: start;
             gap: 12px 18px;
@@ -185,13 +186,17 @@ const entry = {
             display: flex;
             flex-direction: column;
             align-items: center;
+            justify-content: flex-start;
             border-radius: 8px;
             background: #fff;
             width: 100%;
-            max-width: 100%;
+            max-width: 108px;
+            min-width: 0;
+            box-sizing: border-box;
             padding: 6px;
             cursor: pointer;
             transition: transform 0.2s ease, box-shadow 0.2s ease;
+            overflow: hidden;
         }
 
         .app-item:hover {
@@ -200,24 +205,46 @@ const entry = {
         }
 
         .app-icon {
-            width: 46px;
-            height: 46px;
+            width: 56px;
+            height: 56px;
             margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 56px;
+            overflow: hidden;
+            border-radius: 8px;
+            background: #f5f8ff;
         }
 
-        .app-icon img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
+        .app-icon img,
+        .app-icon-img {
+            display: block;
+            width: 56px !important;
+            height: 56px !important;
+            max-width: 56px !important;
+            max-height: 56px !important;
+            object-fit: contain !important;
+            border-radius: 8px;
+        }
+
+        .app-icon-fallback {
+            color: #409eff;
+            font-size: 24px;
         }
 
         .app-name {
             min-height: 34px;
+            width: 100%;
             font-size: 12px;
             color: #333;
             line-height: 1.4;
             word-break: break-word;
             text-align: center;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
         }
 
         .app-empty {