813 lines
50 KiB
HTML
813 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title data-i18n="title">海南荣刻科技有限公司 - 数据驱动 · AI赋能</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--primary: #2563eb;
|
|
--primary-dark: #1d4ed8;
|
|
--accent: #06b6d4;
|
|
--accent-glow: rgba(6,182,212,.35);
|
|
--bg: #ffffff;
|
|
--bg-alt: #f8fafc;
|
|
--bg-dark: #030712;
|
|
--bg-card: rgba(255,255,255,.8);
|
|
--text: #111827;
|
|
--text-muted: #64748b;
|
|
--text-light: #94a3b8;
|
|
--border: #e2e8f0;
|
|
--border-glow: rgba(37,99,235,.3);
|
|
--radius: 14px;
|
|
--shadow: 0 1px 3px rgba(0,0,0,.06);
|
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
|
|
--shadow-lg: 0 12px 40px -8px rgba(0,0,0,.12);
|
|
--max-width: 1200px;
|
|
}
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
|
color: var(--text); line-height: 1.7; background: var(--bg);
|
|
-webkit-font-smoothing: antialiased; overflow-x: hidden;
|
|
}
|
|
a { text-decoration: none; color: inherit; } ul { list-style: none; }
|
|
|
|
/* ======== Dot Grid Background ======== */
|
|
.dot-bg {
|
|
position: relative;
|
|
}
|
|
.dot-bg::before {
|
|
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
|
|
background-image: radial-gradient(circle, #cbd5e1 .8px, transparent .8px);
|
|
background-size: 28px 28px; opacity: .45;
|
|
}
|
|
.dot-bg > * { position: relative; z-index: 1; }
|
|
|
|
/* ======== Navbar ======== */
|
|
.navbar {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
|
background: rgba(255,255,255,.78); backdrop-filter: blur(16px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
|
border-bottom: 1px solid transparent; transition: all .35s ease;
|
|
}
|
|
.navbar.scrolled { border-bottom-color: rgba(0,0,0,.06); box-shadow: 0 1px 20px rgba(0,0,0,.05); }
|
|
.nav-inner {
|
|
max-width: var(--max-width); margin: 0 auto;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 24px; height: 68px;
|
|
}
|
|
.logo {
|
|
font-size: 1.4rem; font-weight: 800; letter-spacing: -.5px;
|
|
display: flex; align-items: center; gap: 10px; color: var(--text);
|
|
}
|
|
.nav-links { display: flex; gap: 34px; align-items: center; }
|
|
.nav-links a {
|
|
font-size: .95rem; font-weight: 550; color: var(--text-muted);
|
|
transition: color .2s; position: relative; letter-spacing: .02em;
|
|
}
|
|
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
|
|
.nav-cta {
|
|
padding: 9px 22px;
|
|
background: linear-gradient(135deg, var(--primary), #4f46e5);
|
|
color: #fff !important; border-radius: 10px; font-weight: 600;
|
|
transition: all .25s; box-shadow: 0 4px 14px rgba(37,99,235,.3);
|
|
}
|
|
.nav-cta:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px rgba(37,99,235,.45);
|
|
}
|
|
|
|
/* Language Switcher */
|
|
.lang-switch {
|
|
display: flex; align-items: center; gap: 0;
|
|
margin-left: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
|
|
}
|
|
.lang-btn {
|
|
padding: 5px 12px; font-size: .8rem; font-weight: 600; cursor: pointer;
|
|
border: none; background: transparent; color: var(--text-muted);
|
|
transition: all .2s; line-height: 1.4;
|
|
}
|
|
.lang-btn.active { background: var(--primary); color: #fff; }
|
|
.lang-btn:not(.active):hover { background: var(--bg-alt); color: var(--text); }
|
|
|
|
.menu-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
|
|
.menu-btn span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: all .3s; }
|
|
.menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
|
|
.menu-btn.open span:nth-child(2) { opacity: 0; }
|
|
.menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
|
|
|
|
/* ======== Sections ======== */
|
|
section { padding: 100px 24px; position: relative; }
|
|
.container { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 1; }
|
|
|
|
.section-tag {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
|
|
margin-bottom: 16px; color: var(--primary);
|
|
}
|
|
.section-tag::before {
|
|
content: ''; width: 24px; height: 2px; border-radius: 1px;
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|
}
|
|
.section-title { font-size: 2.8rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; letter-spacing: -.5px; }
|
|
.section-desc { font-size: 1.15rem; color: var(--text-muted); max-width: 620px; margin-bottom: 56px; }
|
|
|
|
/* ======== Hero ======== */
|
|
.hero {
|
|
min-height: 100vh; display: flex; align-items: center;
|
|
background: #030712;
|
|
position: relative; overflow: hidden; padding-top: 80px;
|
|
}
|
|
.hero::before {
|
|
content: ''; position: absolute; inset: 0; pointer-events: none;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 20% 30%, rgba(37,99,235,.18) 0%, transparent 60%),
|
|
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(6,182,212,.1) 0%, transparent 60%),
|
|
radial-gradient(circle at 50% 50%, rgba(79,70,229,.06) 0%, transparent 70%);
|
|
}
|
|
.hero-grid {
|
|
position: absolute; inset: 0; pointer-events: none; z-index: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 70%);
|
|
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 70%);
|
|
}
|
|
.hero .container {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
|
|
}
|
|
.hero-tag {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 6px 16px; background: rgba(37,99,235,.15);
|
|
border: 1px solid rgba(37,99,235,.25);
|
|
color: #60a5fa; border-radius: 24px; font-size: .82rem; font-weight: 600;
|
|
margin-bottom: 28px; letter-spacing: .03em;
|
|
}
|
|
.hero-tag .pulse {
|
|
width: 7px; height: 7px; border-radius: 50%; background: #22d3ee;
|
|
box-shadow: 0 0 8px #22d3ee; animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
|
|
.hero h1 {
|
|
font-size: 3.2rem; font-weight: 900; line-height: 1.15; letter-spacing: -1px;
|
|
margin-bottom: 22px; color: #f1f5f9;
|
|
}
|
|
.hero h1 .gradient-text {
|
|
background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 40%, #a78bfa 100%);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.hero p { font-size: 1.1rem; color: #94a3b8; margin-bottom: 40px; max-width: 480px; line-height: 1.75; }
|
|
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 14px 30px; border-radius: 12px; font-size: .95rem; font-weight: 600;
|
|
cursor: pointer; border: none; transition: all .3s; letter-spacing: .01em;
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #2563eb, #4f46e5);
|
|
color: #fff; box-shadow: 0 4px 20px rgba(37,99,235,.4);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 30px rgba(37,99,235,.55);
|
|
}
|
|
.btn-outline {
|
|
background: transparent; color: #cbd5e1;
|
|
border: 1px solid rgba(255,255,255,.2);
|
|
}
|
|
.btn-outline:hover {
|
|
border-color: rgba(255,255,255,.45);
|
|
background: rgba(255,255,255,.04); color: #f1f5f9;
|
|
}
|
|
.btn .arrow { transition: transform .25s; }
|
|
.btn:hover .arrow { transform: translateX(3px); }
|
|
|
|
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
|
|
.hero-card {
|
|
background: rgba(15,23,42,.7); backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255,255,255,.1);
|
|
border-radius: 20px; padding: 36px; width: 100%; max-width: 420px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,.4);
|
|
}
|
|
.hero-card-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
|
|
.hero-chip {
|
|
padding: 5px 14px; border-radius: 20px; font-size: .78rem; font-weight: 600;
|
|
background: rgba(37,99,235,.2); color: #93c5fd; border: 1px solid rgba(37,99,235,.3);
|
|
}
|
|
.hero-chip.green { background: rgba(6,182,212,.15); color: #67e8f9; border-color: rgba(6,182,212,.25); }
|
|
.hero-chip.purple { background: rgba(167,139,250,.15); color: #c4b5fd; border-color: rgba(167,139,250,.25); }
|
|
.hero-stat-row { display: flex; gap: 28px; }
|
|
.hero-stat h3 { font-size: 1.7rem; font-weight: 800; color: #f1f5f9; letter-spacing: -.5px; }
|
|
.hero-stat p { font-size: .78rem; color: #64748b; margin: 2px 0 0; }
|
|
|
|
/* ======== About ======== */
|
|
.about { background: var(--bg); }
|
|
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
|
|
.about-text p { color: var(--text-muted); margin-bottom: 18px; font-size: 1.08rem; line-height: 1.75; }
|
|
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
|
|
.about-stat {
|
|
padding: 20px 22px; border-radius: var(--radius);
|
|
border: 1px solid var(--border); position: relative; overflow: hidden;
|
|
background: var(--bg-alt);
|
|
transition: all .3s;
|
|
}
|
|
.about-stat:hover { border-color: var(--border-glow); box-shadow: 0 0 0 4px rgba(37,99,235,.06); }
|
|
.about-stat::after {
|
|
content: ''; position: absolute; top: -20px; right: -20px; width: 60px; height: 60px;
|
|
border-radius: 50%; background: rgba(37,99,235,.06); pointer-events: none;
|
|
}
|
|
.about-stat h3 { font-size: 1.9rem; font-weight: 800; color: var(--primary); letter-spacing: -.5px; }
|
|
.about-stat p { font-size: .84rem; margin: 4px 0 0; }
|
|
|
|
.about-visual {
|
|
position: relative; border-radius: 24px; padding: 44px;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #eef2ff 100%);
|
|
border: 1px solid rgba(37,99,235,.1); min-height: 380px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.about-visual::before {
|
|
content: ''; position: absolute; inset: 0; pointer-events: none;
|
|
background-image: radial-gradient(circle, rgba(37,99,235,.08) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
.about-visual-inner { text-align: center; position: relative; z-index: 1; }
|
|
.about-visual-inner h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); }
|
|
.about-visual-inner .sub { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }
|
|
.about-visual-inner .icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
|
|
.about-icon-box {
|
|
background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
|
|
border-radius: 14px; padding: 18px 14px; text-align: center;
|
|
border: 1px solid rgba(0,0,0,.06); transition: all .3s;
|
|
}
|
|
.about-icon-box:hover {
|
|
transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08);
|
|
border-color: rgba(37,99,235,.2);
|
|
}
|
|
.about-icon-box .icon { font-size: 1.8rem; margin-bottom: 6px; }
|
|
.about-icon-box span { font-size: .8rem; font-weight: 600; color: var(--text); }
|
|
|
|
/* ======== Services ======== */
|
|
.services { background: var(--bg-alt); }
|
|
.services .section-tag, .services .section-title, .services .section-desc {
|
|
text-align: center; margin-left: auto; margin-right: auto;
|
|
}
|
|
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
|
|
.service-card {
|
|
background: #fff; border-radius: var(--radius); padding: 34px 28px;
|
|
border: 1px solid var(--border); transition: all .35s;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.service-card::before {
|
|
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
|
|
opacity: 0; transition: opacity .35s;
|
|
}
|
|
.service-card:hover::before { opacity: 1; }
|
|
.service-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 16px 40px -10px rgba(37,99,235,.15);
|
|
border-color: rgba(37,99,235,.2);
|
|
}
|
|
.service-icon {
|
|
width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center;
|
|
justify-content: center; font-size: 1.4rem; margin-bottom: 20px;
|
|
}
|
|
.service-icon.blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb; }
|
|
.service-icon.cyan { background: linear-gradient(135deg, #ecfeff, #cffafe); color: #0891b2; }
|
|
.service-icon.purple { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #7c3aed; }
|
|
.service-icon.orange { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; }
|
|
.service-icon.teal { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); color: #0d9488; }
|
|
.service-icon.rose { background: linear-gradient(135deg, #fff1f2, #ffe4e6); color: #e11d48; }
|
|
.service-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }
|
|
.service-card p { font-size: .93rem; color: var(--text-muted); line-height: 1.7; }
|
|
|
|
/* ======== Advantages ======== */
|
|
.advantages { background: var(--bg); }
|
|
.advantages-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
|
|
.adv-card {
|
|
text-align: center; padding: 36px 22px; border-radius: var(--radius);
|
|
border: 1px solid transparent; transition: all .3s; position: relative;
|
|
}
|
|
.adv-card:hover {
|
|
border-color: var(--border); background: var(--bg-alt);
|
|
box-shadow: 0 8px 30px rgba(0,0,0,.06);
|
|
}
|
|
.adv-icon {
|
|
width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 18px;
|
|
display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
|
|
background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%);
|
|
box-shadow: 0 4px 14px rgba(37,99,235,.1);
|
|
}
|
|
.adv-card:nth-child(2) .adv-icon { background: linear-gradient(135deg, #ecfeff 0%, #e0e7ff 100%); }
|
|
.adv-card:nth-child(3) .adv-icon { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
|
|
.adv-card:nth-child(4) .adv-icon { background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%); }
|
|
.adv-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
|
|
.adv-card p { font-size: .9rem; color: var(--text-muted); line-height: 1.65; }
|
|
|
|
/* ======== Offices ======== */
|
|
.offices { background: var(--bg-alt); }
|
|
.offices .section-tag, .offices .section-title, .offices .section-desc {
|
|
text-align: center; margin-left: auto; margin-right: auto;
|
|
}
|
|
.offices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
|
|
.office-card {
|
|
background: #fff; border-radius: var(--radius); padding: 40px 34px;
|
|
border: 1px solid var(--border); transition: all .3s; position: relative; overflow: hidden;
|
|
}
|
|
.office-card::after {
|
|
content: ''; position: absolute; bottom: 0; right: 0; width: 120px; height: 120px;
|
|
border-radius: 50%; transform: translate(40px,40px); pointer-events: none;
|
|
background: rgba(37,99,235,.03); transition: all .4s;
|
|
}
|
|
.office-card:hover::after { transform: translate(20px,20px) scale(1.2); }
|
|
.office-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(37,99,235,.15); }
|
|
.office-card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
|
|
.city-dot { width: 10px; height: 10px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 8px rgba(37,99,235,.4); }
|
|
.city-dot.haikou { background: #0891b2; box-shadow: 0 0 8px rgba(8,145,178,.4); }
|
|
.office-card p { color: var(--text-muted); font-size: .98rem; margin-bottom: 20px; line-height: 1.7; }
|
|
.office-tags { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.office-tag {
|
|
padding: 5px 14px; background: var(--bg-alt); border-radius: 8px;
|
|
font-size: .78rem; color: var(--text-muted); font-weight: 500;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* ======== CTA ======== */
|
|
.cta {
|
|
text-align: center; background: var(--bg-dark); color: #fff;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.cta::before {
|
|
content: ''; position: absolute; inset: 0; pointer-events: none;
|
|
background:
|
|
radial-gradient(ellipse 50% 50% at 30% 20%, rgba(37,99,235,.12) 0%, transparent 60%),
|
|
radial-gradient(ellipse 40% 40% at 70% 80%, rgba(6,182,212,.08) 0%, transparent 60%);
|
|
}
|
|
.cta .section-tag { color: #60a5fa; }
|
|
.cta .section-tag::before { background: linear-gradient(90deg, #60a5fa, #22d3ee); }
|
|
.cta .section-title { color: #f1f5f9; }
|
|
.cta .section-desc { color: var(--text-light); margin-left: auto; margin-right: auto; }
|
|
.cta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
|
|
.cta-card {
|
|
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
|
|
border-radius: var(--radius); padding: 36px 24px; text-align: center;
|
|
transition: all .3s; backdrop-filter: blur(4px);
|
|
}
|
|
.cta-card:hover {
|
|
background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15);
|
|
transform: translateY(-3px);
|
|
}
|
|
.cta-card .cta-icon {
|
|
font-size: 2rem; margin-bottom: 16px;
|
|
width: 52px; height: 52px; border-radius: 14px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
}
|
|
.cta-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: #e2e8f0; }
|
|
.cta-card p { font-size: .86rem; color: var(--text-light); line-height: 1.6; }
|
|
.wechat-trigger { display: inline-block; cursor: pointer; }
|
|
.wechat-icon {
|
|
background: #07C160 !important;
|
|
box-shadow: 0 4px 14px rgba(7,193,96,.35) !important;
|
|
}
|
|
.contact-trigger { display: inline-block; cursor: pointer; }
|
|
.contact-detail {
|
|
opacity: 0; max-height: 0; overflow: hidden; margin-top: 0;
|
|
transition: all .35s ease;
|
|
}
|
|
.contact-trigger:hover ~ .contact-detail {
|
|
opacity: 1; max-height: 40px; margin-top: 12px;
|
|
}
|
|
.qr-wrapper {
|
|
margin-top: 16px; display: flex; justify-content: center;
|
|
opacity: 0; max-height: 0; overflow: hidden;
|
|
transition: all .35s ease;
|
|
}
|
|
.wechat-trigger:hover ~ .qr-wrapper {
|
|
opacity: 1; max-height: 160px;
|
|
}
|
|
.qr-img {
|
|
width: 130px; height: 130px; border-radius: 12px;
|
|
border: 2px solid rgba(255,255,255,.15); background: #fff; padding: 8px;
|
|
}
|
|
.qr-placeholder {
|
|
display: none; width: 130px; height: 130px; border-radius: 12px;
|
|
border: 2px dashed rgba(255,255,255,.2); align-items: center;
|
|
justify-content: center; text-align: center; font-size: .72rem;
|
|
color: var(--text-light); line-height: 1.5; flex-direction: column; gap: 4px;
|
|
}
|
|
.qr-placeholder span { font-size: .65rem; opacity: .6; }
|
|
|
|
/* ======== Footer ======== */
|
|
footer {
|
|
background: var(--bg-dark); border-top: 1px solid rgba(255,255,255,.06);
|
|
padding: 32px 24px; text-align: center; color: var(--text-light); font-size: .84rem;
|
|
}
|
|
|
|
/* ======== Responsive ======== */
|
|
@media (max-width: 1024px) {
|
|
.services-grid { grid-template-columns: repeat(2,1fr); }
|
|
.advantages-grid { grid-template-columns: repeat(2,1fr); }
|
|
.about-grid { grid-template-columns: 1fr; gap: 40px; }
|
|
.hero .container { grid-template-columns: 1fr; gap: 40px; }
|
|
.hero h1 { font-size: 2.5rem; }
|
|
.section-title { font-size: 2.1rem; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.nav-links { display: none; }
|
|
.nav-links.open {
|
|
display: flex; flex-direction: column; position: absolute;
|
|
top: 68px; left: 0; right: 0; background: rgba(255,255,255,.96);
|
|
backdrop-filter: blur(16px); padding: 20px 24px;
|
|
border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); gap: 16px;
|
|
}
|
|
.lang-switch { margin-left: auto; margin-right: 12px; }
|
|
.menu-btn { display: flex; }
|
|
.hero { min-height: auto; padding: 120px 24px 80px; }
|
|
.hero h1 { font-size: 2.1rem; }
|
|
.hero p { font-size: 1.02rem; }
|
|
.services-grid { grid-template-columns: 1fr; }
|
|
.advantages-grid { grid-template-columns: 1fr 1fr; }
|
|
.offices-grid { grid-template-columns: 1fr; }
|
|
.cta-grid { grid-template-columns: 1fr; }
|
|
.section-title { font-size: 1.75rem; }
|
|
section { padding: 64px 20px; }
|
|
.about-stats { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.hero h1 { font-size: 1.7rem; }
|
|
.hero-btns { flex-direction: column; }
|
|
.hero-btns .btn { width: 100%; justify-content: center; }
|
|
.advantages-grid { grid-template-columns: 1fr; }
|
|
.hero-stat-row { flex-direction: column; gap: 14px; }
|
|
.hero-card { padding: 24px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar" id="navbar">
|
|
<div class="nav-inner">
|
|
<a href="#" class="logo" data-i18n="logo">荣刻科技</a>
|
|
<div class="nav-links" id="navLinks">
|
|
<a href="#about" class="active" data-i18n="nav_about">关于我们</a>
|
|
<a href="#services" data-i18n="nav_services">业务范围</a>
|
|
<a href="#advantages" data-i18n="nav_advantages">核心优势</a>
|
|
<a href="#offices" data-i18n="nav_offices">办公场地</a>
|
|
<a href="#contact" class="nav-cta" data-i18n="nav_contact">合作咨询</a>
|
|
<div class="lang-switch" id="langSwitch">
|
|
<button class="lang-btn active" data-lang="zh">中</button>
|
|
<button class="lang-btn" data-lang="en">EN</button>
|
|
</div>
|
|
</div>
|
|
<div class="menu-btn" id="menuBtn">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero" id="home">
|
|
<div class="hero-grid"></div>
|
|
<div class="container">
|
|
<div>
|
|
<div class="hero-tag"><span class="pulse"></span> <span data-i18n="hero_tag">AI + Data 技术驱动</span></div>
|
|
<h1><span data-i18n="hero_line1">数据为基</span> <span class="gradient-text" data-i18n="hero_line2">AI赋能</span><br><span data-i18n="hero_line3">助力企业智能化升级</span></h1>
|
|
<p data-i18n="hero_desc">深耕数据治理与人工智能领域，为企业提供从数据加工到AI落地的全链路解决方案，以技术实力驱动业务价值增长。</p>
|
|
<div class="hero-btns">
|
|
<a href="#contact" class="btn btn-primary">
|
|
<span data-i18n="hero_btn1">立即咨询合作</span> <span class="arrow">→</span>
|
|
</a>
|
|
<a href="#services" class="btn btn-outline" data-i18n="hero_btn2">了解业务详情</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="hero-card">
|
|
<div class="hero-card-row">
|
|
<span class="hero-chip" data-i18n="hero_chip1">智能对话</span>
|
|
<span class="hero-chip green" data-i18n="hero_chip2">企业客服</span>
|
|
<span class="hero-chip purple" data-i18n="hero_chip3">AI音频</span>
|
|
</div>
|
|
<div class="hero-stat-row">
|
|
<div class="hero-stat"><h3>30+</h3><p data-i18n="hero_stat1">交付项目</p></div>
|
|
<div class="hero-stat"><h3>10+</h3><p data-i18n="hero_stat2">服务客户</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About -->
|
|
<section class="about dot-bg" id="about">
|
|
<div class="container">
|
|
<div class="about-grid">
|
|
<div class="about-text">
|
|
<span class="section-tag" data-i18n="about_tag">关于我们</span>
|
|
<h2 class="section-title"><span data-i18n="about_title1">深厚技术底蕴</span><br><span data-i18n="about_title2">拥抱AI新时代</span></h2>
|
|
<p data-i18n="about_p1">公司早年深耕数据治理与数据加工处理领域，积攒了深厚的数据技术功底。近两年乘着人工智能技术发展趋势，全力拓展AI相关业务板块，形成了数据与AI双轮驱动的业务格局。</p>
|
|
<p data-i18n="about_p2">核心团队不少来自清北复交等国内顶尖名校，也汇聚了国内外一线互联网大厂资深从业者，研发实力与项目实战经验充足。目前公司在成都、海口均设有办公场地，运营与项目服务体系完善。</p>
|
|
<div class="about-stats">
|
|
<div class="about-stat"><h3>7年</h3><p data-i18n="about_stat1">数据领域深耕</p></div>
|
|
<div class="about-stat"><h3>2年</h3><p data-i18n="about_stat2">AI业务高速增长</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="about-visual">
|
|
<div class="about-visual-inner">
|
|
<h3 data-i18n="about_visual_title">核心技术能力</h3>
|
|
<p class="sub" data-i18n="about_visual_sub">数据 + AI 全链路覆盖</p>
|
|
<div class="icon-grid">
|
|
<div class="about-icon-box"><div class="icon">🗄️</div><span data-i18n="about_icon1">数据治理</span></div>
|
|
<div class="about-icon-box"><div class="icon">🧠</div><span data-i18n="about_icon2">AI大模型</span></div>
|
|
<div class="about-icon-box"><div class="icon">⚙️</div><span data-i18n="about_icon3">模型优化</span></div>
|
|
<div class="about-icon-box"><div class="icon">🚀</div><span data-i18n="about_icon4">私有部署</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services -->
|
|
<section class="services dot-bg" id="services">
|
|
<div class="container">
|
|
<span class="section-tag" data-i18n="services_tag">业务范围</span>
|
|
<h2 class="section-title" data-i18n="services_title">全方位AI解决方案</h2>
|
|
<p class="section-desc" data-i18n="services_desc">从标准化AI产品到定制化开发，我们提供覆盖智能对话、音频生成、模型优化与私有部署的一站式服务。</p>
|
|
<div class="services-grid">
|
|
<div class="service-card"><div class="service-icon blue">💬</div><h3 data-i18n="srv1_title">智能对话助手</h3><p data-i18n="srv1_desc">基于大语言模型构建智能对话系统，支持多轮交互、知识库问答、情感识别，可广泛应用于客服、办公、教育等场景。</p></div>
|
|
<div class="service-card"><div class="service-icon cyan">🎧</div><h3 data-i18n="srv2_title">企业智能客服</h3><p data-i18n="srv2_desc">为企业量身打造AI客服解决方案，覆盖售前咨询、售后支持、工单处理全流程，显著降低人力成本，提升客户满意度。</p></div>
|
|
<div class="service-card"><div class="service-icon purple">🎵</div><h3 data-i18n="srv3_title">AI音频生成</h3><p data-i18n="srv3_desc">利用先进的语音合成与音频生成技术，支持多语种、多风格的语音内容产出，适用配音、播报、数字人等多元场景。</p></div>
|
|
<div class="service-card"><div class="service-icon orange">🔧</div><h3 data-i18n="srv4_title">垂类模型优化</h3><p data-i18n="srv4_desc">针对金融、医疗、法律、制造等行业场景进行模型微调与优化，让通用大模型真正适配垂直业务需求。</p></div>
|
|
<div class="service-card"><div class="service-icon teal">📊</div><h3 data-i18n="srv5_title">企业业务智能升级</h3><p data-i18n="srv5_desc">将AI能力深度融入企业现有业务流程，实现数据驱动的智能决策、自动化运营与业务创新，加速数字化转型。</p></div>
|
|
<div class="service-card"><div class="service-icon rose">🔒</div><h3 data-i18n="srv6_title">模型私有化部署</h3><p data-i18n="srv6_desc">提供安全可靠的模型私有化部署方案，确保企业核心数据不出域，满足金融、政务等高标准合规要求。</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Advantages -->
|
|
<section class="advantages" id="advantages">
|
|
<div class="container">
|
|
<span class="section-tag" data-i18n="adv_tag">核心优势</span>
|
|
<h2 class="section-title" data-i18n="adv_title">为什么选择我们</h2>
|
|
<p class="section-desc" data-i18n="adv_desc">多年的技术积累与项目经验，铸就了我们的核心竞争力。</p>
|
|
<div class="advantages-grid">
|
|
<div class="adv-card"><div class="adv-icon">🎓</div><h3 data-i18n="adv1_title">顶尖团队背景</h3><p data-i18n="adv1_desc">核心成员来自清北复交等名校及一线互联网大厂，研发实力与项目经验兼备。</p></div>
|
|
<div class="adv-card"><div class="adv-icon">📦</div><h3 data-i18n="adv2_title">数据技术功底</h3><p data-i18n="adv2_desc">丰富的数据治理与加工处理经验，为AI应用奠定坚实的数据底座。</p></div>
|
|
<div class="adv-card"><div class="adv-icon">🤝</div><h3 data-i18n="adv3_title">灵活合作模式</h3><p data-i18n="adv3_desc">不限行业方向，积极把握各类合作契机，保质保量完成项目落地。</p></div>
|
|
<div class="adv-card"><div class="adv-icon">🏢</div><h3 data-i18n="adv4_title">完善服务体系</h3><p data-i18n="adv4_desc">成都、海口双城布局，运营与项目服务体系成熟，响应及时高效。</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Offices -->
|
|
<section class="offices dot-bg" id="offices">
|
|
<div class="container">
|
|
<span class="section-tag" data-i18n="offices_tag">办公场地</span>
|
|
<h2 class="section-title" data-i18n="offices_title">双城协同 · 服务全国</h2>
|
|
<p class="section-desc" data-i18n="offices_desc">成都与海口两地办公，运营体系成熟完善，高效响应全国客户需求。</p>
|
|
<div class="offices-grid">
|
|
<div class="office-card">
|
|
<h3><span class="city-dot"></span><span data-i18n="office1_title">成都 · 研发中心</span></h3>
|
|
<p data-i18n="office1_desc">技术研发与项目交付核心基地，汇聚主力研发团队，承担AI产品研发、模型训练及项目实施工作。</p>
|
|
<div class="office-tags">
|
|
<span class="office-tag" data-i18n="office1_tag1">研发总部</span>
|
|
<span class="office-tag" data-i18n="office1_tag2">项目交付</span>
|
|
<span class="office-tag" data-i18n="office1_tag3">技术支撑</span>
|
|
</div>
|
|
</div>
|
|
<div class="office-card">
|
|
<h3><span class="city-dot haikou"></span><span data-i18n="office2_title">海口 · 运营中心</span></h3>
|
|
<p data-i18n="office2_desc">商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务对接。</p>
|
|
<div class="office-tags">
|
|
<span class="office-tag" data-i18n="office2_tag1">商务运营</span>
|
|
<span class="office-tag" data-i18n="office2_tag2">客户服务</span>
|
|
<span class="office-tag" data-i18n="office2_tag3">华南区域</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA / Contact -->
|
|
<section class="cta" id="contact">
|
|
<div class="container">
|
|
<span class="section-tag" data-i18n="cta_tag">合作咨询</span>
|
|
<h2 class="section-title" data-i18n="cta_title">携手共建智能未来</h2>
|
|
<div class="cta-grid">
|
|
<div class="cta-card">
|
|
<div class="contact-trigger"><div class="cta-icon">📞</div></div>
|
|
<h3 data-i18n="cta1_title">电话沟通</h3>
|
|
<p data-i18n="cta1_desc">欢迎来电详谈合作细节</p>
|
|
<div class="contact-detail" style="color:#60a5fa;font-size:1.05rem;font-weight:700;">+86 18482223118</div>
|
|
</div>
|
|
<div class="cta-card">
|
|
<div class="wechat-trigger">
|
|
<div class="cta-icon wechat-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
</div>
|
|
</div>
|
|
<h3 data-i18n="cta2_title">微信联系</h3>
|
|
<p data-i18n="cta2_desc">欢迎添加微信沟通</p>
|
|
<div class="qr-wrapper">
|
|
<img class="qr-img" src="qrcode.png" alt="微信二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
|
|
<div class="qr-placeholder" data-i18n="qr_placeholder">二维码图片<br><span data-i18n="qr_hint">将 qrcode.png 放入项目文件夹</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cta-card">
|
|
<div class="contact-trigger"><div class="cta-icon">📧</div></div>
|
|
<h3 data-i18n="cta3_title">邮件咨询</h3>
|
|
<p data-i18n="cta3_desc">发送您的需求至对接人邮箱，我们将在24小时内与您取得联系。</p>
|
|
<div class="contact-detail" style="color:#60a5fa;font-size:1.05rem;font-weight:700;">chermack@163.com</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<p data-i18n="footer">© 2024 海南荣刻科技有限公司. 成都 · 海口 | 数据驱动 · AI赋能</p>
|
|
</footer>
|
|
|
|
<script>
|
|
(function(){
|
|
// ---- i18n Data ----
|
|
const i18n = {
|
|
zh: {
|
|
title: "海南荣刻科技有限公司 - 数据驱动 · AI赋能",
|
|
logo: "荣刻科技",
|
|
nav_about: "关于我们", nav_services: "业务范围", nav_advantages: "核心优势", nav_offices: "办公场地", nav_contact: "合作咨询",
|
|
hero_tag: "AI + Data 技术驱动",
|
|
hero_line1: "数据为基", hero_line2: "AI赋能", hero_line3: "助力企业智能化升级",
|
|
hero_desc: "深耕数据治理与人工智能领域，为企业提供从数据加工到AI落地的全链路解决方案，以技术实力驱动业务价值增长。",
|
|
hero_btn1: "立即咨询合作", hero_btn2: "了解业务详情",
|
|
hero_chip1: "智能对话", hero_chip2: "企业客服", hero_chip3: "AI音频",
|
|
hero_stat1: "交付项目", hero_stat2: "服务客户",
|
|
about_tag: "关于我们",
|
|
about_title1: "深厚技术底蕴", about_title2: "拥抱AI新时代",
|
|
about_p1: "公司早年深耕数据治理与数据加工处理领域，积攒了深厚的数据技术功底。近两年乘着人工智能技术发展趋势，全力拓展AI相关业务板块，形成了数据与AI双轮驱动的业务格局。",
|
|
about_p2: "核心团队不少来自清北复交等国内顶尖名校，也汇聚了国内外一线互联网大厂资深从业者，研发实力与项目实战经验充足。目前公司在成都、海口均设有办公场地，运营与项目服务体系完善。",
|
|
about_stat1: "数据领域深耕", about_stat2: "AI业务高速增长",
|
|
about_visual_title: "核心技术能力", about_visual_sub: "数据 + AI 全链路覆盖",
|
|
about_icon1: "数据治理", about_icon2: "AI大模型", about_icon3: "模型优化", about_icon4: "私有部署",
|
|
services_tag: "业务范围",
|
|
services_title: "全方位AI解决方案",
|
|
services_desc: "从标准化AI产品到定制化开发，我们提供覆盖智能对话、音频生成、模型优化与私有部署的一站式服务。",
|
|
srv1_title: "智能对话助手", srv1_desc: "基于大语言模型构建智能对话系统，支持多轮交互、知识库问答、情感识别，可广泛应用于客服、办公、教育等场景。",
|
|
srv2_title: "企业智能客服", srv2_desc: "为企业量身打造AI客服解决方案，覆盖售前咨询、售后支持、工单处理全流程，显著降低人力成本，提升客户满意度。",
|
|
srv3_title: "AI音频生成", srv3_desc: "利用先进的语音合成与音频生成技术，支持多语种、多风格的语音内容产出，适用配音、播报、数字人等多元场景。",
|
|
srv4_title: "垂类模型优化", srv4_desc: "针对金融、医疗、法律、制造等行业场景进行模型微调与优化，让通用大模型真正适配垂直业务需求。",
|
|
srv5_title: "企业业务智能升级", srv5_desc: "将AI能力深度融入企业现有业务流程，实现数据驱动的智能决策、自动化运营与业务创新，加速数字化转型。",
|
|
srv6_title: "模型私有化部署", srv6_desc: "提供安全可靠的模型私有化部署方案，确保企业核心数据不出域，满足金融、政务等高标准合规要求。",
|
|
adv_tag: "核心优势",
|
|
adv_title: "为什么选择我们",
|
|
adv_desc: "多年的技术积累与项目经验，铸就了我们的核心竞争力。",
|
|
adv1_title: "顶尖团队背景", adv1_desc: "核心成员来自清北复交等名校及一线互联网大厂，研发实力与项目经验兼备。",
|
|
adv2_title: "数据技术功底", adv2_desc: "丰富的数据治理与加工处理经验，为AI应用奠定坚实的数据底座。",
|
|
adv3_title: "灵活合作模式", adv3_desc: "不限行业方向，积极把握各类合作契机，保质保量完成项目落地。",
|
|
adv4_title: "完善服务体系", adv4_desc: "成都、海口双城布局，运营与项目服务体系成熟，响应及时高效。",
|
|
offices_tag: "办公场地",
|
|
offices_title: "双城协同 · 服务全国",
|
|
offices_desc: "成都与海口两地办公，运营体系成熟完善，高效响应全国客户需求。",
|
|
office1_title: "成都 · 研发中心", office1_desc: "技术研发与项目交付核心基地，汇聚主力研发团队，承担AI产品研发、模型训练及项目实施工作。",
|
|
office1_tag1: "研发总部", office1_tag2: "项目交付", office1_tag3: "技术支撑",
|
|
office2_title: "海口 · 运营中心", office2_desc: "商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务对接。",
|
|
office2_tag1: "商务运营", office2_tag2: "客户服务", office2_tag3: "华南区域",
|
|
cta_tag: "合作咨询",
|
|
cta_title: "携手共建智能未来",
|
|
cta1_title: "电话沟通", cta1_desc: "欢迎来电详谈合作细节",
|
|
cta2_title: "微信联系", cta2_desc: "欢迎添加微信沟通",
|
|
cta3_title: "邮件咨询", cta3_desc: "发送您的需求至对接人邮箱，我们将在24小时内与您取得联系。",
|
|
qr_placeholder: "二维码图片<br><span>将 qrcode.png 放入项目文件夹</span>",
|
|
footer: "© 2024 海南荣刻科技有限公司. 成都 · 海口 | 数据驱动 · AI赋能"
|
|
},
|
|
en: {
|
|
title: "Hainan Rongke Technology Co., Ltd. - Data-Driven · AI-Powered",
|
|
logo: "Rongke Tech",
|
|
nav_about: "About", nav_services: "Services", nav_advantages: "Advantages", nav_offices: "Offices", nav_contact: "Contact",
|
|
hero_tag: "AI + Data Driven",
|
|
hero_line1: "Data as Foundation,", hero_line2: "AI as Engine", hero_line3: "Empowering Intelligent Transformation",
|
|
hero_desc: "Deeply rooted in data governance and AI, we deliver end-to-end solutions from data processing to AI deployment, driving business value through technical excellence.",
|
|
hero_btn1: "Get in Touch", hero_btn2: "Explore Services",
|
|
hero_chip1: "Conversational AI", hero_chip2: "Customer Service", hero_chip3: "AI Audio",
|
|
hero_stat1: "Projects Delivered", hero_stat2: "Clients Served",
|
|
about_tag: "About Us",
|
|
about_title1: "Deep Technical Heritage,", about_title2: "Embracing the AI Era",
|
|
about_p1: "With years of expertise in data governance and data processing, the company has built a solid technical foundation. Over the past two years, riding the wave of AI advancement, we have aggressively expanded into AI-related business, forming a dual-engine strategy driven by both data and artificial intelligence.",
|
|
about_p2: "Our core team includes graduates from top-tier Chinese universities such as Tsinghua and Peking University, as well as seasoned professionals from leading global internet companies. We operate offices in both Chengdu and Haikou, with a mature operations and project delivery system.",
|
|
about_stat1: "Years in Data", about_stat2: "Years in AI Growth",
|
|
about_visual_title: "Core Capabilities", about_visual_sub: "Full-chain Data + AI Coverage",
|
|
about_icon1: "Data Governance", about_icon2: "LLM & AI", about_icon3: "Model Tuning", about_icon4: "Private Deploy",
|
|
services_tag: "Services",
|
|
services_title: "Comprehensive AI Solutions",
|
|
services_desc: "From standardized AI products to custom development, we offer one-stop services covering conversational AI, audio generation, model optimization, and private deployment.",
|
|
srv1_title: "Conversational AI Assistant", srv1_desc: "Build intelligent dialogue systems based on large language models, supporting multi-turn interaction, knowledge-base Q&A, and sentiment analysis for customer service, office, and education scenarios.",
|
|
srv2_title: "Enterprise Customer Service", srv2_desc: "Tailored AI customer service solutions covering pre-sales consulting, after-sales support, and ticket management — significantly reducing labor costs and improving customer satisfaction.",
|
|
srv3_title: "AI Audio Generation", srv3_desc: "Leveraging advanced speech synthesis and audio generation technology to produce multi-language, multi-style voice content for dubbing, broadcasting, and digital human applications.",
|
|
srv4_title: "Vertical Model Optimization", srv4_desc: "Fine-tuning and optimizing models for finance, healthcare, legal, manufacturing, and other industry scenarios, ensuring general-purpose LLMs truly meet vertical business requirements.",
|
|
srv5_title: "Enterprise AI Transformation", srv5_desc: "Deeply integrating AI capabilities into existing business processes for data-driven intelligent decision-making, automated operations, and business innovation.",
|
|
srv6_title: "Private Model Deployment", srv6_desc: "Secure and reliable on-premises model deployment solutions, ensuring core enterprise data never leaves your domain — meeting the highest compliance standards for finance and government.",
|
|
adv_tag: "Advantages",
|
|
adv_title: "Why Choose Us",
|
|
adv_desc: "Years of technical expertise and project experience form the foundation of our competitive edge.",
|
|
adv1_title: "Elite Team", adv1_desc: "Core members from top universities and leading internet companies — combining world-class R&D capability with extensive hands-on experience.",
|
|
adv2_title: "Data Expertise", adv2_desc: "Rich experience in data governance and processing provides a solid data foundation for AI applications.",
|
|
adv3_title: "Flexible Partnership", adv3_desc: "Industry-agnostic — we actively embrace collaboration opportunities across all sectors and deliver quality results.",
|
|
adv4_title: "Full Service Coverage", adv4_desc: "Dual-city presence in Chengdu and Haikou with mature operations, ensuring timely and efficient service nationwide.",
|
|
offices_tag: "Offices",
|
|
offices_title: "Dual Cities · Nationwide Service",
|
|
offices_desc: "With offices in Chengdu and Haikou, our operations system is mature and responsive to client needs across the country.",
|
|
office1_title: "Chengdu · R&D Center", office1_desc: "Core base for technology R&D and project delivery, housing our main engineering team responsible for AI product development, model training, and project implementation.",
|
|
office1_tag1: "R&D HQ", office1_tag2: "Delivery", office1_tag3: "Tech Support",
|
|
office2_title: "Haikou · Operations Center", office2_desc: "Business operations and customer service hub, responsible for market expansion, project operations management, and client services in Southern China.",
|
|
office2_tag1: "Operations", office2_tag2: "Client Service", office2_tag3: "South China",
|
|
cta_tag: "Contact Us",
|
|
cta_title: "Building an Intelligent Future Together",
|
|
cta1_title: "Phone", cta1_desc: "Call us to discuss collaboration details",
|
|
cta2_title: "WeChat", cta2_desc: "Add us on WeChat",
|
|
cta3_title: "Email", cta3_desc: "Send your inquiry and we will get back to you within 24 hours.",
|
|
qr_placeholder: "QR Code<br><span>Place qrcode.png in project folder</span>",
|
|
footer: "© 2024 Hainan Rongke Technology Co., Ltd. Chengdu · Haikou | Data-Driven · AI-Powered"
|
|
}
|
|
};
|
|
|
|
// ---- Apply language ----
|
|
function applyLang(lang) {
|
|
document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
|
|
document.querySelectorAll('[data-i18n]').forEach(function(el){
|
|
var key = el.getAttribute('data-i18n');
|
|
if (i18n[lang] && i18n[lang][key]) {
|
|
if (el.tagName === 'TITLE') {
|
|
document.title = i18n[lang][key];
|
|
} else if (key === 'qr_placeholder') {
|
|
el.innerHTML = i18n[lang][key];
|
|
} else {
|
|
el.textContent = i18n[lang][key];
|
|
}
|
|
}
|
|
});
|
|
// Update lang buttons
|
|
document.querySelectorAll('.lang-btn').forEach(function(btn){
|
|
btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
|
|
});
|
|
localStorage.setItem('site_lang', lang);
|
|
}
|
|
|
|
// ---- Language switch buttons ----
|
|
document.getElementById('langSwitch').addEventListener('click', function(e){
|
|
var btn = e.target.closest('.lang-btn');
|
|
if (!btn) return;
|
|
applyLang(btn.getAttribute('data-lang'));
|
|
});
|
|
|
|
// ---- Init language ----
|
|
var savedLang = localStorage.getItem('site_lang') || 'zh';
|
|
applyLang(savedLang);
|
|
|
|
// ---- Navbar scroll effect ----
|
|
const navbar = document.getElementById('navbar');
|
|
window.addEventListener('scroll', function(){
|
|
navbar.classList.toggle('scrolled', window.scrollY > 50);
|
|
});
|
|
|
|
// ---- Mobile menu toggle ----
|
|
const menuBtn = document.getElementById('menuBtn');
|
|
const navLinks = document.getElementById('navLinks');
|
|
menuBtn.addEventListener('click', function(){
|
|
menuBtn.classList.toggle('open');
|
|
navLinks.classList.toggle('open');
|
|
});
|
|
|
|
navLinks.querySelectorAll('a').forEach(function(link){
|
|
link.addEventListener('click', function(){
|
|
menuBtn.classList.remove('open');
|
|
navLinks.classList.remove('open');
|
|
});
|
|
});
|
|
|
|
// ---- Active nav link highlighting ----
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navAs = navLinks.querySelectorAll('a[href^="#"]');
|
|
window.addEventListener('scroll', function(){
|
|
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
|
|
sections.forEach(function(section){
|
|
var sectionTop = section.offsetTop - 100;
|
|
var sectionBottom = sectionTop + section.offsetHeight;
|
|
if (scrollY >= sectionTop && scrollY < sectionBottom) {
|
|
navAs.forEach(function(a){
|
|
a.classList.toggle('active', a.getAttribute('href') === '#' + section.id);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|