* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Arial", sans-serif; } html, body { overflow: hidden; height: 100%; } /* 仅手机 */ .only-phone { display: none; } /* 仅pc */ .only-pc { display: block; } /* 导航栏 */ .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #2c3e50; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; height: 60px; } .nav-logo { color: white; font-weight: bold; font-size: 1.2rem; text-decoration: none; } .nav-menu { display: flex; list-style: none; transition: all 0.3s ease; } .nav-item { margin: 0 10px; } .nav-link { color: #ecf0f1; text-decoration: none; padding: 15px 10px; display: block; transition: color 0.3s; font-size: 0.9rem; } .nav-link:hover, .nav-link.active { color: #3498db; } /* 汉堡菜单 */ .menu-toggle { display: none; cursor: pointer; padding: 10px; } .menu-toggle span { display: block; width: 25px; height: 3px; background-color: white; margin: 5px 0; transition: all 0.3s ease; } /* 最外部模块样式 */ .section-container { height: 100vh; width: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; padding-top: 60px; /* 隐藏滚动条 */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 和 Edge */ } /* 隐藏Webkit浏览器滚动条 */ .section-container::-webkit-scrollbar { display: none; } /* 各个模块的div */ .section { height: 100vh; scroll-snap-align: start; padding: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .section:nth-child(odd) { background-color: #f9f9f9; } .section:nth-child(even) { background-color: #e9e9e9; } /* 背景图的操作 */ /* 模块一1背景 */ #section1 { background-image: url(../images/website/banner1.png); background-size: cover; background-position: center; } /* 模块5背景 */ #section5 { background-image: url(../images/website/行业案例@2x.png); background-size: cover; background-position: center; } /* 模块二的内容 */ .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); /* 默认 4 列 */ grid-auto-rows: minmax(100px, auto); /* 行高自适应,最小 100px */ gap: 10px; /* 间距 */ padding: 10px; width: 100%; } .grid-item { aspect-ratio: 3/2; /* 宽高比(接近 300x200) */ background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white; text-align: center; position: relative; width: 100%; } .grid-item h2, .grid-item p { transition: opacity 0.3s ease; position: relative; z-index: 1; }