修改样式，未完成
This commit is contained in:
rain
+165
-45
@@ -2,8 +2,39 @@
|
||||
index.css - Homepage-specific styles
|
||||
============================================================ */
|
||||
|
||||
.indexTopAppsinBigBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.indexTopAppsinBox {
|
||||
height: 75px;
|
||||
width: min(var(--max-width), 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indexTopAppImg {
|
||||
width: 23px;
|
||||
}
|
||||
|
||||
.indexTopAppText {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
/* margin-top: 75px; */
|
||||
}
|
||||
|
||||
body {
|
||||
--max-width: 1400px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
padding-bottom: 56px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
@@ -12,18 +43,19 @@
|
||||
.content,
|
||||
.resource-section,
|
||||
.site-footer {
|
||||
width: min(var(--max-width), calc(100% - 48px));
|
||||
width: min(var(--max-width), 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 28px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.45fr) 360px;
|
||||
gap: 22px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.hero__main,
|
||||
@@ -52,6 +84,16 @@
|
||||
animation: cxz-fade-up .58s ease both;
|
||||
}
|
||||
|
||||
.content__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.content__ads {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
animation-delay: .06s;
|
||||
}
|
||||
@@ -75,6 +117,8 @@
|
||||
}
|
||||
|
||||
.hero__main {
|
||||
flex: 1 1 52%;
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(253, 185, 51, .14), transparent 22%),
|
||||
@@ -82,6 +126,11 @@
|
||||
rgba(255, 255, 255, .96);
|
||||
}
|
||||
|
||||
.hero__side--right {
|
||||
flex: 0 0 360px;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.panel-head,
|
||||
.draw__header,
|
||||
.content-head,
|
||||
@@ -145,9 +194,10 @@
|
||||
|
||||
.hero__carousel-wrap {
|
||||
height: 420px;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0f2b68, #12367c, #164d86);
|
||||
min-height: 100%;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__carousel-wrap .layui-carousel,
|
||||
@@ -237,10 +287,16 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hero__side {
|
||||
/* display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 22px; */
|
||||
.hero__side .sidebar-card {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 10px 26px rgba(9, 24, 64, 0.08),
|
||||
0 2px 6px rgba(9, 24, 64, 0.04);
|
||||
}
|
||||
|
||||
.sidebar-card-bom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
@@ -410,8 +466,8 @@
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
width: min(var(--max-width), calc(100% - 48px));
|
||||
margin: 28px auto 18px;
|
||||
width: min(var(--max-width), 100%);
|
||||
margin: 10px auto 10px;
|
||||
padding: 16px 24px;
|
||||
border-radius: 22px;
|
||||
color: var(--white);
|
||||
@@ -494,7 +550,7 @@
|
||||
}
|
||||
|
||||
.draw {
|
||||
margin-top: 18px;
|
||||
margin-top: 10px;
|
||||
padding: 24px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .98));
|
||||
}
|
||||
@@ -571,8 +627,8 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin: 18px 0 14px;
|
||||
min-height: 74px;
|
||||
margin: 8px 0 2px;
|
||||
min-height: 68px;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
@@ -589,20 +645,31 @@
|
||||
border-top: 1px dashed rgba(16, 43, 106, .1);
|
||||
}
|
||||
|
||||
.draw-card__foot_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.draw-card__foot_left_left {
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.draw-card__foot_left_right {
|
||||
color: var(--navy);
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.draw-card__date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.draw-card__foot span {
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.draw-card__foot strong {
|
||||
color: var(--navy);
|
||||
.draw-card__foot_right {
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.draw-card__link--button {
|
||||
@@ -626,18 +693,13 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.content__inner {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr) 332px;
|
||||
gap: 22px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar-card__head {
|
||||
@@ -742,7 +804,7 @@
|
||||
}
|
||||
|
||||
.qrcode-box {
|
||||
padding: 24px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -788,10 +850,7 @@
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.combo-tool-card {
|
||||
margin-top: 34px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.combo-tool-grid {
|
||||
@@ -842,7 +901,15 @@
|
||||
.article-matrix {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-ad-strip {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.article-ad-strip .ad-group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.article-cluster__head {
|
||||
@@ -888,6 +955,11 @@
|
||||
}
|
||||
|
||||
.article-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.article-item__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@@ -896,13 +968,14 @@
|
||||
transition: transform .2s ease, background .2s ease, padding .2s ease;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
.article-item:hover .article-item__link {
|
||||
padding-left: 6px;
|
||||
background: linear-gradient(90deg, rgba(16, 43, 106, .045), transparent);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.article-item:last-child {
|
||||
.article-item:last-child .article-item__link,
|
||||
.article-item.article-item--empty {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -913,7 +986,7 @@
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.article-item__link {
|
||||
.article-item__title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -922,6 +995,13 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.article-item__date {
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ad-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
@@ -951,7 +1031,7 @@
|
||||
}
|
||||
|
||||
.ad-item img {
|
||||
width: 139px;
|
||||
width: 157.7px;
|
||||
height: 94px;
|
||||
object-fit: cover;
|
||||
background: #fff;
|
||||
@@ -965,7 +1045,7 @@
|
||||
.resource-section__inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
@@ -992,7 +1072,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: calc(50% - 6px);
|
||||
min-width: calc(23% - 6px);
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(255, 255, 255, .96));
|
||||
@@ -1009,6 +1089,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -1020,9 +1101,11 @@
|
||||
opacity: 0;
|
||||
transform: scale(.72);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
@@ -1035,6 +1118,7 @@
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@@ -1088,3 +1172,39 @@
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.hero__inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero__side {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero__main {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.content__inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content__ads {
|
||||
flex-basis: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero__inner {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero__side {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user