Skip to content

Z
zhiyinweilai
Commit 869d9a03 authored by xuchentao's avatar xuchentao
Browse files
Options

fix: refine homepage visual details

parent 9e83cdd8
Pipeline #465 failed with stage
    Show whitespace changes
    Inline Side-by-side
    Showing with 20 additions and 14 deletions
    src/components/ProductCarousel.astro
    View file @ 869d9a03
    ...@@ -6,7 +6,7 @@ const platforms = { ...@@ -6,7 +6,7 @@ const platforms = {
    qwen: { name: "通义千问", color: "#6F5BFF", glow: "rgba(111,91,255,.14)" }, qwen: { name: "通义千问", color: "#6F5BFF", glow: "rgba(111,91,255,.14)" },
    deepseek: { name: "DeepSeek", color: "#4D6BFE", glow: "rgba(77,107,254,.14)" }, deepseek: { name: "DeepSeek", color: "#4D6BFE", glow: "rgba(77,107,254,.14)" },
    kimi: { name: "Kimi", color: "#111827", glow: "rgba(17,24,39,.11)" }, kimi: { name: "Kimi", color: "#111827", glow: "rgba(17,24,39,.11)" },
    yuanbao: { name: "腾讯元宝", color: "#0052D9", glow: "rgba(0,82,217,.14)" }, yuanbao: { name: "腾讯元宝", color: "#10B981", glow: "rgba(16,185,129,.14)" },
    baidu: { name: "百度AI", color: "#2932E1", glow: "rgba(41,50,225,.14)" }, baidu: { name: "百度AI", color: "#2932E1", glow: "rgba(41,50,225,.14)" },
    wenxin: { name: "文心一言", color: "#2468F2", glow: "rgba(36,104,242,.14)" }, wenxin: { name: "文心一言", color: "#2468F2", glow: "rgba(36,104,242,.14)" },
    }; };
    ......
    src/styles/global.css
    View file @ 869d9a03
    ...@@ -112,7 +112,7 @@ h1, h2, h3, strong { line-height: 1.25; } ...@@ -112,7 +112,7 @@ h1, h2, h3, strong { line-height: 1.25; }
    @keyframes orbit { to { transform: rotate(360deg); } } @keyframes orbit { to { transform: rotate(360deg); } }
    .hero-platform-flow { position: relative; z-index: 2; display: flex; align-items: center; width: calc(100% + 76px); min-width: 0; min-height: 430px; margin: 10px -38px 0 -38px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 16%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg,transparent,#000 16%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-composite: intersect; } .hero-platform-flow { position: relative; z-index: 2; display: flex; align-items: center; width: calc(100% + 76px); min-width: 0; min-height: 430px; margin: 10px -38px 0 -38px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 16%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg,transparent,#000 16%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-composite: intersect; }
    .platform-flow { position: relative; top: -20px; width: 100%; padding: 62px 0; overflow: hidden; } .platform-flow { position: relative; top: -20px; width: 100%; padding: 62px 0; overflow: hidden; }
    .platform-flow__row { overflow: hidden; padding: 11px 0; } .platform-flow__row { overflow: visible; padding: 11px 0; }
    .platform-flow__row:nth-child(2) { width: calc(100% - 44px); margin-left: 44px; } .platform-flow__row:nth-child(2) { width: calc(100% - 44px); margin-left: 44px; }
    .platform-flow__row:nth-child(3) { width: calc(100% - 22px); margin-left: 22px; } .platform-flow__row:nth-child(3) { width: calc(100% - 22px); margin-left: 22px; }
    .platform-flow__row:nth-child(4) { width: calc(100% - 58px); margin-left: 58px; } .platform-flow__row:nth-child(4) { width: calc(100% - 58px); margin-left: 58px; }
    ...@@ -177,18 +177,18 @@ h1, h2, h3, strong { line-height: 1.25; } ...@@ -177,18 +177,18 @@ h1, h2, h3, strong { line-height: 1.25; }
    .tech-data-row strong { color: var(--brand-cyan); font-size: 14px; letter-spacing: .08em; } .tech-data-row strong { color: var(--brand-cyan); font-size: 14px; letter-spacing: .08em; }
    .tech-data-row span { color: rgba(255,255,255,.58); font-size: 12px; } .tech-data-row span { color: rgba(255,255,255,.58); font-size: 12px; }
    .workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--border-default); background: #edf4fc; } .workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); align-items: start; overflow: visible; }
    .workflow-grid article { position: relative; min-height: 280px; padding: 30px 42px 30px 30px; overflow: hidden; } .workflow-grid article { --step-color: var(--brand-blue); --step-bg: #fff; position: relative; min-height: 270px; margin-top: 72px; padding: 30px 44px 30px 30px; overflow: hidden; }
    .workflow-grid article::before { position: absolute; z-index: 0; inset: 0 5px 0 0; content: ""; background: #fff; clip-path: polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%); transition: background .25s; } .workflow-grid article:nth-child(2) { --step-color: var(--brand-teal); --step-bg: #f5faff; margin-top: 48px; }
    .workflow-grid article:nth-child(2)::before { background: #f7fbff; } .workflow-grid article:nth-child(3) { --step-color: var(--brand-green); --step-bg: #f2faf7; margin-top: 24px; }
    .workflow-grid article:nth-child(3)::before { background: #f4fbf8; } .workflow-grid article:nth-child(4) { --step-color: var(--brand-navy); margin-top: 0; }
    .workflow-grid article:last-child::before { right: 0; clip-path: none; } .workflow-grid article::before { position: absolute; z-index: 0; inset: 0; content: ""; background: var(--step-bg); box-shadow: inset 0 3px 0 var(--step-color),inset 0 0 0 1px var(--border-default); transition: background .25s; }
    .workflow-grid article:hover::before { background: #f5f9fe; } .workflow-grid article:hover::before { background: #edf6ff; }
    .workflow-grid article:nth-child(3):hover::before { background: #eef9f4; } .workflow-grid article:nth-child(3):hover::before { background: #eaf8f2; }
    .workflow-grid article > * { position: relative; z-index: 1; } .workflow-grid article > * { position: relative; z-index: 1; }
    .workflow-grid article > div { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 42px; } .workflow-grid article > div { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 45px; }
    .workflow-grid article span { color: var(--brand-blue); font-size: 38px; font-weight: 720; letter-spacing: -.06em; line-height: 1; } .workflow-grid article span { color: var(--step-color); font-size: 42px; font-weight: 720; letter-spacing: -.06em; line-height: 1; }
    .workflow-grid article i { margin-top: 7px; color: var(--brand-teal); font-size: 17px; font-style: normal; line-height: 1; } .workflow-grid article i { margin-top: 8px; color: var(--step-color); font-size: 18px; font-style: normal; line-height: 1; }
    .workflow-grid h3 { margin-bottom: 13px; font-size: 23px; letter-spacing: -.02em; } .workflow-grid h3 { margin-bottom: 13px; font-size: 23px; letter-spacing: -.02em; }
    .workflow-grid p { max-width: 235px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.85; } .workflow-grid p { max-width: 235px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.85; }
    ...@@ -449,7 +449,8 @@ h1, h2, h3, strong { line-height: 1.25; } ...@@ -449,7 +449,8 @@ h1, h2, h3, strong { line-height: 1.25; }
    .site-footer { position: relative; overflow: hidden; padding-top: 82px; color: rgba(255,255,255,.66); background: var(--dark-bg); } .site-footer { position: relative; overflow: hidden; padding-top: 82px; color: rgba(255,255,255,.66); background: var(--dark-bg); }
    .footer-glow { position: absolute; right: 8%; top: -260px; width: 500px; height: 500px; border-radius: 50%; background: rgba(20,115,230,.22); filter: blur(70px); } .footer-glow { position: absolute; right: 8%; top: -260px; width: 500px; height: 500px; border-radius: 50%; background: rgba(20,115,230,.22); filter: blur(70px); }
    .footer-grid { position: relative; display: grid; grid-template-columns: 1.55fr .65fr .85fr 1fr; gap: 60px; padding-bottom: 62px; } .footer-grid { position: relative; display: grid; grid-template-columns: 1.55fr .65fr .85fr 1fr; gap: 60px; padding-bottom: 62px; }
    .footer-logo { display: block; width: 210px; filter: brightness(0) invert(1); opacity: .95; } .footer-logo { display: block; width: 210px; height: 50px; overflow: hidden; filter: brightness(0) invert(1); opacity: .95; }
    .footer-logo img { width: 210px; max-width: none; height: auto; transform: translateY(-2px); }
    .footer-brand > p { max-width: 400px; margin: 24px 0; font-size: 13px; line-height: 1.9; } .footer-brand > p { max-width: 400px; margin: 24px 0; font-size: 13px; line-height: 1.9; }
    .footer-tags { display: flex; flex-wrap: wrap; gap: 8px; } .footer-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .footer-tags span { padding: 5px 9px; color: var(--brand-cyan); font-size: 10px; } .footer-tags span { padding: 5px 9px; color: var(--brand-cyan); font-size: 10px; }
    ...@@ -514,6 +515,8 @@ h1, h2, h3, strong { line-height: 1.25; } ...@@ -514,6 +515,8 @@ h1, h2, h3, strong { line-height: 1.25; }
    .engine-grid { grid-template-columns: 1fr; } .engine-grid { grid-template-columns: 1fr; }
    .tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { grid-template-columns: 1fr; } .tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { grid-template-columns: 1fr; }
    .tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: repeat(2,1fr); } .tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: repeat(2,1fr); }
    .workflow-grid { gap: 14px; }
    .workflow-grid article,.workflow-grid article:nth-child(n) { margin-top: 0; }
    .tech-data-row > div:nth-child(2),.process-grid article:nth-child(2) { border-right: 0; } .tech-data-row > div:nth-child(2),.process-grid article:nth-child(2) { border-right: 0; }
    .tech-data-row > div:nth-child(-n+2),.process-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); } .tech-data-row > div:nth-child(-n+2),.process-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
    .service-detail__content { grid-template-columns: 1fr; gap: 38px; } .service-detail__content { grid-template-columns: 1fr; gap: 38px; }
    ...@@ -560,6 +563,9 @@ h1, h2, h3, strong { line-height: 1.25; } ...@@ -560,6 +563,9 @@ h1, h2, h3, strong { line-height: 1.25; }
    .support-service-grid,.scenario-grid,.service-cap-grid,.delivery-grid,.principle-grid,.contact-grid,.article-grid,.advantage-grid { grid-template-columns: 1fr; } .support-service-grid,.scenario-grid,.service-cap-grid,.delivery-grid,.principle-grid,.contact-grid,.article-grid,.advantage-grid { grid-template-columns: 1fr; }
    .tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { gap: 46px; } .tech-layout,.scenario-layout,.about-intro-layout,.delivery-layout,.visit-grid,.service-cap-layout,.service-feature-layout { gap: 46px; }
    .tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: 1fr; } .tech-data-row,.workflow-grid,.method-flow,.process-grid { grid-template-columns: 1fr; }
    .workflow-grid { gap: 0; }
    .workflow-grid article { min-height: 245px; }
    .workflow-grid p { max-width: none; }
    .tech-data-row > div,.process-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } .tech-data-row > div,.process-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .tech-data-row > div:last-child,.process-grid article:last-child { border-bottom: 0; } .tech-data-row > div:last-child,.process-grid article:last-child { border-bottom: 0; }
    .service-detail { padding: 16px; border-radius: 14px; } .service-detail { padding: 16px; border-radius: 14px; }
    ......
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment