没改轮播图的版本
This commit is contained in:
@@ -27,8 +27,9 @@
|
|||||||
"Helvetica Neue", Arial, sans-serif;
|
"Helvetica Neue", Arial, sans-serif;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
@@ -998,5 +999,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
(() => {
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+30
-1
@@ -22,8 +22,9 @@
|
|||||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
@@ -65,6 +66,7 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
|
width: 1000px;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
@@ -476,6 +478,33 @@
|
|||||||
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
(() => {
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// 页面类型
|
// 页面类型
|
||||||
const PAGE_TYPE = 'company';
|
const PAGE_TYPE = 'company';
|
||||||
|
|||||||
@@ -22,8 +22,9 @@
|
|||||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
@@ -65,6 +66,7 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
|
width: 1000px;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
@@ -480,6 +482,33 @@
|
|||||||
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
(() => {
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// 文章数据
|
// 文章数据
|
||||||
const articles = [
|
const articles = [
|
||||||
|
|||||||
+135
-203
@@ -17,11 +17,9 @@
|
|||||||
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
||||||
}
|
}
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
html, body {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
html {
|
html {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -30,8 +28,10 @@
|
|||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
overflow-x: auto;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
width: min(1120px, 100%);
|
width: 1120px;
|
||||||
max-width: 1120px;
|
max-width: 1120px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
@@ -64,7 +64,8 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
padding: 0 32px;
|
padding: 0 32px;
|
||||||
max-width: 1400px;
|
width: 1280px;
|
||||||
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@@ -152,25 +153,24 @@
|
|||||||
.footer-section {
|
.footer-section {
|
||||||
background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
|
background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
padding: 40px 0 24px;
|
||||||
padding: 80px 0 40px;
|
|
||||||
}
|
}
|
||||||
.footer-container {
|
.footer-container {
|
||||||
|
width: 1280px;
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
.footer-top {
|
.footer-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 60px;
|
gap: 40px;
|
||||||
padding-bottom: 48px;
|
padding-top: 0;
|
||||||
|
padding-bottom: 24px;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
margin-bottom: 48px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
.footer-brand-area {
|
.footer-brand-area {
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
@@ -188,13 +188,13 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.footer-desc {
|
.footer-desc {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.8;
|
line-height: 1.6;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
.footer-social {
|
.footer-social {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -232,8 +232,8 @@
|
|||||||
.footer-subscribe p {
|
.footer-subscribe p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 12px;
|
||||||
line-height: 1.6;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
.subscribe-form {
|
.subscribe-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -308,14 +308,14 @@
|
|||||||
.footer-links-grid {
|
.footer-links-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 48px;
|
gap: 32px;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
.footer-column h4 {
|
.footer-column h4 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 0 0 20px;
|
margin: 0 0 12px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
@@ -325,7 +325,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.footer-links li {
|
.footer-links li {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.footer-links a {
|
.footer-links a {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -338,42 +338,64 @@
|
|||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
.footer-bottom {
|
.footer-bottom {
|
||||||
padding-top: 32px;
|
padding-top: 20px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
}
|
}
|
||||||
.footer-bottom-main {
|
.footer-bottom-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
gap: 10px;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
}
|
||||||
.footer-bottom-main .footer-social {
|
.footer-qrcode-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 32px;
|
||||||
margin-left: -580px;
|
flex-wrap: wrap;
|
||||||
margin-top: -17px;
|
justify-content: center;
|
||||||
|
padding: 24px 0;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.footer-bottom-main .footer-social a {
|
.qrcode-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.qrcode-placeholder {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 36px;
|
overflow: hidden;
|
||||||
height: 36px;
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 8px;
|
transition: transform 0.3s ease;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
}
|
||||||
|
.qrcode-placeholder:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.qrcode-placeholder img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.qrcode-fallback {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
transition: all 0.25s ease;
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
}
|
}
|
||||||
.footer-bottom-main .footer-social a:hover {
|
.qrcode-label {
|
||||||
background: var(--primary);
|
font-size: 13px;
|
||||||
color: #fff;
|
color: #94a3b8;
|
||||||
transform: translateY(-2px);
|
white-space: nowrap;
|
||||||
}
|
|
||||||
.footer-bottom-main .footer-social svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
}
|
||||||
.footer-copyright {
|
.footer-copyright {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@@ -382,6 +404,7 @@
|
|||||||
.footer-legal {
|
.footer-legal {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 28px;
|
gap: 28px;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.footer-legal a {
|
.footer-legal a {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@@ -667,55 +690,6 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
/* 响应式 */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.footer-top {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
.footer-brand-area,
|
|
||||||
.footer-subscribe {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.footer-links-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.navbar-menu {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.mobile-menu-btn {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.navbar-cta {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.footer-top {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 32px;
|
|
||||||
}
|
|
||||||
.subscribe-form {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.subscribe-form button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.footer-links-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 28px;
|
|
||||||
}
|
|
||||||
.footer-bottom-main {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
.footer-legal {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.lang-switch {
|
.lang-switch {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 24px;
|
top: 24px;
|
||||||
@@ -2851,99 +2825,6 @@
|
|||||||
vertical-align: -3px;
|
vertical-align: -3px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
@media (max-width: 720px) {
|
|
||||||
h1 { font-size: 34px; }
|
|
||||||
h2 { font-size: 24px; }
|
|
||||||
.hero-image { width: 180px; height: 180px; }
|
|
||||||
.hero-media { min-height: 220px; }
|
|
||||||
.hero-pet-badge { width: 52px; height: 52px; }
|
|
||||||
.hero-pet-badge.cat-badge { left: 130px; }
|
|
||||||
.hero-pet-badge.dog-badge { right: 130px; }
|
|
||||||
.glass-card { display: none; }
|
|
||||||
/* 公司介绍响应式 */
|
|
||||||
.company-intro { grid-template-columns: 1fr; gap: 24px; }
|
|
||||||
.company-text { padding: 0; text-align: center; }
|
|
||||||
.company-image { height: 200px; }
|
|
||||||
/* 关于宠科响应式 */
|
|
||||||
.about-chookoo-wrapper { gap: 32px; padding: 0 8px; }
|
|
||||||
.brand-name { font-size: 26px; }
|
|
||||||
.brand-intro { font-size: 14px; }
|
|
||||||
.about-highlights { grid-template-columns: 1fr; gap: 16px; }
|
|
||||||
.highlight-card { padding: 24px 20px; }
|
|
||||||
.about-footer { flex-direction: column; gap: 12px; }
|
|
||||||
/* 公司介绍新版响应式 */
|
|
||||||
.company-section-new { padding: 40px 16px; gap: 32px; }
|
|
||||||
.company-title { font-size: 26px; }
|
|
||||||
.company-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
||||||
.stat-card { padding: 24px 16px; }
|
|
||||||
.stat-number { font-size: 26px; }
|
|
||||||
.stat-icon { width: 40px; height: 40px; margin-bottom: 12px; }
|
|
||||||
/* 愿景使命价值观响应式 */
|
|
||||||
.vmv-grid { grid-template-columns: 1fr; gap: 20px; padding: 0 16px; }
|
|
||||||
.vmv-card { padding: 28px 24px; }
|
|
||||||
.vmv-icon { width: 60px; height: 60px; margin-bottom: 20px; }
|
|
||||||
.vmv-card h3 { font-size: 20px; }
|
|
||||||
/* 新版愿景使命价值观响应式 */
|
|
||||||
.vmv-new-wrapper { gap: 32px; }
|
|
||||||
.vmv-title { font-size: 24px; }
|
|
||||||
.vmv-cards { grid-template-columns: 1fr; gap: 20px; }
|
|
||||||
.vmv-new-card .card-content { padding: 32px 24px; }
|
|
||||||
.vmv-footer { padding: 24px; }
|
|
||||||
.vmv-slogan { font-size: 14px; letter-spacing: 1px; }
|
|
||||||
.decoration-row { gap: 12px; }
|
|
||||||
.vmv-footer .floating-icon svg { width: 18px; height: 18px; }
|
|
||||||
/* 产品板块响应式 */
|
|
||||||
.product-grid {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
.product-group-left,
|
|
||||||
.product-group-right {
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.product-display-area {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 240px;
|
|
||||||
height: 400px;
|
|
||||||
order: -1;
|
|
||||||
}
|
|
||||||
.display-image-wrapper {
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.display-image {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.product-card {
|
|
||||||
width: 160px;
|
|
||||||
height: 180px;
|
|
||||||
}
|
|
||||||
.product-card .product-image-wrapper {
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
.product-card .product-content {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
.product-card .product-content h3 {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
.product-card .product-content p {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
/* 故事板块响应式 */
|
|
||||||
.story-wrapper { grid-template-columns: 1fr; }
|
|
||||||
.story-wrapper .story-card { padding: 24px; }
|
|
||||||
.story-image { display: none; }
|
|
||||||
/* 宠物故事响应式 */
|
|
||||||
.pet-stories-grid { grid-template-columns: 1fr; }
|
|
||||||
/* 用户心声响应式 */
|
|
||||||
.testimonials-grid { grid-template-columns: 1fr; }
|
|
||||||
.testimonial-card { padding: 20px; }
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -2958,7 +2839,7 @@
|
|||||||
<a href="products.html" class="navbar-link" data-i18n="nav_products">产品</a>
|
<a href="products.html" class="navbar-link" data-i18n="nav_products">产品</a>
|
||||||
<a href="stories.html" class="navbar-link" data-i18n="nav_stories">故事</a>
|
<a href="stories.html" class="navbar-link" data-i18n="nav_stories">故事</a>
|
||||||
<a href="app.html" class="navbar-link" data-i18n="nav_app">App</a>
|
<a href="app.html" class="navbar-link" data-i18n="nav_app">App</a>
|
||||||
<a href="#support" class="navbar-link" data-i18n="nav_about">关于我们</a>
|
<a href="company.html?article=201" class="navbar-link" data-i18n="nav_about">关于我们</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-actions">
|
<div class="navbar-actions">
|
||||||
<a href="help.html" class="navbar-btn" aria-label="Search">
|
<a href="help.html" class="navbar-btn" aria-label="Search">
|
||||||
@@ -3537,29 +3418,54 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 二维码区域 -->
|
||||||
|
<div class="footer-qrcode-section">
|
||||||
|
<div class="qrcode-item">
|
||||||
|
<div class="qrcode-placeholder">
|
||||||
|
<img src="qr-wechat.png" alt="微信二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||||
|
<div class="qrcode-fallback">二维码</div>
|
||||||
|
</div>
|
||||||
|
<span class="qrcode-label">微信公众号</span>
|
||||||
|
</div>
|
||||||
|
<div class="qrcode-item">
|
||||||
|
<div class="qrcode-placeholder">
|
||||||
|
<img src="qr-weibo.png" alt="微博二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||||
|
<div class="qrcode-fallback">二维码</div>
|
||||||
|
</div>
|
||||||
|
<span class="qrcode-label">微博</span>
|
||||||
|
</div>
|
||||||
|
<div class="qrcode-item">
|
||||||
|
<div class="qrcode-placeholder">
|
||||||
|
<img src="qr-xiaohongshu.png" alt="小红书二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||||
|
<div class="qrcode-fallback">二维码</div>
|
||||||
|
</div>
|
||||||
|
<span class="qrcode-label">小红书</span>
|
||||||
|
</div>
|
||||||
|
<div class="qrcode-item">
|
||||||
|
<div class="qrcode-placeholder">
|
||||||
|
<img src="qr-tiktok.png" alt="抖音二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||||
|
<div class="qrcode-fallback">二维码</div>
|
||||||
|
</div>
|
||||||
|
<span class="qrcode-label">抖音</span>
|
||||||
|
</div>
|
||||||
|
<div class="qrcode-item">
|
||||||
|
<div class="qrcode-placeholder">
|
||||||
|
<img src="qr-shop.png" alt="商城二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||||||
|
<div class="qrcode-fallback">二维码</div>
|
||||||
|
</div>
|
||||||
|
<span class="qrcode-label">线上商城</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 底部版权区 -->
|
<!-- 底部版权区 -->
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<div class="footer-bottom-main">
|
<div class="footer-bottom-main">
|
||||||
<p class="footer-copyright">© 2025 Chookoo. <span data-i18n="footer_rights">All rights reserved.</span></p>
|
|
||||||
<div class="footer-social">
|
|
||||||
<a href="#" aria-label="WeChat">
|
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" aria-label="Weibo">
|
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.579-.18-.405-.649.381-.998.42-1.859.003-2.474-.785-1.159-2.924-1.095-5.399-.034 0 0-.773.335-.576-.272.383-1.217.324-2.236-.271-2.823-1.35-1.329-4.935.05-8.006 3.073C1.203 10.674 0 13.078 0 15.09c0 3.854 4.946 6.194 9.783 6.194 6.334 0 10.555-3.681 10.555-6.6 0-1.765-1.489-2.763-2.68-3.025h.001zm1.895-5.962c-.766-.847-1.896-1.217-3.036-1.109l.049-.003c.263-.03.49.168.512.436a.475.475 0 0 1-.428.516c-.842.09-1.651.509-2.219 1.261a.468.468 0 0 1-.656.09.473.473 0 0 1-.088-.662c.722-.958 1.773-1.505 2.871-1.623 1.427-.147 2.835.369 3.795 1.432.957 1.06 1.331 2.483 1.086 3.864a.47.47 0 0 1-.545.39.472.472 0 0 1-.386-.548c.195-1.1-.104-2.237-.865-3.08l-.09-.064zm.963-3.178c-1.262-1.396-3.123-1.999-4.998-1.662a.471.471 0 0 0 .165.927c1.513-.272 3.013.213 4.03 1.339 1.017 1.125 1.39 2.626 1.04 4.093a.473.473 0 0 0 .346.57.467.467 0 0 0 .568-.345c.425-1.78-.033-3.617-1.151-4.922z"/></svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" aria-label="Xiaohongshu">
|
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" aria-label="TikTok">
|
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer-legal">
|
<div class="footer-legal">
|
||||||
<a href="legal.html?page=privacy" data-i18n="footer_privacy">隐私政策</a>
|
<a href="legal.html?page=privacy" data-i18n="footer_privacy">隐私政策</a>
|
||||||
<a href="legal.html?page=terms" data-i18n="footer_terms">服务条款</a>
|
<a href="legal.html?page=terms" data-i18n="footer_terms">服务条款</a>
|
||||||
<a href="legal.html?page=cookies" data-i18n="footer_cookies">Cookie 设置</a>
|
<a href="legal.html?page=cookies" data-i18n="footer_cookies">Cookie 设置</a>
|
||||||
</div>
|
</div>
|
||||||
|
<p class="footer-copyright">© 2025 Chookoo. <span data-i18n="footer_rights">All rights reserved.</span></p>
|
||||||
</div>
|
</div>
|
||||||
<p class="beian-row">
|
<p class="beian-row">
|
||||||
<span data-i18n="footer_company_full">宠科智能科技(苏州)有限公司</span>
|
<span data-i18n="footer_company_full">宠科智能科技(苏州)有限公司</span>
|
||||||
@@ -3573,6 +3479,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
(() => {
|
(() => {
|
||||||
const translations = {
|
const translations = {
|
||||||
|
|||||||
+30
-1
@@ -22,8 +22,9 @@
|
|||||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
@@ -65,6 +66,7 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
|
width: 1000px;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
@@ -475,6 +477,33 @@
|
|||||||
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
(() => {
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// 页面类型
|
// 页面类型
|
||||||
const PAGE_TYPE = 'legal';
|
const PAGE_TYPE = 'legal';
|
||||||
|
|||||||
+30
-1
@@ -22,8 +22,9 @@
|
|||||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
@@ -65,6 +66,7 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
|
width: 1000px;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
@@ -476,6 +478,33 @@
|
|||||||
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
(() => {
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// 页面类型
|
// 页面类型
|
||||||
const PAGE_TYPE = 'partner';
|
const PAGE_TYPE = 'partner';
|
||||||
|
|||||||
+29
-1
@@ -22,8 +22,9 @@
|
|||||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
@@ -574,6 +575,33 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
(() => {
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// 产品数据库
|
// 产品数据库
|
||||||
const products = {
|
const products = {
|
||||||
|
|||||||
+28
-1
@@ -31,7 +31,8 @@
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
@@ -1157,6 +1158,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// 分类筛选功能
|
// 分类筛选功能
|
||||||
const categoryBtns = document.querySelectorAll('.category-btn');
|
const categoryBtns = document.querySelectorAll('.category-btn');
|
||||||
|
|||||||
+30
-1
@@ -23,7 +23,10 @@
|
|||||||
"Helvetica Neue", Arial, sans-serif;
|
"Helvetica Neue", Arial, sans-serif;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
min-width: 320px;
|
min-width: 1280px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
@@ -1133,6 +1136,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 视口缩放 - 基于1920px设计稿
|
||||||
|
const designWidth = 1920;
|
||||||
|
const minWidth = 1280;
|
||||||
|
const maxWidth = 2560;
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
const vw = window.innerWidth;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
if (vw < minWidth) {
|
||||||
|
scale = vw / minWidth;
|
||||||
|
} else if (vw > maxWidth) {
|
||||||
|
scale = vw / maxWidth;
|
||||||
|
} else {
|
||||||
|
scale = vw / designWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.style.transform = `scale(${scale})`;
|
||||||
|
document.body.style.width = `${designWidth}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
scale();
|
||||||
|
window.addEventListener('resize', scale);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// 社交媒体弹窗控制
|
// 社交媒体弹窗控制
|
||||||
const socialModal = document.getElementById('socialModal');
|
const socialModal = document.getElementById('socialModal');
|
||||||
|
|||||||
Reference in New Issue
Block a user