diff --git a/website/README.md b/website/README.md new file mode 100644 index 0000000..8b59362 --- /dev/null +++ b/website/README.md @@ -0,0 +1,66 @@ +# 相宜亲家官方网站 + +纯静态官方网站，无需后端接口。 + +## 目录结构 + +``` +website/ +├── index.html # 主页面 +├── css/ +│ └── style.css # 样式文件 +├── js/ +│ └── main.js # 交互脚本 +├── images/ # 图片资源 +│ ├── logo.png # 网站Logo +│ ├── favicon.ico # 网站图标 +│ ├── family.png # Hero区域家庭图片 +│ ├── phone-mockup.png # 手机界面截图 +│ ├── icon-*.png # 特性图标 +│ └── case*.jpg # 成功案例图片 +└── README.md +``` + +## 需要准备的图片 + +1. **logo.png** - 网站Logo（建议尺寸：200x50px） +2. **favicon.ico** - 网站图标（16x16 或 32x32） +3. **family.png** - Hero区域的幸福家庭图片（建议尺寸：500x400px） +4. **phone-mockup.png** - 小程序手机界面截图（建议尺寸：350x700px） +5. **icon-target.png** - 精准匹配图标（建议尺寸：64x64px） +6. **icon-flow.png** - 流程顺畅图标 +7. **icon-chat.png** - 沟通无阻图标 +8. **icon-value.png** - 性价比图标 +9. **case1.jpg ~ case6.jpg** - 成功案例婚纱照（建议尺寸：400x300px） + +## 本地预览 + +直接用浏览器打开 `index.html` 即可预览。 + +或使用本地服务器： + +```bash +# 使用 Python +python -m http.server 8080 + +# 使用 Node.js +npx serve . +``` + +## 部署 + +将整个 `website` 目录上传到任意静态托管服务即可： + +- 阿里云 OSS +- 腾讯云 COS +- Nginx 静态服务 +- GitHub Pages +- Vercel +- Netlify + +## 页面内容 + +1. **首页 Hero** - 品牌口号 + 家庭图片 +2. **产品特点** - 四大核心优势 +3. **成功案例** - 6个脱单案例展示 +4. **页脚** - 公司信息和备案号 diff --git a/website/cases.html b/website/cases.html new file mode 100644 index 0000000..67cd4a7 --- /dev/null +++ b/website/cases.html @@ -0,0 +1,170 @@ + + + + + + + + 成功案例 - 相宜亲家 + + + + + +
+
+ + +
+
+ + +
+
+ 成功案例背景 +
+
+ +
+

成功案例

+
+ +
+
+ + +
+
+
+ 首页 + > + 成功案例 +
+ +
+
+
+ 成功案例 +
+
+

男·上海·31岁·本科学历

+

苏州市

+

注册平台2个月帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

女·北京·29岁·研究生学历

+

苏州市

+

注册平台6个月帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

男·广州·32岁·本科学历

+

苏州市

+

注册平台2个月帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

女·深圳·26岁·本科学历

+

苏州市

+

注册平台60天帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

男·杭州·33岁·硕士学历

+

苏州市

+

注册平台4个月帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

女·南京·28岁·本科学历

+

苏州市

+

注册平台5个月帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

男·武汉·30岁·本科学历

+

苏州市

+

注册平台3个月帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

女·成都·27岁·硕士学历

+

苏州市

+

注册平台4个月帮孩子脱单

+
+
+ +
+
+ 成功案例 +
+
+

男·重庆·31岁·本科学历

+

苏州市

+

注册平台6个月帮孩子脱单

+
+
+
+ +
+

更多案例 请联系我们

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/website/contact.html b/website/contact.html new file mode 100644 index 0000000..7f77b55 --- /dev/null +++ b/website/contact.html @@ -0,0 +1,103 @@ + + + + + + + + 联系我们 - 相宜亲家 + + + + + +
+
+ + +
+
+ + +
+
+ 联系我们背景 +
+
+
+
+ 相宜亲家 +
+
+

相宜亲家

+

家长帮孩子找对象的平台

+
+
+
+
+ + +
+
+

联系我们

+ +
+
+

联系地址

+
+
+ + + +
+ 南京市建邺区云龙山路66号天羽美岸大厦 +
+
+ +
+

联系邮箱

+
+
+ + + +
+ 400@vekj.cn +
+
+ +
+

服务监督电话

+
+
+ + + +
+ 123-123-123 +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/website/css/cases.css b/website/css/cases.css new file mode 100644 index 0000000..101d51c --- /dev/null +++ b/website/css/cases.css @@ -0,0 +1,397 @@ +/* 成功案例页面样式 */ + +/* 顶部红色背景区域 */ +.cases-hero { + position: relative; + width: 100%; + height: 463px; + overflow: hidden; + background: #d32f2f; +} + +.cases-hero-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; +} + +.cases-hero-bg .hero-bg-image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.cases-hero-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + max-width: 100%; + margin: 0 auto; + padding: 0 50px; +} + +.hero-left { + flex: 0 0 200px; + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.hero-logo img { + height: 80px; + width: auto; +} + +.hero-stats { + text-align: center; +} + +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + color: white; +} + +.stat-number { + font-size: 36px; + font-weight: bold; + margin-bottom: 8px; +} + +.stat-label { + font-size: 16px; +} + +.hero-center { + width: 689px; + height: 223px; + display: flex; + border: 3px solid #FFF6C7; + align-items: center; + justify-content: center; + gap: 30px; +} + +.hero-title { + font-weight: 600; + font-size: 96px; + background: linear-gradient(90deg, #FFF170 0%, #FFF6CA 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-stroke: 3px #683000; + text-align: center; + font-style: normal; + text-transform: none; + -webkit-text-stroke: 3px #683000; + margin: 0; +} + +.hero-cases-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + max-width: 600px; +} + +.hero-case-item { + width: 120px; + height: 120px; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); +} + +.hero-case-item img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.hero-right { + flex: 0 0 200px; + display: flex; + justify-content: center; +} + +.hero-info { + display: flex; + flex-direction: column; + gap: 20px; + color: white; +} + +.info-item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.info-label { + font-size: 14px; + margin-bottom: 5px; + opacity: 0.9; +} + +.info-value { + font-size: 24px; + font-weight: bold; +} + +/* 案例列表区域 */ +.cases-list { + padding: 60px 0; + background: #fef5f5; + min-height: calc(100vh - 400px); +} + +.breadcrumb { + margin-bottom: 40px; + font-size: 14px; + color: #666; + margin-left: 376px; +} + +.breadcrumb a { + color: #e74c3c; + text-decoration: none; +} + +.breadcrumb span { + margin: 0 10px; +} + +.cases-grid { + display: grid; + margin-top: 102px; + grid-template-columns: repeat(3, 0fr); + grid-row-gap: 84px; + grid-column-gap: 102px; + justify-content: center; + margin-bottom: 60px; +} + +.case-card { + background: #fff; + border-radius: 25px; + width: 467px; + height: 476px; + overflow: hidden; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; +} + +.case-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); +} + +.case-image { + width: 100%; + height: 286px; + overflow: hidden; +} + +.case-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.case-card:hover .case-image img { + transform: scale(1.05); +} + +.case-info { + padding: 20px; +} + +.case-info h3 { + font-size: 28px; + color: #545454; + margin-bottom: 8px; + font-weight: normal; +} + +.case-location { + font-size: 28px; + color: #545454; + margin-bottom: 12px; +} + +.case-result { + font-size: 32px; + color: #585858; +} + +.case-result .highlight { + color: #EB3D00; + font-weight: bold; +} + +.more-cases { + text-align: center; + padding: 40px 0; +} + +.more-cases p { + font-size: 18px; + color: #666; +} + +/* 响应式设计 */ +@media (max-width: 1200px) { + .cases-hero-content { + padding: 0 30px; + } + + .hero-cases-grid { + grid-template-columns: repeat(2, 1fr); + max-width: 400px; + } + + .hero-case-item { + width: 100px; + height: 100px; + } +} + +@media (max-width: 992px) { + .cases-hero { + height: 300px; + } + + .cases-hero-content { + flex-direction: column; + text-align: center; + gap: 20px; + padding: 20px; + } + + .hero-left, + .hero-right { + flex: none; + } + + .hero-title { + font-size: 36px; + } + + .hero-cases-grid { + grid-template-columns: repeat(3, 1fr); + gap: 15px; + } + + .hero-case-item { + width: 80px; + height: 80px; + } + + .cases-grid { + grid-template-columns: repeat(2, 0fr); + grid-column-gap: 50px; + grid-row-gap: 50px; + } + + .case-card { + width: 350px; + height: 380px; + } + + .case-image { + height: 220px; + } +} + +@media (max-width: 768px) { + .cases-hero { + height: 250px; + } + + .hero-title { + font-size: 28px; + } + + .hero-cases-grid { + grid-template-columns: repeat(2, 1fr); + gap: 10px; + } + + .hero-case-item { + width: 70px; + height: 70px; + } + + .cases-grid { + grid-template-columns: 1fr; + grid-column-gap: 0; + grid-row-gap: 30px; + justify-items: center; + } + + .case-card { + width: 300px; + height: 350px; + } + + .case-image { + height: 200px; + } + + .case-info h3 { + font-size: 20px; + } + + .case-location { + font-size: 18px; + } + + .case-result { + font-size: 20px; + } + + .stat-number { + font-size: 24px; + } + + .info-value { + font-size: 18px; + } +} + +@media (max-width: 480px) { + .cases-hero-content { + padding: 15px; + } + + .hero-title { + font-size: 24px; + } + + .hero-case-item { + width: 60px; + height: 60px; + } + + .case-info { + padding: 15px; + } + + .case-info h3 { + font-size: 14px; + } +} \ No newline at end of file diff --git a/website/css/contact.css b/website/css/contact.css new file mode 100644 index 0000000..0d05126 --- /dev/null +++ b/website/css/contact.css @@ -0,0 +1,282 @@ +/* 联系我们页面样式 */ + +/* Hero区域 */ +.contact-hero { + position: relative; + width: 100%; + height: 60vh; + min-height: 400px; + overflow: hidden; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); +} + +.contact-hero-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; +} + +.contact-hero-bg .hero-bg-image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + opacity: 0.3; +} + +.contact-hero-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; +} + +.hero-logo-section { + display: flex; + align-items: center; + gap: 30px; + background: transparent; + padding: 0; + border-radius: 0; + box-shadow: none; + backdrop-filter: none; +} + +.hero-logo-icon { + flex: 0 0 auto; +} + +.hero-logo-icon img { + width: 300px; + height: 228px; +} + +.hero-brand { + flex: 1; +} + +.brand-title { + font-weight: 600; + font-size: 138px; + color: #EB3D00; + text-stroke: 3px #FFFFFF; + text-align: left; + font-style: normal; + text-transform: none; + -webkit-text-stroke: 3px #FFFFFF; + margin: 0 0 8px 0; + line-height: 1.2; +} + +.brand-subtitle { + font-weight: 600; + font-size: 31px; + color: #EB3D00; + letter-spacing: 19px; + text-align: left; + font-style: normal; + text-transform: none; + margin: 0; +} + +/* 联系信息区域 */ +.contact-info { + padding: 80px 0; + background: #fff; + min-height: 60vh; +} + +.contact-title { + font-size: 36px; + font-weight: bold; + color: #333; + text-align: center; + margin-bottom: 60px; +} + +.contact-items { + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 50px; +} + +.contact-item { + text-align: center; +} + +.item-title { + font-size: 24px; + font-weight: bold; + color: #333; + margin-bottom: 20px; +} + +.item-content { + display: flex; + align-items: center; + justify-content: center; + gap: 15px; +} + +.contact-icon { + flex: 0 0 auto; + width: 40px; + height: 40px; + background: #fef5f5; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.contact-text { + font-size: 20px; + color: #666; + font-weight: 500; +} + +/* 响应式设计 */ +@media (max-width: 992px) { + .contact-hero { + height: 50vh; + min-height: 350px; + } + + .hero-logo-section { + flex-direction: column; + text-align: center; + padding: 0; + gap: 15px; + background: transparent; + border-radius: 0; + box-shadow: none; + } + + .hero-logo-icon img { + width: 80px; + height: 80px; + } + + .brand-title { + font-size: 48px; + } + + .brand-subtitle { + font-size: 18px; + letter-spacing: 1px; + } + + .contact-title { + font-size: 28px; + } + + .contact-items { + gap: 40px; + } + + .item-title { + font-size: 20px; + } + + .contact-text { + font-size: 18px; + } +} + +@media (max-width: 768px) { + .contact-hero { + height: 40vh; + min-height: 300px; + } + + .hero-logo-section { + padding: 0; + margin: 0 20px; + background: transparent; + border-radius: 0; + box-shadow: none; + } + + .hero-logo-icon img { + width: 60px; + height: 60px; + } + + .brand-title { + font-size: 36px; + } + + .brand-subtitle { + font-size: 16px; + letter-spacing: 0.5px; + } + + .contact-info { + padding: 60px 0; + } + + .contact-title { + font-size: 24px; + margin-bottom: 40px; + } + + .contact-items { + gap: 30px; + padding: 0 20px; + } + + .item-content { + flex-direction: column; + gap: 10px; + } + + .contact-icon { + width: 35px; + height: 35px; + } + + .item-title { + font-size: 18px; + } + + .contact-text { + font-size: 16px; + } +} + +@media (max-width: 480px) { + .hero-logo-section { + padding: 15px 20px; + margin: 0 15px; + } + + .brand-title { + font-size: 24px; + } + + .brand-subtitle { + font-size: 12px; + } + + .contact-title { + font-size: 20px; + } + + .item-title { + font-size: 16px; + } + + .contact-text { + font-size: 14px; + } +} \ No newline at end of file diff --git a/website/css/style.css b/website/css/style.css new file mode 100644 index 0000000..53a2cdc --- /dev/null +++ b/website/css/style.css @@ -0,0 +1,545 @@ +/* 基础样式重置 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; + font-size: 16px; + line-height: 1.6; + color: #333; + background-color: #fff; +} + +.container { + width: 100%; + margin: 0 auto; + padding: 0 20px; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + max-width: 100%; + height: auto; +} + +/* 导航栏 */ +.header { + position: absolute; + top: 0; + left: 0; + right: 0; + background: transparent; + z-index: 1000; +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; + height: 80px; + max-width: 100%; +} + +.logo { + display: flex; + margin-left: 111px; + align-items: center; + justify-content: center; + gap: 12px; +} + +.logo img { + height: 54px; + width: 65px; + border-radius: 5px; +} + +.logo span { + font-weight: 600; + font-size: 48px; + color: #EB3D00; + text-stroke: 1px #FFFFFF; + text-align: left; + font-style: normal; + text-transform: none; + -webkit-text-stroke: 1px #FFFFFF; +} + +.nav { + display: flex; + gap: 50px; + margin-right: 111px; +} + +.nav a { + font-size: 16px; + color: #666; + padding: 8px 4px; + position: relative; + transition: all 0.3s ease; + font-weight: 600; +} + +.nav a:hover, +.nav a.active { + color: #e74c3c; +} + +.nav a.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: #e74c3c; +} + +/* 滚动后固定导航栏 */ +.header-fixed { + position: fixed; + background: rgba(255, 255, 255, 0.98); + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); + animation: slideDown 0.3s ease; +} + +@keyframes slideDown { + from { + transform: translateY(-100%); + } + + to { + transform: translateY(0); + } +} + +/* Hero区域 */ +.hero { + position: relative; + width: 100%; + height: 100vh; + min-height: 600px; + max-height: 800px; + overflow: hidden; +} + +.hero-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; +} + +.hero-bg .bg-image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.hero-content-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; + margin: 0 264px 0 188px; + padding: 0 5%; +} + +.hero-text { + flex: 0 0 auto; + padding-top: 60px; +} + +.hero-text h1 { + font-size: 100px; + font-weight: bold; + color: #EB0000; + margin-bottom: 8px; + line-height: 1.3; + -webkit-text-stroke: 3px #FFFFFF; + + text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); +} + +.hero-text h2 { + font-size: 100px; + font-weight: bold; + color: #EB0000; + -webkit-text-stroke: 3px #FFFFFF; + line-height: 1.3; + text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); +} + +.hero-family { + flex: 0 0 auto; + display: flex; + align-items: center; + padding-top: 85px; +} + +.hero-family .family-image { + max-width: 860px; + height: auto; + filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1)); +} + +/* 产品特点区域 */ +.features { + padding: 51px 0; + background: url('../images/bg2.png') no-repeat center center; + background-size: cover; + position: relative; + height: 1211px; +} + +.section-title { + text-align: center; +} + +.section-title h2 { + font-size: 64px; + font-weight: bold; + color: #333; + margin-bottom: 12px; +} + +.section-title p { + font-size: 32px; + color: #B4B4B4; + margin: 0 auto; +} + +.features-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 100px; + margin: 0 auto; +} + +.features-phone { + /* flex: 0 0 400px; */ +} + +.features-phone img { + width: 876px; + height: 1028px; + margin-left: 382px; + margin-top: -35px; + /* filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15)); */ +} + +.features-list { + flex: 1; + display: flex; + flex-direction: column; + gap: 107px; + padding-top: 111px; +} + +.feature-item { + display: flex; + align-items: flex-start; + gap: 20px; + padding: 0; + transition: all 0.3s ease; +} + +.feature-item:hover { + transform: translateX(5px); +} + +.feature-icon { + flex: 0 0 40px; + width: 40px; + height: 40px; + background: #e74c3c; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 5px; +} + +.feature-icon .icon-text { + font-size: 18px; + color: white; +} + +.feature-info h3 { + font-size: 40px; + font-weight: bold; + color: #1A1A1A; + margin-bottom: 5px; +} + +.feature-info p { + font-size: 32px; + color: #B4B4B4; + line-height: 1.6; +} + +/* 成功案例区域 */ +.cases { + width: 100%; + height: 1484px; + padding: 43px 0; + background: url('../images/bg3.png') no-repeat center center; + background-size: cover; + position: relative; +} + +.cases .section-title h2 { + color: #1A1A1A; +} + +.cases-grid { + display: grid; + margin-top: 102px; + grid-template-columns: repeat(3, 0fr); + grid-row-gap: 84px; + grid-column-gap: 102px; + justify-content: center; +} + +.case-item { + background: #fff; + border-radius: 25px; + width: 467px; + height: 476px; + overflow: hidden; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; +} + +.case-item:hover { + transform: translateY(-10px); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); +} + +.case-image { + width: 100%; + height: 286px; + overflow: hidden; +} + +.case-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.case-item:hover .case-image img { + transform: scale(1.05); +} + +.case-info { + padding: 20px; +} + +.case-desc { + font-size: 28px; + color: #545454; + margin-bottom: 8px; +} + +.case-name { + font-size: 28px; + color: #545454; + margin-bottom: 12px; +} + +.case-result { + font-size: 32px; + color: #585858; +} + +.case-result .highlight { + color: #EB3D00; + font-weight: bold; +} + +/* 页脚 */ +.footer { + padding: 30px 0; + background: #171E2B; + border-top: 1px solid #eee; +} + +.footer-content { + text-align: center; +} + +.footer-content p { + font-size: 24px; + color: #FFFFFF; + margin-bottom: 8px; +} + +.footer-content .company { + color: #FFFFFF; +} + +/* 响应式设计 */ +@media (max-width: 992px) { + .hero { + height: auto; + min-height: 500px; + max-height: none; + } + + .hero-content-wrapper { + flex-direction: column; + text-align: center; + padding: 0 5%; + } + + .hero-text { + padding-top: 100px; + margin-bottom: 30px; + } + + .hero-text h1, + .hero-text h2 { + font-size: 38px; + } + + .hero-family { + padding-top: 0; + } + + .hero-family .family-image { + max-width: 400px; + } + + .features-content { + flex-direction: column; + gap: 50px; + text-align: center; + } + + .features-phone { + flex: none; + order: -1; + align-self: center; + } + + .features-phone img { + max-width: 300px; + } + + .features-list { + gap: 30px; + } + + .feature-item { + justify-content: center; + } + + .cases-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media () { + .header .container { + height: 60px; + } + + .logo span { + font-size: 20px; + } + + .nav { + gap: 20px; + } + + .nav a { + font-size: 14px; + } + + .hero-content-wrapper { + padding: 0 20px; + } + + .hero-text { + padding-top: 80px; + } + + .hero-text h1, + .hero-text h2 { + font-size: 32px; + } + + .hero-family .family-image { + max-width: 300px; + } + + .section-title h2 { + font-size: 28px; + } + + .features, + .cases { + padding: 60px 0; + } + + .cases-grid { + grid-template-columns: 1fr; + } + + .feature-item { + padding: 15px; + } + + .feature-info h3 { + font-size: 18px; + } +} + +@media (max-width: 480px) { + .nav { + gap: 15px; + } + + .nav a { + font-size: 12px; + } + + .hero-text h1, + .hero-text h2 { + font-size: 26px; + } + + .hero-family .family-image { + max-width: 250px; + } + + .section-title h2 { + font-size: 22px; + } + + .footer-content p { + font-size: 12px; + } +} \ No newline at end of file diff --git a/website/images/.gitkeep b/website/images/.gitkeep new file mode 100644 index 0000000..53283e4 --- /dev/null +++ b/website/images/.gitkeep @@ -0,0 +1,13 @@ +# 图片资源目录 + +请将以下图片放入此目录： + +1. logo.png - 网站Logo +2. favicon.ico - 网站图标 +3. family.png - Hero区域的家庭图片 +4. phone-mockup.png - 手机界面截图 +5. icon-target.png - 精准图标 +6. icon-flow.png - 流程图标 +7. icon-chat.png - 沟通图标 +8. icon-value.png - 性价比图标 +9. case1.jpg ~ case6.jpg - 成功案例图片 diff --git a/website/images/bg2.png b/website/images/bg2.png new file mode 100644 index 0000000..a5aa43a Binary files /dev/null and b/website/images/bg2.png differ diff --git a/website/images/bg3.png b/website/images/bg3.png new file mode 100644 index 0000000..8c592ba Binary files /dev/null and b/website/images/bg3.png differ diff --git a/website/images/case_1.png b/website/images/case_1.png new file mode 100644 index 0000000..e2608a5 Binary files /dev/null and b/website/images/case_1.png differ diff --git a/website/images/case_10.png b/website/images/case_10.png new file mode 100644 index 0000000..13bf48c Binary files /dev/null and b/website/images/case_10.png differ diff --git a/website/images/case_11.png b/website/images/case_11.png new file mode 100644 index 0000000..7f8d49f Binary files /dev/null and b/website/images/case_11.png differ diff --git a/website/images/case_12.png b/website/images/case_12.png new file mode 100644 index 0000000..b26bfd4 Binary files /dev/null and b/website/images/case_12.png differ diff --git a/website/images/case_2.png b/website/images/case_2.png new file mode 100644 index 0000000..7f9c26a Binary files /dev/null and b/website/images/case_2.png differ diff --git a/website/images/case_3.png b/website/images/case_3.png new file mode 100644 index 0000000..79562c7 Binary files /dev/null and b/website/images/case_3.png differ diff --git a/website/images/case_4.png b/website/images/case_4.png new file mode 100644 index 0000000..49d4a3f Binary files /dev/null and b/website/images/case_4.png differ diff --git a/website/images/case_5.png b/website/images/case_5.png new file mode 100644 index 0000000..b93ee69 Binary files /dev/null and b/website/images/case_5.png differ diff --git a/website/images/case_6.png b/website/images/case_6.png new file mode 100644 index 0000000..b2684b7 Binary files /dev/null and b/website/images/case_6.png differ diff --git a/website/images/case_7.png b/website/images/case_7.png new file mode 100644 index 0000000..5f52abf Binary files /dev/null and b/website/images/case_7.png differ diff --git a/website/images/case_8.png b/website/images/case_8.png new file mode 100644 index 0000000..34dc889 Binary files /dev/null and b/website/images/case_8.png differ diff --git a/website/images/case_9.png b/website/images/case_9.png new file mode 100644 index 0000000..2119939 Binary files /dev/null and b/website/images/case_9.png differ diff --git a/website/images/group_photo.png b/website/images/group_photo.png new file mode 100644 index 0000000..8d3614c Binary files /dev/null and b/website/images/group_photo.png differ diff --git a/website/images/ic_phone.png b/website/images/ic_phone.png new file mode 100644 index 0000000..c66298b Binary files /dev/null and b/website/images/ic_phone.png differ diff --git a/website/images/logo.png b/website/images/logo.png new file mode 100644 index 0000000..024a6c9 Binary files /dev/null and b/website/images/logo.png differ diff --git a/website/images/main_bg.png b/website/images/main_bg.png new file mode 100644 index 0000000..ccfde0f Binary files /dev/null and b/website/images/main_bg.png differ diff --git a/website/images/main_bg2.png b/website/images/main_bg2.png new file mode 100644 index 0000000..3d25295 Binary files /dev/null and b/website/images/main_bg2.png differ diff --git a/website/images/main_bg3.png b/website/images/main_bg3.png new file mode 100644 index 0000000..6c28ac8 Binary files /dev/null and b/website/images/main_bg3.png differ diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..a4aa37c --- /dev/null +++ b/website/index.html @@ -0,0 +1,174 @@ + + + + + + + + 相宜亲家 - 找女婿找儿媳，就用相宜亲家 + + + + +
+
+ + +
+
+ + +
+
+ 背景 +
+
+
+

找女婿 找儿媳

+

就用相宜亲家

+
+
+ 幸福家庭 +
+
+
+ + +
+
+
+

家长先筛好，儿女再见面，高效帮娃脱单

+

家长在平台挑选合适条件，直接电话聊透情况，省时间、超踏实、少折腾

+
+ +
+
+ 小程序界面 +
+
+
+ +
+

资源够精准

+

按你的择偶要求，定向推送配对相亲家庭

+
+
+
+ +
+

推进更顺畅

+

先由家长把基本条件聊清楚，孩子不用反复适合

+
+
+
+ +
+

沟通无阻碍

+

看中的家庭直接打给对方家长，信息同步更直接

+
+
+
+ +
+

性价比超高

+

前 2 次对接完全免费，后续小额付费就能持续联系

+
+
+
+
+
+
+ + +
+
+
+

成功案例

+

每天都有数百位家长成功在平台脱单，客服团队每天也都收到满满的好评，感谢每一位家长的认可与相信

+
+
+
+
+ 成功案例1 +
+
+

男·上海·31岁·本科学历

+

钱叔叔

+

注册平台2个月帮孩子脱单

+
+
+
+
+ 成功案例2 +
+
+

女·广州·28岁·研究生学历

+

宋叔叔

+

注册平台6个月帮孩子脱单

+
+
+
+
+ 成功案例3 +
+
+

男·北京·33岁·本科学历

+

刘阿姨

+

注册平台2个月帮孩子脱单

+
+
+ +
+
+ 成功案例4 +
+
+

女·广州·25岁·本科学历

+

沈叔叔

+

注册平台60天帮孩子脱单

+
+
+
+
+ 成功案例5 +
+
+

男·江苏·32岁·硕士学历

+

陈家长

+

注册平台4个月帮孩子脱单

+
+
+
+
+ 成功案例6 +
+
+

男·重庆·32岁·本科学历

+

陶家长

+

注册平台8个月帮孩子脱单

+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/website/js/main.js b/website/js/main.js new file mode 100644 index 0000000..a828128 --- /dev/null +++ b/website/js/main.js @@ -0,0 +1,107 @@ +/** + * 相宜亲家官网 - 主脚本 + */ + +document.addEventListener('DOMContentLoaded', function() { + // 导航栏滚动效果 + const header = document.querySelector('.header'); + const navLinks = document.querySelectorAll('.nav a'); + const heroSection = document.querySelector('.hero'); + + // 滚动时改变导航栏样式 + window.addEventListener('scroll', function() { + const heroHeight = heroSection ? heroSection.offsetHeight : 600; + + if (window.scrollY > heroHeight - 100) { + header.classList.add('header-fixed'); + } else { + header.classList.remove('header-fixed'); + } + + // 更新导航栏激活状态 + updateActiveNav(); + }); + + // 平滑滚动到锚点 + navLinks.forEach(link => { + link.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + + // 只对锚点链接（以#开头）进行平滑滚动处理 + if (targetId.startsWith('#')) { + e.preventDefault(); + const targetSection = document.querySelector(targetId); + + if (targetSection) { + const headerHeight = header.offsetHeight; + const targetPosition = targetSection.offsetTop - headerHeight; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + } + // 对于外部链接（如cases.html），让浏览器正常处理跳转 + }); + }); + + // 更新导航栏激活状态 + function updateActiveNav() { + const sections = document.querySelectorAll('section[id]'); + const scrollPosition = window.scrollY + 100; + + sections.forEach(section => { + const sectionTop = section.offsetTop - 100; + const sectionHeight = section.offsetHeight; + const sectionId = section.getAttribute('id'); + + if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { + navLinks.forEach(link => { + const href = link.getAttribute('href'); + // 只处理锚点链接的激活状态 + if (href.startsWith('#')) { + link.classList.remove('active'); + if (href === '#' + sectionId) { + link.classList.add('active'); + } + } + }); + } + }); + } + + // 案例卡片动画 + const caseItems = document.querySelectorAll('.case-item'); + + const observerOptions = { + threshold: 0.2, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, observerOptions); + + caseItems.forEach((item, index) => { + item.style.opacity = '0'; + item.style.transform = 'translateY(30px)'; + item.style.transition = `all 0.5s ease ${index * 0.1}s`; + observer.observe(item); + }); + + // 特性项动画 + const featureItems = document.querySelectorAll('.feature-item'); + + featureItems.forEach((item, index) => { + item.style.opacity = '0'; + item.style.transform = 'translateX(-30px)'; + item.style.transition = `all 0.5s ease ${index * 0.15}s`; + observer.observe(item); + }); +});