aiotagro/jiebanke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验

Browse Source
This commit is contained in:
ylweng
2025-09-21 21:12:27 +08:00
parent 467a4ead10
commit 14aca938de
64 changed files with 25067 additions and 18256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
website/css/animal.css
View File

@@ -1,11 +1,6 @@
/* 动物认领页面样式 */
.page-header.animal-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%2327ae60"/><circle cx="30" cy="40" r="15" fill="%232ecc71" opacity="0.8"/><circle cx="70" cy="30" r="10" fill="%232ecc71" opacity="0.6"/><circle cx="50" cy="60" r="20" fill="%232ecc71" opacity="0.7"/></svg>');
background-size: cover;
background-position: center;
}
/* 动物认领页面现在使用统一的hero-section样式 */
.feature-icon {
width: 80px;

11
website/css/flower.css
View File

@@ -1,15 +1,6 @@
/* 送花服务页面样式 */
/* 页面头部样式 */
.flower-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23ff6b6b"/><circle cx="20" cy="30" r="8" fill="%23f1c40f" opacity="0.8"/><circle cx="40" cy="20" r="6" fill="%23f1c40f" opacity="0.6"/><circle cx="30" cy="45" r="10" fill="%23f1c40f" opacity="0.7"/><circle cx="60" cy="35" r="7" fill="%23f1c40f" opacity="0.9"/><circle cx="50" cy="60" r="9" fill="%23f1c40f" opacity="0.8"/></svg>');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
padding: 3rem 0;
}
/* 送花服务页面现在使用统一的hero-section样式 */
/* 鲜花卡片样式 */
.flower-card {

8
website/css/reward.css
View File

@@ -1,12 +1,6 @@
/* 推广奖励页面样式 */
/* 页面头部样式 */
.page-header.reward-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f39c12"/><circle cx="20" cy="30" r="5" fill="%23ffffff" opacity="0.8"/><circle cx="40" cy="20" r="4" fill="%23ffffff" opacity="0.6"/><circle cx="30" cy="45" r="6" fill="%23ffffff" opacity="0.7"/><circle cx="60" cy="35" r="5" fill="%23ffffff" opacity="0.9"/><circle cx="50" cy="60" r="7" fill="%23ffffff" opacity="0.8"/><circle cx="75" cy="50" r="4" fill="%23ffffff" opacity="0.6"/></svg>');
background-size: cover;
background-position: center;
}
/* 推广奖励页面现在使用统一的hero-section样式 */
.benefit-box {
text-align: center;

87
website/css/style.css
View File

@@ -74,6 +74,93 @@ body {
overflow: hidden;
}
/* 各页面专属背景色 */
.hero-section.travel-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero-section.animal-hero {
background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
}
.hero-section.flower-hero {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}
.hero-section.reward-hero {
background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
}
/* 统一页面头部样式 */
.page-header {
color: white;
padding: 120px 0 100px;
margin-bottom: 80px;
position: relative;
overflow: hidden;
min-height: 500px;
display: flex;
align-items: center;
}
.page-header .container {
position: relative;
z-index: 2;
}
.page-header h1 {
font-size: var(--font-size-5xl);
font-weight: 700;
margin-bottom: 1.5rem;
}
.page-header .lead {
font-size: var(--font-size-xl);
margin-bottom: 2.5rem;
opacity: 0.9;
}
/* 响应式banner高度调整 */
@media (max-width: 768px) {
.hero-section {
padding: 100px 0 80px;
min-height: 400px;
}
.page-header {
padding: 100px 0 80px;
min-height: 400px;
}
.page-header h1 {
font-size: var(--font-size-4xl);
}
.page-header .lead {
font-size: var(--font-size-lg);
}
}
@media (max-width: 576px) {
.hero-section {
padding: 80px 0 60px;
min-height: 350px;
}
.page-header {
padding: 80px 0 60px;
min-height: 350px;
}
.page-header h1 {
font-size: var(--font-size-3xl);
}
.page-header .lead {
font-size: var(--font-size-base);
}
}
.hero-section::before {
content: "";
position: absolute;

24
website/css/travel.css
View File

@@ -1,28 +1,6 @@
/* 旅行结伴页面样式 */
.page-header.travel-header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232ecc71"/><path d="M20,30 Q40,10 60,30 T100,30 L100,100 L20,100 Z" fill="%2327ae60" opacity="0.7"/></svg>');
background-size: cover;
background-position: center;
}
.travel-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: cover;
background-position: center;
position: relative;
}
.travel-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
}
/* 旅行结伴页面现在使用统一的hero-section样式 */
.travel-plan-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;