From 5913f0b886384f9331f86416a1f12ffda05fe2c6 Mon Sep 17 00:00:00 2001 From: lzx <393768033@qq.com> Date: Fri, 25 Apr 2025 18:24:58 +0800 Subject: [PATCH] add project files --- css/aboutUs.css | 269 ++++++++++ css/approaching.css | 154 ++++++ css/base.css | 70 +++ css/footer.css | 127 +++++ css/header.css | 90 ++++ css/index.css | 688 ++++++++++++++++++++++++++ css/mainBusiness.css | 290 +++++++++++ css/ourProducts.css | 448 +++++++++++++++++ css/technicalSupport.css | 148 ++++++ html/aboutUs.html | 167 +++++++ html/approaching.html | 120 +++++ html/mainBusiness.html | 194 ++++++++ html/ourProducts.html | 433 ++++++++++++++++ html/technicalSupport.html | 114 +++++ imgs/approaching/6g.png | Bin 0 -> 283753 bytes imgs/approaching/ai.png | Bin 0 -> 263253 bytes imgs/approaching/light.png | Bin 0 -> 29871 bytes imgs/approaching/prospect.png | Bin 0 -> 317557 bytes imgs/approaching/quantum.png | Bin 0 -> 266771 bytes imgs/home/KS6PRO.jpg | Bin 0 -> 219426 bytes imgs/home/KS6PRO.png | Bin 0 -> 490308 bytes imgs/home/YX1000.jpg | Bin 0 -> 578113 bytes imgs/home/mainBusiness.svg | 1 + imgs/home/mainFunctionalResources.svg | 1 + imgs/home/team.png | Bin 0 -> 23024 bytes imgs/main/advantage.svg | 1 + imgs/main/arrow.png | Bin 0 -> 16693 bytes imgs/main/content.svg | 1 + imgs/main/experience.png | Bin 0 -> 21229 bytes imgs/main/mainbusiness.png | Bin 0 -> 249629 bytes imgs/main/process.png | Bin 0 -> 36602 bytes imgs/main/tool.png | Bin 0 -> 23563 bytes imgs/main/workmanship.png | Bin 0 -> 23879 bytes imgs/png/WEBdesign.png | Bin 0 -> 380000 bytes imgs/png/chip.png | Bin 0 -> 379721 bytes imgs/png/ourProducts.png | Bin 0 -> 246345 bytes imgs/png/关于我们.png | Bin 0 -> 212207 bytes imgs/png/我们的产品图.png | Bin 0 -> 301420 bytes imgs/png/电子商城.png | Bin 0 -> 233716 bytes imgs/png/芯片1.png | Bin 0 -> 293111 bytes imgs/png/芯片2.png | Bin 0 -> 294006 bytes imgs/png/首页图.png | Bin 0 -> 323910 bytes imgs/products/AGRO1.png | Bin 0 -> 227731 bytes imgs/products/BIOX1.png | Bin 0 -> 208888 bytes imgs/products/FX100.png | Bin 0 -> 224346 bytes imgs/products/GSEC8.png | Bin 0 -> 375276 bytes imgs/products/HEALX2.png | Bin 0 -> 177955 bytes imgs/products/INDT5.png | Bin 0 -> 199071 bytes imgs/products/K6PRO.png | Bin 0 -> 140818 bytes imgs/products/KS1PRO.png | Bin 0 -> 256874 bytes imgs/products/KS2PRO.png | Bin 0 -> 313263 bytes imgs/products/NAVT1.png | Bin 0 -> 244294 bytes imgs/products/SND32.png | Bin 0 -> 222604 bytes imgs/products/VIDA-M.png | Bin 0 -> 378440 bytes imgs/products/VV10.png | Bin 0 -> 287990 bytes imgs/products/WIFI6-UC.png | Bin 0 -> 232573 bytes imgs/products/XYV2.png | Bin 0 -> 387939 bytes imgs/products/YX1000.png | Bin 0 -> 142286 bytes imgs/svg/logo.svg | 1 + imgs/svg/中英文地球.svg | 1 + imgs/svg/产品安全漏洞.svg | 1 + imgs/svg/企业文化理念(BJF).svg | 1 + imgs/svg/关于我们图.svg | 1 + imgs/svg/我们的使命.svg | 1 + imgs/svg/我们的愿景.svg | 1 + imgs/svg/我们的核心价值观.svg | 1 + imgs/svg/技术支持图.svg | 1 + imgs/svg/技术服务帮助.svg | 1 + imgs/svg/点纹.svg | 1 + imgs/svg/箭头.svg | 1 + imgs/svg/线纹.svg | 1 + imgs/svg/背景纹(大).svg | 1 + imgs/svg/邮箱.svg | 1 + imgs/svg/邮箱(白).svg | 1 + imgs/svg/页尾背景右.svg | 1 + imgs/svg/页尾背景左.svg | 1 + imgs/svg/页面底纹.svg | 1 + imgs/svg/页面选择图标.svg | 1 + imgs/technology/customization.svg | 1 + imgs/technology/technicalAdvice.png | Bin 0 -> 21586 bytes imgs/technology/upgrade.png | Bin 0 -> 43405 bytes imgs/us/Tapeout.png | Bin 0 -> 254655 bytes imgs/us/ic.png | Bin 0 -> 249985 bytes imgs/us/lowpower.png | Bin 0 -> 294107 bytes imgs/us/manufacturer.png | Bin 0 -> 226283 bytes index.html | 208 ++++++++ js/aboutUs.js | 114 +++++ js/index.js | 211 ++++++++ js/mainBusiness.js | 28 ++ js/ourProducts.js | 98 ++++ 90 files changed, 3996 insertions(+) create mode 100644 css/aboutUs.css create mode 100644 css/approaching.css create mode 100644 css/base.css create mode 100644 css/footer.css create mode 100644 css/header.css create mode 100644 css/index.css create mode 100644 css/mainBusiness.css create mode 100644 css/ourProducts.css create mode 100644 css/technicalSupport.css create mode 100644 html/aboutUs.html create mode 100644 html/approaching.html create mode 100644 html/mainBusiness.html create mode 100644 html/ourProducts.html create mode 100644 html/technicalSupport.html create mode 100644 imgs/approaching/6g.png create mode 100644 imgs/approaching/ai.png create mode 100644 imgs/approaching/light.png create mode 100644 imgs/approaching/prospect.png create mode 100644 imgs/approaching/quantum.png create mode 100644 imgs/home/KS6PRO.jpg create mode 100644 imgs/home/KS6PRO.png create mode 100644 imgs/home/YX1000.jpg create mode 100644 imgs/home/mainBusiness.svg create mode 100644 imgs/home/mainFunctionalResources.svg create mode 100644 imgs/home/team.png create mode 100644 imgs/main/advantage.svg create mode 100644 imgs/main/arrow.png create mode 100644 imgs/main/content.svg create mode 100644 imgs/main/experience.png create mode 100644 imgs/main/mainbusiness.png create mode 100644 imgs/main/process.png create mode 100644 imgs/main/tool.png create mode 100644 imgs/main/workmanship.png create mode 100644 imgs/png/WEBdesign.png create mode 100644 imgs/png/chip.png create mode 100644 imgs/png/ourProducts.png create mode 100644 imgs/png/关于我们.png create mode 100644 imgs/png/我们的产品图.png create mode 100644 imgs/png/电子商城.png create mode 100644 imgs/png/芯片1.png create mode 100644 imgs/png/芯片2.png create mode 100644 imgs/png/首页图.png create mode 100644 imgs/products/AGRO1.png create mode 100644 imgs/products/BIOX1.png create mode 100644 imgs/products/FX100.png create mode 100644 imgs/products/GSEC8.png create mode 100644 imgs/products/HEALX2.png create mode 100644 imgs/products/INDT5.png create mode 100644 imgs/products/K6PRO.png create mode 100644 imgs/products/KS1PRO.png create mode 100644 imgs/products/KS2PRO.png create mode 100644 imgs/products/NAVT1.png create mode 100644 imgs/products/SND32.png create mode 100644 imgs/products/VIDA-M.png create mode 100644 imgs/products/VV10.png create mode 100644 imgs/products/WIFI6-UC.png create mode 100644 imgs/products/XYV2.png create mode 100644 imgs/products/YX1000.png create mode 100644 imgs/svg/logo.svg create mode 100644 imgs/svg/中英文地球.svg create mode 100644 imgs/svg/产品安全漏洞.svg create mode 100644 imgs/svg/企业文化理念(BJF).svg create mode 100644 imgs/svg/关于我们图.svg create mode 100644 imgs/svg/我们的使命.svg create mode 100644 imgs/svg/我们的愿景.svg create mode 100644 imgs/svg/我们的核心价值观.svg create mode 100644 imgs/svg/技术支持图.svg create mode 100644 imgs/svg/技术服务帮助.svg create mode 100644 imgs/svg/点纹.svg create mode 100644 imgs/svg/箭头.svg create mode 100644 imgs/svg/线纹.svg create mode 100644 imgs/svg/背景纹(大).svg create mode 100644 imgs/svg/邮箱.svg create mode 100644 imgs/svg/邮箱(白).svg create mode 100644 imgs/svg/页尾背景右.svg create mode 100644 imgs/svg/页尾背景左.svg create mode 100644 imgs/svg/页面底纹.svg create mode 100644 imgs/svg/页面选择图标.svg create mode 100644 imgs/technology/customization.svg create mode 100644 imgs/technology/technicalAdvice.png create mode 100644 imgs/technology/upgrade.png create mode 100644 imgs/us/Tapeout.png create mode 100644 imgs/us/ic.png create mode 100644 imgs/us/lowpower.png create mode 100644 imgs/us/manufacturer.png create mode 100644 index.html create mode 100644 js/aboutUs.js create mode 100644 js/index.js create mode 100644 js/mainBusiness.js create mode 100644 js/ourProducts.js 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 @@ + + +
+ + + + + + + + + + +公司介绍
+我们是一家专注于集成电路设计的高科技公司,致力于为客户提供从芯片设计到量产的全流程服务。我们的团队拥有丰富的行业经验,采用最先进的工具和技术,为客户提供高品质的芯片解决方案。我们始终坚持以客户为中心,以技术为驱动,致力于推动集成电路行业的创新与发展。
+未来发展与技术趋势
+AI加速芯片
+AI芯片在智能硬件、自动驾驶工业互联网、智慧医疗等领域的需求越来越大。我们正在研发支持深度学习加速的定制芯片,助力AI技术的商业化应用。
+量子计算芯片
+随着量子计算的不断发展,我们的研发团队正在探索量子计算芯片的设计,致力于开发具有突破性的量子计算硬件平台,为未来的计算革命奠定基础。
+5G/6G通信芯片
+5G、6G通信技术的普及将进一步推动通信芯片的革新。我 们计划设计更高效、低延迟更强抗干扰能力的通信芯片,支持全球网络的高速连接。
+芯片设计技术服务
+我们公司提供全方位的芯片设计技术服务,涵盖从需求讨论、 系统设计、 逻辑设计、 FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术,确保芯片的性能、功耗、稳定性都能满足客户需求。
+成功的工艺
+与产品案例
+技术支持
+我们为您的项目提供技术指导。我们的 + 技术销售代表和产品专家可以从技术角 + 度解答您关于产品的问题
+30dg?XjaH
z%cNnhsTva#UO5ybiyBogq&teKE{%DiM%0wz{N?$qN+TtyrO8^Z$d_C4)r!2@fSE8^
zh*a&mTyk5jsBUEMSCn;%^%MQ%aW*hn$L+f0YL&66eGDe&F(VvPUcBge_`D;>vv560
zmY}l=b#CeU18skbXuMDjneh1`#B2X__rR-ZjMQH!3Yun1*3=OcNpB}egndh4qeRSN
zV <-F;KN(97t>=$WJ8s8K|3zMQJf+
zzUah*_+P|(P>_3ZtzNO+toY>qgp~ka)?5{iGB3C(7Lg_pMa~p_)SL@ClnVHw7;*T)
z$Nr5}Fj4<+Ohn_+mi!Mr;)D$pbE2tMCCRqAX!%pao0kJwdEk08v)Wv={*wgGInd|^
zC9>M&$kdrg@gz??dYwX%Fp6Aw6mN#54;k%i%k;V7x+-~A!=w6QPD?Bt+L`0S%%mg$
z7mTXEn5rV+_(Be@-&Q=~A{H0wRg$8By`VTw!^OFNJn~|9
S604?zZTp$y_VGr
2VKdqOflj_D?*lp6}(Mn@=q)4ilt~i$E!qWYSP-+L{ZRm<8*&mjkL&
z7Hax3`T!jjAxR0hR>I$jITGMF&NeD-1_ZGvAQna3u8xa#TT073G&QP536`A1PURJ7
zIij)2oPz1XdNW6tymE#R)i!b(*s2y@KS96Q3u%^q69U$l?zdSMcy{pw&sIM{UKZHY
zbJ#
iTJ5aq
z
ByA_2S@mn*mZcA>f$%x=O%qB
z>m=GeIc+z}A2|dm?_)l-#B5RmXcv+lASiO;cr&31!jQ}dqm{H)`3AJ5v@Cq9b(r#d
zvAf`^S4=Sk&Bd(fb$O#`#LlxAITvt#-2(1xTY!W`S|BJiG*t$z(}Qcea`AbICjm)r
z0}T3P;5#xK