From 159543a0e5f3be5340c8a3d205b7eeb5feffdc5f Mon Sep 17 00:00:00 2001 From: yanfeiyong <2060201549@qq.com> Date: Wed, 23 Apr 2025 09:40:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E5=93=8D=E5=BA=94?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jc-website/css/pc.css | 173 +++++ jc-website/css/phone.css | 125 ++++ jc-website/html/companyweb.html | 1118 ++++++------------------------- jc-website/html/website.html | 85 +++ jc-website/js/pc.js | 106 +++ 5 files changed, 697 insertions(+), 910 deletions(-) create mode 100644 jc-website/css/pc.css create mode 100644 jc-website/css/phone.css create mode 100644 jc-website/html/website.html create mode 100644 jc-website/js/pc.js diff --git a/jc-website/css/pc.css b/jc-website/css/pc.css new file mode 100644 index 0000000..833c5bc --- /dev/null +++ b/jc-website/css/pc.css @@ -0,0 +1,173 @@ +* { + 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; +} diff --git a/jc-website/css/phone.css b/jc-website/css/phone.css new file mode 100644 index 0000000..a3b6dba --- /dev/null +++ b/jc-website/css/phone.css @@ -0,0 +1,125 @@ +/* 移动端适配 */ +@media (max-width: 768px) { + /* 仅手机端显示 */ + .only-phone { + display: block; + } + /* 仅pc显示 */ + .only-pc { + display: none; + } + + /* ----模块二的内容---- */ + .grid-item { + width: 150px; + height: 100px; + /* 调整移动端高度 */ + margin: 5px 0; + background-image: url(../images/website/数据建库m.png) !important; + background-size: 100% 100%; + background-position: center; + } + + .grid-item:nth-child(2) { + background-image: url(../images/website/人工智能m.png) !important; + background-size: 100% 100%; + background-position: center; + } + + /* 在移动端隐藏文字 */ + .grid-item h2, + .grid-item p { + display: none; + } + /* -------------------- */ + + /* 背景图操作 */ + #section1 { + background-image: url(../images/website/深色banner@2x.png); + background-size: cover; + background-position: center; + } + #section5 { + background-image: url(../images/website/行业案例m.png); + background-size: cover; + background-position: center; + } + /* -------------------- */ + + /* 菜单栏 */ + .nav-menu { + position: fixed; + top: 60px; + left: -100%; + width: 30%; + height: calc(100vh - 60px); + background-color: #2c3e50; + flex-direction: column; + align-items: center; + padding-top: 20px; + } + + .nav-menu.active { + left: 0; + } + + .nav-item { + margin: 15px 0; + } + + .menu-toggle { + display: block; + } + + .menu-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .menu-toggle.active span:nth-child(2) { + opacity: 0; + } + + .menu-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -6px); + } + + .section h2 { + font-size: 2rem; + } + /* -------------------- */ +} + +/* 暂时不考虑↓ */ +@media (max-width: 480px) { + .nav-container { + height: 50px; + } + + #section5 { + /* 为手机端准备的图片 */ + background-image: url(../images/website/行业案例m.png); + background-size: cover; + background-position: center; + } + + .section-container { + padding-top: 50px; + } + + .nav-menu { + top: 50px; + height: calc(100vh - 50px); + } + + .nav-logo { + font-size: 1rem; + } + + .section { + padding: 15px; + } + + .section h2 { + font-size: 1.8rem; + } +} diff --git a/jc-website/html/companyweb.html b/jc-website/html/companyweb.html index 8bc7eab..5815a60 100644 --- a/jc-website/html/companyweb.html +++ b/jc-website/html/companyweb.html @@ -1,5 +1,5 @@ - +