修改样式
This commit is contained in:
rain
+382
-33
@@ -258,13 +258,15 @@ body {
|
||||
}
|
||||
|
||||
.hero__meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
flex: 1 1 calc(33.333% - 10px);
|
||||
min-width: 160px;
|
||||
padding: 18px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(16, 43, 106, .02));
|
||||
@@ -359,13 +361,15 @@ body {
|
||||
}
|
||||
|
||||
.hero-card__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
flex: 1 1 calc(33.333% - 8px);
|
||||
min-width: 120px;
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(16, 43, 106, .05);
|
||||
@@ -397,14 +401,14 @@ body {
|
||||
}
|
||||
|
||||
.hero-focus-list {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.hero-focus-item {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
@@ -508,12 +512,14 @@ body {
|
||||
}
|
||||
|
||||
.lottery-nav__inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.lottery-nav__card {
|
||||
flex: 0 0 calc(12.5% - 13px);
|
||||
min-width: 138px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -538,8 +544,9 @@ body {
|
||||
}
|
||||
|
||||
.lottery-nav__icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 18px;
|
||||
@@ -582,13 +589,15 @@ body {
|
||||
}
|
||||
|
||||
.draw__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.draw-card {
|
||||
flex: 0 0 calc(25% - 14px);
|
||||
min-width: 260px;
|
||||
padding: 18px;
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(16, 43, 106, .08);
|
||||
@@ -642,7 +651,9 @@ body {
|
||||
}
|
||||
|
||||
.draw-card__balls--compact {
|
||||
gap: 2.8px;
|
||||
gap: 3px;
|
||||
width: calc(22px * 10 + 3px * 9);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.draw-card__foot {
|
||||
@@ -834,13 +845,14 @@ body {
|
||||
}
|
||||
|
||||
.trend-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.trend-item {
|
||||
flex: 0 0 calc(50% - 6px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@@ -863,13 +875,14 @@ body {
|
||||
}
|
||||
|
||||
.combo-tool-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.combo-tool-item {
|
||||
flex: 0 0 calc(50% - 6px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@@ -908,13 +921,18 @@ body {
|
||||
}
|
||||
|
||||
.article-matrix {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-ad-strip {
|
||||
grid-column: 1 / -1;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.article-cluster {
|
||||
flex: 0 0 calc(50% - 5px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.article-ad-strip .ad-group {
|
||||
@@ -922,8 +940,8 @@ body {
|
||||
}
|
||||
|
||||
.article-cluster__head {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 18px 20px;
|
||||
@@ -971,7 +989,10 @@ body {
|
||||
.article-item__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
gap: 8px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px dashed rgba(16, 43, 106, .1);
|
||||
transition: transform .2s ease, background .2s ease, padding .2s ease;
|
||||
@@ -993,10 +1014,40 @@ body {
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid rgba(255, 255, 255, .82);
|
||||
box-shadow: 0 3px 8px rgba(16, 43, 106, .14);
|
||||
}
|
||||
|
||||
.article-item__author {
|
||||
position: relative;
|
||||
flex: 0 0 82px;
|
||||
max-width: 82px;
|
||||
padding-right: 12px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #123a77;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.article-item__author::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: rgba(16, 43, 106, .16);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.article-item__title {
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: min(330px, 100%);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -1008,6 +1059,7 @@ body {
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1031,6 +1083,8 @@ body {
|
||||
}
|
||||
|
||||
.ad-item {
|
||||
flex: 0 0 calc(12.5% - 11px);
|
||||
min-width: 0;
|
||||
display: block;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
@@ -1040,7 +1094,8 @@ body {
|
||||
}
|
||||
|
||||
.ad-item img {
|
||||
width: 157.7px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 94px;
|
||||
object-fit: cover;
|
||||
background: #fff;
|
||||
@@ -1052,12 +1107,14 @@ body {
|
||||
}
|
||||
|
||||
.resource-section__inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
flex: 0 0 calc(50% - 5px);
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -1078,11 +1135,13 @@ body {
|
||||
}
|
||||
|
||||
.resource-link {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex: 0 0 calc(25% - 9px);
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: calc(23% - 6px);
|
||||
padding: 14px 16px;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 14px 12px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(255, 255, 255, .96));
|
||||
border: 1px solid rgba(16, 43, 106, .08);
|
||||
@@ -1141,11 +1200,18 @@ body {
|
||||
.resource-link img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
}
|
||||
|
||||
.resource-link span {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.FooterPublicFriendship {
|
||||
@@ -1206,14 +1272,297 @@ body {
|
||||
flex-basis: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lottery-nav__card {
|
||||
flex-basis: calc(25% - 11px);
|
||||
}
|
||||
|
||||
.draw-card {
|
||||
flex-basis: calc(50% - 9px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.article-cluster,
|
||||
.resource-card {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.resource-link {
|
||||
flex: 0 0 calc(25% - 9px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero,
|
||||
.lottery-nav,
|
||||
.draw,
|
||||
.content,
|
||||
.resource-section,
|
||||
.site-footer,
|
||||
.section-divider {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero__side {
|
||||
gap: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.hero__main,
|
||||
.hero-card,
|
||||
.draw,
|
||||
.resource-card,
|
||||
.article-cluster,
|
||||
.ad-group {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.hero__main,
|
||||
.draw {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.hero__carousel-wrap {
|
||||
height: 240px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.section-divider span,
|
||||
.draw__title strong,
|
||||
.resource-card__head h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.lottery-nav__inner,
|
||||
.draw__grid,
|
||||
.article-matrix,
|
||||
.resource-section__inner {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.lottery-nav__card {
|
||||
flex: 0 0 calc(50% - 5px);
|
||||
min-width: 0;
|
||||
padding: 14px 10px;
|
||||
}
|
||||
|
||||
.draw-card {
|
||||
flex: 0 0 100%;
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.trend-item,
|
||||
.combo-tool-item {
|
||||
flex-basis: calc(50% - 6px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.article-cluster__head,
|
||||
.draw-card__head,
|
||||
.draw-card__foot {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.draw-card__head {
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.draw-card__title {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.draw-card__title img {
|
||||
flex: 0 0 38px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.draw-card__link {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.draw-card__balls {
|
||||
gap: 6px;
|
||||
min-height: auto;
|
||||
margin: 12px 0 10px;
|
||||
}
|
||||
|
||||
.draw-card__balls--compact {
|
||||
gap: 5px;
|
||||
width: calc(28px * 10 + 5px * 9);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.draw-card__balls--compact .ball--compact {
|
||||
flex-basis: 28px;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.draw-card__foot {
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.article-cluster__more {
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.article-item__link {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 8px;
|
||||
padding: 12px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-item__author {
|
||||
flex: 1 1 calc(100% - 130px);
|
||||
max-width: none;
|
||||
padding-right: 0;
|
||||
color: #123a77;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.article-item__author::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-item__title {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: 32px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.article-item__date {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.article-cluster__list {
|
||||
padding: 8px 14px 14px;
|
||||
}
|
||||
|
||||
.article-ad-strip .ad-group__grid {
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 12px 14px 16px;
|
||||
}
|
||||
|
||||
.article-ad-strip .ad-item {
|
||||
flex: 0 0 calc((100% - 10px) / 2);
|
||||
width: calc((100% - 10px) / 2);
|
||||
max-width: calc((100% - 10px) / 2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.article-ad-strip .ad-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1.75 / 1;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.resource-card__body {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.resource-link {
|
||||
flex: 0 0 calc(50% - 5px);
|
||||
padding: 12px 10px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.resource-link span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.indexTopAppsinBox {
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.indexTopAppText {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hero__carousel-wrap {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.lottery-nav__card,
|
||||
.trend-item,
|
||||
.combo-tool-item,
|
||||
.resource-link {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.article-item__author {
|
||||
flex-basis: calc(100% - 124px);
|
||||
}
|
||||
|
||||
.hero-meta,
|
||||
.hero-stat {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.draw-card {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.draw-card__balls--compact {
|
||||
gap: 4px;
|
||||
width: calc(24px * 10 + 4px * 9);
|
||||
}
|
||||
|
||||
.draw-card__balls--compact .ball--compact {
|
||||
flex-basis: 24px;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user