diff --git a/css/aboutUs.css b/css/aboutUs.css new file mode 100644 index 0000000..f98a91a --- /dev/null +++ b/css/aboutUs.css @@ -0,0 +1,269 @@ +.topBanner{ + width: 100%; + height: 68vh; + background-color: #030045; + display: flex; + justify-content: center; + align-items: start; + /* background: palegoldenrod; */ + overflow: hidden; + background-image: url(../imgs/svg/关于我们图.svg); + background-repeat: no-repeat; + background-size:43vw auto; + background-position:46vw 0vw; + position: relative; +} + +.topBannerLeft{ + width: 27%; + height: 80%; + /* background: #00316B; */ + color: #fff; + position: absolute; + top: 10vh; + left: 18vw; +} + +.topBannerLeft p:nth-child(1){ + font-size: 2.5vw; + font-weight: 600; + letter-spacing: 0.5vw; +} + +.topBannerLeft p:nth-child(2){ + font-size: 1.28vw; + color: #01A0D0; + margin-top: 10px; + line-height: 4.2vh; + +} + + +.btLeft{ + width: 20vw; + position: absolute; + bottom: 15vh; + left: -5.5vw; +} +.tpRight{ + width: 17vw; + position: absolute; + top: 10vh; + right: -6vw; +} +.btRight{ + width:70vw; + position: absolute; + bottom: -1.3vh; + right: 0vw; +} + +/* ------------------- */ + +.banner{ + width: 100%; + height: 205vh; + background-image: url(../imgs/svg/背景纹（大）.svg); + background-repeat: no-repeat; + background-size:160%; + background-position: 54vw -42vw; + background-color: #00316B; +} +/* .bannerLeft{ + width: 100%; + height: 30%; + background-color: rgba(3, 0, 69, 0.5); +} */ + .bannertop{ + width: 100%; + height:105vh; + background-image: url(../imgs/svg/企业文化理念\(BJF\).svg); + background-repeat: no-repeat; + background-size:40vw; + background-position:0vw 50%; + + display: flex; + align-items: center; + justify-content: end; + padding-right: 5vw; + padding-top: 18vh; + + + } + .textBox{ + width: 45vw; + height: 100%; + color: #fff; + /* background: peru; */ + display: flex; + flex-direction: column; + justify-content: start; + align-items: start; + } + .textOne,.textTwo,.textThree{ + width: 100%; + height: 30%; + /* background-color: rgba(3, 0, 69, 0.5); */ + display: flex; + align-items: center; + justify-content: start; + margin-top: 3vh; + } + .Left{ + width: 15%; + height: 100%; + + } + .Left img{ + width: 5vw; + height: auto; + } + .Right{ + width: 80%; + height: 100%; + + } + .Right p:nth-child(1){ + font-size: 1.9vw; + font-weight: 600; + /* letter-spacing: 0.3vw; */ + } + .Right p:nth-child(2){ + font-size: 1.25vw; + margin-top: 2vh; + } + + + .bannerBottom{ + width: 100%; + /* height: 100vh; */ + background-color:rgba(3, 0, 69, 0.8); + padding-top: 8vh; + padding-bottom: 8vh; + + } + + .bannerBottom h1{ + font-size: 3vw; + font-weight: 600; + color: #fff; + text-align: center; + text-decoration: underline; + text-underline-offset: 0.8vw; + + } + .bannerBottomList{ + width: 80%; + height:auto; + /* background: palegoldenrod; */ + margin: 0 auto; + margin-top: 8vh; + display: flex; + flex-direction: column; + align-items: center; + } + .bannerBottomList li{ + width: 80%; + height:35vh; + + margin-top: 10vh; + display: flex; + justify-content: space-around; + } + .bannerBottomList li p{ + width: 40%; + height: 100%; + color: #fff; + display: flex; + flex-direction: column; + justify-content: end; + align-items: start; + padding-bottom: 3vh; + font-size: 1.2vw; + padding-left: 4vw; + } + .bannerBottomListOne{ + background-image: url(../imgs/us/ic.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 100%; + } + .bannerBottomListTwo{ + background-image: url(../imgs/us/lowpower.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 100%; + } + .bannerBottomListThree{ + background-image: url(../imgs/us/manufacturer.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 100%; + } + + .bannerBottomListFour{ + background-image: url(../imgs/us/Tapeout.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 100%; + } + + + + +/* ------------------- */ + + +.top3{ + width: 20vw; + position: absolute; + top: 0vh; + left: 20vw; +} + +/* --------------- */ +.map{ + width: 100%; + height: 100vh; + /* background: palegoldenrod; */ + background-color:rgba(3, 0, 69, 0.8); + + display: flex; + justify-content: center; + align-items: center; +} + +.addressBox-bottom{ + width: 55vw; + height: 55vh; + margin: 0 auto; + position: relative; + margin-top: 10vh; + +} + +#mapContainer { + width: 100%; + height: 100%; + min-height: 300px; /* 确保地图有最小高度 */ +} + +html { + scroll-behavior: smooth; /* 添加平滑滚动效果 */ +} + +#contact-map { + scroll-margin-top: 10vh; +} + + + + + + + + diff --git a/css/approaching.css b/css/approaching.css new file mode 100644 index 0000000..902da5a --- /dev/null +++ b/css/approaching.css @@ -0,0 +1,154 @@ +.topBanner{ + width: 100%; + height: 68vh; + background-color: #030045; + display: flex; + justify-content: center; + align-items: start; + /* background: palegoldenrod; */ + overflow: hidden; + background-image: url(../imgs/approaching/prospect.png); + background-repeat: no-repeat; + background-size:80vw auto; + background-position:20vw -6vw; + position: relative; +} + +.topBannerLeft{ + width: 50%; + height: 80%; + + color: #fff; + position: absolute; + top: 5vh; + left: 12vw; +} +.topBannerLeftTitle{ + /* background: palegoldenrod; */ + margin-top: 8vh; + position: relative; +} +.lightImg{ + width: 34vw; + height: auto; +} + +.topBannerLeft p:nth-child(1){ + font-size: 3vw; + font-weight: 600; + letter-spacing: 0.5vw; + position: absolute; + top: 0.8vw; + left: 1.5vw; + +} + +.topBannerLeft p:nth-child(2){ + font-size: 1.3vw; + color: #01A0D0; + margin-top: 18px; + line-height: 5vh; + +} + +.top{ + width: 20vw; + position: absolute; + top: 0vh; + left: 20vw; +} + + +.btLeft{ + width: 20vw; + position: absolute; + bottom: 15vh; + left: -5.5vw; +} +.tpRight{ + width: 17vw; + position: absolute; + top: 10vh; + right: -6vw; +} +.btRight{ + width:70vw; + position: absolute; + bottom: -1.3vh; + right: 0vw; +} +/* --------------------- */ +.future{ + width: 100%; + height: 100vh; + background: #01326C; + color: #fff; + padding-top: 5vh; +} +.futureList{ + width: 90%; + height: 100%; + display: flex; + justify-content: space-around; + align-items: center; + margin: 0 auto; + /* background: paleturquoise; */ +} +.futureList li{ + width: 25%; + height: 75%; + /* background: palegoldenrod; */ + border: 4px solid #00EAEB; + border-radius: 20px; + text-align: center; + padding: 18px; + position: relative; +} +.futureImg{ + width: 100%; + height:auto; +} +.futureContent{ + margin-top: 5vh; +} +.futureContent p:nth-child(1){ + font-size: 1.5vw; + font-weight: 600; + +} +.futureContent p:nth-child(2){ + font-size: 1.2vw; + width: 85%; + margin: 0 auto; + margin-top: 2vh; + text-align: left; + line-height: 4vh; + +} + +.futureCircle{ + width: 8vw; + height: 8vw; + border: 4px solid #00EAEB; + border-radius: 50%; + position: absolute; + top: -3vw; + left: -1vw; + display: flex; + justify-content: center; + align-items: center; +} +.futureCircleInner{ + width: 6.8vw; + height: 6.8vw; + border-radius: 50%; + background: #019FCF; + color: #fff; + font-size: 1.5vw; + font-weight: 600; + display: flex; + justify-content: center; + align-items: center; + padding: 1.2vw; + +} diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..7c1f859 --- /dev/null +++ b/css/base.css @@ -0,0 +1,70 @@ +/* 所有标签的内外边距清零 */ +* { + margin: 0px; + padding: 0px; + /* css3盒子模型 */ + box-sizing: border-box; + font-family:DFKai-SB; +} +/* em 和 i 斜体的文字不倾斜 */ +em, +i { + font-style: normal +} +/* 去掉li 的小圆点 */ +/* li { + list-style: none +} */ +/* ul{ + list-style: none; +} */ + +img { + /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ + border: 0; + /* 取消图片底侧有空白缝隙的问题 */ + vertical-align: middle; +} + +button { + /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ + cursor: pointer +} + +a { + color: #666; + text-decoration: none +} + +a:hover { + color: #c81623 +} + +button, +input { + /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ + font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; + /* 默认有灰色边框我们需要手动去掉 */ +} + +body { + /* CSS3 抗锯齿形 让文字显示的更加清晰 */ + -webkit-font-smoothing: antialiased; + /* background-color: #fff; */ + /* font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; */ + /* color: #666 */ +} + +.hide, +.none { + display: none +} +/* 清除浮动 */ +.clearfix::after { + visibility: hidden; + clear: both; + display: block; + content: "."; + height: 0 +} + diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..b6f6342 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,127 @@ +.footer{ + width: 100%; + height: 60vh; + /* background-color: #030045; */ + position: relative; + background: + url(../imgs/svg/页尾背景左.svg) 2vw 28vh/400px auto no-repeat, + url(../imgs/svg/页尾背景右.svg) 78vw 19vh/400px auto no-repeat, + hsl(243, 100%, 14%); /* 背景色放在最后 */ + +} +.emailBox{ + width: 55vw; + height: 12vh; + background: #00ECEC; + position: absolute; + top: 18vh; + left: 30vw; + border-radius: 20px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: space-between; +} +.emailLeft{ + width: 50%; + height: 100%; + display: flex; + align-items: start; + justify-content: center; + flex-direction: column; + padding-left: 4vw; +} +.emailLeft p{ + font-size: 1.2vw; + color: #fff; + font-weight: 600; +} +.emailLeft p:nth-child(2){ + font-size: 1vw; + color: #fff; + font-weight: 400; +} + + +.emailRight{ + width: 50%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.email{ + width: 50%; + height: 48%; + background: #fff; + border-radius: 10px; + overflow: hidden; + border: 3px solid #3FB7DC; + display: flex; + align-items: center; + justify-content: space-around; + cursor: pointer; + transition: all 0.3s ease; +} +.email span{ + font-size: 1vw; + color: #3FB7DC; + font-weight: 800; + +} +.email img{ + width: 1.5vw; + height: auto; +} +.email:hover{ + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); +} + +/* --------------------------------------- */ +.footerBox{ + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} +.footerBoxLeft{ + width: 30vw; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.footerBoxLeft img{ + width: 8vw; + height:auto; +} +.footerBoxRight{ + width: 50%; + height: 100%; + display: flex; + flex-direction: column; + align-items: end; + justify-content: end; + padding-bottom: 2vh; + padding-right: 5vw; + color: #fff; +} +.footerBoxRight p{ + font-size: 1vw; + font-weight: 400; +} + +.record{ + color: #fff; + font-size: 1vw; + +} +.record:hover{ + color: #009FD0; + font-size: 1vw; + +} + + diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000..56b0a8c --- /dev/null +++ b/css/header.css @@ -0,0 +1,90 @@ +.header{ + width: 100%; + height: 15vh; + background-color: #030045; + position: relative; + margin-bottom: 0; + margin-bottom: -1px; + /* background: padding-box; */ + display: flex; + align-items: center; + justify-content: center; +} + +.header .bg{ + width: 20vw; + height: 35%; + /* background: palegoldenrod; */ + position: absolute; + bottom: 0; + left: 24vw; +} +.header .bg img{ + width: 100%; + height:auto; + +} +.header .container{ + width: 100%; + height: 65%; + display: flex; + align-items: start; + justify-content: space-between; + /* background: palegoldenrod; */ +} +.logo{ + width: 20%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.logo img{ + width: 3.5vw; + height: auto; +} +.header ul{ + width: 45%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + /* background: palevioletred; */ + margin-left: 5vw; + padding-right: 10vw; +} +.header ul li{ + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9vw; + + +} +.header ul li a{ + display: inline-block; + color: #009FD1; + transition: all 0.2s ease; + font-weight: 600; + font-size: 1vw; + position: relative; + padding-bottom: 2vh; +} +.header ul li a:hover{ + font-size: 1vw; + color: #fff; + text-shadow: 0 0 10px rgba(41, 111, 216, 0.5); +} +/* .active{ + background: palegoldenrod; +} */ +.actives::before{ + content:url(../imgs/svg/页面选择图标.svg); + width: 100%; + height: auto; + position: absolute; + bottom: 0; + left: 0; +} diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..3e1bd7b --- /dev/null +++ b/css/index.css @@ -0,0 +1,688 @@ + +.topBanner{ + width: 100%; + height: 100vh; + background-color: #030045; + display: flex; + justify-content: center; + align-items: start; + /* background: palegoldenrod; */ + overflow: hidden; + background-image: url(../imgs/png/首页图.png); + background-repeat: no-repeat; + background-size:68vw auto; + background-position:35vw -4vw; + position: relative; + margin-top: 0; + background-color: #030045; +} +* { + box-sizing: border-box; /* 确保所有元素使用相同的盒模型 */ +} + +body { + margin: 0; + padding: 0; + overflow-x: hidden; /* 防止水平滚动条 */ +} +/* --------轮播------------ */ +.CarouselBox{ + width: 100%; + height: 80%; + margin: 0 auto; + overflow: hidden; + position: relative; +} + + +/* 轮播图容器 */ +.carousel-container { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; + padding: 0; +} +.carousel-list { + display: flex; + width: 100%; + height: 100%; + transition: transform 0.5s ease; +} + +.carousel-item { + flex: 0 0 100%; + width: 100%; + height: 100%; + background: palegoldenrod; +} + +/* 优化图片渲染 */ +.carousel-item img { + width: 100%; + height: 100%; + user-select: none; + /* 添加这些属性以提升性能 */ + -webkit-user-drag: none; + -khtml-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; + object-fit: cover; /* 保持比例填充整个容器 */ + display: block; /* 移除图片底部间隙 */ +} + +/* 优化箭头按钮样式 */ +.carousel-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + height: 40px; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: white; + font-size: 20px; + z-index: 10; + transition: all 0.3s ease; +} + +.carousel-arrow:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +/* 添加触摸设备支持 */ +@media (hover: none) { + .carousel-arrow { + display: none; /* 在触摸设备上隐藏箭头 */ + } +} + +.carousel-arrow-left { + left: 2vw; + top: 48.7%; + +} + +.carousel-arrow-right { + right: 2vw; + +} +/* 修正指示器容器样式 */ +.carousel-indicators { + position: absolute; + bottom: 1vh; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 2vw; + z-index: 10; +} + +/* 修正指示器小圆点样式 */ +.indicator { + width: 20px; /* 稍微调小一点 */ + height: 20px; + border-radius: 50%; + /* background-color: rgba(255, 255, 255, 0.5); */ + background-color: #009ECF; + cursor: pointer; + transition: all 0.3s ease; +} + +/* 补充激活状态的指示器样式 */ +.indicator.active { + background-color: #00ECEC; /* 高亮为纯白色 */ + transform: scale(1.2); /* 稍微放大 */ + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加发光效果 */ +} +/* 修正容器结构相关样式 */ +.carousel-container { + width: 100%; + height: 100%; + position: relative; /* 确保是相对定位 */ + overflow: hidden; + padding: 0; +} + +/* 悬停效果 */ +.indicator:hover { + background-color: rgba(255, 255, 255, 0.8); + transform: scale(1.1); +} + + +/* 轮播项样式 */ +.carousel-item { + position: relative; + width: 100%; + height: 100%; +} + +/* 产品详情按钮基础样式 */ +.product-detail-btn { + position: absolute; + bottom:6vh; + padding: 1vw 5vw; + background-color:#00ECEC; + border-radius: 50px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + color: #fff !important; + + text-decoration: none; + cursor: pointer; +} + +/* 左侧按钮位置 */ +.product-detail-btn.left { + + left: 22vw; + +} + +/* 右侧按钮位置 */ +.product-detail-btn.right { + right:22vw; +} + +/* 按钮悬停效果 */ +.product-detail-btn:hover { + /* background-color: #ffffff; */ + /* transform: translateY(-2px); */ + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); + transform: scale(1.1); + color: #fff ; +} + +/* 链接样式 */ +.detail-link { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; + color: #fff; + font-size: 1vw; + font-weight: 500; +} + +/* 箭头图标样式 */ +.arrow-icon { + width: 20px; + height: 20px; + transition: transform 0.3s ease; +} + +/* 链接悬停时箭头动画 */ +.detail-link:hover { + + color: #fff ; + +} + +/* 确保轮播项内的图片样式 */ +.carousel-item img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* -------------------- */ + +.topBannerLeft{ + width: 43%; + height: 80%; + /* background: #00316B; */ + color: #fff; + position: absolute; + top: 16vh; + left: 13vw; +} + +.topBannerLeft p:nth-child(1){ + font-size: 3vw; + font-weight: 600; + letter-spacing: 0.3vw; +} + +.topBannerLeft p:nth-child(2){ + font-size: 3vw; + font-weight: 600; + letter-spacing: 0.3vw; +} + +.topBannerLeft p:nth-child(3){ + font-size: 1.2vw; + font-weight: 600; + color: #01A0D0; + margin-top: 18px; + +} +.topBannerBth{ + width: 100%; + padding-left: 5vw; + margin-top: 30vh; +} + +.topBannerBth a{ + display: block; + width: 15vw; + height: 4vw; + font-size: 1.4vw; + font-weight: 600; + color: #fff; + text-decoration: none; + background: #00ECEC; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50px; + transition: all 0.3s ease; + +} +.topBannerBth a:hover{ + color: #fff; + /* background: #00A0D0; + */ + transform: scale(1.1); + +} +.top{ + width: 20vw; + position: absolute; + top: 0vh; + left: 20vw; +} + +.btLeft{ + width: 20vw; + position: absolute; + bottom: 8vh; + left: -5.5vw; +} +.tpRight{ + width: 17vw; + position: absolute; + top: 16vh; + right: -6vw; +} +.btRight{ + width:70vw; + position: absolute; + bottom: -1.3vh; + right: 0vw; +} +/* ----------------------------- */ + +.banner{ + width: 100%; + height: 520vh; + background-image: url(../imgs/svg/背景纹（大）.svg); + background-repeat: no-repeat; + background-size:160%; + background-position: 54vw -42vw; + background-color: #00316B; +} + + + +.bannerBottom2{ + width: 100%; + height: 190vh; + background-color:rgba(3, 0, 69, 0.8); + padding-top: 8vh; + padding-bottom: 8vh; + /* background: palegoldenrod; */ + + } + + .bannerBottom2 h1{ + font-size: 3vw; + font-weight: 600; + color: #fff; + text-align: center; + text-decoration: underline; + text-underline-offset: 0.8vw; + + } + .bannerBottomList{ + width: 72vw; + height:150vh; + /* background: palegoldenrod; */ + margin: 0 auto; + margin-top: 8vh; + display: flex; + flex-direction: column; + align-items: center; + } + .bannerBottomList li{ + width: 70%; + height:60vh; + margin-top: 10vh; + display: flex; + justify-content: space-around; + } + .bannerBottomList li p{ + width: 40%; + height: 100%; + color: #fff; + display: flex; + flex-direction: column; + justify-content: end; + align-items: start; + padding-bottom: 3vh; + font-size: 1.2vw; + padding-left: 4vw; + } + .bannerBottomListOne{ + background-image: url(../imgs/us/ic.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: auto; + height: 100%; + /* background: palegoldenrod; */ + } + .bannerBottomListTwo{ + background-image: url(../imgs/us/lowpower.png); + background-repeat: no-repeat; + /* background-size: 100% 100%; */ + background-size: contain; /* 改为 contain 保持图片比例 */ + background-position: center; /* 居中显示 */ + width: 100%; + height: 100%; + } + .bannerBottomListThree{ + background-image: url(../imgs/us/manufacturer.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 100%; + } + + .bannerBottomListFour{ + background-image: url(../imgs/us/Tapeout.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 100%; + } + +/* .bannerLeft{ + width: 100%; + height: 30%; + background-color: rgba(3, 0, 69, 0.5); +} */ + .bannertop{ + width: 100%; + height:105vh; + background-image: url(../imgs/home/mainBusiness.svg); + background-repeat: no-repeat; + background-size:40vw; + background-position:0vw 50%; + + display: flex; + align-items: center; + justify-content: end; + padding-right: 22vw; + padding-top: 18vh; + + + } + .textBox{ + width: 29vw; + height: 50%; + color: #fff; + /* background: peru; */ + } + .textBox h1{ + font-size: 2vw; + font-weight: 600; + letter-spacing: 0.3vw; + } + .textBox p{ + font-size: 1.2vw; + line-height: 6vh; + margin-top: 5vh; + + } + + /* ------------------------- */ + .bannerMid{ + width: 100%; + height: 105vh; + background-color: rgba(3, 0, 69, 0.8); + position: relative; + display: flex; + align-items: center; + justify-content: center; + } +.bannerMidImg{ + width: auto; + height: 118vh; + + position: absolute; + top: -5vh; + right: 5vw; + +} +.bannerletf{ + width: 35%; + height: 50%; + background: palegreen; + z-index: 10; + background-color: #00316B; + margin-right: 5vw; + border-radius: 20px; + position: relative; +} + +.bannerletf img{ + width: 30vw; + height: auto; + position: absolute; + top: -8vh; + left: 2.5vw; + +} +.bannerletfText{ + width: 100%; + height: 35%; + + position: absolute; + bottom:2vh; + left: 0; + color: #fff; + text-align: center; + +} +.bannerletfText p{ + font-size: 1.2vw; + font-weight: 600; + +} +.bannerletfText a{ + width: 17vw; + height: 3vw; + display: block; + font-size: 1.2vw; + + color: #00EDEF; + border: 1px solid #00EDEF; + border-radius: 10px; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + margin-top: 18px; +} +.bannerletfText a:hover{ + color: #00A0D0; + /* background: #00A0D0; */ + +} + +.bannerRight{ + width: 35%; + height: 50%; + z-index: 10; + background-color: #00316B; + margin-left: 5vw; + border-radius: 20px; + position: relative; +} + +.bannerRight img{ + width: 30vw; + height: auto; + position: absolute; + top: -8vh; + left: 2.5vw; + +} + +/* ----------------- */ +.bannerBottom{ + width: 100%; + height: 108vh; + position: relative; + background-image: url(../imgs/png/关于我们.png); + background-repeat: no-repeat; + background-size:40vw; + background-position:0vw 50%; + display: flex; + justify-content: right; + padding-right: 10vw; + +} + +.bannerBottomText{ + width: 40%; + height: 100%; + /* background-color: palegoldenrod; */ + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + color: #fff; +} + +.bannerBottomText .top2{ + width: 100%; + height: 40%; + /* background-color: palegoldenrod; */ + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + padding-top: 8vh; +} +.bannerBottomText h1{ + font-size: 2vw; + font-weight: 600; + + +} +.top2 p{ + width: 80%; + font-size: 1.3vw; + line-height: 5vh; + margin-top: 4vh; + +} + + +.bannerBottomText .bottom{ + width: 100%; + height: 50%; + /* background-color: peachpuff; */ + display: flex; + align-items: start; + justify-content: left; +} +.bottomRight{ + margin-left: 10vw; +} + +.perCent{ + font-size: 2.5vw; + font-weight: 600; + position: relative; + padding-bottom: 4vh; +} +.perCent::before{ + content: ''; + width: 70%; + height: 1.5vh; + background-color: #00EBEC; + position: absolute; + bottom: 0; + left: 10%; + border-radius: 20px; +} +.characters{ + font-size: 1.5vw; + font-weight: 600; + margin-top: 2vh; +} +/* +.bannerBottomText p{ + font-size: 1.2vw; + line-height: 6vh; + margin-top: 5vh; +} */ +.perCent { + + opacity: 0; + transform: translateY(20px); + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.perCent.visible { + opacity: 1; + transform: translateY(0); +} + +/* --------------- */ +.newBottom{ + width: 100%; + height: 40%; + /* background-color: palegoldenrod; */ +} +.teamImg{ + width: 12vw; + height: 12vw; +} +.teamBox{ + width: 100%; + height: 100%; + display: flex; + margin-top: 4vh; + /* align-items: center; */ +} +.teamBox div{ + width: 60%; + height: 100%; + margin-left: 3vw; + /* background-color: palegoldenrod; */ +} +.teamBox div p{ + font-size: 2.8vw; + font-weight: 600; + margin-top: 3vh; +} +.teamBox div p:nth-child(2){ + font-size: 1.5vw; + font-weight: 600; + +} + + + + + + + diff --git a/css/mainBusiness.css b/css/mainBusiness.css new file mode 100644 index 0000000..810e6f1 --- /dev/null +++ b/css/mainBusiness.css @@ -0,0 +1,290 @@ +.topBanner{ + width: 100%; + height: 68vh; + background-color: #030045; + display: flex; + justify-content: center; + align-items: start; + /* background: palegoldenrod; */ + overflow: hidden; + background-image: url(../imgs/main/mainbusiness.png); + background-repeat: no-repeat; + background-size:55vw auto; + background-position:40vw -1vw; + position: relative; +} + +.topBannerLeft{ + width: 24%; + height: 80%; + /* background: #00316B; */ + color: #fff; + position: absolute; + top: 10vh; + left: 18vw; +} + +.topBannerLeft p:nth-child(1){ + font-size: 2.4vw; + font-weight: 600; + letter-spacing: 0.5vw; + text-align: justify; +} + +.topBannerLeft p:nth-child(2){ + font-size: 1.1vw; + color: #01A0D0; + margin-top: 10px; + line-height: 4.2vh; + text-align: justify; + +} + + +.btLeft{ + width: 20vw; + position: absolute; + bottom: 15vh; + left: -5.5vw; +} +.tpRight{ + width: 17vw; + position: absolute; + top: 10vh; + right: -6vw; +} +.btRight{ + width:70vw; + position: absolute; + bottom: -1.3vh; + right: 0vw; +} + + + +.top3{ + width: 20vw; + position: absolute; + top: 0vh; + left: 20vw; +} +/* ------------------ */ + +.banner{ + width: 100%; + height: 255vh; + background-image: url(../imgs/svg/背景纹（大）.svg); + background-repeat: no-repeat; + background-size:160%; + background-position: 54vw -42vw; + background-color: #00316B; +} + + .bannertop{ + width: 100%; + height:115vh; + background-image: url(../imgs/main/content.svg); + background-repeat: no-repeat; + background-size:40vw; + background-position:0vw 50%; + + display: flex; + align-items: center; + justify-content: end; + padding-right: 5vw; + /* padding-top: 18vh; */ + + } + + .bannerArrow{ + height:100%; + width: auto; + +} + .textBox{ + width: 50vw; + height: 100%; + color: #fff; + /* background: peru; */ + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + background-image: url(../imgs/main/arrow.png); + background-repeat: no-repeat; + background-size:4vw 110%; + background-position:0vw 50%; + padding-top: 10vh; + } + + /* 手风琴容器 */ +.accordion { + width: 100%; + max-width: 40vw; + margin: 0 auto; + +} + +/* 手风琴项目 */ +.accordion-item { + /* border: 1px solid #e0e0e0; */ + margin-bottom: 3vh; + border-radius: 8px; + overflow: hidden; + /* background: #fff; */ + transition: all 0.3s ease; +} + +/* 手风琴标题 */ +.accordion-header { + padding: 20px; + /* background: #f8f8f8; */ + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: background-color 0.3s ease; + color: #fff; + +} + +/* .accordion-header:hover { + background: #009FD0; +} */ + +/* 标题文字 */ +.accordion-header h3 { + margin: 0; + + color: #fff; + font-size: 1.8vw; + +} +.accordion-header h3:hover { + margin: 0; + font-size: 1.9vw; + color: #00E0E4; + /* 00E0E4 */ +} + +/* 展开/收起图标 */ +.accordion-icon { + font-size: 24px; + transition: transform 0.3s ease; +} + +/* 内容区域 */ +.accordion-content { + padding: 0; + max-height: 0; + overflow: hidden; + transition: all 0.3s ease; + font-size: 1vw; +} + +/* 激活状态 */ +.accordion-item.active .accordion-content { + padding: 20px; + max-height: 500px; /* 根据实际内容调整 */ + /* background-color: #009FD0; */ +} + +.accordion-item.active .accordion-icon { + transform: rotate(45deg); +} + +/* 添加激活状态的标题样式 */ +.accordion-item.active .accordion-header h3 { + color: #00E0E4; + font-size: 1.9vw; +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .accordion-header { + padding: 15px; + } + + .accordion-header h3 { + font-size: 16px; + } + + .accordion-content { + padding: 15px; + } +} + +/* 添加到现有CSS中 */ +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.accordion-item.active .accordion-content { + animation: slideDown 0.3s ease forwards; +} + + + +.bannerBottom{ + width: 100%; + height: 150vh; + background-image: url(../imgs/main/advantage.svg); + background-repeat: no-repeat; + background-size:42vw 30vw; + background-position:50% 55%; + background-color: rgba(3, 0, 69, 0.8); + padding: 10vh 0; +} + +.bannerBottomList{ + width: 58vw; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + margin: 0 auto; +} + +.bannerBottomList li{ + list-style: none; + width: 20vw; + height: 25vw; + /* background: palegoldenrod; */ + margin-top: 8vh; + border-radius: 8px; + background: #00316B; + color: #fff; + text-align: center; + padding: 20px; + padding-top: 6vh; +} +.ListImg{ + width: 6vw; +} +.list p:nth-of-type(1){ + font-size: 1.2vw; + font-weight: 600; + margin-top: 2vh; +} +.list p:nth-of-type(2){ + width: 80%; + font-size: 1vw; + + color: #009ECF; + text-align: left; + margin: 0 auto; + margin-top: 2vh; + text-align: justify; +} + + + +/* ----------------- */ \ No newline at end of file diff --git a/css/ourProducts.css b/css/ourProducts.css new file mode 100644 index 0000000..d1b8d54 --- /dev/null +++ b/css/ourProducts.css @@ -0,0 +1,448 @@ +.topBanner{ + width: 100%; + height: 100vh; + background-color: #030045; + display: flex; + justify-content: center; + align-items: start; + /* background: palegoldenrod; */ + overflow: hidden; + background-image: url(../imgs/png/我们的产品图.png); + background-repeat: no-repeat; + background-size:65vw auto; + background-position:35vw 0vw; + position: relative; +} + +.topBannerLeft{ + width: 28%; + height: 80%; + /* background: #00316B; */ + color: #fff; + position: absolute; + top: 20vh; + left: 13vw; +} + +.topBannerLeft p:nth-child(1){ + font-size: 3.5vw; + font-weight: 600; + letter-spacing: 0.3vw; + text-align: left; + letter-spacing: 0.5vw; +} + +.topBannerLeft p:nth-child(2){ + font-size:3.5vw; + font-weight: 600; + color: #fff; + margin-top: 18px; + text-align: right; + letter-spacing: 0.5vw; + + +} +.topBannerBth{ + width: 100%; + padding-left: 2vw; + margin-top: 13vh; + +} + +.topBannerBth a{ + display: block; + width: 15vw; + height: 4vw; + font-size: 1.4vw; + font-weight: 600; + color: #fff; + text-decoration: none; + background: #00ECEC; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50px; + transition: all 0.3s ease; + +} +.topBannerBth span{ + font-size: 1.2vw; + margin-right: 1vw; +} +.topBannerBth img{ + width: 1.5vw; + height: auto; +} +.topBannerBth a:hover{ + color: #fff; + transform: scale(1.1); /* 放大到原尺寸的1.1倍 */ + transition: all 0.3s ease; /* 添加过渡动画 */ + +} + +.btLeft{ + width: 20vw; + position: absolute; + bottom: 8vh; + left: -5.5vw; +} +.tpRight{ + width: 17vw; + position: absolute; + top: 16vh; + right: -6vw; +} +.btRight{ + width:70vw; + position: absolute; + bottom: -1.3vh; + right: 0vw; +} + + + +/* ----------------------------- */ + +.banner{ + width: 100%; + min-height: 110vh; + background-image: url(../imgs/svg/背景纹（大）.svg); + background-repeat: no-repeat; + background-size:160%; + background-position: 54vw -42vw; + background-color: #00316B; +} +/* .bannerLeft{ + width: 100%; + height: 30%; + background-color: rgba(3, 0, 69, 0.5); +} */ + .bannertop{ + width: 100%; + height:105vh; + display: flex; + align-items: center; + justify-content: left; + + + + } + + .imgBox{ + width: 50%; + height: 100%; + /* background: palegreen; */ + position: relative; + } + .imgBox .imgBox1{ + width: 20vw; + height: auto; + /* background: palegoldenrod; */ + position: absolute; + top: 5vw; + left:10vw; + } + .imgBox .imgBox2{ + width: 20vw; + height: auto; + position: absolute; + top: 19vw; + left: 20vw; + /* background: palegoldenrod; */ + } + .imgBox img{ + width: 26vw; + height: auto; + } + .textBox{ + width: 15vw; + height: 50%; + color: #fff; + margin-left: 5vw; + /* background: peru; */ + } + .textBox h1{ + font-size: 2vw; + font-weight: 600; + letter-spacing: 0.3vw; + } + .textBox p{ + font-size: 1.2vw; + line-height: 6vh; + margin-top: 5vh; + + } + + /* ------------------------- */ + .bannerBottom{ + width: 100%; + height: 115vh; + position: relative; + background-image: url(../imgs/png/电子商城.png); + background-repeat: no-repeat; + background-size:40vw; + background-position:0vw 50%; + display: flex; + justify-content: right; + padding-right: 10vw; + background-color: rgba(3, 0, 69, 0.8); + +} + +.bannerBottomText{ + width: 40%; + height: 100%; + /* background-color: palegoldenrod; */ + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + color: #fff; + /* background: peru; */ +} + +.bannerBottomText .top{ + width: 100%; + height: 40%; + /* background-color: palegoldenrod; */ + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + /* padding-top: 3vh; */ +} + +.top p{ + width: 70%; + font-size: 1.5vw; + line-height:7vh; + margin-top: 4vh; + +} + +.top3{ + width: 20vw; + position: absolute; + top: 0vh; + left: 20vw; +} + +/* --------------------------- */ + +/* 产品展示区样式 */ +.case { + display: flex; + width: 90%; + min-height: 100vh; + padding: 40px; + gap: 40px; + margin: 0 auto; + padding-top: 10vh; + align-items: flex-start; /* 确保子元素从顶部开始对齐 */ +} + +/* 左侧导航样式 */ +.product-nav { + width: 20vw; + flex-shrink: 0; + border-right: 2px solid #00E0E4; + padding-right: 3vw; + /* 添加最大高度和滚动 */ + max-height: 100vh; + overflow-y: auto; + /* 添加平滑滚动 */ + scroll-behavior: smooth; + /* 固定位置 */ + position: sticky; + top: 0; + min-height: 100vh; + +} + +/* 添加滚动条样式 */ +.product-nav::-webkit-scrollbar { + width: 3px; +} + +.product-nav::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 3px; +} + +.product-nav::-webkit-scrollbar-thumb { + background: rgba(0, 224, 228, 0.5); + border-radius: 3px; + transition: all 0.3s ease; +} + +.product-nav::-webkit-scrollbar-thumb:hover { + background: rgba(0, 224, 228, 0.8); +} + + +.product-category { + margin-bottom: 30px; + /* background: palegoldenrod; */ +} + +.category-header { + display: flex; + align-items: center; + gap: 10px; + padding: 15px; + cursor: pointer; + transition: all 0.3s ease; +} + +.category-header.active { + color: #00E0E4; +} + +.dot { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #fff; +} + +.category-header.active .dot { + background-color: #00E0E4; +} + +.category-header h3 { + color: #fff; + margin: 0; + font-size: 18px; +} + +.category-content { + display: none; + padding-left: 30px; + /* background: palegoldenrod; */ + position: relative; + padding-left: 3vw; + +} +.category-content::before{ + content: ''; + width: 1px; + height: 100%; + background: #fff; + position: absolute; + left: 12%; + top: 0; +} + +.category-content.show { + display: block; +} + +/* 产品项样式 */ +.product-item { + padding: 15px; + cursor: pointer; + border-radius: 8px; + transition: all 0.3s ease; + margin-bottom: 15px; +} + +.product-item:hover, +.product-item.active { + background-color: rgba(0, 224, 228, 0.1); + color: #00E0E4 !important; + border: 1px solid #00E0E4; + box-shadow: 0 0 8px 1px rgba(0, 224, 228, 0.5), + 0 5px 8px 5px rgba(0, 0, 0, 0.5); +} + +.product-item img { + width: 100%; + border-radius: 8px; + margin-bottom: 10px; +} + +.product-item p { + color: #fff; + margin: 0; + font-size: 16px; + transition: color 0.3s ease; /* 添加颜色过渡效果 */ +} + +/* 选中状态的文字样式 */ +.product-item.active p { + color: #00E0E4; +} + + +/* 可以添加悬停效果 */ +.product-item:hover p { + color: #00E0E4; +} + +/* 右侧详情样式 */ +.product-detail { + /* flex-grow: 1; */ + /* background-color: rgba(255, 255, 255, 0.05); */ + border-radius: 12px; + padding: 30px; + margin-left: 8vw; + width: 30vw; +} + +.detail-content { + color: #fff; +} + +.detail-image { + width: 20vw; + margin-bottom: 30px; + border: 1px solid #00E0E4; + border-radius: 12px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 0 10px 1px rgba(0, 224, 228, 0.5), + 0 5px 15px 10px rgba(0, 0, 0, 0.3); +} + +.detail-image img { + width: 20vw; + border-radius: 12px; + object-fit: contain;/* 保持图片比例，确保完整显示 */ + +} + +.detail-info h2 { + color: #00E0E4; + margin-bottom: 20px; +} + +.info-list p { + margin-bottom: 15px; + line-height: 1.6; + font-size: 0.8vw; +} + + + +/* ----------------- */ + + +/* 添加平滑滚动效果 */ +html { + scroll-behavior: smooth; +} + +/* 添加产品项过渡动画 */ +.product-item { + transition: all 0.3s ease; + position: relative; +} + +/* 优化active状态的视觉效果 */ +.product-item.active { + background-color: rgba(0, 224, 228, 0.1); + transform: translateX(10px); +} + diff --git a/css/technicalSupport.css b/css/technicalSupport.css new file mode 100644 index 0000000..8c2f7da --- /dev/null +++ b/css/technicalSupport.css @@ -0,0 +1,148 @@ +.topBanner{ + width: 100%; + height: 68vh; + background-color: #030045; + display: flex; + justify-content: center; + align-items: start; + /* background: palegoldenrod; */ + overflow: hidden; + background-image: url(../imgs/svg/技术支持图.svg); + background-repeat: no-repeat; + background-size:38vw auto; + background-position:50vw 0vw; + position: relative; +} + +.topBannerLeft{ + width: 23%; + height: 80%; + /* background: #00316B; */ + color: #fff; + position: absolute; + top: 5vh; + left: 16vw; +} + +.topBannerLeft p:nth-child(1){ + font-size: 3vw; + font-weight: 600; + letter-spacing: 0.5vw; +} + +.topBannerLeft p:nth-child(2){ + font-size: 1.3vw; + color: #01A0D0; + margin-top: 18px; + line-height: 5vh; + +} + + +.btLeft{ + width: 20vw; + position: absolute; + bottom: 15vh; + left: -5.5vw; +} +.tpRight{ + width: 17vw; + position: absolute; + top: 10vh; + right: -6vw; +} +.btRight{ + width:70vw; + position: absolute; + bottom: -1.3vh; + right: 0vw; +} + +/* ------------------- */ +.banner{ + width: 100%; + height: 90vh; + background-image: url(../imgs/svg/背景纹（大）.svg); + background-repeat: no-repeat; + background-size:160%; + background-position: 54vw -42vw; + background-color: #00316B; + display: flex; + justify-content:center; + align-items: center; + color: #fff; +} + +.bannerBox{ + width: 70%; + height: 100%; + display: flex; + justify-content: space-around; + align-items: center; + margin: 0 auto; +} +.bannerLeft ,.bannerRight{ + width: 24%; + height: 50%; + display: flex; + flex-direction: column; + justify-content: start; + align-items: start; + + +} +.bannerLeft{ + margin-right: 3vw; + padding-top: 3%; +} +.LeftImg , .rightImg{ + width: 5vw; + height: 5vw; + overflow: hidden; + /* background: palegoldenrod; */ + +} +.LeftImg img{ + height: 100%; + width: 100%; +} +.rightImg img{ + height:100%; + width: 100%; + } +.arrow{ + width: 0.8vw; + margin-left: 8px; +} +.report:hover{ + color: #Ffff; + +} +.bannerRight{ + margin-left: 3vw; + padding-top: 3%; +} +.title{ + font-size: 1.3vw; + font-weight: 600; + margin-top: 3vh; + +} +.problem{ + font-size: 0.9vw; + color: rgba(255, 255, 255, 0.7); + margin-top: 1vh; +} +.report{ + font-size: 0.9vw; + color: #00E0E2; + margin-top: 2vh; +} + + +.top3{ + width: 20vw; + position: absolute; + top: 0vh; + left: 20vw; +} diff --git a/html/aboutUs.html b/html/aboutUs.html new file mode 100644 index 0000000..6a85aa6 --- /dev/null +++ b/html/aboutUs.html @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + 深圳汉晶电子信息有限公司 + + +
+
+ + +
+ +
+ +
+
+
+

公司介绍

+

我们是一家专注于集成电路设计的高科技公司,致力于为客户提供从芯片设计到量产的全流程服务。我们的团队拥有丰富的行业经验，采用最先进的工具和技术，为客户提供高品质的芯片解决方案。我们始终坚持以客户为中心，以技术为驱动，致力于推动集成电路行业的创新与发展。

+
+ + +
+ 点纹 + 点纹 + 点纹 + 点纹 + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/html/approaching.html b/html/approaching.html new file mode 100644 index 0000000..8a2a92b --- /dev/null +++ b/html/approaching.html @@ -0,0 +1,120 @@ + + + + + + + + + + + 深圳汉晶电子信息有限公司 + + +
+
+ + +
+ +
+ +
+
+
+

未来发展与技术趋势

+ 未来发展与技术趋势 +
+ + +
+ 点纹 + 点纹 + 点纹 + 点纹 + +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/html/mainBusiness.html b/html/mainBusiness.html new file mode 100644 index 0000000..9ff81ea --- /dev/null +++ b/html/mainBusiness.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + 深圳汉晶电子信息有限公司 + + +
+
+ + +
+ +
+ +
+
+
+

芯片设计技术服务

+

我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、 系统设计、 逻辑设计、 FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术,确保芯片的性能、功耗、稳定性都能满足客户需求。

+
+ + +
+ 点纹 + 点纹 + 点纹 + 点纹 + +
+ + + + + + + + + + \ No newline at end of file diff --git a/html/ourProducts.html b/html/ourProducts.html new file mode 100644 index 0000000..3b4dfb9 --- /dev/null +++ b/html/ourProducts.html @@ -0,0 +1,433 @@ + + + + + + + + + + + + 深圳汉晶电子信息有限公司 + + +
+
+ + +
+ +
+ +
+
+
+

成功的工艺

+

与产品案例

+
+
+ + 联系我们 + 邮箱 + +
+ +
+ 点纹 + 点纹 + 点纹 + 点纹 + +
+ + + + + + + + \ No newline at end of file diff --git a/html/technicalSupport.html b/html/technicalSupport.html new file mode 100644 index 0000000..1694eda --- /dev/null +++ b/html/technicalSupport.html @@ -0,0 +1,114 @@ + + + + + + + + + + + 深圳汉晶电子信息有限公司 + + +
+
+ + +
+ +
+
+
+
+

技术支持

+

我们为您的项目提供技术指导。我们的 + 技术销售代表和产品专家可以从技术角 + 度解答您关于产品的问题

+
+ + +
+ 点纹 + 点纹 + 点纹 + 点纹 + +
+ + + + + + + + \ No newline at end of file diff --git a/imgs/approaching/6g.png b/imgs/approaching/6g.png new file mode 100644 index 0000000..b5d4cf5 Binary files /dev/null and b/imgs/approaching/6g.png differ diff --git a/imgs/approaching/ai.png b/imgs/approaching/ai.png new file mode 100644 index 0000000..9f25477 Binary files /dev/null and b/imgs/approaching/ai.png differ diff --git a/imgs/approaching/light.png b/imgs/approaching/light.png new file mode 100644 index 0000000..4b78bf4 Binary files /dev/null and b/imgs/approaching/light.png differ diff --git a/imgs/approaching/prospect.png b/imgs/approaching/prospect.png new file mode 100644 index 0000000..8cccbe1 Binary files /dev/null and b/imgs/approaching/prospect.png differ diff --git a/imgs/approaching/quantum.png b/imgs/approaching/quantum.png new file mode 100644 index 0000000..9437cf8 Binary files /dev/null and b/imgs/approaching/quantum.png differ diff --git a/imgs/home/KS6PRO.jpg b/imgs/home/KS6PRO.jpg new file mode 100644 index 0000000..2ddeb04 Binary files /dev/null and b/imgs/home/KS6PRO.jpg differ diff --git a/imgs/home/KS6PRO.png b/imgs/home/KS6PRO.png new file mode 100644 index 0000000..b4b5b2f Binary files /dev/null and b/imgs/home/KS6PRO.png differ diff --git a/imgs/home/YX1000.jpg b/imgs/home/YX1000.jpg new file mode 100644 index 0000000..fb59ee5 Binary files /dev/null and b/imgs/home/YX1000.jpg differ diff --git a/imgs/home/mainBusiness.svg b/imgs/home/mainBusiness.svg new file mode 100644 index 0000000..ea6e37c --- /dev/null +++ b/imgs/home/mainBusiness.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/mainFunctionalResources.svg b/imgs/home/mainFunctionalResources.svg new file mode 100644 index 0000000..953b707 --- /dev/null +++ b/imgs/home/mainFunctionalResources.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/team.png b/imgs/home/team.png new file mode 100644 index 0000000..590a04e Binary files /dev/null and b/imgs/home/team.png differ diff --git a/imgs/main/advantage.svg b/imgs/main/advantage.svg new file mode 100644 index 0000000..0bcbe3b --- /dev/null +++ b/imgs/main/advantage.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/main/arrow.png b/imgs/main/arrow.png new file mode 100644 index 0000000..d1f789f Binary files /dev/null and b/imgs/main/arrow.png differ diff --git a/imgs/main/content.svg b/imgs/main/content.svg new file mode 100644 index 0000000..8bc8f8b --- /dev/null +++ b/imgs/main/content.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/main/experience.png b/imgs/main/experience.png new file mode 100644 index 0000000..dce0296 Binary files /dev/null and b/imgs/main/experience.png differ diff --git a/imgs/main/mainbusiness.png b/imgs/main/mainbusiness.png new file mode 100644 index 0000000..9035704 Binary files /dev/null and b/imgs/main/mainbusiness.png differ diff --git a/imgs/main/process.png b/imgs/main/process.png new file mode 100644 index 0000000..e020c66 Binary files /dev/null and b/imgs/main/process.png differ diff --git a/imgs/main/tool.png b/imgs/main/tool.png new file mode 100644 index 0000000..a1f876b Binary files /dev/null and b/imgs/main/tool.png differ diff --git a/imgs/main/workmanship.png b/imgs/main/workmanship.png new file mode 100644 index 0000000..ec145f6 Binary files /dev/null and b/imgs/main/workmanship.png differ diff --git a/imgs/png/WEBdesign.png b/imgs/png/WEBdesign.png new file mode 100644 index 0000000..45144b4 Binary files /dev/null and b/imgs/png/WEBdesign.png differ diff --git a/imgs/png/chip.png b/imgs/png/chip.png new file mode 100644 index 0000000..daf4587 Binary files /dev/null and b/imgs/png/chip.png differ diff --git a/imgs/png/ourProducts.png b/imgs/png/ourProducts.png new file mode 100644 index 0000000..c044ef1 Binary files /dev/null and b/imgs/png/ourProducts.png differ diff --git a/imgs/png/关于我们.png b/imgs/png/关于我们.png new file mode 100644 index 0000000..c897383 Binary files /dev/null and b/imgs/png/关于我们.png differ diff --git a/imgs/png/我们的产品图.png b/imgs/png/我们的产品图.png new file mode 100644 index 0000000..000f614 Binary files /dev/null and b/imgs/png/我们的产品图.png differ diff --git a/imgs/png/电子商城.png b/imgs/png/电子商城.png new file mode 100644 index 0000000..1edfe9d Binary files /dev/null and b/imgs/png/电子商城.png differ diff --git a/imgs/png/芯片1.png b/imgs/png/芯片1.png new file mode 100644 index 0000000..6c2a7f9 Binary files /dev/null and b/imgs/png/芯片1.png differ diff --git a/imgs/png/芯片2.png b/imgs/png/芯片2.png new file mode 100644 index 0000000..f4c6f89 Binary files /dev/null and b/imgs/png/芯片2.png differ diff --git a/imgs/png/首页图.png b/imgs/png/首页图.png new file mode 100644 index 0000000..a09fecb Binary files /dev/null and b/imgs/png/首页图.png differ diff --git a/imgs/products/AGRO1.png b/imgs/products/AGRO1.png new file mode 100644 index 0000000..cb1c837 Binary files /dev/null and b/imgs/products/AGRO1.png differ diff --git a/imgs/products/BIOX1.png b/imgs/products/BIOX1.png new file mode 100644 index 0000000..3c88b9b Binary files /dev/null and b/imgs/products/BIOX1.png differ diff --git a/imgs/products/FX100.png b/imgs/products/FX100.png new file mode 100644 index 0000000..709fa4c Binary files /dev/null and b/imgs/products/FX100.png differ diff --git a/imgs/products/GSEC8.png b/imgs/products/GSEC8.png new file mode 100644 index 0000000..19ac224 Binary files /dev/null and b/imgs/products/GSEC8.png differ diff --git a/imgs/products/HEALX2.png b/imgs/products/HEALX2.png new file mode 100644 index 0000000..457fc61 Binary files /dev/null and b/imgs/products/HEALX2.png differ diff --git a/imgs/products/INDT5.png b/imgs/products/INDT5.png new file mode 100644 index 0000000..e87aaab Binary files /dev/null and b/imgs/products/INDT5.png differ diff --git a/imgs/products/K6PRO.png b/imgs/products/K6PRO.png new file mode 100644 index 0000000..2e4c1ac Binary files /dev/null and b/imgs/products/K6PRO.png differ diff --git a/imgs/products/KS1PRO.png b/imgs/products/KS1PRO.png new file mode 100644 index 0000000..c30e2ff Binary files /dev/null and b/imgs/products/KS1PRO.png differ diff --git a/imgs/products/KS2PRO.png b/imgs/products/KS2PRO.png new file mode 100644 index 0000000..f0a67df Binary files /dev/null and b/imgs/products/KS2PRO.png differ diff --git a/imgs/products/NAVT1.png b/imgs/products/NAVT1.png new file mode 100644 index 0000000..b010986 Binary files /dev/null and b/imgs/products/NAVT1.png differ diff --git a/imgs/products/SND32.png b/imgs/products/SND32.png new file mode 100644 index 0000000..263626c Binary files /dev/null and b/imgs/products/SND32.png differ diff --git a/imgs/products/VIDA-M.png b/imgs/products/VIDA-M.png new file mode 100644 index 0000000..62e0ee4 Binary files /dev/null and b/imgs/products/VIDA-M.png differ diff --git a/imgs/products/VV10.png b/imgs/products/VV10.png new file mode 100644 index 0000000..6865e5d Binary files /dev/null and b/imgs/products/VV10.png differ diff --git a/imgs/products/WIFI6-UC.png b/imgs/products/WIFI6-UC.png new file mode 100644 index 0000000..39fc3c6 Binary files /dev/null and b/imgs/products/WIFI6-UC.png differ diff --git a/imgs/products/XYV2.png b/imgs/products/XYV2.png new file mode 100644 index 0000000..89bd0eb Binary files /dev/null and b/imgs/products/XYV2.png differ diff --git a/imgs/products/YX1000.png b/imgs/products/YX1000.png new file mode 100644 index 0000000..e9fa290 Binary files /dev/null and b/imgs/products/YX1000.png differ diff --git a/imgs/svg/logo.svg b/imgs/svg/logo.svg new file mode 100644 index 0000000..018dc58 --- /dev/null +++ b/imgs/svg/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/中英文地球.svg b/imgs/svg/中英文地球.svg new file mode 100644 index 0000000..171c7bf --- /dev/null +++ b/imgs/svg/中英文地球.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/产品安全漏洞.svg b/imgs/svg/产品安全漏洞.svg new file mode 100644 index 0000000..0f89a52 --- /dev/null +++ b/imgs/svg/产品安全漏洞.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/企业文化理念(BJF).svg b/imgs/svg/企业文化理念(BJF).svg new file mode 100644 index 0000000..6227f6d --- /dev/null +++ b/imgs/svg/企业文化理念(BJF).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/关于我们图.svg b/imgs/svg/关于我们图.svg new file mode 100644 index 0000000..c258c6e --- /dev/null +++ b/imgs/svg/关于我们图.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/我们的使命.svg b/imgs/svg/我们的使命.svg new file mode 100644 index 0000000..9743b99 --- /dev/null +++ b/imgs/svg/我们的使命.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/我们的愿景.svg b/imgs/svg/我们的愿景.svg new file mode 100644 index 0000000..be33588 --- /dev/null +++ b/imgs/svg/我们的愿景.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/我们的核心价值观.svg b/imgs/svg/我们的核心价值观.svg new file mode 100644 index 0000000..2569a90 --- /dev/null +++ b/imgs/svg/我们的核心价值观.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/技术支持图.svg b/imgs/svg/技术支持图.svg new file mode 100644 index 0000000..f886539 --- /dev/null +++ b/imgs/svg/技术支持图.svg @@ -0,0 +1 @@ +HELP技术支持 \ No newline at end of file diff --git a/imgs/svg/技术服务帮助.svg b/imgs/svg/技术服务帮助.svg new file mode 100644 index 0000000..2e41c5b --- /dev/null +++ b/imgs/svg/技术服务帮助.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/点纹.svg b/imgs/svg/点纹.svg new file mode 100644 index 0000000..fe08e62 --- /dev/null +++ b/imgs/svg/点纹.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/箭头.svg b/imgs/svg/箭头.svg new file mode 100644 index 0000000..a54c1d9 --- /dev/null +++ b/imgs/svg/箭头.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/线纹.svg b/imgs/svg/线纹.svg new file mode 100644 index 0000000..0acde91 --- /dev/null +++ b/imgs/svg/线纹.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/背景纹（大）.svg b/imgs/svg/背景纹（大）.svg new file mode 100644 index 0000000..80c39c5 --- /dev/null +++ b/imgs/svg/背景纹（大）.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/邮箱.svg b/imgs/svg/邮箱.svg new file mode 100644 index 0000000..577465e --- /dev/null +++ b/imgs/svg/邮箱.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/邮箱（白）.svg b/imgs/svg/邮箱（白）.svg new file mode 100644 index 0000000..fe5fd17 --- /dev/null +++ b/imgs/svg/邮箱（白）.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/页尾背景右.svg b/imgs/svg/页尾背景右.svg new file mode 100644 index 0000000..fdac421 --- /dev/null +++ b/imgs/svg/页尾背景右.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/页尾背景左.svg b/imgs/svg/页尾背景左.svg new file mode 100644 index 0000000..581cbf2 --- /dev/null +++ b/imgs/svg/页尾背景左.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/页面底纹.svg b/imgs/svg/页面底纹.svg new file mode 100644 index 0000000..b0f7ed8 --- /dev/null +++ b/imgs/svg/页面底纹.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/svg/页面选择图标.svg b/imgs/svg/页面选择图标.svg new file mode 100644 index 0000000..557a1e5 --- /dev/null +++ b/imgs/svg/页面选择图标.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/technology/customization.svg b/imgs/technology/customization.svg new file mode 100644 index 0000000..43a68f9 --- /dev/null +++ b/imgs/technology/customization.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/technology/technicalAdvice.png b/imgs/technology/technicalAdvice.png new file mode 100644 index 0000000..9af7600 Binary files /dev/null and b/imgs/technology/technicalAdvice.png differ diff --git a/imgs/technology/upgrade.png b/imgs/technology/upgrade.png new file mode 100644 index 0000000..d1d4dac Binary files /dev/null and b/imgs/technology/upgrade.png differ diff --git a/imgs/us/Tapeout.png b/imgs/us/Tapeout.png new file mode 100644 index 0000000..ab58804 Binary files /dev/null and b/imgs/us/Tapeout.png differ diff --git a/imgs/us/ic.png b/imgs/us/ic.png new file mode 100644 index 0000000..e80bd9e Binary files /dev/null and b/imgs/us/ic.png differ diff --git a/imgs/us/lowpower.png b/imgs/us/lowpower.png new file mode 100644 index 0000000..3230d5e Binary files /dev/null and b/imgs/us/lowpower.png differ diff --git a/imgs/us/manufacturer.png b/imgs/us/manufacturer.png new file mode 100644 index 0000000..0e1069f Binary files /dev/null and b/imgs/us/manufacturer.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..f1806db --- /dev/null +++ b/index.html @@ -0,0 +1,208 @@ + + + + + + + + + + + + + 深圳汉晶电子信息有限公司 + + +
+
+ + +
+ +
+ + + + + +
+ +
+
+
+ +
+ YX1000 +
+ + 产品详情 + +
+
+ +
+ KS6PRO +
+ + 产品详情 + +
+
+
+
+ + +
+
+
+ + 点纹 + 点纹 + 点纹 + 点纹 +
+ + + + + + + + + + + \ No newline at end of file diff --git a/js/aboutUs.js b/js/aboutUs.js new file mode 100644 index 0000000..50f68c7 --- /dev/null +++ b/js/aboutUs.js @@ -0,0 +1,114 @@ +function initAMap() { + try { + // 更新为完整地址 + const address = '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010'; + const companyName = '深圳汉晶电子信息有限公司'; + + // 创建地图实例 + let map = null; + + // 地址解析 + AMap.plugin('AMap.Geocoder', function() { + const geocoder = new AMap.Geocoder({ + city: "深圳", + radius: 1000 + }); + + geocoder.getLocation(address, function(status, result) { + if (status === 'complete' && result.info === 'OK') { + const lnglat = result.geocodes[0].location; + + map = new AMap.Map('mapContainer', { + zoom: 16, + center: [lnglat.lng, lnglat.lat], + viewMode: '3D', + resizeEnable: true, + pitch: 40, + mapStyle: 'amap://styles/normal' + }); + + // 更新标记信息 + const marker = new AMap.Marker({ + position: [lnglat.lng, lnglat.lat], + title: companyName, + animation: 'AMAP_ANIMATION_DROP', + offset: new AMap.Pixel(-13, -30) + }); + + map.add(marker); + + // 更新信息窗体内容 + const content = ` +
+

${companyName}

+

+ 地址：${address} +

+

+ 电话：13420976989 +

+

+ Email：fu.bin@hjsilicon.com +

+
+ `; + + // 创建信息窗体 + const infoWindow = new AMap.InfoWindow({ + content: content, + offset: new AMap.Pixel(0, -30), + closeWhenClickMap: true + }); + + // 地图加载完成后打开信息窗体 + map.on('complete', function() { + infoWindow.open(map, [lnglat.lng, lnglat.lat]); + }); + + // 点击标记时打开信息窗体 + marker.on('click', function() { + infoWindow.open(map, marker.getPosition()); + }); + + // 添加控件 + map.addControl(new AMap.ToolBar({ + position: 'RB' + })); + + map.addControl(new AMap.Scale()); + + // 确保标记点居中显示 + map.setFitView([marker]); + + // 响应式处理 + window.addEventListener('resize', function() { + map.resize(); + map.setCenter([lnglat.lng, lnglat.lat]); + }); + } else { + console.error('地址解析失败:', result); + document.getElementById('mapContainer').innerHTML = + '
地址定位失败，请刷新重试
'; + } + }); + }); + } catch (error) { + console.error('地图初始化失败:', error); + document.getElementById('mapContainer').innerHTML = + '
地图加载失败，请刷新重试
'; + } +} + +// DOM加载完成时初始化 +document.addEventListener('DOMContentLoaded', function() { + if (typeof AMap !== 'undefined') { + initAMap(); + } +}); + +// 回调函数 +window.initMap = function() { + if (typeof AMap !== 'undefined') { + initAMap(); + } +}; \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..394733b --- /dev/null +++ b/js/index.js @@ -0,0 +1,211 @@ +document.addEventListener('DOMContentLoaded', () => { + const elements = document.querySelectorAll('.perCent2'); + + const animatePercentage = (element) => { + // 添加可见类，触发CSS过渡效果 + element.classList.add('visible'); + + let current = 1; + const target = parseInt(element.getAttribute('data-target')); + + // 重置为初始值 + element.textContent = '1%'; + + const timer = setInterval(() => { + current += 1; + element.textContent = `${current}%`; + + if (current >= target) { + clearInterval(timer); + } + }, 30); + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animatePercentage(entry.target); + } else { + // 当元素离开视口时 + entry.target.classList.remove('visible'); + entry.target.textContent = '1%'; // 重置为初始值 + } + }); + }, { + threshold: 0.5, + rootMargin: '0px' + }); + + elements.forEach(element => { + // 初始状态设置 + element.classList.remove('visible'); + element.textContent = '1%'; + observer.observe(element); + }); + +// ------------------------------ +// 获取所需的DOM元素 +const container = document.querySelector('.carousel-container'); +const list = document.querySelector('.carousel-list'); +const items = document.querySelectorAll('.carousel-item'); +const prevBtn = document.querySelector('.carousel-arrow-left'); +const nextBtn = document.querySelector('.carousel-arrow-right'); +const indicators = document.querySelectorAll('.indicator'); + +// 如果元素不存在，直接返回 +if (!container || !list || !items.length) { + console.error('轮播图元素不存在，初始化失败'); + return; +} + +// 克隆第一个和最后一个项目 +const firstClone = items[0].cloneNode(true); +const lastClone = items[items.length - 1].cloneNode(true); + +// 将克隆的元素添加到列表中 +list.appendChild(firstClone); +list.insertBefore(lastClone, list.firstChild); + +// 设置初始位置，因为添加了一个项目在前面，所以从1开始 +let currentIndex = 1; +let interval = null; +let isTransitioning = false; + +// 初始化位置 +updatePosition(false); + +// 更新位置的函数 +function updatePosition(withTransition = true) { + // 如果需要过渡动画 + if (withTransition) { + list.style.transition = 'transform 0.5s ease'; + } else { + list.style.transition = 'none'; + } + + // 计算位置并应用变换 + const position = -currentIndex * 100; + list.style.transform = `translateX(${position}%)`; + + // 更新指示器状态，注意要减去1因为我们添加了克隆项目 + updateIndicators(); +} + +// 更新指示器状态 +function updateIndicators() { + // 考虑循环，将currentIndex转换回真实索引 + const realIndex = currentIndex - 1; + // 使用模运算确保索引在有效范围内 + const activeIndex = (realIndex + items.length) % items.length; + + indicators.forEach((indicator, i) => { + indicator.classList.toggle('active', i === activeIndex); + }); +} + +// 自动播放函数 +function startAutoPlay() { + if (interval) clearInterval(interval); + interval = setInterval(nextSlide, 3000); +} + +// 暂停自动播放 +function stopAutoPlay() { + clearInterval(interval); +} + +// 下一张函数 +function nextSlide() { + if (isTransitioning) return; + isTransitioning = true; + + currentIndex++; + updatePosition(); +} + +// 上一张函数 +function prevSlide() { + if (isTransitioning) return; + isTransitioning = true; + + currentIndex--; + updatePosition(); +} + +// 处理过渡结束事件 +list.addEventListener('transitionend', () => { + isTransitioning = false; + + // 如果到达了最后一个克隆项 + if (currentIndex >= items.length + 1) { + currentIndex = 1; + updatePosition(false); + } + + // 如果到达了第一个克隆项 + if (currentIndex <= 0) { + currentIndex = items.length; + updatePosition(false); + } +}); + +// // 绑定按钮事件 +// prevBtn.addEventListener('click', () => { +// prevSlide(); +// stopAutoPlay(); +// startAutoPlay(); +// }); + +// nextBtn.addEventListener('click', () => { +// nextSlide(); +// stopAutoPlay(); +// startAutoPlay(); +// }); + +// 绑定指示器点击事件 +indicators.forEach((indicator, index) => { + indicator.addEventListener('click', () => { + currentIndex = index + 1; // +1因为我们添加了克隆项目 + updatePosition(); + stopAutoPlay(); + startAutoPlay(); + }); +}); + +// 鼠标悬停暂停 +container.addEventListener('mouseenter', stopAutoPlay); +container.addEventListener('mouseleave', startAutoPlay); + +// 添加触摸滑动支持 +let touchStartX = 0; +let touchEndX = 0; + +container.addEventListener('touchstart', (e) => { + touchStartX = e.touches[0].clientX; + stopAutoPlay(); +}); + +container.addEventListener('touchend', (e) => { + touchEndX = e.changedTouches[0].clientX; + const difference = touchStartX - touchEndX; + + if (Math.abs(difference) > 50) { + if (difference > 0) { + nextSlide(); + } else { + prevSlide(); + } + } + + startAutoPlay(); +}); + +// 开始自动播放 +startAutoPlay(); + + + +}); + + + diff --git a/js/mainBusiness.js b/js/mainBusiness.js new file mode 100644 index 0000000..5c79a6d --- /dev/null +++ b/js/mainBusiness.js @@ -0,0 +1,28 @@ +document.addEventListener('DOMContentLoaded', function() { + const accordionItems = document.querySelectorAll('.accordion-item'); + + // 为每个手风琴项添加点击事件 + accordionItems.forEach((item, index) => { + const header = item.querySelector('.accordion-header'); + + header.addEventListener('click', () => { + // 获取当前是否激活 + const isActive = item.classList.contains('active'); + + // 关闭所有项 + accordionItems.forEach(item => { + item.classList.remove('active'); + }); + + // 如果点击的不是当前激活项，则展开它 + if (!isActive) { + item.classList.add('active'); + } + }); + + // 默认展开第一项 + if (index === 0) { + item.classList.add('active'); + } + }); +}); \ No newline at end of file diff --git a/js/ourProducts.js b/js/ourProducts.js new file mode 100644 index 0000000..3534ec9 --- /dev/null +++ b/js/ourProducts.js @@ -0,0 +1,98 @@ +document.addEventListener('DOMContentLoaded', function() { + // 获取URL参数中的产品ID + const urlParams = new URLSearchParams(window.location.search); + const productId = urlParams.get('product'); + + // 显示产品的函数 + function showProduct(productId, shouldScroll = false) { // 默认不滚动 + console.log('Showing product:', productId); + + // 移除所有产品项的active类 + const productItems = document.querySelectorAll('.product-item'); + productItems.forEach(p => { + p.classList.remove('active'); + }); + + // 找到对应的产品项并添加active类 + const targetItem = document.querySelector(`[data-product="${productId}"]`); + if (targetItem) { + targetItem.classList.add('active'); + + // 确保产品所在的分类是展开的 + const category = targetItem.closest('.category-content'); + if (category) { + // 先移除所有分类的show类 + document.querySelectorAll('.category-content').forEach(c => { + c.classList.remove('show'); + }); + document.querySelectorAll('.category-header').forEach(h => { + h.classList.remove('active'); + }); + + // 展开当前分类 + category.classList.add('show'); + const categoryHeader = category.previousElementSibling; + if (categoryHeader) { + categoryHeader.classList.add('active'); + } + } + + // 隐藏所有详情内容 + document.querySelectorAll('.detail-content').forEach(content => { + if (content) { + content.style.display = 'none'; + } + }); + + // 显示目标产品详情 + const targetContent = document.getElementById(productId); + if (targetContent) { + targetContent.style.display = 'block'; + } + + // 只在指定需要滚动时才滚动 + if (shouldScroll) { + setTimeout(() => { + targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, 100); + } + } + } + + // 初始化：根据URL参数决定行为 + if (productId) { + // 如果有产品ID参数，则显示对应产品并滚动 + showProduct(productId, true); // 有参数时滚动 + } else { + // 没有参数时，显示第一个产品但不滚动 + const firstProduct = document.querySelector('.product-item'); + if (firstProduct) { + showProduct(firstProduct.dataset.product, false); // 无参数时不滚动 + } + } + + // 产品项点击处理 + const productItems = document.querySelectorAll('.product-item'); + productItems.forEach(item => { + item.addEventListener('click', function() { + const productId = this.dataset.product; + // 点击产品项时需要滚动 + showProduct(productId, true); + updateURL(productId); + }); + }); + + // 更新URL函数 + function updateURL(productId) { + const newURL = new URL(window.location.href); + newURL.searchParams.set('product', productId); + window.history.pushState({ productId }, '', newURL); + } + + // 处理浏览器后退/前进 + window.addEventListener('popstate', function(event) { + if (event.state && event.state.productId) { + showProduct(event.state.productId, true); + } + }); +}); \ No newline at end of file