commit

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

@@ -6,7 +6,6 @@ const entry = {
                     <div class="entry-section-title">
                         <i :class="section.icon"></i>
                         <span>{{ section.title }}</span>
-                        <em>/Applications</em>
                     </div>
                 </div>
 
@@ -135,7 +134,7 @@ const entry = {
 
         .entry-section-title {
             display: inline-flex;
-            align-items: baseline;
+            align-items: center;
             gap: 6px;
             color: #19324d;
             font-size: 18px;
@@ -147,13 +146,6 @@ const entry = {
             font-size: 16px;
         }
 
-        .entry-section-title em {
-            color: #b5c0d6;
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 500;
-        }
-
         .apps-container {
             display: flex;
             flex-direction: column;
@@ -162,11 +154,11 @@ const entry = {
 
         .app-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
             justify-items: center;
             justify-content: start;
-            gap: 12px 18px;
-            min-height: 116px;
+            gap: 16px 20px;
+            min-height: 152px;
             padding: 18px 20px;
             background: #fff;
             border: 1px solid #edf1f7;
@@ -180,13 +172,16 @@ const entry = {
             display: flex;
             flex-direction: column;
             align-items: center;
+            justify-content: center;
             border-radius: 8px;
             background: #fff;
             width: 100%;
             max-width: 100%;
-            padding: 6px;
+            min-height: 136px;
+            padding: 14px 8px;
             cursor: pointer;
             transition: transform 0.2s ease, box-shadow 0.2s ease;
+            box-sizing: border-box;
         }
 
         .app-item:hover {
@@ -195,9 +190,9 @@ const entry = {
         }
 
         .app-icon {
-            width: 46px;
-            height: 46px;
-            margin-bottom: 8px;
+            width: 68px;
+            height: 68px;
+            margin-bottom: 14px;
         }
 
         .app-icon img {
@@ -207,10 +202,13 @@ const entry = {
         }
 
         .app-name {
-            min-height: 34px;
-            font-size: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 48px;
+            font-size: 16px;
             color: #333;
-            line-height: 1.4;
+            line-height: 1.5;
             word-break: break-word;
             text-align: center;
         }
@@ -222,19 +220,30 @@ const entry = {
 
         @media (max-width: 768px) {
             .app-grid {
-                grid-template-columns: repeat(3, minmax(72px, 1fr));
+                grid-template-columns: repeat(3, minmax(96px, 1fr));
                 gap: 12px;
                 padding: 14px 10px;
             }
 
             .app-item {
-                padding: 8px 4px;
+                min-height: 120px;
+                padding: 12px 6px;
+            }
+
+            .app-icon {
+                width: 60px;
+                height: 60px;
+            }
+
+            .app-name {
+                min-height: 42px;
+                font-size: 14px;
             }
         }
 
         @media (max-width: 480px) {
             .app-grid {
-                grid-template-columns: repeat(2, minmax(72px, 1fr));
+                grid-template-columns: repeat(2, minmax(96px, 1fr));
                 gap: 12px;
             }
         }