This commit is contained in:
=
2026-05-06 16:10:11 +08:00
parent e9e7974c4c
commit dc1d2aba8a
2 changed files with 31 additions and 22 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 174 KiB

After

Width:  |  Height:  |  Size: 174 KiB

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