team/haiyushuke-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add industry solution pages

Browse Source
This commit is contained in:
Jane Doe
2026-06-19 11:29:38 +08:00
parent 2b4f92a8d1
commit 18a93a2114
13 changed files with 987 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

452
src/styles/components.css
View File

@@ -332,6 +332,344 @@
white-space: normal;
}
.solution-card-grid {
display: grid;
gap: var(--spacing-xl);
grid-template-columns: minmax(0, 1fr);
}
@media (width >= 640px) {
.solution-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (width >= 1180px) {
.solution-card-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.solution-card.card-on-light {
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
padding: 0;
}
.solution-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
background-color: var(--color-canvas-muted);
}
.solution-card__image {
object-fit: cover;
transition: transform 0.3s ease;
}
.solution-card:hover .solution-card__image {
transform: scale(1.018);
}
.solution-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-xl);
min-width: 0;
}
.solution-card__title {
margin: 0;
}
.solution-card__title a {
color: inherit;
text-decoration: none;
}
.solution-card__title a:hover {
color: var(--color-accent-ink);
text-decoration: none;
}
.solution-card__lead {
flex: 1;
margin: 0;
}
.solution-card__tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
margin: 0;
padding: 0;
list-style: none;
}
.solution-card__tags li {
border-radius: var(--radius-sm);
background-color: var(--color-canvas-muted);
color: var(--color-accent-soft);
font-size: 12px;
line-height: 1;
padding: 6px var(--spacing-sm);
}
.solution-card__link {
align-self: flex-start;
color: var(--color-accent-ink);
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.solution-card__link:hover {
text-decoration: underline;
}
.solution-detail-page {
display: flex;
flex-direction: column;
}
.solution-detail-hero__layout {
display: grid;
gap: var(--spacing-4xl);
align-items: center;
}
@media (width >= 992px) {
.solution-detail-hero__layout {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
}
}
.solution-detail-hero__copy {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
min-width: 0;
}
.solution-detail-hero__title {
margin: 0;
max-width: 14em;
}
.solution-detail-hero__summary {
margin: 0;
max-width: 40rem;
}
.solution-detail-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-top: var(--spacing-sm);
}
.solution-detail-visual {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
min-width: 0;
}
.solution-detail-visual__image {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
border-radius: var(--radius-md);
background-color: var(--color-canvas-muted);
box-shadow: var(--shadow-surface-hover);
}
.solution-detail-visual__img {
object-fit: cover;
}
.solution-detail-stats {
display: grid;
gap: var(--spacing-md);
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
}
@media (width < 640px) {
.solution-detail-stats {
grid-template-columns: 1fr;
}
}
.solution-detail-stat {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
background-color: var(--color-canvas);
box-shadow: var(--shadow-field);
min-width: 0;
}
.solution-detail-stat dt {
color: var(--color-body-light);
font-size: 12px;
line-height: 1.2;
}
.solution-detail-stat dd {
margin: 0;
color: var(--color-ink);
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.1;
}
.solution-workflow {
display: grid;
gap: var(--spacing-md);
grid-template-columns: minmax(0, 1fr);
margin: 0;
padding: 0;
list-style: none;
}
@media (width >= 768px) {
.solution-workflow {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.solution-workflow__item {
position: relative;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
min-height: 120px;
padding: var(--spacing-xl);
border-radius: var(--radius-md);
background-color: var(--color-canvas);
box-shadow: var(--shadow-field);
}
.solution-workflow__no {
color: var(--color-accent-ink);
font-family: var(--font-mono-caps);
font-size: 12px;
letter-spacing: 0.06em;
}
.solution-workflow__label {
color: var(--color-ink);
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.35;
}
.solution-capability-grid {
display: grid;
gap: var(--spacing-xl);
grid-template-columns: minmax(0, 1fr);
}
@media (width >= 768px) {
.solution-capability-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.solution-capability {
min-height: 172px;
}
.solution-capability h3,
.solution-capability p {
margin: 0;
}
.solution-detail-columns {
display: grid;
gap: var(--spacing-xl);
align-items: stretch;
grid-template-columns: minmax(0, 1fr);
}
@media (width >= 900px) {
.solution-detail-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-detail-columns:has(.solution-note) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.solution-list-panel,
.solution-note {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-2xl);
border-radius: var(--radius-md);
background-color: var(--color-canvas);
box-shadow: var(--shadow-surface);
min-width: 0;
}
.solution-list-panel h2,
.solution-note p {
margin: 0;
}
.solution-list-panel ul {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: 0;
padding: 0;
list-style: none;
}
.solution-list-panel li {
position: relative;
padding-left: var(--spacing-lg);
color: var(--color-body);
font-size: 15px;
line-height: 1.55;
}
.solution-list-panel li::before {
position: absolute;
top: 0.62em;
left: 0;
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background-color: var(--color-accent-ink);
content: "";
}
.solution-note {
background-color: var(--color-accent-wash);
}
.solution-note p:last-child {
color: var(--color-body);
font-size: 14px;
line-height: 1.7;
}
.news-list-card {
transition: box-shadow 0.2s ease;
}
@@ -1496,15 +1834,29 @@
list-style: none;
}
.nav-island-menu__list > li {
.nav-island-menu__item {
display: flex;
align-items: center;
}
.nav-island-menu__item--has-menu {
position: relative;
}
.nav-island-menu__item--has-menu::after {
position: absolute;
top: 100%;
right: -10px;
left: -10px;
height: 18px;
content: "";
}
.nav-island-menu__link {
display: inline-flex;
height: 100%;
align-items: center;
gap: 6px;
padding-inline: 12px;
font-size: 13px;
line-height: 1;
@@ -1514,11 +1866,81 @@
transition: color 0.2s ease;
}
.nav-island-menu__item--has-menu > .nav-island-menu__link::after {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
content: "";
opacity: 0.72;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-island-menu__item--has-menu:hover > .nav-island-menu__link::after,
.nav-island-menu__item--has-menu:focus-within > .nav-island-menu__link::after {
opacity: 1;
transform: translateY(1px) rotate(225deg);
}
.nav-island-menu__link:hover {
color: var(--color-accent-ink);
text-decoration: none;
}
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
z-index: 10;
display: grid;
width: max-content;
min-width: 220px;
gap: 2px;
padding: var(--spacing-sm);
border-radius: var(--radius-md);
background-color: rgb(255 255 255 / 0.96);
box-shadow: var(--shadow-surface-hover);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -4px);
visibility: hidden;
transition:
opacity 0.18s ease 0.12s,
transform 0.18s ease 0.12s,
visibility 0s linear 0.3s;
}
.nav-island-menu__item--has-menu:hover .nav-dropdown,
.nav-island-menu__item--has-menu:focus-within .nav-dropdown {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
visibility: visible;
transition-delay: 0.04s, 0.04s, 0s;
}
.nav-dropdown__link {
display: block;
padding: 10px var(--spacing-lg);
border-radius: var(--radius-sm);
color: var(--color-ink);
font-size: 13px;
line-height: 1.25;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.nav-dropdown__link:hover {
color: var(--color-accent-ink);
background-color: var(--color-accent-wash);
text-decoration: none;
}
.nav-island-actions {
flex-shrink: 0;
gap: 4px;
@@ -1638,6 +2060,34 @@
text-decoration: none;
}
.nav-mobile-drawer__sublist {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 0 var(--spacing-xs);
padding: 0 0 0 var(--spacing-lg);
list-style: none;
}
.nav-mobile-drawer__sublink {
display: block;
padding: 9px var(--spacing-lg);
border-radius: var(--radius-sm);
color: var(--color-body);
font-size: 14px;
line-height: 1.35;
text-decoration: none;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.nav-mobile-drawer__sublink:hover {
color: var(--color-accent-ink);
background-color: var(--color-accent-wash);
text-decoration: none;
}
.nav-mobile-drawer__cta-row {
display: flex;
flex-direction: column;