/* 通用样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 確保滾動順暢 */ html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; overflow-y: auto; background-color: #ffffff; /* 改为白色，防止移动canvas时露出黑色背景 */ color: #000000; } .scroll-container { position: absolute; width: 100%; } .scroll-content { position: sticky; inset: 0px; display: block; overflow: hidden; width: 100%; height: 100vh; } .header { position: absolute; top: 0; left: 0; width: 100%; height: 8.125vw; display: flex; align-items: center; justify-content: center; z-index: 10; } .logo-img { position: absolute; width: 6.77vw; height: auto; left: 6.77vw; } .header a { font-size: clamp(14px, 1.3vw, 25px); color: #000000; } .header .lang { position: absolute; width: 2.6vw; height: 2.6vw; line-height: 2.6vw; right: 5.73vw; background: #fffeff; border-radius: 50%; font-size: 1.15vw; color: #000000; } /* 主容器 */ .mian-container { display: flex; flex-direction: column; width: 100%; height: 333.125vw; background-image: url("../assets/images/bg.png"); background-size: cover; /* 确保图片覆盖整个元素 */ background-position: center; /* 将图片居中显示 */ background-repeat: no-repeat; scroll-behavior: smooth; position: relative; overflow: hidden; } .canvas-wrapper { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; will-change: transform; /* 优化性能 */ background-color: transparent; display: none; } .viewer-main__canvas { width: 100%; height: 100%; display: block; outline: none; background-color: transparent; } .sketch-img { position: absolute; top: 5.313vw; left: 1.719vw; width: 47.292vw; height: auto; } .logo-large-img { position: absolute; right: 4.0625vw; top: 8.125vw; width: 50.677vw; height: auto; } .contact { position: absolute; left: 4.69vw; top: 43.49vw; } .contact-btn { min-width: 8.906vw; height: 2.448vw; padding: 0 1.719vw; box-sizing: content-box; text-align: center; line-height: 2.448vw; background: #8f8171; border-radius: 1.25vw; font-size: 1.458vw; color: #000000; } .design-img { margin-top: 1.823vw; width: 13.594vw; height: auto; } .mid-content { position: absolute; top: 48.802vw; left: 50%; transform: translateX(-50%); width: 100%; display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 6.094vw; line-height: 6.094vw; color: #000000; letter-spacing: -0.3vw; } .stay-img { width: 49.896vw; height: 7.813vw; } .smile-img { position: absolute; top: 10vw; left: 50%; transform: translateX(-50%); margin-left: 20vw; width: 7.083vw; height: auto; } .mid-content-footer { margin-top: 32.813vw; font-size: clamp(14px, 1.042vw, 20px); color: #000000; line-height: 2.083vw; letter-spacing: 0; text-align: center; font-weight: normal; padding: 0 10vw; } .product-aiming { position: absolute; top: 5vw; } .wrapper-content { position: absolute; top: 102vw; width: 100%; } .right-content { font-size: clamp(14px, 1.042vw, 20px); color: #000000; line-height: 1.563vw; text-align: right; } .right-content h3 { font-weight: 800; font-size: 4.792vw; line-height: 6.792vw; margin: 0; } .right-content p { margin: 0; padding: 0; white-space: pre-wrap; } .right-content-item1 { margin-right: 15.417vw; } .right-content-item2 { margin-top: 1.979vw; margin-right: 21.354vw; } .right-content-item3 { margin-top: 3.698vw; margin-right: 26.823vw; } .wrapper-main { position: relative; z-index: 10; } .product-container { margin-top: 15.625vw; display: flex; flex-direction: column; align-items: center; color: #000000; } .product-container h3 { font-weight: 800; font-size: 5.99vw; letter-spacing: -0.2vw; } .product-content { display: flex; justify-content: center; width: 100%; position: relative; } #dog-svg-container { width: 40%; position: relative; z-index: -1; } .spec-left { margin-top: 5vw; margin-right: -4vw; } .spec-right { margin-top: 5vw; margin-left: -4vw; } .spec-left .spec-item { text-align: right; } .spec-item + .spec-item { margin-top: 1.25vw; } .spec-box { min-width: 15.625vw; padding: 0 0.885vw; height: 3.646vw; border-radius: 1.719vw; border: 1px solid #000000; display: inline-flex; align-items: center; } .spec-box-item { width: 1.719vw; height: 1.719vw; border-radius: 50%; box-sizing: content-box; display: flex; align-items: center; justify-content: center; } .spec-box-item + .spec-box-item { margin-left: 1.302vw; } .spec-title { font-size: 1.406vw; color: #000000; font-weight: bold; } .sub-title { font-size: 0.781vw; } .spec-box-item svg { width: 100%; height: 100%; } .spec-border { border-width: 0.208vw; } .bg-svg { background-color: rgba(1, 1, 1, 0.2); } #submit-order-btn { position: absolute; right: 18.75vw; bottom: 0; min-width: 10.833vw; padding: 0 1.563vw; height: 2.604vw; background: #000000; border-radius: 1.302vw; font-size: 1.51vw; color: #fafbf6; display: flex; align-items: center; justify-content: center; } .submit-img { margin-left: 0.417vw; width: 1.354vw; height: 1.042vw; } .tech-content { margin-top: 4.167vw; display: flex; flex-direction: column; padding-left: 19.167vw; } .tech-content h3 { font-size: 4.115vw; line-height: 4.115vw; font-weight: bold; } .tech-specs { margin-top: 3.125vw; display: flex; width: 100%; } .tech-specs-left { width: 30vw; } .tect-spec-item-header { display: inline-block; min-width: 12.24vw; padding-right: 2.604vw; height: 2.031vw; line-height: 2.031vw; background: #000000; border-radius: 0.99vw; font-size: 1.146vw; color: #fafbf6; padding-left: 0.625vw; position: relative; margin: 1.563vw 0; } .tect-spec-icon { position: absolute; top: 0; right: 0; width: 2.083vw; height: 2.083vw; } .tect-spec-item { padding-right: 2.604vw; } .tect-spec-item-text { width: 100%; display: flex; font-size: clamp(10px, 0.729vw, 20px); color: #000000; line-height: 1.094vw; } .tect-spec-item-text span:first-child { width: 9.896vw; flex-shrink: 0; } .tech-specs-right .tect-spec-item-text { margin-bottom: 1.354vw; } .tect-spec-item-text > div:first-child { width: 20.833vw; flex-shrink: 0; padding-right: 20px; } #vision { margin-top: 9.792vw; width: 100%; color: #000000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 2vw; } .dog-head-img { width: 11.563vw; height: 10.781vw; margin-bottom: 3.854vw; } #vision h2 { font-size: 3.542vw; line-height: 3.542vw; font-weight: 800; margin-bottom: 1.563vw; text-align: center; } #vision p { font-size: 1.302vw; line-height: 1.979vw; } .contact-content { display: flex; flex-direction: column; align-items: center; margin-top: 10.417vw; } .contact-content .title { margin-bottom: 5.208vw; font-size: 4.375vw; line-height: 4.375vw; display: flex; letter-spacing: -0.3vw; } .contact-form { display: flex; flex-direction: column; align-items: center; } .contact-content .input-box { width: 31.719vw; height: 3.75vw; border-radius: 1.875vw; border: 1px solid #000000; padding: 0 2.396vw; font-size: 1.823vw; margin-bottom: 1.302vw; } .contact-content .submit-btn { width: 31.771vw; height: 3.594vw; background: #000000; border-radius: 1.771vw; font-size: 1.823vw; color: #fafbf6; } .tail-img { width: 3.646vw; height: 2.344vw; cursor: pointer; } .scale-120 { transform: scale(1.2); } .footer { position: absolute; bottom: 0; left: 0; right: 0; font-size: 1.25vw; text-align: center; padding-bottom: 2rem; }