首页布局优化-1
This commit is contained in:
yml
@@ -1,20 +1,27 @@
|
||||
.mobile-shell {
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 68px;
|
||||
background: #f6f8fb;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.mobile-hero {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
padding: 12px 12px 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
@@ -26,12 +33,13 @@
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #2563eb;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #ff8a1f 0%, #ff5a00 100%);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -43,25 +51,37 @@
|
||||
|
||||
.mobile-brand strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.mobile-brand small {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home-search {
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content) {
|
||||
height: 38px;
|
||||
background: #f2f5f9;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-field__control) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
flex: 0 0 auto;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
color: #2563eb;
|
||||
color: #ff6a00;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -108,25 +128,58 @@
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicators) {
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
left: auto;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(255, 255, 255, 0.52);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator--active) {
|
||||
width: 16px;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 116px;
|
||||
min-height: 128px;
|
||||
align-items: flex-end;
|
||||
padding: 16px;
|
||||
padding: 16px 16px 24px;
|
||||
overflow: hidden;
|
||||
background: #0f172a;
|
||||
background: #9a3412;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-warm {
|
||||
background: #7c2d12;
|
||||
background: #9a3412;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-cool {
|
||||
background: #1e3a8a;
|
||||
background: #7c2d12;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-blue {
|
||||
background: #7c2d12;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-green {
|
||||
background: #854d0e;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-orange {
|
||||
background: #c2410c;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
@@ -141,12 +194,16 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.72));
|
||||
background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.58));
|
||||
}
|
||||
|
||||
.mobile-banner > div:not(.banner-badge) {
|
||||
.banner-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
max-width: 270px;
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
@@ -154,30 +211,116 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner span {
|
||||
.mobile-banner p {
|
||||
color: rgba(255, 247, 237, 0.86);
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 4px;
|
||||
font-size: 20px;
|
||||
font-size: 19px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.banner-pill {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
color: #ffedd5;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.mobile-banner.has-image .banner-pill {
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.34);
|
||||
color: #fff7ed;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 1;
|
||||
padding: 4px 8px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #0f172a;
|
||||
background: rgba(255, 247, 237, 0.94);
|
||||
color: #9a3412;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.zone-strip {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 -12px 12px;
|
||||
padding: 0 12px 2px;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.zone-strip::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zone-pill {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-areas:
|
||||
'label count'
|
||||
'hint hint';
|
||||
column-gap: 6px;
|
||||
row-gap: 3px;
|
||||
flex: 0 0 74px;
|
||||
min-height: 54px;
|
||||
align-items: center;
|
||||
padding: 8px 9px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.zone-pill strong {
|
||||
grid-area: label;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zone-pill span {
|
||||
grid-area: count;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zone-pill small {
|
||||
grid-area: hint;
|
||||
overflow: hidden;
|
||||
color: #7b8798;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zone-pill.active {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #9a3412;
|
||||
}
|
||||
|
||||
.zone-pill.active span {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -213,7 +356,7 @@
|
||||
height: 18px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #2563eb;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
@@ -242,24 +385,50 @@
|
||||
}
|
||||
|
||||
.sort-panel button.active {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1px;
|
||||
margin-bottom: 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-count strong {
|
||||
color: #2563eb;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.state-loading {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.mobile-empty {
|
||||
min-height: 280px;
|
||||
justify-content: center;
|
||||
padding: 36px 0 28px;
|
||||
}
|
||||
|
||||
.mobile-empty :deep(.van-empty__image) {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.mobile-empty :deep(.van-empty__description) {
|
||||
margin-top: 12px;
|
||||
color: #8b95a1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mobile-empty :deep(.van-button--primary) {
|
||||
border-color: #ff6a00;
|
||||
background: #ff6a00;
|
||||
}
|
||||
|
||||
.mobile-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -303,7 +472,7 @@
|
||||
.card-cover-labels em {
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 99, 235, 0.92);
|
||||
background: rgba(255, 106, 0, 0.92);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
@@ -329,8 +498,8 @@
|
||||
margin-top: 6px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -389,7 +558,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
.mobile-logo {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user