/**
* 自然生态风格样�? * 超慧商贸采购�? */
:root {
/* 优化的配色方�?- 更专�?*/
--deep-green: #1a3d0e;
--grass-green: #4a7c2c;
--light-green: #6b9d3e;
--accent-green: #8bc34a;
--beige: #f8faf5;
--nature-brown: #6b5637;
--leaf-green: #3d6b2e;
--sky-blue: #a8d5e8;
--earth-brown: #5a4033;
--white: #ffffff;
--text-dark: #1a1a1a;
/* 新增专业�?*/
--primary-dark: #0f2818;
--primary-main: #2d5016;
--primary-light: #4a7c2c;
--accent-bright: #8bc34a;
--neutral-100: #f8f9fa;
--neutral-200: #e9ecef;
--neutral-300: #dee2e6;
--neutral-400: #ced4da;
--neutral-500: #adb5bd;
--neutral-600: #6c757d;
--neutral-700: #495057;
--neutral-800: #343a40;
--neutral-900: #212529;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
width: 100%;
position: relative;
}
/* Container 响应式优�?*/
.container {
padding-left: 1rem;
padding-right: 1rem;
}
/* ========== Hero 模块 - 全新设计 ========== */
/* Hero 区域基础样式 - 深色背景+荧光绿点缀对比模式（调亮） */
.hero-section {
height: 100vh;
background:
/* 径向渐变 - 深色背景（调亮） */
radial-gradient(circle at 50% 50%,
rgba(74, 124, 44, 0.25) 0%,
rgba(45, 80, 22, 0.2) 30%,
rgba(30, 60, 20, 0.6) 60%,
rgba(20, 40, 15, 0.8) 100%),
/* 线性渐�?- 深色基调（调亮） */
linear-gradient(135deg,
rgba(20, 40, 15, 0.85) 0%,
rgba(30, 60, 20, 0.8) 30%,
rgba(45, 90, 30, 0.75) 60%,
rgba(60, 110, 45, 0.7) 100%);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
width: 100%;
padding-top: 100px;
}
/* 简化的背景效果 */
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
/* 炫酷的粒子效�?*/
.hero-particles {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.12), transparent),
radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.08), transparent),
radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.1), transparent),
radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,0.06), transparent),
radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.08), transparent);
background-size: 200px 200px, 300px 300px, 250px 250px, 180px 180px, 220px 220px;
animation: particleFloat 20s linear infinite;
opacity: 0.3;
}
@keyframes particleFloat {
0% {
transform: translateY(0) rotate(0deg);
background-position: 0% 0%, 20% 20%, 40% 40%, 60% 60%, 80% 80%;
}
50% {
transform: translateY(-30px) rotate(180deg);
background-position: 50% 30%, 70% 50%, 30% 70%, 90% 10%, 10% 90%;
opacity: 0.8;
}
100% {
transform: translateY(0) rotate(360deg);
background-position: 100% 60%, 80% 80%, 60% 100%, 40% 20%, 20% 40%;
}
}
/* 炫酷的光线效�?*/
.hero-light-rays {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
/* 渐变弥散光斑 - 深色背景+荧光绿点缀 */
.hero-gradient-orbs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.gradient-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.6;
animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(74, 124, 44, 0.4), transparent);
top: -50px;
left: -50px;
animation-delay: 0s;
}
.orb-2 {
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(45, 80, 22, 0.3), transparent);
bottom: -100px;
right: -100px;
animation-delay: -7s;
}
.orb-3 {
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(74, 124, 44, 0.3), transparent);
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
animation-delay: -14s;
}
@keyframes orbFloat {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.5;
}
25% {
transform: translate(40px, -30px) scale(1.15);
opacity: 0.7;
}
50% {
transform: translate(-20px, -50px) scale(0.95);
opacity: 0.6;
}
75% {
transform: translate(30px, 20px) scale(1.1);
opacity: 0.65;
}
}
/* 漂浮元素 - 景深效果 */
.hero-floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.floating-element {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: floatElement 20s ease-in-out infinite;
}
.float-1 {
width: 8px;
height: 8px;
top: 20%;
left: 10%;
animation-delay: 0s;
filter: blur(2px);
}
.float-2 {
width: 12px;
height: 12px;
top: 40%;
left: 80%;
animation-delay: -4s;
filter: blur(3px);
}
.float-3 {
width: 6px;
height: 6px;
top: 70%;
left: 20%;
animation-delay: -8s;
filter: blur(1.5px);
}
.float-4 {
width: 15px;
height: 15px;
top: 30%;
left: 60%;
animation-delay: -12s;
filter: blur(4px);
}
.float-5 {
width: 10px;
height: 10px;
top: 80%;
left: 70%;
animation-delay: -16s;
filter: blur(2.5px);
}
.float-6 {
width: 5px;
height: 5px;
top: 15%;
left: 40%;
animation-delay: -6s;
filter: blur(1px);
}
@keyframes floatElement {
0%, 100% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-30px) translateX(20px) scale(1.2);
opacity: 0.5;
}
50% {
transform: translateY(-50px) translateX(-10px) scale(0.9);
opacity: 0.4;
}
75% {
transform: translateY(-20px) translateX(15px) scale(1.1);
opacity: 0.6;
}
}
/* 动态连线效�?- 科技感格�?*/
.hero-data-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.data-line {
position: absolute;
height: 0.5px;
background: linear-gradient(90deg,
transparent 0%,
rgba(139, 195, 74, 0.2) 15%,
rgba(0, 200, 220, 0.3) 50%,
rgba(139, 195, 74, 0.2) 85%,
transparent 100%);
animation: dataLineFlow 10s linear infinite;
}
.data-line::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: rgba(0, 200, 220, 0.9);
border-radius: 50%;
box-shadow:
0 0 10px rgba(0, 200, 220, 0.8),
0 0 20px rgba(0, 200, 220, 0.5);
animation: dataDotMove 10s linear infinite;
}
/* 交汇点发光圆�?*/
.hero-intersections {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.intersection-point {
position: absolute;
width: 4px;
height: 4px;
background: rgba(139, 195, 74, 0.6);
border-radius: 50%;
box-shadow: 0 0 8px rgba(139, 195, 74, 0.8);
animation: intersectionPulse 4s ease-in-out infinite;
}
.intersection-1 {
top: 25%;
left: 20%;
animation-delay: 0s;
}
.intersection-2 {
top: 45%;
left: 45%;
animation-delay: -1.5s;
}
.intersection-3 {
top: 55%;
left: 30%;
animation-delay: -3s;
}
.intersection-4 {
top: 35%;
left: 65%;
animation-delay: -0.8s;
}
@keyframes intersectionPulse {
0%, 100% {
transform: scale(1);
opacity: 0.4;
}
50% {
transform: scale(1.5);
opacity: 1;
}
}
/* 数据与地球的连接�?*/
.hero-data-connections {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.connection-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.connection-line {
fill: none;
stroke: url(#connectionGradient);
stroke-width: 0.5;
stroke-dasharray: 5, 5;
animation: connectionFlow 8s linear infinite;
opacity: 0.6;
}
.connection-line.line-1 {
animation-delay: 0s;
}
.connection-line.line-2 {
animation-delay: -2.5s;
}
.connection-line.line-3 {
animation-delay: -5s;
}
.connection-dot {
fill: rgba(139, 195, 74, 0.8);
filter: drop-shadow(0 0 4px rgba(139, 195, 74, 0.8));
animation: dotPulse 3s ease-in-out infinite;
}
.connection-dot.dot-1 {
animation-delay: 0s;
}
.connection-dot.dot-2 {
animation-delay: -1s;
}
.connection-dot.dot-3 {
animation-delay: -2s;
}
@keyframes connectionFlow {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -20;
}
}
@keyframes dotPulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 1;
}
}
.line-1 {
top: 30%;
left: 0;
width: 40%;
transform: rotate(-15deg);
animation-delay: 0s;
}
.line-2 {
top: 60%;
left: 30%;
width: 50%;
transform: rotate(10deg);
animation-delay: -3.5s;
}
.line-3 {
top: 45%;
left: 10%;
width: 35%;
transform: rotate(-8deg);
animation-delay: -7s;
}
@keyframes dataLineFlow {
0% {
opacity: 0;
transform: translateX(-100%) rotate(var(--rotation, 0deg));
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.6;
}
100% {
opacity: 0;
transform: translateX(100%) rotate(var(--rotation, 0deg));
}
}
@keyframes dataDotMove {
0% {
left: 0;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
/* 炫酷的光线效�?*/
.hero-light-rays {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.hero-ray {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 150%;
background: linear-gradient(to bottom,
transparent,
rgba(255,255,255,0.3) 30%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0.3) 70%,
transparent);
transform-origin: center center;
animation: rayRotate 15s linear infinite;
}
.hero-ray:nth-child(1) { animation-delay: 0s; }
.hero-ray:nth-child(2) { animation-delay: -5s; }
.hero-ray:nth-child(3) { animation-delay: -10s; }
@keyframes rayRotate {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg) scaleY(0);
}
10% {
opacity: 0.8;
transform: translate(-50%, -50%) rotate(0deg) scaleY(1);
}
90% {
opacity: 0.8;
transform: translate(-50%, -50%) rotate(360deg) scaleY(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) rotate(360deg) scaleY(0);
}
}
/* 简化的波浪效果 */
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: url("data:image/svg+xml,");
background-size: cover;
animation: waveMove 15s ease-in-out infinite;
}
@keyframes waveMove {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-50px); }
}
/* AOS动画修复 - 只修复hero-content的基础显示 */
.aos-ready .hero-content {
opacity: 1 !important;
}
/* 不禁用[data-aos]元素的动�?*/
/* 确保所有元素不会超出视�?*/
* {
box-sizing: border-box;
}
/* 修复导航栏固定定位导致的布局问题 */
.navbar-custom {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
}
html {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
overflow-y: scroll; /* 始终显示滚动�?*/
scroll-behavior: smooth; /* 平滑滚动 */
}
body {
font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
background: linear-gradient(135deg, #4a7c59 0%, #8bc34a 50%, #5a9216 100%);
overflow-x: hidden;
position: relative;
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,");
background-size: cover;
background-position: center;
opacity: 0.3;
z-index: -1;
}
/* 导航栏样�?- 统一风格�?*/
.navbar-custom {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: rgba(45, 80, 22, 0.95);
backdrop-filter: blur(20px);
box-shadow: 0 2px 20px rgba(45, 80, 22, 0.3);
transition: all 0.3s ease;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(139, 195, 74, 0.3);
min-height: 70px;
}
.navbar-custom.scrolled {
background: rgba(45, 80, 22, 0.98);
box-shadow: 0 2px 30px rgba(45, 80, 22, 0.4);
}
.navbar-custom .container {
min-height: 70px;
display: flex;
align-items: center;
position: relative;
max-width: none !important;
padding-left: 2rem;
padding-right: 2rem;
}
/* 导航栏布局优化 - 桌面�?*/
.navbar-custom .navbar-brand {
order: 1;
flex: 0 0 auto;
margin-right: 2rem;
}
.navbar-custom .navbar-collapse {
order: 2;
flex-grow: 1;
}
.navbar-custom .navbar-nav {
justify-content: center;
display: flex;
gap: 2rem;
margin: 0;
}
.navbar-custom .navbar-toggler {
order: 3;
margin-left: auto;
}
/* 移动端布局优化 */
@media (max-width: 768px) {
.navbar-custom .navbar-brand {
order: 1;
margin-right: auto;
}
.navbar-custom .navbar-toggler {
order: 2;
}
.navbar-custom .navbar-collapse {
order: 3;
width: 100%;
margin-top: 0.5rem;
}
}
/* 导航栏响应式设计 */
@media (max-width: 1200px) {
.nav-link {
margin: 0 0.6rem;
font-size: 0.9rem;
}
}
@media (max-width: 992px) {
.navbar-brand {
margin-right: 1rem;
}
.brand-name {
font-size: 1.2rem;
}
.nav-link {
margin: 0 0.5rem;
font-size: 0.85rem;
}
}
@media (max-width: 768px) {
.navbar-custom {
padding: 0.6rem 0;
min-height: 60px;
}
.navbar-custom .container {
min-height: 60px;
}
.navbar-brand {
margin-right: auto;
}
.brand-logo {
margin-right: 10px;
/* 保持宽度，截掉上下部�?*/
max-width: 126px;
width: 126px;
height: 50px;
object-fit: cover;
object-position: center;
}
.brand-name {
font-size: 1.1rem;
}
.navbar-nav {
background: rgba(45, 80, 22, 0.98);
padding: 1rem 0;
border-radius: 0 0 12px 12px;
box-shadow: 0 4px 20px rgba(45, 80, 22, 0.3);
margin-top: 0.5rem;
}
.nav-item {
text-align: center;
margin: 0.3rem 0;
}
.nav-link {
margin: 0;
padding: 0.8rem 1rem;
display: block;
color: rgba(255, 255, 255, 0.9) !important;
}
.navbar-toggler {
border: none;
padding: 4px 8px;
order: 3;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
}
@media (max-width: 576px) {
.brand-name {
font-size: 1rem;
}
.navbar-brand {
flex-direction: column;
align-items: flex-start;
}
.brand-logo {
margin-right: 0;
margin-bottom: 4px;
}
}
/* Hero按钮样式 - 简洁版 */
.hero-buttons {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn i {
font-size: 1rem;
}
.btn-primary {
background: var(--light-green);
color: white;
border: none;
}
.btn-primary:hover {
background: var(--primary-main);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 195, 74, 0.3);
}
.btn-outline-light {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-outline-light:hover {
background: white;
color: var(--primary-main);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
/* 响应式调�?*/
@media (max-width: 768px) {
.hero-stats {
gap: 2rem;
margin-bottom: 2rem;
}
.stat-icon {
font-size: 2rem;
}
.stat-number {
font-size: 2rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.btn {
width: 200px;
justify-content: center;
}
}
/* 品牌标识样式 - 统一风格�?*/
.navbar-brand {
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.3s ease;
margin-right: 2rem;
}
.brand-logo {
margin-right: 12px;
transition: all 0.3s ease;
/* 移除 filter 以保留原始品牌色�?*/
/* 保持宽度，截掉上下部�?*/
max-width: 144px;
width: 144px;
height: 60px;
object-fit: cover;
object-position: center;
}
.brand-name {
font-size: 1.3rem;
font-weight: 600;
color: #ffffff;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.navbar-brand:hover .brand-logo {
filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(139, 195, 74, 0.6));
transform: scale(1);
}
.navbar-brand:hover .brand-name {
color: var(--light-green);
}
/* 导航链接样式 - 统一风格�?*/
.nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
margin: 0 0.8rem;
transition: all 0.3s ease;
position: relative;
font-size: 0.95rem;
padding: 0.5rem 0;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 100%;
height: 2px;
background: var(--light-green);
transition: all 0.3s ease;
border-radius: 1px;
}
.nav-link:hover {
color: #ffffff !important;
}
.nav-link:hover::after {
transform: translateX(-50%) scaleX(1);
}
.nav-link.active {
color: var(--light-green) !important;
}
.nav-link.active::after {
transform: translateX(-50%) scaleX(1);
}
.nav-link:hover {
color: var(--light-green) !important;
}
.nav-link::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: var(--light-green);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 80%;
}
/* 英雄区域背景 - 炫酷�?*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 50%, rgba(139, 195, 74, 0.3) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(74, 124, 44, 0.3) 0%, transparent 50%);
z-index: 1;
}
/* 粒子动画 */
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: float-up 8s infinite linear;
}
.particle-1 { width: 4px; height: 4px; left: 10%; animation-delay: 0s; }
.particle-2 { width: 6px; height: 6px; left: 20%; animation-delay: 1s; }
.particle-3 { width: 3px; height: 3px; left: 30%; animation-delay: 2s; }
.particle-4 { width: 5px; height: 5px; left: 40%; animation-delay: 3s; }
.particle-5 { width: 4px; height: 4px; left: 60%; animation-delay: 4s; }
.particle-6 { width: 7px; height: 7px; left: 70%; animation-delay: 5s; }
.particle-7 { width: 3px; height: 3px; left: 80%; animation-delay: 6s; }
.particle-8 { width: 5px; height: 5px; left: 90%; animation-delay: 7s; }
@keyframes float-up {
0% {
transform: translateY(100vh) scale(0);
opacity: 0;
}
10% {
opacity: 1;
transform: translateY(80vh) scale(1);
}
90% {
opacity: 1;
transform: translateY(20vh) scale(1);
}
100% {
transform: translateY(0) scale(0);
opacity: 0;
}
}
/* 光线效果 */
.light-rays {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.ray {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 200%;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
transform-origin: center;
animation: rotate-ray 20s infinite linear;
}
.ray-1 { transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0s; }
.ray-2 { transform: translate(-50%, -50%) rotate(60deg); animation-delay: 6.67s; }
.ray-3 { transform: translate(-50%, -50%) rotate(120deg); animation-delay: 13.33s; }
@keyframes rotate-ray {
0% { opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 0; transform: translate(-50%, -50%) rotate(360deg); }
}
/* 波浪背景 */
.wave-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
z-index: 1;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,");
background-size: cover;
background-repeat: no-repeat;
}
.wave-1 { animation: wave-move 8s infinite linear; opacity: 0.3; }
.wave-2 { animation: wave-move 12s infinite linear reverse; opacity: 0.2; animation-delay: 2s; }
.wave-3 { animation: wave-move 10s infinite linear; opacity: 0.1; animation-delay: 4s; }
@keyframes wave-move {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* 英雄区域内的所有元素重置默认样�?*/
.hero-section * {
box-sizing: border-box;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 80%, rgba(139, 195, 74, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(90, 146, 22, 0.3) 0%, transparent 50%);
z-index: 1;
}
/* 主要内容区域：左右布局 */
.hero-main-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 2rem;
}
/* 右侧动画容器 - 破框而出 */
.hero-animation {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
min-height: 350px;
}
.globe-container {
width: 380px;
height: 380px;
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
/* 破框而出效果 - 向右偏移 */
transform: translateX(50px);
margin-right: -30px;
}
/* 3D地球 - 绿色风格，跟页面一�?*/
.globe {
width: 100%;
height: 100%;
border-radius: 50%;
background:
/* 科技网格 overlay - 半透明 */
repeating-linear-gradient(
0deg,
transparent,
transparent 14px,
rgba(139, 195, 74, 0.12) 15px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 14px,
rgba(139, 195, 74, 0.12) 15px
),
/* 云层纹理 */
radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 30%),
radial-gradient(circle at 30% 60%, rgba(255, 255, 255, 0.1) 0%, transparent 25%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 20%),
/* 地球渐变 - 绿色海洋 */
radial-gradient(circle at 35% 35%,
rgba(107, 157, 62, 0.95) 0%,
rgba(74, 124, 44, 0.98) 40%,
rgba(45, 80, 22, 1) 70%,
rgba(26, 61, 14, 1) 100%);
box-shadow:
/* 增强大气层辉�?- 绿色 */
0 0 60px rgba(139, 195, 74, 0.4),
0 0 100px rgba(139, 195, 74, 0.3),
0 0 150px rgba(107, 157, 62, 0.2),
0 0 200px rgba(74, 124, 44, 0.1),
/* 内阴�?- 云层深度 */
inset -50px -50px 100px rgba(0, 0, 0, 0.7),
inset 25px 25px 50px rgba(255, 255, 255, 0.15),
/* 陆地阴影 */
inset 0 0 80px rgba(100, 150, 100, 0.2);
position: relative;
animation: globe-rotate 30s infinite linear;
overflow: hidden;
}
/* 增强大气层光�?- 绿色 */
.globe::before {
content: '';
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background: radial-gradient(circle,
rgba(139, 195, 74, 0.4) 0%,
rgba(107, 157, 62, 0.25) 25%,
rgba(74, 124, 44, 0.15) 50%,
transparent 70%);
animation: atmospherePulse 5s ease-in-out infinite;
filter: blur(15px);
z-index: 1;
}
/* 高光反射 - 增强�?*/
.globe::after {
content: '';
position: absolute;
top: 12%;
left: 18%;
width: 30%;
height: 18%;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.2) 40%,
transparent 70%);
border-radius: 50%;
filter: blur(10px);
z-index: 2;
}
/* 科技网格�?- 绿色风格 */
.globe-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 14px,
rgba(139, 195, 74, 0.15) 15px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 14px,
rgba(139, 195, 74, 0.15) 15px
);
animation: gridRotate 30s infinite linear reverse;
opacity: 0.7;
z-index: 3;
}
@keyframes gridRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes atmospherePulse {
0%, 100% {
transform: scale(1);
opacity: 0.4;
}
50% {
transform: scale(1.15);
opacity: 0.6;
}
}
.globe-ring {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(139, 195, 74, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.ring-1 {
width: 115%;
height: 115%;
animation: ring-rotate 15s infinite linear reverse;
box-shadow: 0 0 15px rgba(139, 195, 74, 0.2);
}
.ring-2 {
width: 130%;
height: 130%;
animation: ring-rotate 20s infinite linear;
box-shadow: 0 0 20px rgba(139, 195, 74, 0.25);
}
.ring-3 {
width: 150%;
height: 150%;
animation: ring-rotate 25s infinite linear reverse;
box-shadow: 0 0 25px rgba(139, 195, 74, 0.2);
}
.ring-4 {
width: 180%;
height: 180%;
animation: ring-rotate 30s infinite linear;
box-shadow: 0 0 30px rgba(139, 195, 74, 0.15);
border-width: 0.5px;
}
/* 粒子轨道�?- 绿色风格 */
.orbit-ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
border: 1px dashed rgba(139, 195, 74, 0.5);
box-shadow: 0 0 10px rgba(139, 195, 74, 0.2);
}
.orbit-1 {
width: 140%;
height: 140%;
animation: orbitRotate 20s infinite linear;
}
.orbit-2 {
width: 175%;
height: 175%;
animation: orbitRotate 28s infinite linear reverse;
}
.orbit-3 {
width: 210%;
height: 210%;
animation: orbitRotate 35s infinite linear;
}
/* 轨道1上的光斑 - 亮绿�?*/
.orbit-1::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: rgba(139, 195, 74, 1);
border-radius: 50%;
top: 50%;
right: 0;
transform: translateY(-50%);
box-shadow:
0 0 20px rgba(139, 195, 74, 1),
0 0 40px rgba(139, 195, 74, 0.6),
0 0 60px rgba(139, 195, 74, 0.3);
animation: dotPulse 2s ease-in-out infinite;
}
/* 轨道2上的光斑 - 中绿�?*/
.orbit-2::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgba(107, 157, 62, 1);
border-radius: 50%;
top: 50%;
left: 0;
transform: translateY(-50%);
box-shadow:
0 0 18px rgba(107, 157, 62, 1),
0 0 35px rgba(107, 157, 62, 0.6),
0 0 50px rgba(107, 157, 62, 0.3);
animation: dotPulse 2.5s ease-in-out infinite;
}
/* 轨道3上的光斑 - 深绿�?*/
.orbit-3::before {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: rgba(74, 124, 44, 1);
border-radius: 50%;
top: 50%;
right: 0;
transform: translateY(-50%);
box-shadow:
0 0 15px rgba(74, 124, 44, 1),
0 0 30px rgba(74, 124, 44, 0.6),
0 0 45px rgba(74, 124, 44, 0.3);
animation: dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% {
transform: translateY(-50%) scale(1);
opacity: 1;
}
50% {
transform: translateY(-50%) scale(1.3);
opacity: 0.8;
}
}
border: 1px dashed rgba(139, 195, 74, 0.2);
}
.orbit-1 {
width: 200%;
height: 200%;
animation: orbitRotate 25s infinite linear;
}
.orbit-1::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgba(139, 195, 74, 0.6);
border-radius: 50%;
top: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 10px rgba(139, 195, 74, 0.6);
}
.orbit-2 {
width: 220%;
height: 220%;
animation: orbitRotate 30s infinite linear reverse;
}
.orbit-2::before {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
bottom: 0;
left: 30%;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.orbit-3 {
width: 240%;
height: 240%;
animation: orbitRotate 35s infinite linear;
}
.orbit-3::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: rgba(0, 200, 150, 0.5);
border-radius: 50%;
top: 50%;
right: 0;
transform: translateY(-50%);
box-shadow: 0 0 12px rgba(0, 200, 150, 0.5);
}
/* 卫星轨道 - 加粗发光�?*/
.orbit-ring::after {
content: '';
position: absolute;
width: 40px;
height: 4px;
background: linear-gradient(90deg,
transparent,
rgba(139, 195, 74, 0.8),
transparent);
border-radius: 2px;
top: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 15px rgba(139, 195, 74, 0.8);
animation: satelliteGlow 3s ease-in-out infinite;
}
@keyframes satelliteGlow {
0%, 100% {
opacity: 0.6;
transform: translateX(-50%) scale(1);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.2);
}
}
@keyframes orbitRotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.globe-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: white;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
@keyframes globe-rotate {
0% { transform: rotateY(0deg) rotateX(5deg); }
100% { transform: rotateY(360deg) rotateX(5deg); }
}
@keyframes ring-rotate {
0% { transform: translate(-50%, -50%) rotateZ(0deg); }
100% { transform: translate(-50%, -50%) rotateZ(360deg); }
}
@keyframes globePulse {
0%, 100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.1);
opacity: 0.5;
}
}
/* 炫酷地球动画 - 光点效果 */
.hero-globe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
height: 280px;
z-index: 1;
pointer-events: none;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.globe-circle {
display: none;
}
.globe-circle::before {
content: '';
position: absolute;
top: 10%;
left: 10%;
width: 30%;
height: 30%;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.8),
transparent);
border-radius: 50%;
filter: blur(10px);
}
/* 地球光环效果 */
.globe-circle::after {
content: '';
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
border: 2px solid rgba(139, 195, 74, 0.3);
border-radius: 50%;
animation: globeRing 8s linear infinite;
}
@keyframes globeRing {
0% {
transform: rotate(0deg) scale(1);
opacity: 0.5;
}
50% {
transform: rotate(180deg) scale(1.05);
opacity: 0.8;
}
100% {
transform: rotate(360deg) scale(1);
opacity: 0.5;
}
}
.globe-icon {
display: none;
}
/* 地球周围的光�?*/
.globe-sparkle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
animation: sparkle 2s ease-in-out infinite;
}
.globe-sparkle:nth-child(1) {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.globe-sparkle:nth-child(2) {
top: 30%;
right: 20%;
animation-delay: 0.5s;
}
.globe-sparkle:nth-child(3) {
bottom: 30%;
left: 15%;
animation-delay: 1s;
}
.globe-sparkle:nth-child(4) {
bottom: 20%;
right: 25%;
animation-delay: 1.5s;
}
@keyframes sparkle {
0%, 100% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1);
}
}
/* 滚动指示�?- 炫酷效果 */
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: white;
opacity: 0.8;
cursor: pointer;
transition: all 0.3s ease;
z-index: 100;
}
.scroll-indicator:hover {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
.scroll-mouse {
width: 30px;
height: 50px;
border: 2px solid white;
border-radius: 15px;
position: relative;
display: flex;
justify-content: center;
padding-top: 8px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
animation: mousePulse 2s ease-in-out infinite;
}
@keyframes mousePulse {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}
}
.mouse-wheel {
width: 4px;
height: 8px;
background: white;
border-radius: 2px;
animation: scroll 2s infinite;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
@keyframes scroll {
0% {
transform: translateY(0) scaleY(1);
opacity: 1;
}
50% {
transform: translateY(10px) scaleY(0.8);
opacity: 0.5;
}
100% {
transform: translateY(0) scaleY(1);
opacity: 1;
}
}
.scroll-text {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
animation: textFade 2s ease-in-out infinite;
}
@keyframes textFade {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* 文字内容 - 优化字体排版 */
.hero-text-content {
margin-bottom: 0;
}
.hero-title {
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 800;
margin-bottom: 1rem;
color: white;
/* 荧光绿发光效�?*/
text-shadow:
0 0 20px rgba(74, 124, 44, 0.8),
0 0 40px rgba(74, 124, 44, 0.5),
0 0 60px rgba(74, 124, 44, 0.3),
0 4px 12px rgba(0, 0, 0, 0.5);
line-height: 1.2;
letter-spacing: 2px;
/* 强制一行显�?*/
white-space: nowrap;
position: relative;
/* 统一字体 */
font-family: 'Inter', 'Montserrat', '思源黑体', 'Microsoft YaHei', sans-serif;
}
.hero-title span {
position: relative;
display: inline;
}
/* 荧光绿高亮效�?- 增强�?*/
.hero-title .highlight {
color: #4a7c2c;
text-shadow:
0 0 15px rgba(74, 124, 44, 1),
0 0 30px rgba(74, 124, 44, 0.8),
0 0 45px rgba(74, 124, 44, 0.6),
0 0 60px rgba(74, 124, 44, 0.4);
animation: highlightPulse 3s ease-in-out infinite;
}
@keyframes highlightPulse {
0%, 100% {
text-shadow:
0 0 15px rgba(74, 124, 44, 1),
0 0 30px rgba(74, 124, 44, 0.8),
0 0 45px rgba(74, 124, 44, 0.6);
}
50% {
text-shadow:
0 0 25px rgba(74, 124, 44, 1),
0 0 50px rgba(74, 124, 44, 0.8),
0 0 75px rgba(74, 124, 44, 0.6),
0 0 100px rgba(74, 124, 44, 0.4);
}
}
.hero-subtitle {
font-size: clamp(1.1rem, 2vw, 1.5rem);
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.95);
line-height: 1.6;
letter-spacing: 1.5px;
font-weight: 500;
/* 统一字体 */
font-family: 'Inter', 'Montserrat', '思源黑体', 'Microsoft YaHei', sans-serif;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* 统计数据优化 */
.hero-stats {
display: flex;
gap: 1rem;
margin: 0;
}
/* 按钮组优�?- 横向并排，一实一�?*/
.hero-buttons {
display: flex;
gap: 1.5rem;
margin-top: 2rem;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
/* 移动端优�?*/
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-buttons {
flex-direction: column;
width: 100%;
align-items: stretch;
gap: 1rem;
}
.btn-hero {
width: 100%;
justify-content: center;
}
}
/* 炫酷按钮 - 统一设计 */
.btn-hero {
position: relative;
padding: 14px 32px;
font-size: 1rem;
font-weight: 700;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
margin: 0;
/* 统一字体 */
font-family: 'Inter', 'Montserrat', '思源黑体', 'Microsoft YaHei', sans-serif;
letter-spacing: 1px;
}
.btn-hero .btn-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
}
.btn-hero:hover .btn-glow {
left: 100%;
}
/* 主按�?- 实心，金黄色流光效果 */
.btn-primary.btn-hero {
background: linear-gradient(135deg, #ffd700, #ffec8b);
border: none;
color: #2d5016;
box-shadow:
0 6px 25px rgba(255, 215, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
font-weight: 700;
position: relative;
overflow: hidden;
}
/* 流光效果 */
.btn-primary.btn-hero::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.7),
transparent
);
transform: skewX(-20deg);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
20%, 100% {
left: 200%;
}
}
.btn-primary.btn-hero::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.6), rgba(255, 236, 139, 0.6));
border-radius: 50px;
z-index: -1;
filter: blur(10px);
opacity: 0;
transition: opacity 0.4s ease;
}
.btn-primary.btn-hero:hover {
transform: translateY(-4px);
box-shadow:
0 12px 40px rgba(255, 215, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
background: linear-gradient(135deg, #ffec8b, #fffacd);
}
.btn-primary.btn-hero:hover::after {
opacity: 1;
}
/* 次按�?- 纯白描边，背景全透明 */
.btn-outline-light.btn-hero {
background: transparent;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.6);
color: white;
box-shadow:
0 5px 20px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
font-weight: 600;
position: relative;
overflow: hidden;
}
.btn-outline-light.btn-hero:hover {
background: rgba(255, 255, 255, 0.15);
color: white;
transform: translateY(-4px);
box-shadow:
0 10px 35px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.9);
}
/* 滚动指示�?- 强制右边位置 */
.scroll-indicator {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
left: auto !important;
transform: none !important;
text-align: center;
color: white;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
}
.scroll-mouse {
width: 30px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 15px;
position: relative;
}
.mouse-wheel {
width: 4px;
height: 10px;
background: white;
border-radius: 2px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
animation: mouse-wheel 2s infinite;
}
.scroll-text {
font-size: 0.8rem;
opacity: 0.8;
letter-spacing: 1px;
writing-mode: vertical-rl;
text-orientation: mixed;
}
@keyframes mouse-wheel {
0% { top: 10px; opacity: 1; }
50% { top: 20px; opacity: 0.5; }
100% { top: 10px; opacity: 1; }
}
/* 移动端时移回中间 */
@media (max-width: 768px) {
.scroll-indicator {
right: 50% !important;
transform: translateX(50%) !important;
}
}
.scroll-mouse {
width: 30px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 15px;
position: relative;
margin: 0 auto 10px;
cursor: pointer;
}
.mouse-wheel {
width: 4px;
height: 10px;
background: white;
border-radius: 2px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
animation: mouse-wheel 2s infinite;
}
@keyframes mouse-wheel {
0% { top: 10px; opacity: 1; }
50% { top: 20px; opacity: 0.5; }
100% { top: 10px; opacity: 1; }
}
.scroll-text {
font-size: 0.9rem;
opacity: 0.8;
letter-spacing: 1px;
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
letter-spacing: 1px;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
letter-spacing: 1px;
}
/* 地球容器移动端优�?*/
.globe-container {
width: 280px;
height: 280px;
transform: translateX(0);
margin-right: 0;
}
/* 统计卡片移动端优�?*/
.hero-stats-bar .stat-item {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
max-width: 100px;
max-height: 100px;
padding: 0.8rem;
}
.hero-stats-bar .stat-icon {
font-size: 1.0rem;
width: 25px;
height: 25px;
margin: 0 auto 0.2rem;
}
.hero-stats-bar .stat-number {
font-size: 1.0rem;
}
.hero-stats-bar .stat-highlight .stat-number {
font-size: 1.2rem;
}
.hero-stats-bar .stat-label {
font-size: 0.45rem;
}
/* 主要内容区域移动端优�?*/
.hero-main-content {
flex-direction: column;
gap: 2rem;
}
.hero-left {
text-align: center;
}
.hero-buttons {
justify-content: center;
}
}
/* SVG背景样式 */
.hero-svg-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* 波浪动画 - 简化版 */
.wave {
animation: waveMove 20s ease-in-out infinite;
transform-origin: center;
will-change: transform;
}
.wave1 {
animation-delay: 0s;
animation-duration: 20s;
}
.wave2 {
animation-delay: -6s;
animation-duration: 25s;
}
.wave3 {
animation-delay: -12s;
animation-duration: 30s;
}
@keyframes waveMove {
0%, 100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(-15px) translateY(-8px);
}
}
/* 浮动几何图形动画 - 简化版 */
.floating-shapes {
animation: shapesFloat 30s ease-in-out infinite;
}
.shape {
animation: shapeFloat 12s ease-in-out infinite;
will-change: transform, opacity;
}
.shape1 {
animation-delay: 0s;
animation-duration: 10s;
}
.shape2 {
animation-delay: -3s;
animation-duration: 12s;
}
.shape3 {
animation-delay: -6s;
animation-duration: 15s;
}
.shape4 {
animation-delay: -9s;
animation-duration: 11s;
}
.shape5 {
animation-delay: -12s;
animation-duration: 13s;
}
@keyframes shapesFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(20px, -15px) rotate(180deg);
}
}
@keyframes shapeFloat {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.6;
}
50% {
transform: translateY(-10px) scale(1.1);
opacity: 0.8;
}
}
.hero-particles {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.6), transparent),
radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.7), transparent);
background-size: 300px 300px, 250px 250px, 200px 200px;
animation: particles 30s linear infinite;
opacity: 0.3;
will-change: transform, opacity;
}
@keyframes particles {
0% {
transform: translateY(0) rotate(0deg);
background-position: 0% 0%, 20% 20%, 40% 40%;
}
50% {
background-position: 50% 30%, 70% 50%, 30% 70%;
opacity: 0.5;
}
100% {
transform: translateY(-100px) rotate(180deg);
background-position: 100% 60%, 80% 80%, 60% 100%;
opacity: 0.3;
}
}
.hero-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at top left, rgba(45,80,22,0.1) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(139,195,74,0.1) 0%, transparent 50%),
linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
animation: gradient 4s ease-in-out infinite, gradientRotate 20s linear infinite;
}
@keyframes gradient {
0%, 100% {
transform: translateX(-100%) scale(1);
opacity: 0.6;
}
50% {
transform: translateX(100%) scale(1.1);
opacity: 0.8;
}
}
@keyframes gradientRotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.05); }
100% { transform: rotate(360deg) scale(1); }
}
.hero-light-effect {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: lightRotate 30s linear infinite;
pointer-events: none;
}
@keyframes lightRotate {
0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
/* ========== Hero 动画优化 ========== */
/* 入场动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-title {
animation: fadeInUp 0.8s ease-out;
}
.hero-subtitle {
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero-stats {
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.hero-buttons {
animation: fadeInUp 0.8s ease-out 0.6s both;
}
/* 鼠标跟随光效 - 仅桌面端 */
@media (min-width: 769px) {
.hero-section::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle,
rgba(139, 195, 74, 0.15) 0%,
transparent 70%);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
opacity: 0;
z-index: 2;
}
.hero-section:hover::after {
opacity: 1;
}
}
/* 3D 悬停效果 - 仅桌面端 */
@media (min-width: 769px) {
.hero-content {
perspective: 1000px;
transition: transform 0.3s ease;
}
.hero-section:hover .hero-content {
transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
}
}
/* 性能优化：减少动�?*/
@media (prefers-reduced-motion: reduce) {
.hero-globe,
.hero-wave,
.scroll-indicator,
.hero-particles,
.hero-light-rays,
.globe-circle::after,
.globe-sparkle,
.stat-item::before,
.stat-item::after,
.btn-hero::before,
.btn-hero::after,
.scroll-mouse,
.mouse-wheel,
.scroll-text {
animation: none !important;
transition: none !important;
}
.hero-title {
animation: none;
}
.hero-subtitle {
animation: none;
}
.hero-stats {
animation: none;
}
.hero-buttons {
animation: none;
}
}
/* Hero 内容容器 */
.hero-content {
position: relative;
z-index: 10;
width: 100%;
margin: 0 auto;
padding: 0 1.5rem;
}
/* 左侧内容�?*/
.hero-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
flex: 2;
padding-right: 1.5rem;
}
/* 右侧视觉�?*/
.hero-right {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
min-width: 250px;
}
/* 底部横排统计数据 - 极致磨砂玻璃样式 */
.hero-stats-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
margin-top: 4rem;
padding: 0;
background: transparent;
backdrop-filter: none;
border: none;
}
.hero-stats-bar .stat-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.2rem 1.5rem;
background: rgba(45, 80, 22, 0.6);
backdrop-filter: blur(30px);
border: 0.5px solid rgba(139, 195, 74, 0.25);
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
/* 强制统一尺寸 - 适应4个卡�?*/
width: 140px;
height: 140px;
min-width: 140px;
min-height: 140px;
max-width: 140px;
max-height: 140px;
justify-content: center;
/* 极致磨砂玻璃效果 */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 8px 32px rgba(0, 0, 0, 0.3);
}
/* 高光边框 - 极细半透明白色高亮�?*/
.hero-stats-bar .stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 12px;
padding: 0.5px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 50%,
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.hero-stats-bar .stat-item::after {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px solid rgba(74, 124, 44, 0.3);
border-radius: 8px;
opacity: 0;
transition: opacity 0.3s ease;
}
/* 分隔�?*/
.hero-stats-bar .stat-divider {
width: 0.5px;
height: 60%;
background: linear-gradient(to bottom,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
}
.hero-stats-bar .stat-item:hover {
transform: translateY(-10px) scale(1.05);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 40px rgba(139, 195, 74, 0.25);
border-color: rgba(139, 195, 74, 0.4);
background: rgba(45, 80, 22, 0.75);
}
.hero-stats-bar .stat-item:hover::after {
opacity: 1;
}
.hero-stats-bar .stat-item:hover .stat-icon {
transform: scale(1.15);
color: rgba(255, 255, 255, 1);
background: rgba(139, 195, 74, 0.3);
}
/* 数据图标 - 简化设�?*/
.hero-stats-bar .stat-icon {
font-size: 1.2rem;
color: rgba(139, 195, 74, 0.95);
margin: 0 auto 0.3rem;
transition: all 0.3s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(45, 80, 22, 0.4);
border-radius: 50%;
}
/* 科技感数�?- 统一字体 */
.hero-stats-bar .stat-number {
font-size: 1.3rem;
font-weight: 900;
color: white;
margin-bottom: 0.15rem;
display: block;
line-height: 1.1;
transition: all 0.3s ease;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
font-family: 'Inter', 'Montserrat', '思源黑体', sans-serif;
letter-spacing: 0.5px;
/* 防止数字溢出 */
word-break: break-all;
word-wrap: break-word;
}
.hero-stats-bar .stat-highlight .stat-number {
font-size: 1.45rem;
font-weight: 900;
background: linear-gradient(135deg,
#8bc34a 0%,
#6b9d3e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(139, 195, 74, 0.4);
letter-spacing: 1px;
/* 防止数字溢出 */
word-break: break-all;
word-wrap: break-word;
}
/* 标签文字 */
.hero-stats-bar .stat-label {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.95);
margin: 0;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: 'Inter', 'Montserrat', '思源黑体', sans-serif;
}
/* 统计分隔�?*/
.stat-divider {
width: 0.5px;
height: 50px;
background: linear-gradient(to bottom,
transparent,
rgba(139, 195, 74, 0.4),
transparent);
}
/* 标题下划线效�?*/
.hero-title::after {
content: '';
position: absolute;
bottom: -0.5rem;
left: 50%;
transform: translateX(-50%);
width: 61.8%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(107, 157, 62, 0.3) 10%,
var(--light-green) 50%,
rgba(107, 157, 62, 0.3) 90%,
transparent 100%);
border-radius: 4px;
opacity: 0;
animation: titleLineAppear 1.5s ease-out 0.8s forwards;
}
@keyframes titleLineAppear {
0% {
opacity: 0;
width: 0%;
transform: translateX(-50%) scaleX(0);
}
50% {
opacity: 0.8;
width: 61.8%;
transform: translateX(-50%) scaleX(1);
}
100% {
opacity: 0.6;
width: 61.8%;
transform: translateX(-50%) scaleX(1);
}
}
/* 添加文字光晕效果 */
.hero-title span {
position: relative;
display: inline-block;
}
.hero-title span::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
rgba(255,255,255,0.8),
rgba(139,195,74,0.6),
rgba(107,157,62,0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
z-index: -1;
opacity: 0;
animation: textGlow 4s ease-in-out infinite;
}
@keyframes textGlow {
0%, 100% { opacity: 0; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.02); }
}
/* 统计数据区域 - 炫酷效果 */
.hero-stats {
display: flex;
gap: 1.2rem;
margin: 0;
}
.stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 1rem 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-width: 90px;
position: relative;
overflow: hidden;
}
/* 统计卡片光效 */
.stat-item::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent,
rgba(139, 195, 74, 0.3),
transparent);
transform: rotate(45deg) translateX(-100%);
transition: transform 0.6s ease;
}
.stat-item:hover::before {
transform: rotate(45deg) translateX(100%);
}
/* 统计卡片脉冲边框 */
.stat-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
padding: 2px;
background: linear-gradient(45deg,
var(--light-green),
var(--grass-green),
var(--light-green));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
}
.stat-item:hover::after {
opacity: 1;
}
.stat-item:hover {
transform: translateY(-5px) scale(1.02);
background: rgba(255, 255, 255, 0.15);
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
0 0 20px rgba(139, 195, 74, 0.3);
}
.stat-icon {
font-size: 1.3rem;
color: var(--light-green);
margin-bottom: 0.2rem;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.stat-item:hover .stat-icon {
transform: scale(1.2) rotate(10deg);
color: white;
text-shadow: 0 0 20px rgba(139, 195, 74, 0.8);
}
.stat-number {
font-size: 1.6rem;
font-weight: 700;
color: white;
margin-bottom: 0.2rem;
display: block;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.stat-item:hover .stat-number {
transform: scale(1.1);
color: var(--light-green);
text-shadow: 0 0 20px rgba(139, 195, 74, 0.6);
}
.stat-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.9);
margin: 0;
position: relative;
z-index: 1;
transition: all 0.3s ease;
font-weight: 500;
}
.stat-item:hover .stat-label {
color: white;
transform: translateY(-2px);
}
/* 按钮区域 - 炫酷效果 */
.hero-buttons {
display: flex;
gap: 1rem;
align-items: center;
}
/* 按钮流光效果 */
.btn-hero::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.4),
transparent);
transition: left 0.6s ease;
}
.btn-hero:hover::before {
left: 100%;
}
/* 按钮点击波纹效果 */
.btn-hero::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.btn-hero:active::after {
width: 300px;
height: 300px;
}
.btn-primary {
background: linear-gradient(135deg, var(--light-green), var(--grass-green));
color: var(--deep-green);
border: none;
box-shadow: 0 5px 20px rgba(139, 195, 74, 0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--grass-green), var(--deep-green));
color: white;
transform: translateY(-3px) scale(1.05);
box-shadow:
0 15px 35px rgba(139, 195, 74, 0.4),
0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary:active {
transform: translateY(-1px) scale(0.98);
}
.btn-outline {
background: transparent;
color: white;
border: 2px solid white;
box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1);
}
.btn-outline:hover {
background: white;
color: var(--deep-green);
transform: translateY(-3px) scale(1.05);
box-shadow:
0 15px 35px rgba(255, 255, 255, 0.2),
0 5px 15px rgba(0, 0, 0, 0.1);
}
.btn-outline:active {
transform: translateY(-1px) scale(0.98);
}
.btn-custom {
display: inline-flex;
align-items: center;
padding: 14px 32px;
border-radius: 24px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid transparent;
color: white;
cursor: pointer;
pointer-events: auto;
position: relative;
overflow: hidden;
text-transform: none;
letter-spacing: 0.5px;
animation: buttonEntrance 1s ease-out 1.2s both;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
width: 240px;
justify-content: center;
}
.btn-custom::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.4),
transparent);
transition: left 0.8s ease;
}
.btn-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.8s ease;
}
/* 按钮悬停效果 */
.btn-custom:hover {
transform: perspective(1000px) rotateX(-10deg) translateY(-8px) scale(1.05);
box-shadow:
0 20px 40px rgba(0,0,0,0.3),
0 15px 15px rgba(0,0,0,0.2),
0 5px 10px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-custom:hover::before {
left: 100%;
}
.btn-custom:hover::after {
width: 400px;
height: 400px;
}
/* 按钮点击效果 */
.btn-custom:active {
transform: perspective(1000px) rotateX(-5deg) translateY(-3px) scale(0.98);
box-shadow:
0 5px 10px rgba(0,0,0,0.2),
0 3px 3px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-custom i {
margin-right: 8px;
font-size: 1.1rem;
transition: all 0.4s ease;
transform-style: preserve-3d;
}
.btn-custom:hover i {
transform: rotateY(360deg) scale(1.2);
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
/* 主要按钮样式 */
.btn-custom.btn-primary {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: white;
box-shadow: 0 4px 12px rgba(46, 93, 48, 0.3);
}
.btn-custom.btn-primary:hover {
background: #254A28;
border-color: #254A28;
color: white;
box-shadow: 0 6px 16px rgba(46, 93, 48, 0.4);
transform: translateY(-2px);
}
/* 次要按钮样式 */
.btn-custom:not(.btn-primary) {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.05));
border-color: rgba(255, 255, 255, 0.4);
color: white;
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.1),
0 6px 6px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn-custom:not(.btn-primary):hover {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.1));
border-color: white;
color: var(--deep-green);
box-shadow:
0 25px 50px rgba(255, 255, 255, 0.2),
0 15px 15px rgba(0, 0, 0, 0.1),
0 5px 10px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 2px 4px rgba(255,255,255,0.3);
}
/* 按钮脉冲效果 */
.btn-custom::before {
animation: buttonPulse 3s ease-in-out infinite;
}
@keyframes buttonPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(139, 195, 74, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(139, 195, 74, 0);
}
}
/* 按钮样式覆盖 - 优化�?*/
.btn-custom:not(.btn-primary) {
background: transparent !important;
border-color: var(--grid) !important;
color: var(--grid) !important;
box-shadow: none !important;
}
.btn-custom:not(.btn-primary):hover {
background: rgba(108, 191, 92, 0.1) !important;
border-color: var(--secondary) !important;
color: var(--secondary) !important;
box-shadow: 0 4px 12px rgba(108, 191, 92, 0.2) !important;
transform: translateY(-2px) !important;
}
/* 强制显示统计数据 */
.hero-stats,
.stat-item,
.stat-number,
.stat-label,
.stat-icon {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
}
/* 确保统计数据在所有状态下都可�?*/
.hero-stats .stat-item,
.hero-stats .stat-number,
.hero-stats .stat-label,
.hero-stats .stat-icon {
color: inherit !important;
background: inherit !important;
}
@keyframes buttonEntrance {
0% {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.btn-custom::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.3),
transparent);
transition: left 0.6s ease;
}
.btn-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.btn-custom:hover::before {
left: 100%;
}
.btn-custom:hover::after {
width: 300px;
height: 300px;
}
.btn-custom i {
margin-right: 8px;
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.btn-custom:hover i {
transform: rotate(360deg) scale(1.2);
}
.btn-custom.btn-primary {
background: linear-gradient(135deg, var(--light-green), var(--grass-green));
border-color: var(--light-green);
color: var(--deep-green);
box-shadow:
0 8px 24px rgba(139, 195, 74, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-custom.btn-primary:hover {
background: linear-gradient(135deg, var(--grass-green), var(--deep-green));
border-color: var(--grass-green);
color: white;
transform: translateY(-5px) scale(1.05);
box-shadow:
0 15px 35px rgba(139, 195, 74, 0.4),
0 5px 15px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-custom:not(.btn-primary) {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.05));
border-color: rgba(255, 255, 255, 0.4);
color: white;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn-custom:not(.btn-primary):hover {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.1));
border-color: white;
color: var(--deep-green);
transform: translateY(-5px) scale(1.05);
box-shadow:
0 15px 35px rgba(255, 255, 255, 0.2),
0 5px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-custom:hover {
background: var(--light-green);
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(139, 195, 74, 0.3);
}
/* 滚动指示�?- 高级�?*/
.scroll-indicator {
position: absolute;
bottom: 3rem;
right: 3rem;
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
z-index: 10;
animation: scrollIndicatorFloat 3s ease-in-out infinite;
}
@keyframes scrollIndicatorFloat {
0%, 100% {
transform: translateY(0);
opacity: 0.8;
}
50% {
transform: translateY(-10px);
opacity: 1;
}
}
.scroll-mouse {
width: 50px;
height: 80px;
border: 3px solid rgba(255, 255, 255, 0.8);
border-radius: 25px;
margin: 0 auto 1rem;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12px;
position: relative;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.02));
backdrop-filter: blur(10px);
animation: mousePulse 2s ease-in-out infinite;
}
.scroll-mouse::before {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollWheel {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
50% {
opacity: 0.3;
transform: translateX(-50%) translateY(20px);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes mousePulse {
0%, 100% {
opacity: 0.8;
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
50% {
opacity: 1;
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
}
.scroll-mouse i {
display: none; /* 隐藏原来的图标，使用CSS绘制的滚�?*/
}
.scroll-text {
font-size: 0.8rem;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 500;
opacity: 0.9;
animation: textFade 2s ease-in-out infinite alternate;
}
@keyframes textFade {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
.btn-custom.btn-primary {
background: var(--grass-green);
border-color: var(--grass-green);
color: white;
}
.btn-custom.btn-primary:hover {
background: transparent;
color: var(--light-green);
border-color: var(--light-green);
}
/* Features模块 - Hero淡绿风格 */
.features-section {
padding: 6rem 0;
background: #f5f5dc;
position: relative;
overflow: hidden;
}
.features-section .display-4 {
color: #2e5d2e;
font-weight: 700;
letter-spacing: 0.5px;
}
.features-section .lead {
color: #757575;
}
.feature-card {
background: #ffffff;
border-radius: 12px;
padding: 2rem 1.5rem;
text-align: center;
transition: all 0.3s ease;
height: 100%;
border: 2px solid transparent;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 60px;
height: 60px;
background: #8bc34a;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
color: #ffffff;
}
.feature-card:hover .feature-icon {
transform: scale(1.05);
}
.feature-card h4 {
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 1rem;
color: #2e5d2e;
}
.feature-card p {
color: #757575;
line-height: 1.6;
margin-bottom: 0;
}
/* Gallery模块 - Hero淡绿风格 */
.gallery-section {
padding: 6rem 0;
background:
radial-gradient(circle at 50% 50%,
rgba(74, 124, 44, 0.25) 0%,
rgba(45, 80, 22, 0.2) 30%,
rgba(30, 60, 20, 0.6) 60%,
rgba(20, 40, 15, 0.8) 100%),
linear-gradient(135deg,
rgba(20, 40, 15, 0.85) 0%,
rgba(30, 60, 20, 0.8) 30%,
rgba(45, 90, 30, 0.75) 60%,
rgba(60, 110, 45, 0.7) 100%);
position: relative;
overflow: hidden;
}
.gallery-section .display-4 {
color: white;
font-weight: 700;
letter-spacing: 0.5px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.gallery-section .lead {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 350px;
margin-bottom: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(45, 80, 22, 0.3);
backdrop-filter: blur(10px);
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.3);
border-color: rgba(139, 195, 74, 0.5);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,
rgba(45, 80, 22, 0.3) 0%,
rgba(45, 80, 22, 0.7) 50%,
rgba(45, 80, 22, 0.9) 100%);
display: flex;
align-items: flex-end;
padding: 2rem;
opacity: 0;
transition: all 0.3s ease;
z-index: 1;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay h4 {
color: white;
font-weight: 700;
letter-spacing: 1px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.gallery-overlay p {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
/* 统计区域 */
.stats-section {
padding: 6rem 0;
background:
radial-gradient(circle at 50% 50%,
rgba(74, 124, 44, 0.25) 0%,
rgba(45, 80, 22, 0.2) 30%,
rgba(30, 60, 20, 0.6) 60%,
rgba(20, 40, 15, 0.8) 100%),
linear-gradient(135deg,
rgba(20, 40, 15, 0.85) 0%,
rgba(30, 60, 20, 0.8) 30%,
rgba(45, 90, 30, 0.75) 60%,
rgba(60, 110, 45, 0.7) 100%);
position: relative;
color: white;
}
.stat-item {
text-align: center;
padding: 2rem;
background: rgba(45, 80, 22, 0.3);
backdrop-filter: blur(10px);
border-radius: 12px;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.3);
border-color: rgba(139, 195, 74, 0.5);
background: rgba(45, 80, 22, 0.4);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #8bc34a;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.stat-title {
font-size: 1.25rem;
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.stat-description {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* Contact模块 - 简约风格 */
.contact-section {
padding: 6rem 0;
background: #f5f5dc;
position: relative;
}
.contact-section .display-4 {
color: #2d5016;
font-weight: 700;
letter-spacing: 0.5px;
}
.contact-section .lead {
color: #757575;
}
.contact-form {
background: #ffffff;
padding: 3rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.contact-form:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
.form-control, .form-select {
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
background: #ffffff;
color: #2c3e50;
}
.form-control:focus, .form-select:focus {
border-color: #8bc34a;
box-shadow: 0 0 0 0.2rem rgba(139, 195, 74, 0.15);
background: #ffffff;
color: #2c3e50;
}
.form-control::placeholder {
color: #adb5bd;
}
.form-label {
color: #2d5016;
font-weight: 600;
}
.form-select option {
background: #ffffff;
color: #2c3e50;
}
/* 页脚 */
footer {
background: linear-gradient(135deg, var(--deep-green), var(--grass-green));
color: white;
padding: 3rem 0 1rem;
position: relative;
}
footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,");
background-size: 60px 60px;
opacity: 0.3;
}
footer .container {
position: relative;
z-index: 1;
}
.beian {
background: rgba(45, 80, 22, 0.8);
padding: 1rem 0;
margin-top: 2rem;
border-top: 1px solid rgba(139, 195, 74, 0.3);
text-align: center;
}
.beian p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
}
.beian a {
color: var(--light-green) !important;
text-decoration: none;
}
.beian a:hover {
text-decoration: underline;
}
/* 企业愿景区域 - Hero淡绿风格 */
.vision-section {
padding: 6rem 0;
background: #f5f5dc;
position: relative;
overflow: hidden;
}
/* 标题样式 */
.vision-section .section-title {
font-size: 2.5rem;
font-weight: 700;
color: #2d5016;
margin-bottom: 1rem;
letter-spacing: 0.5px;
}
.vision-section .title-divider {
width: 80px;
height: 4px;
background: linear-gradient(90deg, transparent, #8bc34a, transparent);
margin: 0 auto 3rem;
border-radius: 2px;
}
/* 企业宣传语 - 简约风格 */
.vision-slogan-box {
background: #ffffff;
border-radius: 16px;
padding: 3rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
display: flex;
gap: 2rem;
align-items: flex-start;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.vision-slogan-box:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
}
/* 引号图标 */
.slogan-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(135deg, rgba(139, 195, 74, 0.8), rgba(107, 157, 62, 0.6));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 5px 20px rgba(139, 195, 74, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.slogan-icon i {
font-size: 1.5rem;
color: #8bc34a;
}
/* 宣传语内容 */
.slogan-content {
flex: 1;
position: relative;
z-index: 1;
}
.slogan-content p {
margin-bottom: 0.8rem;
line-height: 1.8;
}
.slogan-content p:last-child {
margin-bottom: 0;
}
/* 主标题 */
.slogan-main {
font-size: 1.8rem;
font-weight: 700;
color: #2d5016;
margin-bottom: 1.5rem !important;
letter-spacing: 1px;
}
/* 普通文本 */
.slogan-text {
font-size: 1.05rem;
color: #757575;
font-weight: 400;
}
/* 高亮文本 */
.slogan-highlight {
font-size: 1.3rem;
font-weight: 600;
color: #8bc34a;
margin: 1rem 0 !important;
}
/* 分隔�?*/
.slogan-divider {
width: 60px;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(74, 124, 44, 0.8), transparent);
border-radius: 2px;
margin: 1.5rem 0;
}
/* 愿景使命卡片容器 */
.vision-mission-wrapper {
margin-top: 3rem;
}
/* 愿景使命卡片 - 简约风格 */
.vm-card {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
height: 100%;
display: flex;
align-items: flex-start;
gap: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.vm-card:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
}
.vm-card:hover {
transform: translateY(-8px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 50px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
/* 图标容器 */
.vm-icon-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #8bc34a 0%, #4a7c2c 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.vm-card:hover .vm-icon-wrapper {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
.vm-icon-wrapper i {
font-size: 2.2rem;
color: white;
}
/* 内容区域 */
.vm-content h3 {
font-size: 1.5rem;
font-weight: 600;
color: #2d5016;
margin-bottom: 1rem;
}
.vm-content p {
font-size: 1.05rem;
line-height: 1.8;
color: #757575;
margin: 0;
}
/* 核心价值观网格 */
.values-grid {
margin-top: 4rem;
}
.values-header {
text-align: center;
margin-bottom: 3rem;
}
.values-header h3 {
font-size: 2rem;
font-weight: 600;
color: #2d5016;
display: inline-block;
position: relative;
padding-bottom: 1rem;
}
.values-header h3::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, transparent, #8bc34a, transparent);
border-radius: 2px;
}
.values-header h3 i {
color: #8bc34a;
margin-right: 0.5rem;
}
/* 价值观卡片 - 简约风格 */
.value-card {
background: #ffffff;
border-radius: 12px;
padding: 2rem 1.5rem;
text-align: center;
height: 100%;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.value-card:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
/* 数字标签 */
.value-number {
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
background: linear-gradient(135deg, #8bc34a 0%, #4a7c2c 100%);
color: white;
font-size: 1.2rem;
font-weight: 700;
border-radius: 50%;
margin-bottom: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.value-card h4 {
font-size: 1.3rem;
font-weight: 600;
color: #2d5016;
margin-bottom: 1rem;
}
.value-card p {
font-size: 0.95rem;
line-height: 1.6;
color: #757575;
margin: 0;
}
/* ========== 响应式布局 ========== */
/* 平板设备 */
@media (max-width: 992px) {
.hero-content {
gap: 3rem;
}
.hero-globe {
width: 240px;
height: 240px;
}
.stat-item {
min-width: 100px;
padding: 1.2rem 0.8rem;
}
}
/* 移动设备 */
@media (max-width: 768px) {
.hero-section {
min-height: 100vh;
padding-top: 80px;
}
.hero-content {
padding: 0 1rem;
}
.hero-main-content {
flex-direction: column;
gap: 2rem;
}
.hero-left {
order: 2;
padding-right: 0;
gap: 1.5rem;
text-align: center;
}
.hero-right {
order: 1;
margin-bottom: 1rem;
flex: 1;
}
.hero-globe {
width: 200px;
height: 200px;
}
.hero-title {
font-size: clamp(2rem, 8vw, 2.5rem);
text-align: center;
margin-bottom: 0.5rem;
}
.hero-subtitle {
font-size: 1rem;
text-align: center;
margin-bottom: 1rem;
}
.hero-stats-bar {
flex-direction: row;
gap: 0;
margin-top: 1.5rem;
padding: 1rem 1.2rem;
flex-wrap: wrap;
}
.hero-stats-bar .stat-item {
min-width: 80px;
padding: 0.6rem 0.8rem;
flex: 1;
min-width: calc(33.33% - 0.6rem);
}
.hero-stats-bar .stat-item::before {
display: none;
}
.hero-stats-bar .stat-number {
font-size: 1.4rem;
}
.hero-stats-bar .stat-highlight .stat-number {
font-size: 1.8rem;
}
.hero-stats-bar .stat-label {
font-size: 0.7rem;
}
.hero-buttons {
flex-direction: column;
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.btn-hero {
width: 100%;
justify-content: center;
}
.stat-number {
font-size: 1.4rem;
}
.stat-label {
font-size: 0.75rem;
}
.hero-buttons {
flex-direction: column;
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.btn-hero {
width: 100%;
justify-content: center;
}
.scroll-indicator {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.scroll-text {
display: none;
}
/* 移动端性能优化 */
.hero-particles,
.hero-light-rays {
opacity: 0.3;
}
.globe-sparkle {
display: none;
}
}
/* 小屏手机 */
@media (max-width: 480px) {
.hero-globe {
width: 160px;
height: 160px;
}
.globe-icon {
font-size: 3rem;
}
.hero-stats {
flex-wrap: wrap;
}
.stat-item {
flex: 1;
min-width: 80px;
}
}
/* 超小屏幕 */
@media (max-width: 360px) {
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 1rem;
}
.btn-hero {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
}
/* 超小屏幕优化 */
@media (max-width: 480px) {
.hero-logo {
top: 10px;
left: 10px;
}
.logo-image {
height: 30px;
}
.hero-title {
font-size: clamp(1.8rem, 6vw, 2.5rem);
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 0.95rem;
margin-bottom: 1rem;
}
.hero-stats {
gap: 0.8rem;
margin: 1.5rem 0;
}
.stat-item {
padding: 0.8rem 0.6rem;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 0.85rem;
}
/* 进一步简化动�?*/
.hero-particles,
.hero-grid,
.hero-beams,
.floating-shapes {
display: none;
}
.wave {
opacity: 0.1;
}
}
.stat-number {
font-size: 2.5rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: 2rem;
}
.btn-custom {
width: 220px;
justify-content: center;
padding: 16px 24px;
font-size: 1rem;
}
.scroll-indicator {
bottom: 2rem;
right: 50%;
transform: translateX(50%);
}
.hero-grid {
background-size: 30px 30px;
}
.hero-particles {
opacity: 0.2;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
line-height: 1.1;
}
.stat-number {
font-size: 2rem;
}
.btn-custom {
width: 200px;
padding: 14px 20px;
}
.hero-content {
padding: 0 0.5rem;
}
}
/* 移除hero-content的初始隐藏状态，让AOS动画正常工作 */
/* 页面加载后的动画 */
.hero-content.loaded .hero-title {
animation: titleEntrance 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
opacity: 1;
transform: translateY(0);
}
.hero-content.loaded .hero-subtitle {
animation: subtitleEntrance 1s ease-out 1.4s forwards;
}
.hero-content.loaded .hero-stats {
animation: statsEntrance 0.8s ease-out 0.8s forwards;
}
.hero-content.loaded .hero-buttons {
animation: buttonsEntrance 0.8s ease-out 1.2s forwards;
}
@keyframes statsEntrance {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes buttonsEntrance {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 可访问性改�?*/
@media (prefers-contrast: high) {
.hero-title {
text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
.hero-subtitle {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.btn-custom {
border: 3px solid currentColor;
}
}
/* 焦点状态改�?*/
.btn-custom:focus,
.nav-link:focus {
outline: 3px solid var(--light-green);
outline-offset: 2px;
}
/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
.hero-particles,
.hero-gradient,
.hero-light-effect,
.hero-grid,
.hero-beams {
animation: none;
}
.hero-title,
.hero-subtitle,
.stat-item,
.btn-custom {
animation: none;
transform: none;
}
}
.navbar-brand {
font-size: 1.4rem;
}
/* 企业愿景移动端优�?*/
.vision-section {
padding: 4rem 0;
}
.vision-section .section-title {
font-size: 2rem;
}
/* 宣传�?*/
.vision-slogan-box {
padding: 2rem 1.5rem;
flex-direction: column;
align-items: center;
text-align: center;
}
.slogan-icon {
width: 50px;
height: 50px;
border-radius: 12px;
}
.slogan-icon i {
font-size: 1.2rem;
}
.slogan-main {
font-size: 1.4rem;
}
.slogan-text {
font-size: 0.95rem;
}
.slogan-highlight {
font-size: 1.1rem;
}
.slogan-divider {
margin: 1rem auto;
}
/* 愿景使命卡片 */
.vm-card {
padding: 2rem 1.5rem;
flex-direction: column;
align-items: center;
text-align: center;
}
.vm-icon-wrapper {
width: 70px;
height: 70px;
border-radius: 15px;
}
.vm-icon-wrapper i {
font-size: 2rem;
}
.vm-content h3 {
font-size: 1.3rem;
}
.vm-content p {
font-size: 0.95rem;
}
/* 价值观 */
.values-grid {
margin-top: 3rem;
}
.values-header h3 {
font-size: 1.6rem;
}
.value-card {
padding: 1.5rem 1rem;
margin-bottom: 1rem;
}
.value-number {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 1rem;
}
.value-card h4 {
font-size: 1.1rem;
}
.value-card p {
font-size: 0.9rem;
}
}
/* API文档模块样式 */
.api-docs-section {
padding: 80px 0;
background:
/* 径向渐变 - 淡绿背景 */
radial-gradient(circle at 50% 50%,
rgba(74, 124, 44, 0.25) 0%,
rgba(45, 80, 22, 0.2) 30%,
rgba(30, 60, 20, 0.6) 60%,
rgba(20, 40, 15, 0.8) 100%),
/* 线性渐变 - 淡绿基调 */
linear-gradient(135deg,
rgba(20, 40, 15, 0.85) 0%,
rgba(30, 60, 20, 0.8) 30%,
rgba(45, 90, 30, 0.75) 60%,
rgba(60, 110, 45, 0.7) 100%);
color: white;
}
.api-docs-subtitle {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
margin-bottom: 15px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.api-docs-description {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.api-doc-card {
background: rgba(45, 80, 22, 0.5);
backdrop-filter: blur(30px);
border-radius: 15px;
border: 0.5px solid rgba(255, 255, 255, 0.15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 10px 30px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
overflow: hidden;
height: 100%;
position: relative;
}
/* 高光边框 */
.api-doc-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 15px;
padding: 0.5px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 50%,
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.api-doc-card:hover {
transform: translateY(-5px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 50px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.api-doc-header {
padding: 25px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
z-index: 1;
}
.api-doc-icon {
margin-right: 20px;
transition: transform 0.3s ease;
}
.api-doc-card:hover .api-doc-icon {
transform: scale(1.1);
}
.api-doc-title h3 {
margin: 0;
color: white;
font-weight: 600;
font-size: 1.5rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.api-doc-body {
padding: 25px;
position: relative;
z-index: 1;
}
.api-doc-description {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
margin-bottom: 20px;
line-height: 1.6;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.api-doc-features {
margin-top: 20px;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
padding: 8px 0;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
display: flex;
align-items: center;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.feature-list li i {
color: #00ff9d;
margin-right: 10px;
font-size: 0.9rem;
}
.api-doc-footer {
padding: 20px 25px;
background: rgba(0, 0, 0, 0.2);
display: flex;
gap: 15px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.api-doc-btn {
display: inline-flex;
align-items: center;
padding: 12px 24px;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
flex: 1;
justify-content: center;
min-width: 140px;
background: linear-gradient(135deg, rgba(74, 124, 44, 0.8), rgba(45, 80, 22, 0.6));
box-shadow:
0 4px 15px rgba(74, 124, 44, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.api-doc-btn:hover {
color: white;
transform: translateY(-2px);
box-shadow:
0 8px 25px rgba(74, 124, 44, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, rgba(45, 80, 22, 0.9), rgba(74, 124, 44, 0.7));
}
.api-doc-btn i {
margin-right: 8px;
}
.api-doc-copy-btn {
display: inline-flex;
align-items: center;
padding: 12px 20px;
background: transparent;
color: white;
border: 2px solid rgba(74, 124, 44, 0.6);
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
justify-content: center;
min-width: 140px;
}
.api-doc-copy-btn:hover {
background: rgba(74, 124, 44, 0.2);
color: white;
border-color: rgba(74, 124, 44, 0.8);
box-shadow: 0 4px 15px rgba(74, 124, 44, 0.3);
}
.api-doc-copy-btn i {
margin-right: 8px;
}
/* 使用指南样式 - Hero淡绿风格 */
.api-docs-guide {
background: rgba(45, 80, 22, 0.5);
backdrop-filter: blur(30px);
border-radius: 15px;
padding: 40px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 5px 20px rgba(0, 0, 0, 0.3);
border: 0.5px solid rgba(255, 255, 255, 0.15);
}
.guide-header h3 {
color: white;
font-weight: 600;
margin-bottom: 30px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.guide-header h3 i {
color: #00ff9d;
margin-right: 10px;
}
.guide-step {
text-align: center;
padding: 30px 20px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
height: 100%;
transition: transform 0.3s ease;
position: relative;
}
.guide-step:hover {
transform: translateY(-5px);
background: rgba(0, 0, 0, 0.3);
}
.step-number {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(74, 124, 44, 0.8), rgba(45, 80, 22, 0.6));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 600;
margin: 0 auto 20px;
box-shadow:
0 4px 15px rgba(74, 124, 44, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.guide-step h4 {
color: white;
font-weight: 600;
margin-bottom: 15px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.guide-step p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* 技术支持样�?- Hero淡绿风格 */
.api-support-section {
background: rgba(45, 80, 22, 0.5);
backdrop-filter: blur(30px);
border-radius: 15px;
padding: 40px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 5px 20px rgba(0, 0, 0, 0.3);
border: 0.5px solid rgba(255, 255, 255, 0.15);
}
.api-support-section h3 {
color: white;
font-weight: 600;
margin-bottom: 20px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.api-support-section h3 i {
color: #00ff9d;
margin-right: 10px;
}
.api-support-section p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.support-contact {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-support {
display: inline-flex;
align-items: center;
padding: 12px 30px;
background: linear-gradient(135deg, rgba(74, 124, 44, 0.8), rgba(45, 80, 22, 0.6));
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow:
0 4px 15px rgba(74, 124, 44, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-support:hover {
background: linear-gradient(135deg, rgba(45, 80, 22, 0.9), rgba(74, 124, 44, 0.7));
color: white;
transform: translateY(-2px);
box-shadow:
0 8px 25px rgba(74, 124, 44, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-support i {
margin-right: 10px;
}
/* Toast提示样式 */
.toast-container {
z-index: 1050;
}
.toast {
background: var(--white);
border-left: 4px solid var(--light-green);
}
/* API文档模块响应式优�?*/
@media (max-width: 768px) {
.api-doc-header {
flex-direction: column;
text-align: center;
}
.api-doc-icon {
margin-right: 0;
margin-bottom: 15px;
}
.api-doc-footer {
flex-direction: column;
}
.api-doc-btn,
.api-doc-copy-btn {
min-width: 100%;
}
.support-contact {
flex-direction: column;
align-items: center;
}
.btn-support {
width: 100%;
max-width: 300px;
}
}
/* 物流服务模块样式 - 深绿色风格 */
.logistics-section {
padding: 6rem 0;
background:
/* 径向渐变 - 深色背景 */
radial-gradient(circle at 50% 50%,
rgba(74, 124, 44, 0.25) 0%,
rgba(45, 80, 22, 0.2) 30%,
rgba(30, 60, 20, 0.6) 60%,
rgba(20, 40, 15, 0.8) 100%),
/* 线性渐变 - 深色基调 */
linear-gradient(135deg,
rgba(20, 40, 15, 0.85) 0%,
rgba(30, 60, 20, 0.8) 30%,
rgba(45, 90, 30, 0.75) 60%,
rgba(60, 110, 45, 0.7) 100%);
position: relative;
overflow: hidden;
}
/* 主标题 */
.logistics-main-title {
color: white;
font-weight: 700;
font-size: 2.8rem;
margin-bottom: 1rem;
position: relative;
letter-spacing: 0.5px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* 副标题 */
.logistics-subtitle-text {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
font-weight: 400;
max-width: 800px;
margin: 0 auto 3rem;
line-height: 1.7;
}
/* 物流优势卡片 - 深绿色半透明背景 */
.logistics-advantage-card {
background: rgba(45, 80, 22, 0.5);
backdrop-filter: blur(30px);
border-radius: 16px;
padding: 2.5rem 2rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 0.5px solid rgba(255, 255, 255, 0.15);
height: 100%;
position: relative;
overflow: hidden;
}
/* 高光边框 */
.logistics-advantage-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
padding: 0.5px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 50%,
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.logistics-advantage-card:hover {
transform: translateY(-8px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 50px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.logistics-advantage-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #8bc34a 0%, #4a7c2c 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.logistics-advantage-card:hover .logistics-advantage-icon {
transform: scale(1.05);
}
.logistics-advantage-icon i {
color: #ffffff;
font-size: 1.8rem;
}
.logistics-advantage-title {
color: white;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.logistics-advantage-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
font-size: 0.95rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* 统计框样式 - 深绿色半透明背景 */
.stat-box {
background: rgba(45, 80, 22, 0.5);
backdrop-filter: blur(30px);
border-radius: 16px;
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1.2rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 8px 32px rgba(0, 0, 0, 0.3);
border: 0.5px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* 高光边框 */
.stat-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
padding: 0.5px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 50%,
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.stat-box:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 50px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.stat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #8bc34a 0%, #4a7c2c 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-icon i {
color: #ffffff;
font-size: 1.4rem;
}
.stat-content h6 {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
margin: 0 0 0.3rem 0;
font-size: 0.9rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.stat-number {
color: #8bc34a;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
text-shadow: 0 0 10px rgba(139, 195, 74, 0.5);
}
.stat-number span {
font-size: 0.9rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
margin-left: 0.3rem;
}
/* 物流服务流程标题 */
.logistics-section-title {
color: #2d5016;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 2rem;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 1rem;
}
.logistics-section-title i {
font-size: 1.5rem;
color: #8bc34a;
}
/* 流程卡片 */
.process-card {
background: rgba(45, 80, 22, 0.5);
backdrop-filter: blur(30px);
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 0.5px solid rgba(255, 255, 255, 0.15);
height: 100%;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 8px 32px rgba(0, 0, 0, 0.3);
}
/* 高光边框 */
.process-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
padding: 0.5px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 50%,
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.process-card:hover {
transform: translateY(-8px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 50px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.process-number {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(139, 195, 74, 0.8), rgba(74, 124, 44, 0.6));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
margin: 0 auto 1.5rem;
position: relative;
z-index: 1;
box-shadow:
0 5px 20px rgba(139, 195, 74, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.process-card h5 {
color: white;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.process-card p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* 价格优势和物流追踪卡片 - 简约风格 */
.logistics-feature-card {
background: #ffffff;
border-radius: 12px;
padding: 2.5rem 2rem;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
height: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.logistics-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
padding: 0.5px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 50%,
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.logistics-feature-card:hover {
transform: translateY(-8px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 50px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.logistics-feature-header {
padding: 0 0 1.5rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: #2d5016;
flex-direction: column;
}
.logistics-feature-header i {
font-size: 2.5rem;
color: #8bc34a;
}
.logistics-feature-header h5 {
margin: 0;
font-weight: 600;
font-size: 1.5rem;
}
.logistics-feature-body {
padding: 0;
}
.feature-desc {
color: #757575;
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 1rem;
}
.logistics-feature-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.logistics-feature-list li {
padding: 0.8rem 1rem;
padding-left: 2.5rem;
margin-bottom: 0.8rem;
background: #f8f9fa;
border-radius: 8px;
position: relative;
transition: all 0.3s ease;
color: #757575;
font-size: 0.95rem;
}
.logistics-feature-list li::before {
content: "✓";
position: absolute;
left: 1rem;
color: #8bc34a;
font-weight: bold;
font-size: 1.2rem;
}
.logistics-feature-list li:hover {
background: #e9ecef;
transform: translateX(5px);
}
/* 物流流程步骤 - 简约风格 */
.logistics-process-step {
text-align: center;
padding: 2rem 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
position: relative;
height: 100%;
transition: all 0.3s ease;
}
.logistics-process-step:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
border-color: #8bc34a;
}
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.logistics-process-step:hover {
transform: translateY(-5px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 10px 30px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.logistics-step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, rgba(74, 124, 44, 0.8), rgba(45, 80, 22, 0.6));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto 1.5rem;
position: relative;
z-index: 1;
box-shadow:
0 4px 15px rgba(74, 124, 44, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.logistics-step-number::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(135deg, rgba(74, 124, 44, 0.5), rgba(45, 80, 22, 0.3));
border-radius: 50%;
z-index: -1;
opacity: 0.3;
}
.logistics-step-title {
color: white;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.logistics-step-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-size: 0.95rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* 物流价格优势 - 与货柜运输相同风�?*/
.logistics-pricing-section {
background: #ffffff;
border-radius: 12px;
padding: 3rem;
margin-bottom: 3rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.logistics-pricing-section:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
.logistics-pricing-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 2rem;
text-align: center;
position: relative;
z-index: 1;
color: #2d5016;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.logistics-pricing-title::before {
content: "$";
font-size: 2.5rem;
color: #8bc34a;
}
.logistics-pricing-features {
margin-top: 2rem;
}
.logistics-pricing-feature {
display: flex;
align-items: flex-start;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.logistics-pricing-feature:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
}
.logistics-pricing-feature:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
border-color: #8bc34a;
}
.logistics-pricing-feature i {
color: #8bc34a;
font-size: 1.2rem;
margin-right: 1rem;
min-width: 30px;
margin-top: 2px;
}
.logistics-pricing-feature-text {
font-size: 1.05rem;
line-height: 1.6;
color: #757575;
}
/* 物流追踪服务 - 与货柜运输相同风�?*/
.logistics-tracking-section {
background: #ffffff;
border-radius: 12px;
padding: 3rem;
margin-bottom: 3rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.logistics-tracking-section:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
.logistics-tracking-title {
color: #2d5016;
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.logistics-tracking-title::before {
content: "🔍";
font-size: 2.2rem;
}
.logistics-tracking-description {
color: #757575;
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
}
.logistics-tracking-features {
margin-top: 2rem;
}
.logistics-tracking-feature {
display: flex;
align-items: flex-start;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.logistics-tracking-feature:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.logistics-tracking-feature:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
border-color: #8bc34a;
}
.logistics-tracking-feature i {
color: #8bc34a;
font-size: 1.2rem;
margin-right: 1rem;
min-width: 30px;
margin-top: 2px;
}
.logistics-tracking-feature-text {
font-size: 1.05rem;
line-height: 1.6;
color: #757575;
}
/* 物流信息卡片 - 专业企业风格 */
.logistics-info-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
}
.logistics-info-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
border-color: #8bc34a;
}
.logistics-card-header {
background: linear-gradient(135deg, #8bc34a 0%, #4a7c2c 100%);
color: #ffffff;
padding: 2rem 2.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.logistics-card-header i {
font-size: 2.5rem;
}
.logistics-card-header h3 {
font-size: 1.8rem;
font-weight: 600;
margin: 0;
}
.logistics-card-body {
padding: 2rem 2.5rem;
}
.lead-text {
font-size: 1.1rem;
color: #757575;
line-height: 1.8;
margin-bottom: 2rem;
}
.logistics-subtitle {
color: #2d5016;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.logistics-subtitle i {
color: #8bc34a;
margin-right: 0.5rem;
}
.logistics-list {
list-style: none;
padding: 0;
margin: 0;
}
.logistics-list li {
padding: 0.7rem 0;
color: #757575;
border-bottom: 1px solid #e9ecef;
position: relative;
padding-left: 1.5rem;
transition: all 0.3s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.logistics-list li::before {
content: '�?;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: #00ff9d;
font-weight: bold;
font-size: 1.2rem;
line-height: 1;
}
.logistics-list li:hover {
color: #2d5016;
padding-left: 1.8rem;
}
/* 货柜运输样式 - 专业企业风格 */
.container-shipping {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
border: 2px solid transparent;
margin-bottom: 3rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.container-shipping:hover {
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
.shipping-type {
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.shipping-type:hover {
transform: translateY(-5px);
border-color: #8bc34a;
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
}
.shipping-type h4 {
color: #2d5016;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* 货柜运输卡片 */
.shipping-card {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* 高光边框 */
.shipping-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
padding: 0.5px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 50%,
rgba(255, 255, 255, 0.2) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.shipping-card:hover {
transform: translateY(-5px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 15px 50px rgba(74, 124, 44, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.shipping-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e9ecef;
}
.shipping-header i {
font-size: 2rem;
color: #8bc34a;
}
.shipping-header h5 {
color: #2d5016;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
}
.shipping-desc {
color: #757575;
line-height: 1.7;
margin-bottom: 1.5rem;
font-size: 1rem;
}
.shipping-label {
color: #2d5016;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
}
.shipping-list {
list-style: none;
padding: 0;
}
.shipping-list li {
padding: 0.5rem 0;
color: #757575;
position: relative;
padding-left: 2rem;
}
.shipping-list li::before {
content: '•';
position: absolute;
left: 0;
color: #8bc34a;
font-weight: bold;
}
/* 航线样式 */
.shipping-routes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.route-card {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
transition: all 0.3s ease;
border-left: 4px solid #8bc34a;
position: relative;
overflow: hidden;
}
mask-composite: exclude;
pointer-events: none;
}
.route-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(45, 80, 22, 0.15);
border-color: #8bc34a;
border-left-color: #4a7c2c;
}
.route-name {
color: #2d5016;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.route-ports {
color: #757575;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.route-info {
display: flex;
justify-content: space-between;
color: #757575;
font-size: 0.9rem;
}
.route-time {
font-weight: 600;
color: #2d5016;
}
.route-frequency {
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
/* 物流模块响应式优�?*/
@media (max-width: 768px) {
.logistics-main-title {
font-size: 2.2rem;
}
.logistics-subtitle-text {
font-size: 1.1rem;
}
.logistics-advantage-card {
padding: 2rem;
margin-bottom: 2rem;
}
/* 特性卡片样�?- 与process-card一�?*/
.logistics-feature-card {
background: linear-gradient(135deg, rgba(45, 80, 22, 0.95) 0%, rgba(30, 60, 20, 0.98) 100%);
border-radius: 16px;
padding: 2.5rem 2rem;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(139, 195, 74, 0.3);
height: 100%;
position: relative;
overflow: hidden;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.logistics-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #00ff9d, #2d5016);
}
.logistics-feature-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 12px 40px rgba(74, 124, 44, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(74, 124, 44, 0.5);
}
.logistics-feature-header {
padding: 0 0 1.5rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: white;
flex-direction: column;
}
.logistics-feature-header i {
font-size: 2.5rem;
color: #00ff9d;
text-shadow: 0 0 20px rgba(74, 124, 44, 0.6);
}
.logistics-feature-header h5 {
margin: 0;
font-weight: 600;
font-size: 1.5rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.pricing-header {
background: transparent;
box-shadow: none;
}
.tracking-header {
background: transparent;
box-shadow: none;
}
.logistics-feature-body {
padding: 0;
}
.feature-desc {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 1rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.logistics-feature-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.logistics-feature-list li {
padding: 0.8rem 1rem;
padding-left: 2.5rem;
margin-bottom: 0.8rem;
background: rgba(255, 255, 255, 0.08);
border-radius: 8px;
position: relative;
transition: all 0.3s ease;
color: rgba(255, 255, 255, 0.95);
font-size: 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.logistics-feature-list li::before {
content: "�?;
position: absolute;
left: 0.8rem;
color: #00ff9d;
font-weight: bold;
}
.logistics-feature-list li:hover {
background: rgba(74, 124, 44, 0.15);
border-color: rgba(74, 124, 44, 0.3);
transform: translateX(5px);
}
.logistics-process-step {
padding: 2rem 1.5rem;
margin-bottom: 2rem;
}
.logistics-pricing-section {
padding: 2.5rem 2rem;
}
.logistics-tracking-section {
padding: 2.5rem 2rem;
}
.logistics-tracking-features {
grid-template-columns: 1fr;
}
.logistics-card-header {
padding: 2rem;
}
.logistics-card-header i {
font-size: 2.5rem;
}
.logistics-card-header h3 {
font-size: 1.5rem;
}
.logistics-card-body {
padding: 2rem;
}
.stat-box {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.shipping-routes {
grid-template-columns: 1fr;
}
/* 物流服务流程标题 */
.logistics-section-title {
font-size: 2rem;
font-weight: 700;
color: white;
margin-bottom: 2rem;
letter-spacing: 1px;
text-shadow:
0 0 20px rgba(74, 124, 44, 0.8),
0 0 40px rgba(74, 124, 44, 0.5);
display: flex;
align-items: center;
gap: 1rem;
}
.logistics-section-title i {
color: #00ff9d;
font-size: 1.8rem;
}
/* 流程卡片 */
.process-card {
background: linear-gradient(135deg, rgba(45, 80, 22, 0.95) 0%, rgba(30, 60, 20, 0.98) 100%);
border-radius: 16px;
padding: 2.5rem 2rem;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(139, 195, 74, 0.3);
height: 100%;
position: relative;
overflow: hidden;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.process-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #00ff9d, #2d5016);
}
.process-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 12px 40px rgba(74, 124, 44, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(74, 124, 44, 0.5);
}
.process-number {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(74, 124, 44, 0.9), rgba(45, 80, 22, 0.8));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
margin: 0 auto 1.5rem;
box-shadow:
0 0 20px rgba(74, 124, 44, 0.6),
0 5px 15px rgba(0, 0, 0, 0.3);
}
.process-card h5 {
color: white;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.process-card p {
color: rgba(255, 255, 255, 0.85);
line-height: 1.7;
margin: 0;
font-size: 0.95rem;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
}