网站
This commit is contained in:
parent
daab68e317
commit
d22416ee3f
66
website/README.md
Normal file
66
website/README.md
Normal file
|
|
@ -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. **页脚** - 公司信息和备案号
|
||||
170
website/cases.html
Normal file
170
website/cases.html
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="相宜亲家成功案例 - 真实的相亲成功故事，帮助更多家庭找到合适的对象">
|
||||
<meta name="keywords" content="相亲成功案例,婚恋成功故事,相宜亲家案例">
|
||||
<title>成功案例 - 相宜亲家</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/cases.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="images/logo.png" alt="相宜亲家">
|
||||
<span>相宜亲家</span>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<a href="index.html">首页</a>
|
||||
<a href="cases.html" class="active">成功案例</a>
|
||||
<a href="contact.html">联系我们</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 顶部红色背景区域 -->
|
||||
<section class="cases-hero">
|
||||
<div class="cases-hero-bg">
|
||||
<img src="images/main_bg2.png" alt="成功案例背景" class="hero-bg-image">
|
||||
</div>
|
||||
<div class="cases-hero-content">
|
||||
|
||||
<div class="hero-center">
|
||||
<h1 class="hero-title">成功案例</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 案例列表区域 -->
|
||||
<section class="cases-list">
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a href="index.html">首页</a>
|
||||
<span>></span>
|
||||
<span>成功案例</span>
|
||||
</div>
|
||||
|
||||
<div class="cases-grid">
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_7.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>男·上海·31岁·本科学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">2个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_8.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>女·北京·29岁·研究生学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">6个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_9.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>男·广州·32岁·本科学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">2个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_10.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>女·深圳·26岁·本科学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">60天</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_11.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>男·杭州·33岁·硕士学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">4个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_12.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>女·南京·28岁·本科学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">5个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_1.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>男·武汉·30岁·本科学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">3个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_2.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>女·成都·27岁·硕士学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">4个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="images/case_3.png" alt="成功案例">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<h3>男·重庆·31岁·本科学历</h3>
|
||||
<p class="case-location">苏州市</p>
|
||||
<p class="case-result">注册平台<span class="highlight">6个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-cases">
|
||||
<p>更多案例 请联系我们</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer id="contact" class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<p class="company">相宜亲家苏州相宜信息科技有限公司 地址：江苏省苏州市姑苏区华池街88号晋合广场3幢5层217室</p>
|
||||
<p class="contact">联系方式：3390617394@qq.com 备案号：苏ICP备2026001066号-1</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
103
website/contact.html
Normal file
103
website/contact.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="联系相宜亲家 - 专业的相亲平台，为您提供优质的婚恋服务">
|
||||
<meta name="keywords" content="联系我们,相宜亲家,相亲平台,婚恋服务">
|
||||
<title>联系我们 - 相宜亲家</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/contact.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="images/logo.png" alt="相宜亲家">
|
||||
<span>相宜亲家</span>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<a href="index.html">首页</a>
|
||||
<a href="cases.html">成功案例</a>
|
||||
<a href="contact.html" class="active">联系我们</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero区域 -->
|
||||
<section class="contact-hero">
|
||||
<div class="contact-hero-bg">
|
||||
<img src="images/main_bg3.png" alt="联系我们背景" class="hero-bg-image">
|
||||
</div>
|
||||
<div class="contact-hero-content">
|
||||
<div class="hero-logo-section">
|
||||
<div class="hero-logo-icon">
|
||||
<img src="images/logo.png" alt="相宜亲家">
|
||||
</div>
|
||||
<div class="hero-brand">
|
||||
<h1 class="brand-title">相宜亲家</h1>
|
||||
<p class="brand-subtitle">家长帮孩子找对象的平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系信息区域 -->
|
||||
<section class="contact-info">
|
||||
<div class="container">
|
||||
<h2 class="contact-title">联系我们</h2>
|
||||
|
||||
<div class="contact-items">
|
||||
<div class="contact-item">
|
||||
<h3 class="item-title">联系地址</h3>
|
||||
<div class="item-content">
|
||||
<div class="contact-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="#e74c3c"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="contact-text">南京市建邺区云龙山路66号天羽美岸大厦</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<h3 class="item-title">联系邮箱</h3>
|
||||
<div class="item-content">
|
||||
<div class="contact-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#e74c3c"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="contact-text">400@vekj.cn</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<h3 class="item-title">服务监督电话</h3>
|
||||
<div class="item-content">
|
||||
<div class="contact-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="#e74c3c"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="contact-text">123-123-123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<p class="company">相宜亲家苏州相宜信息科技有限公司 地址：江苏省苏州市姑苏区华池街88号晋合广场3幢5层217室</p>
|
||||
<p class="contact">联系方式：3390617394@qq.com 备案号：苏ICP备2026001066号-1</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
397
website/css/cases.css
Normal file
397
website/css/cases.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
282
website/css/contact.css
Normal file
282
website/css/contact.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
545
website/css/style.css
Normal file
545
website/css/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
13
website/images/.gitkeep
Normal file
13
website/images/.gitkeep
Normal file
|
|
@ -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 - 成功案例图片
|
||||
BIN
website/images/bg2.png
Normal file
BIN
website/images/bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
website/images/bg3.png
Normal file
BIN
website/images/bg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
website/images/case_1.png
Normal file
BIN
website/images/case_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 722 KiB |
BIN
website/images/case_10.png
Normal file
BIN
website/images/case_10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 646 KiB |
BIN
website/images/case_11.png
Normal file
BIN
website/images/case_11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
BIN
website/images/case_12.png
Normal file
BIN
website/images/case_12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 KiB |
BIN
website/images/case_2.png
Normal file
BIN
website/images/case_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 966 KiB |
BIN
website/images/case_3.png
Normal file
BIN
website/images/case_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 673 KiB |
BIN
website/images/case_4.png
Normal file
BIN
website/images/case_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
website/images/case_5.png
Normal file
BIN
website/images/case_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 519 KiB |
BIN
website/images/case_6.png
Normal file
BIN
website/images/case_6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 941 KiB |
BIN
website/images/case_7.png
Normal file
BIN
website/images/case_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 KiB |
BIN
website/images/case_8.png
Normal file
BIN
website/images/case_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
website/images/case_9.png
Normal file
BIN
website/images/case_9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
BIN
website/images/group_photo.png
Normal file
BIN
website/images/group_photo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
website/images/ic_phone.png
Normal file
BIN
website/images/ic_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
website/images/logo.png
Normal file
BIN
website/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
website/images/main_bg.png
Normal file
BIN
website/images/main_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
website/images/main_bg2.png
Normal file
BIN
website/images/main_bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
BIN
website/images/main_bg3.png
Normal file
BIN
website/images/main_bg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
174
website/index.html
Normal file
174
website/index.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="相宜亲家 - 找女婿找儿媳，就用相宜亲家。家长先筛好，儿女再见面，高效帮娃脱单。">
|
||||
<meta name="keywords" content="相亲,婚恋,找对象,相宜亲家,脱单">
|
||||
<title>相宜亲家 - 找女婿找儿媳，就用相宜亲家</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="images/logo.png" alt="相宜亲家">
|
||||
<span>相宜亲家</span>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<a href="#home" class="active">首页</a>
|
||||
<a href="cases.html">成功案例</a>
|
||||
<a href="contact.html">联系我们</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero区域 -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-bg">
|
||||
<img src="images/main_bg.png" alt="背景" class="bg-image">
|
||||
</div>
|
||||
<div class="hero-content-wrapper">
|
||||
<div class="hero-text">
|
||||
<h1>找女婿 找儿媳</h1>
|
||||
<h2>就用相宜亲家</h2>
|
||||
</div>
|
||||
<div class="hero-family">
|
||||
<img src="images/group_photo.png" alt="幸福家庭" class="family-image">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品特点区域 -->
|
||||
<section id="features" class="features">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>家长先筛好，儿女再见面，高效帮娃脱单</h2>
|
||||
<p>家长在平台挑选合适条件，直接电话聊透情况，省时间、超踏实、少折腾</p>
|
||||
</div>
|
||||
|
||||
<div class="features-content">
|
||||
<div class="features-phone">
|
||||
<img src="images/ic_phone.png" alt="小程序界面">
|
||||
</div>
|
||||
<div class="features-list">
|
||||
<div class="feature-item">
|
||||
|
||||
<div class="feature-info">
|
||||
<h3>资源够精准</h3>
|
||||
<p>按你的择偶要求，定向推送配对相亲家庭</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
|
||||
<div class="feature-info">
|
||||
<h3>推进更顺畅</h3>
|
||||
<p>先由家长把基本条件聊清楚，孩子不用反复适合</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
|
||||
<div class="feature-info">
|
||||
<h3>沟通无阻碍</h3>
|
||||
<p>看中的家庭直接打给对方家长，信息同步更直接</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
|
||||
<div class="feature-info">
|
||||
<h3>性价比超高</h3>
|
||||
<p>前 2 次对接完全免费，后续小额付费就能持续联系</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 成功案例区域 -->
|
||||
<section id="cases" class="cases">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>成功案例</h2>
|
||||
<p>每天都有数百位家长成功在平台脱单，客服团队每天也都收到满满的好评，感谢每一位家长的认可与相信</p>
|
||||
</div>
|
||||
<div class="cases-grid">
|
||||
<div class="case-item">
|
||||
<div class="case-image">
|
||||
<img src="images/case_1.png" alt="成功案例1">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<p class="case-desc">男·上海·31岁·本科学历</p>
|
||||
<p class="case-name">钱叔叔</p>
|
||||
<p class="case-result">注册平台<span class="highlight">2个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<div class="case-image">
|
||||
<img src="images/case_2.png" alt="成功案例2">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<p class="case-desc">女·广州·28岁·研究生学历</p>
|
||||
<p class="case-name">宋叔叔</p>
|
||||
<p class="case-result">注册平台<span class="highlight">6个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<div class="case-image">
|
||||
<img src="images/case_3.png" alt="成功案例3">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<p class="case-desc">男·北京·33岁·本科学历</p>
|
||||
<p class="case-name">刘阿姨</p>
|
||||
<p class="case-result">注册平台<span class="highlight">2个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-item">
|
||||
<div class="case-image">
|
||||
<img src="images/case_4.png" alt="成功案例4">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<p class="case-desc">女·广州·25岁·本科学历</p>
|
||||
<p class="case-name">沈叔叔</p>
|
||||
<p class="case-result">注册平台<span class="highlight">60天</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<div class="case-image">
|
||||
<img src="images/case_5.png" alt="成功案例5">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<p class="case-desc">男·江苏·32岁·硕士学历</p>
|
||||
<p class="case-name">陈家长</p>
|
||||
<p class="case-result">注册平台<span class="highlight">4个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<div class="case-image">
|
||||
<img src="images/case_6.png" alt="成功案例6">
|
||||
</div>
|
||||
<div class="case-info">
|
||||
<p class="case-desc">男·重庆·32岁·本科学历</p>
|
||||
<p class="case-name">陶家长</p>
|
||||
<p class="case-result">注册平台<span class="highlight">8个月</span>帮孩子脱单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer id="contact" class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<p class="company">相宜亲家(苏州)网络科技有限公司 地址：江苏省苏州市昆山市周市镇萧林东路5018号都汇广场6号楼217室</p>
|
||||
<p class="contact">联系方式：393061738@qq.com 备案号：苏ICP备2026001086号-1</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
107
website/js/main.js
Normal file
107
website/js/main.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user