2614 lines
90 KiB
Plaintext
Executable File
2614 lines
90 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>愉悦查 - 让信任无处不在，让合作没有距离 | AI 驱动的商业信任科技平台</title>
|
||
<meta name="description" content="愉悦查是 AI 驱动的商业信任科技平台，提供个人大数据报告、婚恋风险报告、入职背调报告等 6 大标准报告，支持 AI 智能定制报告。200+ 数据接口，秒级响应，让信任无处不在。">
|
||
<meta name="keywords" content="愉悦查，背调报告，信用查询，风险评估，AI 定制报告，婚恋风险，入职背调，小微企业报告">
|
||
|
||
<!-- 预加载字体 -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ===== CSS Variables - 品牌色定义 ===== */
|
||
:root {
|
||
/* 品牌主色 - 橙色系 (来自蓝湖设计稿) */
|
||
--primary-orange: #FF6A19;
|
||
--primary-orange-light: #FC6E18;
|
||
--primary-orange-dark: #E64E10;
|
||
--primary-gradient: linear-gradient(135deg, #FF6A19 0%, #FC6E18 100%);
|
||
--primary-orange-soft: #FFDECC;
|
||
|
||
/* 辅助色 */
|
||
--bg-light: #FFFFFF;
|
||
--bg-gray: #F5F7FA;
|
||
--bg-gray-light: #E4E7E0;
|
||
|
||
/* 文字色 */
|
||
--text-primary: #1A1A1A;
|
||
--text-secondary: #666666;
|
||
--text-light: #999999;
|
||
|
||
/* 功能色 */
|
||
--success: #07C160;
|
||
--warning: #FF9500;
|
||
--error: #FF3B30;
|
||
|
||
/* 间距 */
|
||
--spacing-xs: 8px;
|
||
--spacing-sm: 16px;
|
||
--spacing-md: 24px;
|
||
--spacing-lg: 48px;
|
||
--spacing-xl: 80px;
|
||
|
||
/* 圆角 */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 16px;
|
||
--radius-xl: 24px;
|
||
|
||
/* 阴影 */
|
||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
|
||
--shadow-md: 0 4px 16px rgba(0,0,0,0.12);
|
||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
|
||
|
||
/* 过渡 */
|
||
--transition: all 0.3s ease;
|
||
}
|
||
|
||
/* ===== Reset & Base ===== */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
color: var(--text-primary);
|
||
background-color: var(--bg-light);
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 var(--spacing-md);
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 14px 32px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
border: none;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(236, 77, 9, 0.3);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(236, 77, 9, 0.4);
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
border: 2px solid var(--primary-orange);
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(255, 106, 25, 0.3);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(255, 106, 25, 0.4);
|
||
}
|
||
|
||
.section {
|
||
padding: var(--spacing-xl) 0;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.section-subtitle {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
/* ===== Navigation ===== */
|
||
/* ===== Navigation ===== */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
|
||
z-index: 1000;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.navbar.scrolled {
|
||
box-shadow: 0 4px 30px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
.navbar .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 80px;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
text-decoration: none;
|
||
background: transparent;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.logo-img {
|
||
background: rgba(255,255,255,0.95);
|
||
height: 60px;
|
||
width: auto;
|
||
object-fit: contain;
|
||
transition: var(--transition);
|
||
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
text-decoration: none;
|
||
padding: 6px 0;
|
||
}
|
||
|
||
.logo-img {
|
||
background: rgba(255,255,255,0.95);
|
||
height: 60px;
|
||
width: auto;
|
||
object-fit: contain;
|
||
transition: var(--transition);
|
||
|
||
}
|
||
|
||
.logo:hover .logo-img {
|
||
background: rgba(255,255,255,0.95);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.nav-menu {
|
||
display: flex;
|
||
gap: var(--spacing-lg);
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-link {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
transition: var(--transition);
|
||
position: relative;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--primary-orange);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-link:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-cta {
|
||
display: flex;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Mobile Menu */
|
||
.menu-toggle {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
padding: 5px;
|
||
}
|
||
|
||
.menu-toggle span {
|
||
width: 25px;
|
||
height: 3px;
|
||
background: var(--primary-orange);
|
||
border-radius: 2px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
/* ===== Hero Section ===== */
|
||
.hero {
|
||
padding-top: 160px;
|
||
padding-bottom: 100px;
|
||
background: linear-gradient(135deg, #FFF5F0 0%, #FFFFFF 50%, #F5F7FA 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -20%;
|
||
width: 80%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(236, 77, 9, 0.05) 0%, transparent 70%);
|
||
animation: float 20s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||
50% { transform: translateY(-20px) rotate(5deg); }
|
||
}
|
||
|
||
.hero-content {
|
||
text-align: center;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-block;
|
||
padding: 8px 16px;
|
||
background: linear-gradient(135deg, rgba(255, 106, 25, 0.1), rgba(252, 110, 24, 0.15));
|
||
color: var(--primary-orange);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border-radius: 20px;
|
||
margin-bottom: var(--spacing-md);
|
||
border: 1px solid rgba(255, 106, 25, 0.2);
|
||
animation: pulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.02); }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 56px;
|
||
font-weight: 900;
|
||
line-height: 1.2;
|
||
margin-bottom: var(--spacing-sm);
|
||
background: linear-gradient(135deg, #FF6A19 0%, #FC6E18 50%, #FF8A5C 100%);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
animation: gradientShift 3s ease infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0%, 100% { background-position: 0% center; }
|
||
50% { background-position: 100% center; }
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 20px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--spacing-lg);
|
||
margin-top: var(--spacing-lg);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
background: var(--primary-gradient);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--spacing-sm);
|
||
margin-top: var(--spacing-lg);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ===== Trust Bar ===== */
|
||
.trust-bar {
|
||
padding: var(--spacing-lg) 0;
|
||
background: var(--bg-gray);
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.trust-bar p {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.trust-logos {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: var(--spacing-lg);
|
||
flex-wrap: wrap;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.trust-logo {
|
||
height: 40px;
|
||
filter: grayscale(100%);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.trust-logo:hover {
|
||
filter: grayscale(0%);
|
||
}
|
||
|
||
/* ===== Features Section ===== */
|
||
.features {
|
||
background: var(--bg-light);
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.feature-card {
|
||
text-align: center;
|
||
padding: var(--spacing-lg) var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.feature-card:hover {
|
||
background: var(--bg-gray);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto var(--spacing-sm);
|
||
background: var(--primary-gradient);
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ===== Products Section ===== */
|
||
.products {
|
||
background: var(--bg-gray);
|
||
}
|
||
|
||
.products-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-md);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.product-card {
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: var(--transition);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.product-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--primary-gradient);
|
||
}
|
||
|
||
.product-card:hover {
|
||
transform: translateY(-12px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.product-card:hover .product-icon {
|
||
transform: scale(1.1) rotate(5deg);
|
||
}
|
||
|
||
.product-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: var(--primary-gradient);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36px;
|
||
margin-bottom: var(--spacing-sm);
|
||
box-shadow: 0 4px 16px rgba(255, 106, 25, 0.3);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--primary-orange);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.product-price span {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.product-features {
|
||
margin: var(--spacing-sm) 0;
|
||
padding: var(--spacing-sm) 0;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.product-features li {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
padding: 4px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.product-features li::before {
|
||
content: '✓';
|
||
color: var(--success);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* AI Custom Product */
|
||
.product-ai {
|
||
grid-column: 1 / -1;
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
padding: var(--spacing-xl);
|
||
border-radius: var(--radius-xl);
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.product-ai::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -10%;
|
||
width: 50%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||
animation: float 15s ease-in-out infinite reverse;
|
||
}
|
||
|
||
.product-ai h3 {
|
||
font-size: 32px;
|
||
margin-bottom: var(--spacing-sm);
|
||
position: relative;
|
||
}
|
||
|
||
.product-ai p {
|
||
font-size: 18px;
|
||
opacity: 0.95;
|
||
margin-bottom: var(--spacing-md);
|
||
position: relative;
|
||
}
|
||
|
||
.product-ai .btn {
|
||
background: white;
|
||
color: var(--primary-orange);
|
||
position: relative;
|
||
}
|
||
|
||
/* ===== Technology Section ===== */
|
||
/* ===== Sample Reports Section ===== */
|
||
.sample-reports {
|
||
background: var(--bg-gray);
|
||
}
|
||
|
||
.sample-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.sample-card {
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: var(--transition);
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sample-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--primary-gradient);
|
||
}
|
||
|
||
.sample-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.sample-icon {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
background: var(--primary-orange-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32px;
|
||
margin-bottom: var(--spacing-sm);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.sample-card:hover .sample-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.sample-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.sample-desc {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.sample-features {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 20px;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.sample-features li {
|
||
padding: 4px 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.technology {
|
||
background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
|
||
color: white;
|
||
}
|
||
|
||
.technology .section-title,
|
||
.technology .section-subtitle {
|
||
color: white;
|
||
}
|
||
|
||
.tech-diagram {
|
||
max-width: 1000px;
|
||
margin: var(--spacing-lg) auto;
|
||
background: rgba(255,255,255,0.05);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--spacing-xl);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.tech-flow {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.tech-step {
|
||
flex: 1;
|
||
min-width: 150px;
|
||
text-align: center;
|
||
padding: var(--spacing-md);
|
||
background: rgba(236, 77, 9, 0.1);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid rgba(236, 77, 9, 0.3);
|
||
}
|
||
|
||
.tech-step-icon {
|
||
font-size: 36px;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.tech-step-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.tech-step-desc {
|
||
font-size: 13px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.tech-arrow {
|
||
font-size: 24px;
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.tech-apis {
|
||
text-align: center;
|
||
margin-top: var(--spacing-lg);
|
||
padding: var(--spacing-md);
|
||
background: rgba(255,255,255,0.05);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.tech-apis p {
|
||
font-size: 14px;
|
||
opacity: 0.8;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.api-tags {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--spacing-xs);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.api-tag {
|
||
padding: 6px 12px;
|
||
background: rgba(236, 77, 9, 0.2);
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
border: 1px solid rgba(236, 77, 9, 0.3);
|
||
}
|
||
|
||
/* ===== Partnership Section ===== */
|
||
.partnership {
|
||
background: linear-gradient(135deg, #FFF5F0 0%, #FFFFFF 100%);
|
||
}
|
||
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--spacing-md);
|
||
max-width: 1000px;
|
||
margin: 0 auto var(--spacing-lg);
|
||
}
|
||
|
||
.pricing-card {
|
||
background: white;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
text-align: center;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: var(--transition);
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.pricing-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.pricing-card.featured {
|
||
border-color: var(--primary-orange);
|
||
position: relative;
|
||
transform: scale(1.08);
|
||
box-shadow: var(--shadow-lg);
|
||
z-index: 1;
|
||
}
|
||
|
||
.pricing-card.featured:hover {
|
||
transform: scale(1.08) translateY(-8px);
|
||
}
|
||
|
||
.pricing-card.featured::before {
|
||
content: '🔥 热门推荐';
|
||
position: absolute;
|
||
top: -14px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
padding: 6px 20px;
|
||
border-radius: 12px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
box-shadow: 0 4px 12px rgba(255, 106, 25, 0.4);
|
||
}
|
||
|
||
.pricing-icon {
|
||
font-size: 48px;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.pricing-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.pricing-price {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: var(--primary-orange);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.pricing-price span {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.pricing-features {
|
||
margin: var(--spacing-md) 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.pricing-features li {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
padding: 8px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.pricing-features li::before {
|
||
content: '✓';
|
||
color: var(--success);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Calculator - Advanced Profit Calculator */
|
||
.profit-calculator {
|
||
max-width: 1000px;
|
||
margin: var(--spacing-lg) auto;
|
||
background: white;
|
||
padding: var(--spacing-lg);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.calculator-title {
|
||
text-align: center;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-bottom: var(--spacing-md);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.level-tabs {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.tab-btn {
|
||
flex: 1;
|
||
padding: 16px 20px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: var(--radius-md);
|
||
background: #fff;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
transition: var(--transition);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
border-color: var(--primary-orange);
|
||
}
|
||
|
||
.tab-btn.active {
|
||
border-color: var(--primary-orange);
|
||
background: var(--primary-gradient);
|
||
color: #fff;
|
||
}
|
||
|
||
.tab-btn .price {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.calculator-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.input-section, .profit-section {
|
||
background: var(--bg-gray);
|
||
padding: 20px;
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.input-section h4, .profit-section h4 {
|
||
font-size: 16px;
|
||
margin-bottom: 16px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.input-group {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.input-group label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.input-group input {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 15px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.input-group input:focus {
|
||
outline: none;
|
||
border-color: var(--primary-orange);
|
||
}
|
||
|
||
.profit-card {
|
||
background: #fff;
|
||
padding: 14px;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.profit-card .label {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.profit-card .value {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.profit-card .sub {
|
||
font-size: 11px;
|
||
color: #999;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.profit-card.highlight {
|
||
background: #FFF3E0;
|
||
border: 2px solid var(--primary-orange);
|
||
}
|
||
|
||
.profit-card.total {
|
||
background: var(--primary-gradient);
|
||
color: #fff;
|
||
}
|
||
|
||
.profit-card.total .label,
|
||
.profit-card.total .value,
|
||
.profit-card.total .sub {
|
||
color: #fff;
|
||
}
|
||
|
||
.roi-card {
|
||
background: #FFF3CD;
|
||
border: 2px solid #FFC107;
|
||
padding: 14px;
|
||
border-radius: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.roi-card .label {
|
||
font-size: 13px;
|
||
color: #856404;
|
||
}
|
||
|
||
.roi-card .value {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #856404;
|
||
}
|
||
|
||
.roi-card .sub {
|
||
font-size: 11px;
|
||
color: #856404;
|
||
opacity: 0.8;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.product-detail {
|
||
grid-column: 1 / -1;
|
||
background: #fff;
|
||
padding: 20px;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid #e0e0e0;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.product-detail h4 {
|
||
font-size: 16px;
|
||
margin-bottom: 12px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.product-detail table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.product-detail th,
|
||
.product-detail td {
|
||
padding: 10px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.product-detail th {
|
||
background: var(--bg-gray);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.product-detail tr:hover {
|
||
background: var(--bg-gray-light);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.calculator-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.level-tabs {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
/* ===== FAQ Section ===== */
|
||
.faq {
|
||
background: var(--bg-light);
|
||
}
|
||
|
||
.faq-list {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.faq-item {
|
||
border-bottom: 1px solid #eee;
|
||
padding: var(--spacing-md) 0;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.faq-item:hover {
|
||
background: rgba(255, 106, 25, 0.02);
|
||
padding-left: var(--spacing-sm);
|
||
padding-right: var(--spacing-sm);
|
||
margin-left: calc(-1 * var(--spacing-sm));
|
||
margin-right: calc(-1 * var(--spacing-sm));
|
||
border-radius: var(--radius-md);
|
||
}
|
||
}
|
||
|
||
.faq-question {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
padding: var(--spacing-sm) 0;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.faq-question:hover {
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.faq-icon {
|
||
font-size: 24px;
|
||
color: var(--primary-orange);
|
||
transition: var(--transition);
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: rgba(255, 106, 25, 0.1);
|
||
}
|
||
|
||
.faq-item.active .faq-icon {
|
||
background: var(--primary-gradient);
|
||
color: white;
|
||
}
|
||
|
||
.faq-answer {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease;
|
||
color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.faq-item.active .faq-icon {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.faq-item.active .faq-answer {
|
||
max-height: 500px;
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
/* ===== CTA Section ===== */
|
||
.cta {
|
||
background: linear-gradient(135deg, #FF6A19 0%, #FC6E18 50%, #FF8A5C 100%);
|
||
background-size: 200% 200%;
|
||
animation: gradientShift 5s ease infinite;
|
||
color: white;
|
||
text-align: center;
|
||
padding: var(--spacing-xl) 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cta::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||
animation: rotate 20s linear infinite;
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.cta h2 {
|
||
font-size: 36px;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.cta p {
|
||
font-size: 18px;
|
||
opacity: 0.95;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.cta-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--spacing-sm);
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cta .btn {
|
||
background: white;
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.cta .btn:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.cta .btn-outline {
|
||
background: transparent;
|
||
border-color: rgba(255,255,255,0.5);
|
||
color: white;
|
||
}
|
||
|
||
.cta .btn-outline:hover {
|
||
background: white;
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.cta .btn-outline:hover {
|
||
background: white;
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
/* ===== Footer ===== */
|
||
.footer {
|
||
background: #1A1A1A;
|
||
color: white;
|
||
padding: var(--spacing-xl) 0 var(--spacing-lg);
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: 2fr repeat(3, 1fr);
|
||
gap: var(--spacing-lg);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.footer-brand h3 {
|
||
font-size: 24px;
|
||
margin-bottom: var(--spacing-sm);
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.footer-brand p {
|
||
font-size: 14px;
|
||
opacity: 0.8;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.footer-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.footer-links li {
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.footer-links a {
|
||
font-size: 14px;
|
||
opacity: 0.8;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
opacity: 1;
|
||
color: var(--primary-orange);
|
||
}
|
||
|
||
.footer-bottom {
|
||
padding-top: var(--spacing-lg);
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
text-align: center;
|
||
font-size: 14px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.footer-icp {
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
/* ===== Animations ===== */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fade-in-up {
|
||
animation: fadeInUp 0.6s ease forwards;
|
||
}
|
||
|
||
.section-title {
|
||
opacity: 0;
|
||
animation: fadeInUp 0.6s ease forwards;
|
||
}
|
||
|
||
.product-card {
|
||
opacity: 0;
|
||
animation: fadeInUp 0.6s ease forwards;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.product-card:nth-child(1) { animation-delay: 0.1s; }
|
||
.product-card:nth-child(2) { animation-delay: 0.15s; }
|
||
.product-card:nth-child(3) { animation-delay: 0.2s; }
|
||
.product-card:nth-child(4) { animation-delay: 0.25s; }
|
||
.product-card:nth-child(5) { animation-delay: 0.3s; }
|
||
.product-card:nth-child(6) { animation-delay: 0.35s; }
|
||
|
||
.pricing-card {
|
||
opacity: 0;
|
||
animation: fadeInUp 0.6s ease forwards;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
|
||
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
|
||
.pricing-card:nth-child(3) { animation-delay: 0.3s; }
|
||
|
||
/* ===== Responsive ===== */
|
||
@media (max-width: 1024px) {
|
||
.features-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.products-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.pricing-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.footer-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
/* ===== Mobile Responsive - 手机竖屏版 ===== */
|
||
@media (max-width: 768px) {
|
||
/* 导航栏 */
|
||
.navbar .container {
|
||
height: 60px;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.logo {
|
||
padding: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.logo-img {
|
||
background: rgba(255,255,255,0.95);
|
||
height: 40px;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.nav-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 64px;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
flex-direction: column;
|
||
padding: var(--spacing-md);
|
||
box-shadow: var(--shadow-md);
|
||
z-index: 999;
|
||
}
|
||
|
||
.nav-menu.active {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-menu li {
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.nav-link {
|
||
font-size: 16px;
|
||
padding: 12px 0;
|
||
display: block;
|
||
}
|
||
|
||
.nav-cta {
|
||
display: none;
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: flex;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
padding-top: 100px;
|
||
padding-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 28px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 14px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.hero-badge {
|
||
font-size: 12px;
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
.hero-stats {
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
margin-top: var(--spacing-md);
|
||
}
|
||
|
||
.stat-item {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.hero-buttons {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.hero-buttons .btn {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Section Titles */
|
||
.section-title {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* Features */
|
||
.features-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.feature-card {
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 17px;
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Products */
|
||
.products-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.product-card {
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.product-icon {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 17px;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.product-features li {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Pricing */
|
||
.pricing-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.pricing-card {
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.pricing-name {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.pricing-price {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.pricing-features {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.pricing-features li {
|
||
padding: 8px 0;
|
||
}
|
||
|
||
/* Calculator */
|
||
.profit-calculator {
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.calculator-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.level-tabs {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tab-btn {
|
||
padding: 12px 16px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.input-section,
|
||
.profit-section {
|
||
padding: 16px;
|
||
}
|
||
|
||
.profit-card .value {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.product-detail table {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.product-detail th,
|
||
.product-detail td {
|
||
padding: 8px 4px;
|
||
}
|
||
|
||
/* FAQ */
|
||
.faq-question {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.faq-answer {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* CTA */
|
||
.cta {
|
||
padding: var(--spacing-lg) 0;
|
||
}
|
||
|
||
.cta h2 {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.cta p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.cta-buttons {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.cta-buttons .btn {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
padding: var(--spacing-lg) 0;
|
||
}
|
||
|
||
.footer-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.footer-brand h3 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.footer-title {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.footer-links li {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.footer-bottom {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Tech Section */
|
||
.tech-flow {
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.tech-step {
|
||
padding: var(--spacing-sm);
|
||
}
|
||
|
||
.tech-step-icon {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.tech-step-title {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.tech-step-desc {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tech-arrow {
|
||
transform: rotate(90deg);
|
||
font-size: 20px;
|
||
}
|
||
|
||
.api-tags {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.api-tag {
|
||
font-size: 12px;
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
/* Buttons */
|
||
.btn {
|
||
padding: 12px 24px;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 480px) {
|
||
.hero h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.container {
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.navbar .container {
|
||
padding: 0 12px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="navbar" id="navbar">
|
||
<div class="container">
|
||
<a href="#" class="logo">
|
||
<img src="assets/logo.png" alt="愉悦查 Logo" class="logo-img">
|
||
</a>
|
||
|
||
<div class="menu-toggle" id="menuToggle">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
|
||
<ul class="nav-menu" id="navMenu">
|
||
<li><a href="#home" class="nav-link">首页</a></li>
|
||
<li><a href="#products" class="nav-link">产品服务</a></li>
|
||
<li><a href="/sample.html" class="nav-link">示例报告</a></li>
|
||
<li><a href="#technology" class="nav-link">AI 能力</a></li>
|
||
<li><a href="#partnership" class="nav-link">代理合作</a></li>
|
||
<li><a href="#about" class="nav-link">关于我们</a></li>
|
||
</ul>
|
||
|
||
<div class="nav-cta">
|
||
<a href="#products" class="btn btn-outline nav-btn">立即查询</a>
|
||
<a href="https://www.yuyuecha.com/login?redirect=/me" class="btn btn-primary nav-btn">立即注册</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="home">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<span class="hero-badge">🤖 AI 驱动的商业信任科技平台</span>
|
||
<h1>让信任无处不在<br>让合作没有距离</h1>
|
||
<p>200+ 数据接口 · 智能组合 · 秒级响应</p>
|
||
|
||
<div class="hero-buttons">
|
||
<a href="https://www.yuyuecha.com/login?redirect=/me" class="btn btn-primary">🚀 立即注册</a>
|
||
<a href="#partnership" class="btn btn-outline">💼 代理合作</a>
|
||
</div>
|
||
|
||
<div class="hero-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-number" id="statReports">0</div>
|
||
<div class="stat-label">已生成报告</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number" id="statUsers">0</div>
|
||
<div class="stat-label">服务用户</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number" id="statApis">200+</div>
|
||
<div class="stat-label">数据接口</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number" id="statEnterprises">0</div>
|
||
<div class="stat-label">合作企业</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Features Section -->
|
||
<section class="section features">
|
||
<div class="container">
|
||
<h2 class="section-title">核心优势</h2>
|
||
<p class="section-subtitle">为什么选择愉悦查</p>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📡</div>
|
||
<h3 class="feature-title">海量数据</h3>
|
||
<p class="feature-desc">200+ 官方数据接口<br>覆盖全维度信息</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🤖</div>
|
||
<h3 class="feature-title">AI 引擎</h3>
|
||
<p class="feature-desc">智能组合接口<br>40+ 分析技能</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3 class="feature-title">秒级响应</h3>
|
||
<p class="feature-desc">实时生成报告<br>最快 3 秒出结果</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3 class="feature-title">安全合规</h3>
|
||
<p class="feature-desc">等保三级认证<br>数据加密传输</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Products Section -->
|
||
<section class="section products" id="products">
|
||
<div class="container">
|
||
<h2 class="section-title">产品服务</h2>
|
||
<p class="section-subtitle">6 大标准报告 + AI 智能定制</p>
|
||
|
||
<div class="products-grid">
|
||
<!-- Product 1 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">📊</div>
|
||
<h3 class="product-name">个人大数据报告</h3>
|
||
<div class="product-price">¥49.8</div>
|
||
<ul class="product-features">
|
||
<li>3-4 个数据接口组合</li>
|
||
<li>全面个人背景分析</li>
|
||
<li>秒级生成</li>
|
||
<li>PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=riskassessment" target="_blank" class="btn btn-outline" style="width:100%;margin-bottom:10px">📄 查看示例报告</a>
|
||
<a href="https://www.yuyuecha.com/inquire/riskassessment" class="btn btn-primary" style="width:100%">立即查询</a>
|
||
</div>
|
||
|
||
<!-- Product 2 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">💕</div>
|
||
<h3 class="product-name">婚恋风险报告</h3>
|
||
<div class="product-price">¥39.9</div>
|
||
<ul class="product-features">
|
||
<li>3-4 个数据接口组合</li>
|
||
<li>婚恋风险评估</li>
|
||
<li>隐私保护</li>
|
||
<li>PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=marriage" target="_blank" class="btn btn-outline" style="width:100%;margin-bottom:10px">📄 查看示例报告</a>
|
||
<a href="https://www.yuyuecha.com/inquire/marriage" class="btn btn-primary" style="width:100%">立即查询</a>
|
||
</div>
|
||
|
||
<!-- Product 3 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">💼</div>
|
||
<h3 class="product-name">入职背调报告</h3>
|
||
<div class="product-price">¥69.9</div>
|
||
<ul class="product-features">
|
||
<li>3-4 个数据接口组合</li>
|
||
<li>员工背景筛查</li>
|
||
<li>降低用工风险</li>
|
||
<li>批量查询优惠</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=backgroundcheck" target="_blank" class="btn btn-outline" style="width:100%;margin-bottom:10px">📄 查看示例报告</a>
|
||
<a href="https://www.yuyuecha.com/inquire/backgroundcheck" class="btn btn-primary" style="width:100%">立即查询</a>
|
||
</div>
|
||
|
||
<!-- Product 4 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">🏢</div>
|
||
<h3 class="product-name">小微企业报告</h3>
|
||
<div class="product-price">¥69.9</div>
|
||
<ul class="product-features">
|
||
<li>3-4 个数据接口组合</li>
|
||
<li>企业风险筛查</li>
|
||
<li>合作前必备</li>
|
||
<li>PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=companyinfo" target="_blank" class="btn btn-outline" style="width:100%;margin-bottom:10px">📄 查看示例报告</a>
|
||
<a href="https://www.yuyuecha.com/inquire/companyinfo" class="btn btn-primary" style="width:100%">立即查询</a>
|
||
</div>
|
||
|
||
<!-- Product 5 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">🧹</div>
|
||
<h3 class="product-name">家政风险报告</h3>
|
||
<div class="product-price">¥39.9</div>
|
||
<ul class="product-features">
|
||
<li>3-4 个数据接口组合</li>
|
||
<li>家政人员背调</li>
|
||
<li>雇佣更安全</li>
|
||
<li>PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=homeservice" target="_blank" class="btn btn-outline" style="width:100%;margin-bottom:10px">📄 查看示例报告</a>
|
||
<a href="https://www.yuyuecha.com/inquire/homeservice" class="btn btn-primary" style="width:100%">立即查询</a>
|
||
</div>
|
||
|
||
<!-- Product 6 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">💳</div>
|
||
<h3 class="product-name">消金报告</h3>
|
||
<div class="product-price">¥39.9</div>
|
||
<ul class="product-features">
|
||
<li>3-4 个数据接口组合</li>
|
||
<li>消费金融风险评估</li>
|
||
<li>快速决策支持</li>
|
||
<li>PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=consumerFinanceReport" target="_blank" class="btn btn-outline" style="width:100%;margin-bottom:10px">📄 查看示例报告</a>
|
||
<a href="https://www.yuyuecha.com/inquire/consumerFinanceReport" class="btn btn-primary" style="width:100%">立即查询</a>
|
||
</div>
|
||
|
||
<!-- AI Custom Product -->
|
||
<div class="product-ai">
|
||
<h3>✨ AI 定制报告</h3>
|
||
<p>告诉我您的需求，AI 智能组合 200+ 接口，生成独一无二的专属报告</p>
|
||
<p style="font-size:14px;opacity:0.8;">例："我想了解一个合作伙伴的信用和风险状况"</p>
|
||
<a href="https://work.weixin.qq.com/kfid/kfc93b53b25551b611d" class="btn">🎯 立即定制 - 从 ¥99 起</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Sample Reports Section -->
|
||
<section class="section sample-reports" id="sample-reports" style="background: var(--bg-gray);">
|
||
<div class="container">
|
||
<h2 class="section-title">示例报告</h2>
|
||
<p class="section-subtitle">查看真实报告样本，了解报告内容</p>
|
||
|
||
<div class="sample-grid">
|
||
<!-- Sample 1 -->
|
||
<div class="sample-card">
|
||
<div class="sample-icon">📊</div>
|
||
<h3 class="sample-name">个人大数据报告</h3>
|
||
<p class="sample-desc">全面个人背景分析，包含身份信息、社交网络、行为特征等多维度数据</p>
|
||
<ul class="sample-features">
|
||
<li>✓ 3-4 个数据接口组合</li>
|
||
<li>✓ 秒级生成</li>
|
||
<li>✓ PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=riskassessment" target="_blank" class="btn btn-outline" style="width:100%">👁️ 查看示例</a>
|
||
</div>
|
||
|
||
<!-- Sample 2 -->
|
||
<div class="sample-card">
|
||
<div class="sample-icon">💕</div>
|
||
<h3 class="sample-name">婚恋风险报告</h3>
|
||
<p class="sample-desc">婚恋风险评估，帮助了解对方的婚姻状况、信用记录等关键信息</p>
|
||
<ul class="sample-features">
|
||
<li>✓ 婚恋风险评估</li>
|
||
<li>✓ 隐私保护</li>
|
||
<li>✓ PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=marriage" target="_blank" class="btn btn-outline" style="width:100%">👁️ 查看示例</a>
|
||
</div>
|
||
|
||
<!-- Sample 3 -->
|
||
<div class="sample-card">
|
||
<div class="sample-icon">💼</div>
|
||
<h3 class="sample-name">入职背调报告</h3>
|
||
<p class="sample-desc">员工背景筛查，降低用工风险，包含学历、工作履历、信用记录等</p>
|
||
<ul class="sample-features">
|
||
<li>✓ 员工背景筛查</li>
|
||
<li>✓ 降低用工风险</li>
|
||
<li>✓ 批量查询优惠</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=backgroundcheck" target="_blank" class="btn btn-outline" style="width:100%">👁️ 查看示例</a>
|
||
</div>
|
||
|
||
<!-- Sample 4 -->
|
||
<div class="sample-card">
|
||
<div class="sample-icon">🏢</div>
|
||
<h3 class="sample-name">小微企业报告</h3>
|
||
<p class="sample-desc">企业风险筛查，合作前必备，包含工商信息、司法风险、经营状况等</p>
|
||
<ul class="sample-features">
|
||
<li>✓ 企业风险筛查</li>
|
||
<li>✓ 合作前必备</li>
|
||
<li>✓ PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=companyinfo" target="_blank" class="btn btn-outline" style="width:100%">👁️ 查看示例</a>
|
||
</div>
|
||
|
||
<!-- Sample 5 -->
|
||
<div class="sample-card">
|
||
<div class="sample-icon">🧹</div>
|
||
<h3 class="sample-name">家政风险报告</h3>
|
||
<p class="sample-desc">家政人员背调，雇佣更安全，包含身份信息、犯罪记录、信用状况等</p>
|
||
<ul class="sample-features">
|
||
<li>✓ 家政人员背调</li>
|
||
<li>✓ 雇佣更安全</li>
|
||
<li>✓ PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=homeservice" target="_blank" class="btn btn-outline" style="width:100%">👁️ 查看示例</a>
|
||
</div>
|
||
|
||
<!-- Sample 6 -->
|
||
<div class="sample-card">
|
||
<div class="sample-icon">💳</div>
|
||
<h3 class="sample-name">消金报告</h3>
|
||
<p class="sample-desc">消费金融风险评估，快速决策支持，包含信用记录、负债情况、还款能力等</p>
|
||
<ul class="sample-features">
|
||
<li>✓ 消费金融风险评估</li>
|
||
<li>✓ 快速决策支持</li>
|
||
<li>✓ PDF 格式下载</li>
|
||
</ul>
|
||
<a href="https://www.yuyuecha.com/example?feature=consumerFinanceReport" target="_blank" class="btn btn-outline" style="width:100%">👁️ 查看示例</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Technology Section -->
|
||
<section class="section technology" id="technology">
|
||
<div class="container">
|
||
<h2 class="section-title">AI 技术能力</h2>
|
||
<p class="section-subtitle">200+ 数据接口智能组合引擎</p>
|
||
|
||
<div class="tech-diagram">
|
||
<div class="tech-flow">
|
||
<div class="tech-step">
|
||
<div class="tech-step-icon">📝</div>
|
||
<div class="tech-step-title">用户需求</div>
|
||
<div class="tech-step-desc">自然语言描述</div>
|
||
</div>
|
||
<div class="tech-arrow">→</div>
|
||
<div class="tech-step">
|
||
<div class="tech-step-icon">🧠</div>
|
||
<div class="tech-step-title">AI 分析</div>
|
||
<div class="tech-step-desc">理解需求意图</div>
|
||
</div>
|
||
<div class="tech-arrow">→</div>
|
||
<div class="tech-step">
|
||
<div class="tech-step-icon">🔌</div>
|
||
<div class="tech-step-title">接口选择</div>
|
||
<div class="tech-step-desc">智能匹配接口</div>
|
||
</div>
|
||
<div class="tech-arrow">→</div>
|
||
<div class="tech-step">
|
||
<div class="tech-step-icon">📊</div>
|
||
<div class="tech-step-title">报告生成</div>
|
||
<div class="tech-step-desc">秒级输出结果</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tech-apis">
|
||
<p>接口类型覆盖</p>
|
||
<div class="api-tags">
|
||
<span class="api-tag">公安数据</span>
|
||
<span class="api-tag">法院数据</span>
|
||
<span class="api-tag">学历验证</span>
|
||
<span class="api-tag">工作履历</span>
|
||
<span class="api-tag">金融信用</span>
|
||
<span class="api-tag">社交网络</span>
|
||
<span class="api-tag">商业信息</span>
|
||
<span class="api-tag">更多...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;margin-top:var(--spacing-lg);">
|
||
<a href="/apidemo/" class="btn btn-outline" style="border-color:rgba(255,255,255,0.3);color:white;">📚 查看 API 文档</a>
|
||
<a href="https://yuyuecha.com/platform" class="btn btn-outline" style="border-color:rgba(255,255,255,0.3);color:white;margin-left:var(--spacing-sm);">🔧 开放平台</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Partnership Section -->
|
||
<section class="section partnership" id="partnership">
|
||
<div class="container">
|
||
<h2 class="section-title">代理合作</h2>
|
||
<p class="section-subtitle">加入愉悦查，共享信任经济红利</p>
|
||
|
||
<div class="pricing-grid">
|
||
<!-- Silver -->
|
||
<div class="pricing-card">
|
||
<div class="pricing-icon">🥈</div>
|
||
<h3 class="pricing-name">白银代理</h3>
|
||
<div class="pricing-price">¥0<span>/终身</span></div>
|
||
<ul class="pricing-features">
|
||
<li>10% 返佣</li>
|
||
<li>基础培训支持</li>
|
||
<li>标准产品价格</li>
|
||
<li>在线帮助中心</li>
|
||
</ul>
|
||
<a href="https://p.yuyuecha.com/s/Cc9wgE" class="btn btn-outline" style="width:100%">立即申请</a>
|
||
</div>
|
||
|
||
<!-- Gold -->
|
||
<div class="pricing-card featured">
|
||
<div class="pricing-icon">🥇</div>
|
||
<h3 class="pricing-name">黄金代理</h3>
|
||
<div class="pricing-price">¥198<span>/年</span></div>
|
||
<ul class="pricing-features">
|
||
<li>30% 返佣</li>
|
||
<li>优先技术支持</li>
|
||
<li>专属代理价格</li>
|
||
<li>营销素材支持</li>
|
||
<li>定期培训</li>
|
||
</ul>
|
||
<a href="https://p.yuyuecha.com/s/Cc9wgE" class="btn btn-primary" style="width:100%">立即申请</a>
|
||
</div>
|
||
|
||
<!-- Diamond -->
|
||
<div class="pricing-card">
|
||
<div class="pricing-icon">💎</div>
|
||
<h3 class="pricing-name">钻石代理</h3>
|
||
<div class="pricing-price">¥980<span>/年</span></div>
|
||
<ul class="pricing-features">
|
||
<li>50% 返佣</li>
|
||
<li>1 对 1 专属辅导</li>
|
||
<li>最低代理价格</li>
|
||
<li>联合营销支持</li>
|
||
<li>优先新功能体验</li>
|
||
<li>区域保护政策</li>
|
||
</ul>
|
||
<a href="https://p.yuyuecha.com/s/Cc9wgE" class="btn btn-outline" style="width:100%">立即申请</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Advanced Profit Calculator -->
|
||
<div class="profit-calculator">
|
||
<h3 class="calculator-title">💵 代理收益计算器</h3>
|
||
|
||
<!-- Level Tabs -->
|
||
<div class="level-tabs">
|
||
<button class="tab-btn active" onclick="switchLevel('silver')">
|
||
🥈 白银代理
|
||
<span class="price">¥0</span>
|
||
</button>
|
||
<button class="tab-btn" onclick="switchLevel('gold')">
|
||
🥇 黄金代理
|
||
<span class="price">¥198</span>
|
||
</button>
|
||
<button class="tab-btn" onclick="switchLevel('diamond')">
|
||
💎 钻石代理
|
||
<span class="price">¥980</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="calculator-grid">
|
||
<!-- Input Section -->
|
||
<div class="input-section">
|
||
<h4>📊 输入您的销售数据</h4>
|
||
|
||
<div class="input-group">
|
||
<label>每日销售份数</label>
|
||
<input type="number" id="dailySales" value="30" min="0" max="1000" oninput="calculateProfit()">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label>直推代理人数（月）</label>
|
||
<input type="number" id="referralCount" value="5" min="0" max="100" oninput="calculateProfit()">
|
||
</div>
|
||
|
||
<div class="input-group" id="teamSilverGroup" style="display:none;">
|
||
<label>下级白银代理人数</label>
|
||
<input type="number" id="teamSilver" value="20" min="0" max="500" oninput="calculateProfit()">
|
||
</div>
|
||
|
||
<div class="input-group" id="teamGoldGroup" style="display:none;">
|
||
<label>下级黄金代理人数</label>
|
||
<input type="number" id="teamGold" value="5" min="0" max="100" oninput="calculateProfit()">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Profit Section -->
|
||
<div class="profit-section">
|
||
<h4>💰 预期收益</h4>
|
||
|
||
<div class="profit-card">
|
||
<div class="label">单份平均利润</div>
|
||
<div class="value" id="avgProfit">¥38.22</div>
|
||
</div>
|
||
|
||
<div class="profit-card highlight">
|
||
<div class="label">日零售收益</div>
|
||
<div class="value" id="dailyRetailProfit">¥1,147</div>
|
||
<div class="sub" id="dailyRetailSub">30 份 × ¥38.22</div>
|
||
</div>
|
||
|
||
<div class="profit-card">
|
||
<div class="label">月零售收益</div>
|
||
<div class="value" id="monthlyRetailProfit">¥34,410</div>
|
||
</div>
|
||
|
||
<div class="profit-card" id="referralCard">
|
||
<div class="label">月直推奖励</div>
|
||
<div class="value" id="monthlyReferralProfit">¥0</div>
|
||
<div class="sub" id="referralSub">5 人 × ¥0/人</div>
|
||
</div>
|
||
|
||
<div class="profit-card" id="teamCard" style="display:none;">
|
||
<div class="label">月团队提成</div>
|
||
<div class="value" id="monthlyTeamProfit">¥0</div>
|
||
</div>
|
||
|
||
<div class="profit-card total">
|
||
<div class="label">月总收益</div>
|
||
<div class="value" id="totalMonthlyProfit">¥34,410</div>
|
||
</div>
|
||
|
||
<div class="roi-card" id="roiCard" style="display:none;">
|
||
<div class="label">回本周期</div>
|
||
<div class="value" id="paybackDays">0 天</div>
|
||
<div class="sub" id="paybackHours">或 0 小时（日销 30 份）</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product Detail Table -->
|
||
<div class="product-detail">
|
||
<h4>📦 各产品利润明细（<span id="currentLevelName">白银代理</span>）</h4>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>产品</th>
|
||
<th>零售价</th>
|
||
<th>您的底价</th>
|
||
<th>单份利润</th>
|
||
<th>利润率</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="productTableBody">
|
||
<!-- Populated by JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;">
|
||
<a href="https://p.yuyuecha.com/s/Cc9wgE" class="btn btn-primary">📝 立即申请代理</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ Section -->
|
||
<section class="section faq" id="faq">
|
||
<div class="container">
|
||
<h2 class="section-title">常见问题</h2>
|
||
<p class="section-subtitle">您可能想知道的问题</p>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
<span>报告准确率如何保证？</span>
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
愉悦查所有数据均来自官方授权渠道，通过 200+ 数据接口交叉验证，确保信息准确可靠。AI 引擎会自动识别异常数据并进行人工复核，准确率达 99% 以上。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
<span>数据来源是否合法合规？</span>
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
是的，我们严格遵守《个人信息保护法》和相关法律法规，所有数据接口均获得合法授权，查询过程需要被查询人授权同意，确保数据来源和使用完全合规。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
<span>多久能拿到报告？</span>
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
标准报告通常 3-5 秒即可生成，复杂报告或 AI 定制报告可能需要 30 秒 -2 分钟。报告生成后会通过短信/邮件通知您，也可在个人中心随时查看下载。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
<span>如何成为代理？</span>
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
点击页面上方的"立即申请"按钮，填写代理申请表，我们的招商团队会在 1-2 个工作日内联系您。白银代理零门槛免费加入，黄金/钻石代理需支付相应年费。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
<span>支持退款吗？</span>
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
报告一旦生成无法退款，因为数据查询成本已产生。但如果您对报告质量有异议，可在 7 天内联系客服申请复核或重新查询。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta">
|
||
<div class="container">
|
||
<h2>准备好开始建立信任了吗？</h2>
|
||
<p>立即体验 AI 驱动的商业信任科技</p>
|
||
<div class="cta-buttons">
|
||
<a href="https://www.yuyuecha.com/login?redirect=/me" class="btn">🚀 立即注册</a>
|
||
<a href="#partnership" class="btn btn-outline">💼 代理合作</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer" id="about">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<h3>愉悦查</h3>
|
||
<p>让信任无处不在，让合作没有距离</p>
|
||
<p style="margin-top:16px;font-size:13px;">愉悦查（北京正信环宇科技有限公司）</p>
|
||
<p style="font-size:13px;">AI 驱动的商业信任科技平台</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-title">产品</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="/product/riskassessment.html">个人大数据报告</a></li>
|
||
<li><a href="/product/marriage.html">婚恋风险报告</a></li>
|
||
<li><a href="/product/backgroundcheck.html">入职背调报告</a></li>
|
||
<li><a href="/product/companyinfo.html">小微企业报告</a></li>
|
||
<li><a href="/product/homeservice.html">家政风险报告</a></li>
|
||
<li><a href="/product/consumerFinanceReport.html">消金报告</a></li>
|
||
<li><a href="https://work.weixin.qq.com/kfid/kfc93b53b25551b611d" target="_blank">AI 定制报告</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-title">公司</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="/about.html">关于我们</a></li>
|
||
<li><a href="/careers.html">加入我们</a></li>
|
||
<li><a href="/contact.html">联系我们</a></li>
|
||
<li><a href="/news.html">新闻动态</a></li>
|
||
<li><a href="/partners.html">合作伙伴</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-title">支持</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="/help.html">帮助中心</a></li>
|
||
<li><a href="/apidemo/">API 文档</a></li>
|
||
<li><a href="/index.html#partnership">代理支持</a></li>
|
||
<li><a href="/privacy.html">隐私政策</a></li>
|
||
<li><a href="/terms.html">服务条款</a></li>
|
||
<li><a href="/disclaimer.html">免责声明</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© 2026 愉悦查（北京正信环宇科技有限公司）All Rights Reserved.</p>
|
||
<p class="footer-icp">京 ICP 备 2025158088 号 -2</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Back to Top Button -->
|
||
<button id="backToTop" style="position:fixed;bottom:30px;right:30px;width:50px;height:50px;border-radius:50%;background:var(--primary-gradient);border:none;cursor:pointer;box-shadow:var(--shadow-lg);display:none;align-items:center;justify-content:center;font-size:24px;z-index:999;transition:var(--transition);">↑</button>
|
||
|
||
<script>
|
||
// ===== Back to Top Button =====
|
||
const backToTopBtn = document.getElementById('backToTop');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 500) {
|
||
backToTopBtn.style.display = 'flex';
|
||
} else {
|
||
backToTopBtn.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
backToTopBtn.addEventListener('click', () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
|
||
backToTopBtn.addEventListener('mouseenter', () => {
|
||
backToTopBtn.style.transform = 'scale(1.1)';
|
||
});
|
||
|
||
backToTopBtn.addEventListener('mouseleave', () => {
|
||
backToTopBtn.style.transform = 'scale(1)';
|
||
});
|
||
|
||
// ===== Navbar Scroll Effect =====
|
||
window.addEventListener('scroll', () => {
|
||
const navbar = document.getElementById('navbar');
|
||
if (window.scrollY > 50) {
|
||
navbar.classList.add('scrolled');
|
||
} else {
|
||
navbar.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
// ===== Mobile Menu Toggle =====
|
||
document.getElementById('menuToggle').addEventListener('click', () => {
|
||
document.getElementById('navMenu').classList.toggle('active');
|
||
});
|
||
|
||
// ===== Smooth Scroll =====
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
// Close mobile menu
|
||
document.getElementById('navMenu').classList.remove('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// ===== Animated Counter =====
|
||
function animateCounter(elementId, target, suffix = '') {
|
||
const element = document.getElementById(elementId);
|
||
if (!element) return;
|
||
|
||
let current = 0;
|
||
const increment = target / 50;
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= target) {
|
||
element.textContent = target.toLocaleString() + suffix;
|
||
clearInterval(timer);
|
||
} else {
|
||
element.textContent = Math.floor(current).toLocaleString() + suffix;
|
||
}
|
||
}, 30);
|
||
}
|
||
|
||
// ===== Intersection Observer for Animations =====
|
||
const observerOptions = {
|
||
threshold: 0.2,
|
||
rootMargin: '0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
// Animate stats when visible
|
||
if (entry.target.id === 'statReports') {
|
||
animateCounter('statReports', 100000, '+');
|
||
animateCounter('statUsers', 50000, '+');
|
||
animateCounter('statEnterprises', 5000, '+');
|
||
}
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.getElementById('statReports') && observer.observe(document.getElementById('statReports'));
|
||
|
||
// ===== FAQ Toggle =====
|
||
document.querySelectorAll('.faq-question').forEach(question => {
|
||
question.addEventListener('click', () => {
|
||
const item = question.parentElement;
|
||
const icon = question.querySelector('.faq-icon');
|
||
|
||
// Close other items
|
||
document.querySelectorAll('.faq-item').forEach(other => {
|
||
if (other !== item) {
|
||
other.classList.remove('active');
|
||
other.querySelector('.faq-icon').textContent = '+';
|
||
}
|
||
});
|
||
|
||
// Toggle current item
|
||
item.classList.toggle('active');
|
||
icon.textContent = item.classList.contains('active') ? '×' : '+';
|
||
});
|
||
});
|
||
|
||
// ===== Advanced Profit Calculator =====
|
||
const levelData = {
|
||
silver: { name: '白银代理', fee: 0, markup: 6, referralBonus: 0, teamSilver: 2, teamGold: 0 },
|
||
gold: { name: '黄金代理', fee: 198, markup: 3, referralBonus: 60, teamSilver: 3, teamGold: 0 },
|
||
diamond: { name: '钻石代理', fee: 980, markup: 2, referralBonus: 300, teamSilver: 6, teamGold: 3 }
|
||
};
|
||
|
||
const products = [
|
||
{ name: '消金报告', retail: 39.9, baseCost: 6.0 },
|
||
{ name: '家政风险报告', retail: 39.9, baseCost: 6.0 },
|
||
{ name: '个人大数据报告', retail: 49.8, baseCost: 5.0 },
|
||
{ name: '入职背调报告', retail: 69.9, baseCost: 9.0 },
|
||
{ name: '小微企业报告', retail: 69.9, baseCost: 9.0 },
|
||
{ name: '婚恋风险报告', retail: 39.9, baseCost: 9.0 }
|
||
];
|
||
|
||
let currentLevel = 'silver';
|
||
|
||
function switchLevel(level) {
|
||
currentLevel = level;
|
||
|
||
// Update tabs
|
||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||
event.target.closest('.tab-btn').classList.add('active');
|
||
|
||
// Show/hide team inputs for diamond
|
||
const isDiamond = level === 'diamond';
|
||
const isGoldOrDiamond = level === 'gold' || level === 'diamond';
|
||
document.getElementById('teamSilverGroup').style.display = isGoldOrDiamond ? 'block' : 'none';
|
||
document.getElementById('teamGoldGroup').style.display = isDiamond ? 'block' : 'none';
|
||
document.getElementById('teamCard').style.display = isGoldOrDiamond ? 'block' : 'none';
|
||
document.getElementById('roiCard').style.display = isGoldOrDiamond ? 'block' : 'none';
|
||
|
||
calculateProfit();
|
||
}
|
||
|
||
function getProductCost(product) {
|
||
return product.baseCost + levelData[currentLevel].markup;
|
||
}
|
||
|
||
function getProductProfit(product) {
|
||
return product.retail - getProductCost(product);
|
||
}
|
||
|
||
function getProductMargin(product) {
|
||
const profit = getProductProfit(product);
|
||
return ((profit / product.retail) * 100).toFixed(0);
|
||
}
|
||
|
||
function calculateProfit() {
|
||
const dailySales = parseFloat(document.getElementById('dailySales').value) || 0;
|
||
const referralCount = parseFloat(document.getElementById('referralCount').value) || 0;
|
||
const teamSilver = parseFloat(document.getElementById('teamSilver').value) || 0;
|
||
const teamGold = parseFloat(document.getElementById('teamGold').value) || 0;
|
||
|
||
const level = levelData[currentLevel];
|
||
|
||
// Calculate average profit
|
||
const totalProfit = products.reduce((sum, p) => sum + getProductProfit(p), 0);
|
||
const avgProfit = totalProfit / products.length;
|
||
|
||
// Retail profit
|
||
const dailyRetailProfit = avgProfit * dailySales;
|
||
const monthlyRetailProfit = dailyRetailProfit * 30;
|
||
|
||
// Referral bonus
|
||
const monthlyReferralProfit = level.referralBonus * referralCount;
|
||
|
||
// Team commission
|
||
let monthlyTeamProfit = 0;
|
||
if (currentLevel === 'gold') {
|
||
monthlyTeamProfit = level.teamSilver * teamSilver * 30;
|
||
} else if (currentLevel === 'diamond') {
|
||
monthlyTeamProfit = (level.teamSilver * teamSilver + level.teamGold * teamGold) * 30;
|
||
}
|
||
|
||
// Total
|
||
const totalMonthlyProfit = monthlyRetailProfit + monthlyReferralProfit + monthlyTeamProfit;
|
||
|
||
// ROI
|
||
let paybackDays = 0;
|
||
let paybackHours = 0;
|
||
if (level.fee > 0) {
|
||
const dailyTotal = dailyRetailProfit + (monthlyReferralProfit + monthlyTeamProfit) / 30;
|
||
if (dailyTotal > 0) {
|
||
paybackDays = Math.ceil(level.fee / dailyTotal);
|
||
paybackHours = (level.fee / (totalMonthlyProfit / 30 / 24)).toFixed(1);
|
||
}
|
||
}
|
||
|
||
// Update UI
|
||
document.getElementById('avgProfit').textContent = '¥' + avgProfit.toFixed(2);
|
||
document.getElementById('dailyRetailProfit').textContent = '¥' + dailyRetailProfit.toLocaleString('zh-CN', {minimumFractionDigits: 0, maximumFractionDigits: 0});
|
||
document.getElementById('dailyRetailSub').textContent = dailySales + '份 × ¥' + avgProfit.toFixed(2);
|
||
document.getElementById('monthlyRetailProfit').textContent = '¥' + monthlyRetailProfit.toLocaleString('zh-CN', {minimumFractionDigits: 0, maximumFractionDigits: 0});
|
||
document.getElementById('monthlyReferralProfit').textContent = '¥' + monthlyReferralProfit.toLocaleString('zh-CN', {minimumFractionDigits: 0, maximumFractionDigits: 0});
|
||
document.getElementById('referralSub').textContent = referralCount + '人 × ¥' + level.referralBonus + '/人';
|
||
document.getElementById('monthlyTeamProfit').textContent = '¥' + monthlyTeamProfit.toLocaleString('zh-CN', {minimumFractionDigits: 0, maximumFractionDigits: 0});
|
||
document.getElementById('totalMonthlyProfit').textContent = '¥' + totalMonthlyProfit.toLocaleString('zh-CN', {minimumFractionDigits: 0, maximumFractionDigits: 0});
|
||
document.getElementById('paybackDays').textContent = paybackDays + '天';
|
||
document.getElementById('paybackHours').textContent = '或 ' + paybackHours + '小时（日销' + dailySales + '份）';
|
||
|
||
// Update product table
|
||
document.getElementById('currentLevelName').textContent = level.name;
|
||
const tbody = document.getElementById('productTableBody');
|
||
tbody.innerHTML = products.map(p => `
|
||
<tr>
|
||
<td>${p.name}</td>
|
||
<td>¥${p.retail}</td>
|
||
<td>¥${getProductCost(p).toFixed(2)}</td>
|
||
<td>¥${getProductProfit(p).toFixed(2)}</td>
|
||
<td>${getProductMargin(p)}%</td>
|
||
</tr>
|
||
`).join('');
|
||
}
|
||
|
||
// Initialize calculator
|
||
calculateProfit();
|
||
|
||
// ===== Scroll Animation Trigger =====
|
||
const animationObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.animationPlayState = 'running';
|
||
}
|
||
});
|
||
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
||
|
||
document.querySelectorAll('.product-card, .pricing-card, .section-title').forEach(el => {
|
||
animationObserver.observe(el);
|
||
});
|
||
|
||
// ===== Initialize =====
|
||
console.log('愉悦查官网已加载 🚀');
|
||
</script>
|
||
</body>
|
||
</html>
|