commit
This commit is contained in:
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user