芯片代理
+我们代理多家国际知名芯片厂商的高性能芯片,涵盖通信、嵌入式、汽车电子等多个领域,提供全系列的芯片选型与供应服务,确保为客户提供最佳的解决方案。
+From 7f8fa7aabda46243170c016b0c0d4079ba4b4663 Mon Sep 17 00:00:00 2001 From: lzx <393768033@qq.com> Date: Thu, 22 May 2025 14:44:57 +0800 Subject: [PATCH] v1.0.0 --- CHANGELOG.md | 4 + css/aboutYuxin.css | 217 +++++++ css/base.css | 73 +++ css/chipAgent.css | 355 +++++++++++ css/cloudComputingServer.css | 272 +++++++++ css/electronicProduct.css | 242 ++++++++ css/footer.css | 134 ++++ css/header.css | 281 +++++++++ css/index.css | 654 ++++++++++++++++++++ css/serviceCases.css | 221 +++++++ css/technicalSupport.css | 164 +++++ html/aboutYuxin.html | 244 ++++++++ html/chipAgent.html | 672 +++++++++++++++++++++ html/cloudComputingServer.html | 229 +++++++ html/electronicProduct.html | 240 ++++++++ html/serviceCases.html | 190 ++++++ html/technicalSupport.html | 206 +++++++ imgs/about/bg.png | Bin 0 -> 401089 bytes imgs/case/bg.png | Bin 0 -> 631062 bytes imgs/case/c0040z.png | Bin 0 -> 246028 bytes imgs/case/casebg.png | Bin 0 -> 434847 bytes imgs/case/h6pro.png | Bin 0 -> 235536 bytes imgs/case/my100.png | Bin 0 -> 74788 bytes imgs/case/watercool.png | Bin 0 -> 195349 bytes imgs/chip/bg.png | Bin 0 -> 631062 bytes imgs/chip/chipbg.png | Bin 0 -> 675568 bytes imgs/chip/modelSelection.png | Bin 0 -> 135805 bytes imgs/cloud/cloundbg.png | Bin 0 -> 318173 bytes imgs/cloud/customization.png | Bin 0 -> 150758 bytes imgs/cloud/list1.png | Bin 0 -> 136828 bytes imgs/cloud/list2.png | Bin 0 -> 297866 bytes imgs/cloud/list3.png | Bin 0 -> 283681 bytes imgs/cloud/list4.png | Bin 0 -> 288915 bytes imgs/cloud/list5.png | Bin 0 -> 259735 bytes imgs/cloud/topbg.png | Bin 0 -> 128036 bytes imgs/electronicproduct/diversification.png | Bin 0 -> 82312 bytes imgs/electronicproduct/efficient.png | Bin 0 -> 106650 bytes imgs/electronicproduct/list1.png | Bin 0 -> 199583 bytes imgs/electronicproduct/list2.png | Bin 0 -> 233795 bytes imgs/electronicproduct/list3.png | Bin 0 -> 192686 bytes imgs/electronicproduct/list4.png | Bin 0 -> 197235 bytes imgs/electronicproduct/list5.png | Bin 0 -> 221614 bytes imgs/electronicproduct/list6.png | Bin 0 -> 178752 bytes imgs/electronicproduct/list7.png | Bin 0 -> 192123 bytes imgs/electronicproduct/topbg.png | Bin 0 -> 252292 bytes imgs/electronicproduct/wholeprocess.png | Bin 0 -> 55174 bytes imgs/home/agent/ShinDengen.svg | 3 + imgs/home/agent/adi.png | Bin 0 -> 3450 bytes imgs/home/agent/alliance.svg | 37 ++ imgs/home/agent/dtt.png | Bin 0 -> 10051 bytes imgs/home/agent/fxsm.jpg | Bin 0 -> 22651 bytes imgs/home/agent/ght.png | Bin 0 -> 55629 bytes imgs/home/agent/gy.png | Bin 0 -> 9793 bytes imgs/home/agent/hdsc.png | Bin 0 -> 3148 bytes imgs/home/agent/hrs.png | Bin 0 -> 4089 bytes imgs/home/agent/htc.png | Bin 0 -> 3969 bytes imgs/home/agent/jj.svg | 1 + imgs/home/agent/kds.png | Bin 0 -> 4604 bytes imgs/home/agent/lec.png | Bin 0 -> 15789 bytes imgs/home/agent/lw.gif | Bin 0 -> 4915 bytes imgs/home/agent/nordic.png | Bin 0 -> 3730 bytes imgs/home/agent/nxp.svg | 1 + imgs/home/agent/omron.svg | 27 + imgs/home/agent/onsemi.svg | 42 ++ imgs/home/agent/qm.png | Bin 0 -> 4008 bytes imgs/home/agent/sl.png | Bin 0 -> 22372 bytes imgs/home/agent/smc.png | Bin 0 -> 2038 bytes imgs/home/agent/sna.png | Bin 0 -> 13136 bytes imgs/home/agent/sskj.png | Bin 0 -> 4910 bytes imgs/home/agent/st.svg | 5 + imgs/home/agent/texas.png | Bin 0 -> 6342 bytes imgs/home/agent/tsc.svg | 1 + imgs/home/agent/utc.png | Bin 0 -> 9698 bytes imgs/home/agent/xaw.png | Bin 0 -> 61589 bytes imgs/home/agent/xt.jpg | Bin 0 -> 4785 bytes imgs/home/agent/xz.png | Bin 0 -> 15641 bytes imgs/home/agent/yl.jpg | Bin 0 -> 16512 bytes imgs/home/arrow.svg | 1 + imgs/home/arrow2.svg | 1 + imgs/home/arrow3.svg | 1 + imgs/home/bannerbg.png | Bin 0 -> 2134477 bytes imgs/home/casebg.png | Bin 0 -> 265652 bytes imgs/home/chipAgentbg.png | Bin 0 -> 631062 bytes imgs/home/computationalaccelerator.png | Bin 0 -> 171200 bytes imgs/home/coo40z.png | Bin 0 -> 246028 bytes imgs/home/customized.png | Bin 0 -> 198333 bytes imgs/home/deliver.png | Bin 0 -> 164920 bytes imgs/home/demand.png | Bin 0 -> 192123 bytes imgs/home/electronicProduct.png | Bin 0 -> 174773 bytes imgs/home/electronicProductbg.png | Bin 0 -> 668044 bytes imgs/home/email.svg | 1 + imgs/home/h6pro.png | Bin 0 -> 235536 bytes imgs/home/logo.png | Bin 0 -> 8021 bytes imgs/home/logo2.png | Bin 0 -> 9200 bytes imgs/home/my100.png | Bin 0 -> 74788 bytes imgs/home/performance.png | Bin 0 -> 160419 bytes imgs/home/produce.png | Bin 0 -> 223465 bytes imgs/home/prototype.png | Bin 0 -> 202064 bytes imgs/technology/consulting.png | Bin 0 -> 3406 bytes imgs/technology/customization.png | Bin 0 -> 4372 bytes imgs/technology/product.png | Bin 0 -> 5737 bytes index.html | 485 +++++++++++++++ js/aboutYuxin.js | 176 ++++++ js/footer.js | 9 + js/header.js | 63 ++ js/index.js | 218 +++++++ js/serviceCases.js | 114 ++++ 107 files changed, 5584 insertions(+) create mode 100644 CHANGELOG.md create mode 100644 css/aboutYuxin.css create mode 100644 css/base.css create mode 100644 css/chipAgent.css create mode 100644 css/cloudComputingServer.css create mode 100644 css/electronicProduct.css create mode 100644 css/footer.css create mode 100644 css/header.css create mode 100644 css/index.css create mode 100644 css/serviceCases.css create mode 100644 css/technicalSupport.css create mode 100644 html/aboutYuxin.html create mode 100644 html/chipAgent.html create mode 100644 html/cloudComputingServer.html create mode 100644 html/electronicProduct.html create mode 100644 html/serviceCases.html create mode 100644 html/technicalSupport.html create mode 100644 imgs/about/bg.png create mode 100644 imgs/case/bg.png create mode 100644 imgs/case/c0040z.png create mode 100644 imgs/case/casebg.png create mode 100644 imgs/case/h6pro.png create mode 100644 imgs/case/my100.png create mode 100644 imgs/case/watercool.png create mode 100644 imgs/chip/bg.png create mode 100644 imgs/chip/chipbg.png create mode 100644 imgs/chip/modelSelection.png create mode 100644 imgs/cloud/cloundbg.png create mode 100644 imgs/cloud/customization.png create mode 100644 imgs/cloud/list1.png create mode 100644 imgs/cloud/list2.png create mode 100644 imgs/cloud/list3.png create mode 100644 imgs/cloud/list4.png create mode 100644 imgs/cloud/list5.png create mode 100644 imgs/cloud/topbg.png create mode 100644 imgs/electronicproduct/diversification.png create mode 100644 imgs/electronicproduct/efficient.png create mode 100644 imgs/electronicproduct/list1.png create mode 100644 imgs/electronicproduct/list2.png create mode 100644 imgs/electronicproduct/list3.png create mode 100644 imgs/electronicproduct/list4.png create mode 100644 imgs/electronicproduct/list5.png create mode 100644 imgs/electronicproduct/list6.png create mode 100644 imgs/electronicproduct/list7.png create mode 100644 imgs/electronicproduct/topbg.png create mode 100644 imgs/electronicproduct/wholeprocess.png create mode 100644 imgs/home/agent/ShinDengen.svg create mode 100644 imgs/home/agent/adi.png create mode 100644 imgs/home/agent/alliance.svg create mode 100644 imgs/home/agent/dtt.png create mode 100644 imgs/home/agent/fxsm.jpg create mode 100644 imgs/home/agent/ght.png create mode 100644 imgs/home/agent/gy.png create mode 100644 imgs/home/agent/hdsc.png create mode 100644 imgs/home/agent/hrs.png create mode 100644 imgs/home/agent/htc.png create mode 100644 imgs/home/agent/jj.svg create mode 100644 imgs/home/agent/kds.png create mode 100644 imgs/home/agent/lec.png create mode 100644 imgs/home/agent/lw.gif create mode 100644 imgs/home/agent/nordic.png create mode 100644 imgs/home/agent/nxp.svg create mode 100644 imgs/home/agent/omron.svg create mode 100644 imgs/home/agent/onsemi.svg create mode 100644 imgs/home/agent/qm.png create mode 100644 imgs/home/agent/sl.png create mode 100644 imgs/home/agent/smc.png create mode 100644 imgs/home/agent/sna.png create mode 100644 imgs/home/agent/sskj.png create mode 100644 imgs/home/agent/st.svg create mode 100644 imgs/home/agent/texas.png create mode 100644 imgs/home/agent/tsc.svg create mode 100644 imgs/home/agent/utc.png create mode 100644 imgs/home/agent/xaw.png create mode 100644 imgs/home/agent/xt.jpg create mode 100644 imgs/home/agent/xz.png create mode 100644 imgs/home/agent/yl.jpg create mode 100644 imgs/home/arrow.svg create mode 100644 imgs/home/arrow2.svg create mode 100644 imgs/home/arrow3.svg create mode 100644 imgs/home/bannerbg.png create mode 100644 imgs/home/casebg.png create mode 100644 imgs/home/chipAgentbg.png create mode 100644 imgs/home/computationalaccelerator.png create mode 100644 imgs/home/coo40z.png create mode 100644 imgs/home/customized.png create mode 100644 imgs/home/deliver.png create mode 100644 imgs/home/demand.png create mode 100644 imgs/home/electronicProduct.png create mode 100644 imgs/home/electronicProductbg.png create mode 100644 imgs/home/email.svg create mode 100644 imgs/home/h6pro.png create mode 100644 imgs/home/logo.png create mode 100644 imgs/home/logo2.png create mode 100644 imgs/home/my100.png create mode 100644 imgs/home/performance.png create mode 100644 imgs/home/produce.png create mode 100644 imgs/home/prototype.png create mode 100644 imgs/technology/consulting.png create mode 100644 imgs/technology/customization.png create mode 100644 imgs/technology/product.png create mode 100644 index.html create mode 100644 js/aboutYuxin.js create mode 100644 js/footer.js create mode 100644 js/header.js create mode 100644 js/index.js create mode 100644 js/serviceCases.js diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..7911baf --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,4 @@ +# v1.0.0 +``` +1,驭鑫科技官网v1.0.0版本 +``` \ No newline at end of file diff --git a/css/aboutYuxin.css b/css/aboutYuxin.css new file mode 100644 index 0000000..05724e2 --- /dev/null +++ b/css/aboutYuxin.css @@ -0,0 +1,217 @@ +.about-us-section{ + width: 100%; + height: 70vh; + +} + +.about-us-bg{ + width: 97%; + height: 100%; + margin: 0 auto; + /* background: palegoldenrod; */ + background-image: url(../imgs/about/bg.png); + background-size: 100% 100%; + background-repeat: no-repeat; +} +.about-us-content{ + width: 42%; + height: 100%; + /* background: palegoldenrod; */ + padding-top: 8.5%; + padding-left: 10%; +} + +.about-us-content h2{ + font-size: 4.5vw; + color: #fff; + font-weight: 280; + letter-spacing: 0.5vw; +} +.about-us-content p{ + font-size: 1.6vw; + color: #fff; + margin-top: 2.3vw; + line-height:2.8vw; + letter-spacing: 0.2vw; + font-weight: 280; +} + +/* 第二部分 */ +.about-us-section2{ + width: 100%; + height: 150vh; + /* background: palegoldenrod; */ + margin-top: 10vh; +} + +.about-us-section2-bg{ + width: 97%; + height: 100%; + margin: 0 auto; + background: #F0F1F6; + border-radius: 50px 50px 80px 50px; +} + +.about-us-section2-list{ + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + padding: 20px; + +} + +.about-us-section2-list li{ + width: 100%; + min-height: 10vh; + /* background: palegoldenrod; */ + margin-top: 5vw; + display: flex; + justify-content: space-between; + + + +} +.section2-list-item1 { + width: 30%; + height: 100%; + text-align: center; +} + +.section2-list-item1 h2{ + color: #1A579A; + font-size: 1.8vw; + font-weight: 400; +} +.section2-list-item2{ + width: 70%; + height: 100%; + /* background: pink; */ +} +.p1{ + + font-size: 1vw; + color: #4979AD; + font-weight: 400; + padding: 12px 25px; + border-radius: 30px; + background: #FFFFFF; + display: inline-block; /* 让元素宽度由内容决定 */ + +} + +.section2-list-item2 h3{ + font-size: 1.5vw; + font-weight: 400; + margin-top: 2vw; +} +.p2{ + color: rgba(0, 0, 0, 0.7); + font-size: 1.1vw; + font-weight: 400; + margin-top: 1.5vw; +} + + +/* --------------------第三部分 */ +.about-us-section3 { + width: 100%; + height: 170vh; + position: relative; /* 添加定位 */ + z-index: 5; +} + +.about-us-section3-bg { + width: 100%; + height: 100%; + background: #fbfbfb; + border-radius: 0px 0px 80px 80px; + overflow: hidden; + display: flex; + justify-content: space-around; + padding: 5vw; + + +} +.section3-item1{ + width: 30%; + height: 100%; + /* background: palegoldenrod; */ + text-align: center; + font-size: 2vw; +} +.section3-item2{ + width: 70%; + /* height: 100%; */ + /* background: palegoldenrod; */ +} + +.section3-item2 ul{ + width: 100%; + + /* background: palegoldenrod; */ +} +.section3-item2 ul li{ + width: 100%; + height: 15vh; + + margin-top: 1vw; + display: flex; + justify-content: left; + align-items: center; + border-top: 2px solid rgba(0, 0, 0, 0.1); +} + +.section3-item2 ul li h4{ + font-size: 1.5vw; + font-weight: 600; + display: inline-block; + width: 10vw; + +} +.section3-item2 ul li p{ + font-size: 1.4vw; + font-weight: 400; + color: rgba(0, 0, 0, 0.7); + margin-left: 5vw; + display: inline-block; + width: 60vw; +} + + + +.map { + width: 100%; + height: 50vh; + margin-top: 6vh; +} + +.addressBox-bottom { + width: 100%; + height: 100%; + position: relative; +} + +#mapContainer { + width: 100%; + height: 100%; + min-height: 400px; + border-radius: 20px; + overflow: hidden; +} + + html { + scroll-behavior: smooth; /* 添加平滑滚动效果 */ + } + + #contact-map { + scroll-margin-top: 10vh; + } + + + + + + + + diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..95fad8a --- /dev/null +++ b/css/base.css @@ -0,0 +1,73 @@ +/* 所有标签的内外边距清零 */ +* { + 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: #000; + text-decoration: none +} + +a:hover { + color: #c81623 +} +li{ + list-style: none; +} + +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/chipAgent.css b/css/chipAgent.css new file mode 100644 index 0000000..f8e9a18 --- /dev/null +++ b/css/chipAgent.css @@ -0,0 +1,355 @@ +.chipAgent-section{ + width: 100%; + height: 70vh; + background: #fbfbfb; +} + +.chipAgent-section-bg{ + width: 98%; + height: 100%; + background-image: url(../imgs/chip/chipbg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + margin: 0 auto; + background-position: top center; +} + +.chipAgent-section-content{ + width: 43%; + height: 80%; + padding-top: 5vw; + padding-left: 10vw; +} + +.chipAgent-section-content h3{ + font-size: 4vw; + font-weight: 300; + color: #fff; + letter-spacing: 0.15vw; +} + +.chipAgent-section-content p{ + font-size: 1.58vw; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + line-height: 3vw; + letter-spacing: 0.1vw; + margin-top: 2vw; + text-align: justify; +} +/* ----------------芯片代理商------------ */ +.chipAgent-section-brand{ + width: 100%; + height: auto; + background: #fbfbfb; + margin: 0 auto; + padding-top: 5vw; +} +.chipAgent-title{ + width: 92%; + height: 15vh; + background: #F0F1F6; + margin: 0 auto; + text-align: center; + line-height: 15vh; + font-size: 1.3vw; + font-weight: 400; + color: rgba(0, 0, 0, 0.6); + letter-spacing: 0.1vw; + border-radius: 20px; + font-weight: 400; +} + +.chipAgent-section-brand-list{ + width: 88%; + height: 100%; + /* background: palegoldenrod; */ + margin: 0 auto; + margin-top: 2vw; +} +.chipAgent-section-brand-list-item{ + width: 100%; + +} +.chipAgent-section-brand-list-item-title{ + width: 100%; + height: 13vh; + /* background: palegoldenrod; */ + line-height: 13vh; + box-sizing: border-box; + display: flex; +} +.chipAgent-section-brand-list-item-title div{ + font-size: 1.3vw; + font-weight: 400; + letter-spacing: 0.1vw; + font-weight: 600; + display: inline-block; + width: 18vw; + /* background: pink; */ + margin-left: 1vw; + height: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + + .country{ + width: 10vw !important; + text-align: left !important; +} +.product-line{ + width: 23vw !important; + text-align: left !important; +} +.application-field{ + width: 20vw !important; + text-align: left !important; + +} + +.brand-title{ + text-align: center; +} +.chipAgent-section-brand-list-item-content { + width: 100%; + height: 15vh; + box-sizing: border-box; + display: flex; + /* background: papayawhip; */ + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.chipAgent-section-brand-list-item-content div { + font-size: 1vw; + font-weight: 400; + letter-spacing: 0.1vw; + display: inline-block; + width: 18vw; + margin-left: 1vw; + height: 100%; + display: flex; + align-items: center; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + +} + +/* 修改品牌内容容器样式 */ +.content-brand { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* background: palegoldenrod; */ + height: 100%; + width: 100%; + box-sizing: border-box; + padding: 1vw 0; /* 添加上下内边距 */ + text-align: center; +} + +.content-brand img { + height: 2vw; /* 调整图片大小 */ + margin-bottom: 1vw; +} + +.content-brand p { + font-size: 0.8vw; + font-weight: 400; + letter-spacing: 0.1vw; + margin: 0; + line-height: 1.2; + +} + +.arrow-right{ + width: 5vw !important; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; +} + +.arrowBox { + width:2vw !important; + height: 2vw !important; + background: #009FD1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} +.arrowBox a{ + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.arrowBox img{ + width:40%; + height: auto; +} + +.arrowBox:hover { + background: #fff; + border: 1px solid #009FD1; + transform: scale(1.1); + transition: all 0.3s ease; +} + +.arrowBox:hover img{ + filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%); + transition: all 0.3s ease; +} + +/* ---------------------------- */ +.chipAgent-section3{ + width: 100%; + height: 100vh; + z-index: 5; + position: relative; + background: #fbfbfb; + border-radius: 0px 0px 80px 80px; + padding-top: 5vw; +} + +.chipAgent-section3-bg { + width: 100%; + height: 100%; + background-image: url(../imgs/chip/bg.png); + background-size: cover; /* 改为 cover */ + background-repeat: no-repeat; + margin: 0 auto; + background-position: -8vw center; + overflow: hidden; + position: relative; /* 添加定位 */ + z-index: 10; +} + + +.chipAgent-section3-bg h2{ + width: 90%; + font-size: 4vw; + color: #1F599B; + margin-top: 1vh; + letter-spacing: 0.6vw; + font-weight: 300; + padding-left: 5vw; + z-index: 2; + padding-left: 6vw; + +} + +.chip-agent-underline { + position: absolute; + top: 4.7vw; + left: 1vw; + width: 90%; + height: 2vw; + margin: 0.5vw 0 0 0; + background: linear-gradient( + 90deg, + #f7fcfe 8%, + #e3f6fd 20%, + #e3f6fd 30%, + #f7fcfe 50% + ); + z-index: -1; +} +.chipAgent-section3-content{ + width: 100%; + height: 100%; + margin: 0 auto; + padding-top: 5vw; + display: flex; + justify-content: left; + + +} +.chipAgent-section3-content-left{ + width: 40%; + text-align: right; + padding-right: 5vw; +} + +.chipAgent-section3-content-left img{ + width: 68%; + height: auto; +} + +.chipAgent-section3-content-right{ + width: 50%; + padding-left: 5vw; + /* background: palegoldenrod; */ +} +.chipAgent-section3-content-right p{ + font-size: 1.5vw; + font-weight: 400; + letter-spacing: 0.1vw; + margin-top: 2vw; + line-height: 3vw; +} + + +.content-contactUs{ + width: 100%; + height: 18vh; + margin-top: 5vw; + display: flex; + align-items: center; + justify-content: right; + +} +.content-emailBox{ + width: 16vw; + height: 5vw !important; + height: auto; + padding: 1vw 2vw; + display: flex; + align-items: center; + justify-content: right; background: linear-gradient(90deg, #36c6f0 0%, #1a6dc5 100%); + border-radius: 54px; + transition: box-shadow 0.2s, background 0.3s,transform 0.2s; + justify-content: right; + +} +.content-emailBox span{ + font-size: 1.5vw; + font-weight: 400; + letter-spacing: 0.1vw; + margin-right: 1vw; + color: #fff; +} + +.content-email{ + width: 3vw; + height: 3vw; + background: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.content-email img{ + width: 50%; + height: 50%; +} + + +.content-emailBox:focus .content-email, +.content-emailBox:hover .content-email { + background: #e6f7ff; + box-shadow: 0 0 0 4px rgba(54,198,240,0.15); + transform: scale(1.12) rotate(-6deg); +} + +.content-emailBox:focus, +.content-emailBox:hover { + box-shadow: 0 8px 24px rgba(26, 109, 197, 0.22); + background: linear-gradient(100deg, #4fd7fa 0%, #2a7be0 100%); + transform: translateY(-2px) scale(1.03); +} diff --git a/css/cloudComputingServer.css b/css/cloudComputingServer.css new file mode 100644 index 0000000..3b70ac7 --- /dev/null +++ b/css/cloudComputingServer.css @@ -0,0 +1,272 @@ +.chipAgent-section{ + width: 100%; + height: 70vh; + background: #fbfbfb; +} + +.chipAgent-section-bg{ + width: 98%; + height: 100%; + background-image: url(../imgs/cloud/topbg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + margin: 0 auto; + background-position: top center; +} + + +.chipAgent-section-content{ + width: 80%; + height: 80%; + padding-top: 5vw; + padding-left: 10vw; +} + +.chipAgent-section-content h3{ + font-size: 4vw; + font-weight: 300; + color: #fff; + letter-spacing: 0.15vw; +} + +.chipAgent-section-content p{ + width: 58%; + font-size: 1.4vw; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + line-height: 3vw; + letter-spacing: 0.1vw; + margin-top: 2vw; + text-align: justify; +} + +/* --------------------云计算服务器设计生产制造销售 */ + +.cloudComputingServer-section{ + width: 100%; + height:150vh; + background: #fbfbfb; + margin-top: 20vh; +} + +.cloudComputingServer-section-bg{ + width: 98%; + height: 100%; + background-image: url(../imgs/cloud/cloundbg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + margin: 0 auto; + background-position: top center; + position: relative; +} + +.cloudComputingServer-section-bg h3{ + font-size: 5vw; + font-weight: 300; + color: #1F589B; + letter-spacing: 0.15vw; + margin-top: 5vw; + position: absolute; + top:-10vw; + left: 10vw; +} + +.cloudComputingServer-section-list{ + width: 98%; + height: 100%; + margin: 0 auto; + padding-top: 10vw; + display: flex; + flex-wrap: wrap; + padding-left: 5vw; +} + +.cloudComputingServer-section-list li{ + width: 25vw; + height: 28vw; + background: #F0F1F6; + margin-left: 4vw; + border-radius: 20px 20px 40px 20px; + box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1); + padding: 1vw; +} + +.cloudComputingServer-section-list li img{ + width: 100%; + height: auto; + +} + +.cloudComputingServer-section-list li div{ + width: 100%; + margin-top: 2vh; +} + +.cloudComputingServer-section-list li div h4{ + font-size: 1.3vw; + font-weight: 400; + color: #009FD0; + text-align: center; +} + +.cloudComputingServer-section-list li div p{ + width: 80%; + font-size: 1vw; + font-weight: 400; + color: #000; + margin: 0 auto; + text-align: left; + /* padding: 0px 1.5vw; */ + margin-top: 2vh; + line-height: 2vw; +} + +/* ---------服务器定制化服务------------------------- */ + + +.chipAgent-section3{ + width: 100%; + height: 100vh; + z-index: 5; + position: relative; + background: #fbfbfb; + border-radius: 0px 0px 80px 80px; + padding-top: 5vw; +} + +.chipAgent-section3-bg { + width: 100%; + height: 100%; + background-image: url(../imgs/chip/bg.png); + background-size: cover; /* 改为 cover */ + background-repeat: no-repeat; + margin: 0 auto; + background-position: -8vw center; + overflow: hidden; + position: relative; /* 添加定位 */ + z-index: 10; +} + + +.chipAgent-section3-bg h2{ + width: 90%; + font-size: 4vw; + color: #1F599B; + margin-top: 1vh; + letter-spacing: 0.6vw; + font-weight: 300; + padding-left: 5vw; + z-index: 2; + padding-left: 6vw; + +} + +.chip-agent-underline { + position: absolute; + top: 4.7vw; + left: 1vw; + width: 90%; + height: 2vw; + margin: 0.5vw 0 0 0; + background: linear-gradient( + 90deg, + #f7fcfe 8%, + #e3f6fd 20%, + #e3f6fd 30%, + #f7fcfe 50% + ); + z-index: -1; +} +.chipAgent-section3-content{ + width: 100%; + height: 100%; + margin: 0 auto; + padding-top: 5vw; + display: flex; + justify-content: left; + + +} +.chipAgent-section3-content-left{ + width: 40%; + text-align: right; + padding-right: 5vw; +} + +.chipAgent-section3-content-left img{ + width: 68%; + height: auto; +} + +.chipAgent-section3-content-right{ + width: 50%; + padding-left: 5vw; + /* background: palegoldenrod; */ +} +.chipAgent-section3-content-right p{ + font-size: 1.5vw; + font-weight: 400; + letter-spacing: 0.1vw; + margin-top: 2vw; + line-height: 3vw; +} + + +.content-contactUs{ + width: 100%; + height: 18vh; + margin-top: 5vw; + display: flex; + align-items: center; + justify-content: right; + +} +.content-emailBox{ + width: 16vw; + height: 5vw !important; + height: auto; + padding: 1vw 2vw; + display: flex; + align-items: center; + justify-content: right; background: linear-gradient(90deg, #36c6f0 0%, #1a6dc5 100%); + border-radius: 54px; + transition: box-shadow 0.2s, background 0.3s,transform 0.2s; + justify-content: right; + +} +.content-emailBox span{ + font-size: 1.5vw; + font-weight: 400; + letter-spacing: 0.1vw; + margin-right: 1vw; + color: #fff; +} + +.content-email{ + width: 3vw; + height: 3vw; + background: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.content-email img{ + width: 50%; + height: 50%; +} + + +.content-emailBox:focus .content-email, +.content-emailBox:hover .content-email { + background: #e6f7ff; + box-shadow: 0 0 0 4px rgba(54,198,240,0.15); + transform: scale(1.12) rotate(-6deg); +} + +.content-emailBox:focus, +.content-emailBox:hover { + box-shadow: 0 8px 24px rgba(26, 109, 197, 0.22); + background: linear-gradient(100deg, #4fd7fa 0%, #2a7be0 100%); + transform: translateY(-2px) scale(1.03); +} \ No newline at end of file diff --git a/css/electronicProduct.css b/css/electronicProduct.css new file mode 100644 index 0000000..580f5b3 --- /dev/null +++ b/css/electronicProduct.css @@ -0,0 +1,242 @@ +.chipAgent-section{ + width: 100%; + height: 70vh; + background: #fbfbfb; +} + +.chipAgent-section-bg{ + width: 98%; + height: 100%; + background-image: url(../imgs/electronicproduct/topbg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + margin: 0 auto; + background-position: top center; +} + + +.chipAgent-section-content{ + width: 80%; + height: 80%; + padding-top: 5vw; + padding-left: 11vw; +} + +.chipAgent-section-content h3{ + font-size: 4vw; + font-weight: 300; + color: #fff; + letter-spacing: 0.15vw; +} + +.chipAgent-section-content p{ + width: 68%; + font-size: 1.48vw; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + line-height: 3vw; + letter-spacing: 0.1vw; + margin-top: 2vw; + text-align: justify; + padding-left: 3.8vw; + +} + +/* ----------------------------------------- */ + + +.cloudComputingServer-section{ + width: 100%; + /* height:150vh; */ + background: #fbfbfb; + margin-top: 20vh; +} + +.cloudComputingServer-section-bg{ + width: 98%; + height: 100%; + background-image: url(../imgs/cloud/cloundbg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + margin: 0 auto; + background-position: top center; + position: relative; +} + +.cloudComputingServer-section-bg h3{ + font-size: 5vw; + font-weight: 300; + color: #1F589B; + letter-spacing: 0.15vw; + margin-top: 5vw; + position: absolute; + top:-10vw; + left: 10vw; +} + +.cloudComputingServer-section-list{ + width: 98%; + height: 100%; + margin: 0 auto; + padding: 10vw 0; + display: flex; + flex-wrap: wrap; + padding-left: 5vw; + +} + +.cloudComputingServer-section-list li{ + width: 25vw; + height: 28vw; + background: #F0F1F6; + margin-left: 4vw; + border-radius: 20px 20px 40px 20px; + box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1); + padding: 1vw; + margin-top: 8vh; +} + +.cloudComputingServer-section-list li img{ + width: 100%; + height: auto; + +} + +.cloudComputingServer-section-list li div{ + width: 100%; + margin-top: 2vh; +} + +.cloudComputingServer-section-list li div h4{ + font-size: 1.3vw; + font-weight: 400; + color: #009FD0; + text-align: center; +} + +.cloudComputingServer-section-list li div p{ + width: 78%; + font-size: 1vw; + font-weight: 400; + color: #000; + margin: 0 auto; + text-align: left; + /* padding: 0px 1.5vw; */ + margin-top: 2vh; + line-height: 1.8vw; + +} + + +/* --------------------------- */ +.chipAgent-section3{ + width: 100%; + height: 120vh; + z-index: 5; + position: relative; + background: #fbfbfb; + border-radius: 0px 0px 80px 80px; + padding-top: 5vw; +} + +.chipAgent-section3-bg { + width: 100%; + height: 100%; + background-image: url(../imgs/chip/bg.png); + background-size: cover; /* 改为 cover */ + background-repeat: no-repeat; + margin: 0 auto; + background-position: -8vw center; + overflow: hidden; + position: relative; /* 添加定位 */ + z-index: 10; +} + + +.chipAgent-section3-bg h2{ + width: 90%; + font-size: 4vw; + color: #1F599B; + margin-top: 1vh; + letter-spacing: 0.6vw; + font-weight: 300; + padding-left: 5vw; + z-index: 2; + padding-left: 6vw; + +} + +.chip-agent-underline { + position: absolute; + top: 4.7vw; + left: 1vw; + width: 50%; + height: 2vw; + margin: 0.5vw 0 0 0; + background: linear-gradient( + 90deg, + #f7fcfe 8%, + #e3f6fd 20%, + #e3f6fd 30%, + #f7fcfe 50% + ); + z-index: -1; +} + +.chipAgent-section3-list{ + width: 80%; + margin: 0 auto; + padding-top: 5vw; + display: flex; +} + +.chipAgent-section3-list li{ + width: 25vw; + height: 26vw; + background: #F0F1F6; + border-radius: 20px 20px 40px 20px; + margin-left: 4vw; + box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1); + padding: 1vw; + margin-top: 8vh; +} + +.chipAgent-section3-list li img{ + width: 100%; + height: auto; +} + +.chipAgent-section3-list li div{ + width: 100%; + margin-top: 2vh; +} + +.chipAgent-section3-list li div h4{ + font-size: 1.3vw; + font-weight: 400; + color: #009FD0; + text-align: center; +} + +.chipAgent-section3-list li div p{ + width: 80%; + font-size: 1vw; + font-weight: 400; + color: #000; + text-align: left; + + line-height: 1.5vw; + margin: 0 auto; + margin-top:2vh; + color: rgba(0, 0, 0, 0.8); + +} + + + + + + + + + diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..b94be97 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,134 @@ +.footer{ + width: 100%; + height: 70vh; + background: #181E2E; + z-index: 1; + margin-top: -5vw; + padding-top: 10vw; + overflow: hidden; + } + .footer-main{ + width: 90%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + color: #fff; + padding: 0 5vw; + } + .footer-main .footer-logo{ + width: 35vw; + height: 45vh; + border-right: 1px solid #fff; + + + } + + .footer-main .footer-logo img{ + width: 6vw; + height:auto; + } + .footer-main .footer-logo div:nth-of-type(1){ + + margin-top: 3vw; + + } + + .footer-main .footer-logo div:nth-of-type(2) a{ + + color: rgba(255, 255, 255, 0.9); + + } + .footer-main .footer-logo div:nth-of-type(2) a:hover{ + + color: #00A0D2; + + } + + .footer-main .footer-logo div{ + font-size: 0.8vw; + color: rgba(255, 255, 255, 0.9); + margin-top: 1vw; + letter-spacing: 0.06vw; + } + + + .footer-links{ + width: 65vw; + height: 45vh; + /* background: palegoldenrod; */ + display: flex; + align-items: center; + justify-content: space-around; + margin-left: 1vw; + } + .footer-links div{ + width: 18vw; + height: 80%; + /* background: palegoldenrod; */ + display: flex; + flex-direction: column; + /* justify-content: space-around; */ + align-items: center; + padding-left: 2vw; + padding-top: 2vw; + } + + .footer-links h4{ + font-size: 1vw; + color:#747A78; + margin-bottom: 1vw; + font-weight: 400; + text-align: left; + width: 90%; + } + .footer-links-list{ + width: 90%; + display: flex; + flex-direction: column; + /* justify-content: space-around; */ + align-items: left; + } + + .footer-links-list li { + margin-top: 2vh; + } + + + .footer-links-list li a { + color: rgba(255, 255, 255, 0.8); + font-size: 0.8vw; + display: flex; + align-items: center; + justify-content: left; + gap: 0.5vw; + } + .footer-links-list li a:hover{ + color:#00A0D2; + } + + + + + .footer-links-list li a img{ + width: 0.8vw; + margin-right: 5px; + } + + .footer-bottom{ + width: 100%; + margin: 0 auto; + padding: 0 5vw; + text-align: right; + color: rgba(255, 255, 255, 0.7); + font-size: 0.8vw; + } + + .footer-bottom .record{ + color: rgba(255, 255, 255, 0.7); + } + + .footer-bottom .record:hover{ + color: #00A0D2; + } + diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000..cf2b409 --- /dev/null +++ b/css/header.css @@ -0,0 +1,281 @@ +.header{ + width: 100%; + height: 12vh; + /* background: palegoldenrod; */ + display: flex; + align-items: center; + justify-content: space-between; + box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1); +} + +.logo{ + width: 30%; + height: 100%; + /* background: palegoldenrod; */ + display: flex; + align-items: center; + padding-left: 10vw; +} +.logo img{ + width: 3vw; + height: auto; +} + +.nav{ + width: 60%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding-right: 6vw; + /* background: palegoldenrod; */ +} + +.nav-list{ + width: 100%; + height: 50%; + display: flex; + align-items: center; + justify-content: space-around; + /* background: paleturquoise; */ +} + +.nav-item{ + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + +} + +.nav-item a{ + color: #9CA0A1; + font-size: 0.9vw; + position: relative; + text-decoration: none; + display: inline-block; +} + +.nav-item a.active { + + color: #00a0d1; + + +} +.nav-item a.active::before { + content: ''; + width: 100%; + height: 1px; + background: #00a0d1; + position: absolute; + bottom: -5px; /* 修改这行,调整下划线位置 */ + left: 0; + display: block; /* 添加这行,确保伪元素显示 */ +} + +.nav-item a:hover{ + color: #00a0d1; +} + +/* 下拉菜单 */ +.nav-dropdown { + position: relative; +} +.arrow { + margin-left: 4px; + font-size: 0.8em; +} + + +.dropdown-menu li { + padding: 0; + +} +.dropdown-menu li a { + display: flex; + align-items: center; + padding: 10px 24px; + color: #00a0d1; + font-size: 1em; + white-space: nowrap; + transition: background 0.2s; + display: flex; + align-items: center; + justify-content: space-between; +} +.dropdown-menu li a:hover { + background: #f2f8fa; + color: #007a9e; +} +.dropdown-mask { + display: none; + position: fixed; + z-index: 1000; + left: 0; top: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.08); +} +/* 下拉激活时显示 */ +.nav-dropdown.open .dropdown-menu { + display: block; +} + +.dropdown-mask.active { + display: block; +} + +.arrow { + display: inline-block; + margin-left: 6px; + width: 0; + height: 0; + vertical-align: middle; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #00a0d1; + transition: transform 0.2s; +} +.nav-dropdown.open .arrow { + transform: rotate(180deg); +} + +/* 下拉菜单动画 */ +.dropdown-menu { + display: block; /* 让动画生效,实际用visibility控制显示 */ + opacity: 0; + transform: translateY(10px); + visibility: hidden; + pointer-events: none; + transition: opacity 0.25s cubic-bezier(.4,0,.2,1), + transform 0.25s cubic-bezier(.4,0,.2,1), + visibility 0.25s; + position: absolute; + top: 10vh; + left: 0; + min-width:25vw; + background: #fff; + box-shadow: 0 4px 24px rgba(0,0,0,0.12); + border-radius: 8px; + z-index: 1001; + padding: 12px 0; +} +.nav-dropdown.open .dropdown-menu { + opacity: 1; + transform: translateY(0); + visibility: visible; + pointer-events: auto; +} + + +.dropdown-item{ + width: 1.6vw; + height: 1.6vw; + border-radius: 50%; + background: #00a0d1; + display: flex; + align-items: center; + justify-content: center; + padding: 0.1vw; + /* border: 1px solid #00a0d1; */ + transition: all 0.2s; +} +.dropdown-item img{ + width: 50%; + height: auto; +} +/* hover 时去掉背景色,加边框 */ +.dropdown-menu li:hover .dropdown-item { + background: transparent; + border: 1px solid #00a0d1; +} + +.dropdown-menu li:hover .dropdown-item img { + filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%); + transition: all 0.3s ease; +} +/* 联系我们 */ +.contactUs{ + background: linear-gradient(90deg, #36c6f0 0%, #1a6dc5 100%); + + border-radius: 30px; + transition: box-shadow 0.2s, background 0.3s,transform 0.2s; +} + +.contactUs:focus, +.contactUs:hover { + box-shadow: 0 8px 24px rgba(26, 109, 197, 0.22); + background: linear-gradient(100deg, #4fd7fa 0%, #2a7be0 100%); + transform: translateY(-2px) scale(1.03); +} + +.contactUs .contactUs-email { + transition: + box-shadow 0.2s, + background 0.2s, + transform 0.2s; +} + +.contactUs:focus .contactUs-email, +.contactUs:hover .contactUs-email { + background: #e6f7ff; + box-shadow: 0 0 0 4px rgba(54,198,240,0.15); + transform: scale(1.12) rotate(-6deg); +} + + +.contactUs a{ + color: #fff; + display: inline-block; + display: flex; + align-items: center; + justify-content: space-between; + +} + +.contactUs a span { + transition: color 0.2s, font-weight 0.2s; +} + +.contactUs:focus a span, +.contactUs:hover a span { + color: #fff; + font-weight: 600; +} + +.contactUs-email{ + display: flex; + align-items: center; + justify-content: center; + width: 1.6vw; + height: 1.6vw; + border-radius: 50%; + background: #fff; + margin-left: 1vw; +} + +.contactUs-email img{ + width: 60%; + height: auto; +} + + +.menu-active .dropdown-item { + background: transparent; + border: 1px solid #00a0d1 + + +} + +.menu-active .dropdown-item img { + filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%); + transition: all 0.3s ease; +} + +.dropdown-menu li a.menu-active { + background: #f2f8fa; + color: #007a9e; +} + + + + diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..d481ebb --- /dev/null +++ b/css/index.css @@ -0,0 +1,654 @@ +body{ + background-color: #FBFBFB; +} + + +/* Banner区 */ +.banner-section { width: 100%; + height: 90vh; + + background-image: url(../imgs/home/bannerbg.png); + background-size: 98vw 100%; + background-position: center -3vw; + background-repeat: no-repeat; + position: relative; + +} + +.banner-bg{ + position: absolute; + bottom: 3.2vw; + right: 1.5vw; + width: 25vw; + height: 50vh; + background-color: #F0F1F6; + border-radius: 20px 20px 40px 20px; + box-shadow: 5px 8px 10px 2px rgba(0, 0, 0, 0.3); + /* background: palegoldenrod; */ + overflow: hidden; +} + +.banner-card{ + /* background: palegoldenrod; */ + width: 100%; + height: 100%; + /* display: flex; + flex-direction: column; + align-items: center; */ + /* justify-content: center; */ + padding: 1vw; + text-align: center; + +} +.banner-card img{ + width: 100%; + height: 55%; +} + +.banner-card-content{ + margin: 0 auto; + width: 90%; + height: 45%; + /* background: paleturquoise; */ + text-align: left; +} + +.banner-card-content h3{ + font-size: 1.2vw; + font-weight: bold; + color: #09A3D4; + margin-top: 2vh; + letter-spacing: 0.1vw; +} + +.banner-card-content ul{ + list-style: none; + padding: 0; + margin: 0; + margin-left: 1.5vw; + margin-top: 1vh; + /* background:palevioletred; */ +} + +.banner-card-content ul li{ + font-size: 0.9vw; + color: rgba(0, 0, 0, 0.8); + list-style: disc; +} + +.banner-card-content ul li::marker { + font-size: 1.5em; /* 放大圆点 */ + +} + +.arrowBox{ + width:3.3vw; + height: 3.3vw; + background: #00A0D2; + position: absolute; + bottom: 5vw; + right: 3vw; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s ease-in-out; + cursor: pointer; +} + +.arrowBox img{ + width: 1.5vw; + height: auto; + +} + +.arrowBox:hover{ + transform: scale(1.1); + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); + background: #fff; + +} + +.about-us{ + width: 15vw; + height: 8vw; + position: absolute; + bottom: 3vw; + right: 28vw; + + display: flex; + align-items: center; + justify-content: center; + /* background: palegoldenrod; */ + +} +.about-us h3{ + font-size: 1.2vw; + color: #fff; + margin-top: 1vh; + letter-spacing: 0.1vw; + text-shadow: + 1px 1px 0 #aaa, + 2px 2px 0 #777, + 3px 3px 0 #555, + 2px 2px 0 #333, + 2px 2px 0 #000; +} +.about-us-arrow{ + width: 5vw; + height: 5vw; + background: #00A0D2; + border-radius: 50%; + transition: transform 0.3s ease-in-out; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 1vw; + transition: background 0.5s; + transition: transform 0.3s ease-in-out; +} +.about-us-arrow:hover{ + transform: scale(1.1); + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); +} +.about-us-arrow img{ + width: 1.5vw; + height: auto; +} + +.about-us-arrow:hover { + background: #fff; +} +/* -----------------------芯片代理区-------------------------------- */ +.chip-agent-section{ + width: 100%; + height: 100vh; + /* background: palegoldenrod; */ + background-image: url(../imgs/home/chipAgentbg.png); + background-size: 100% 100%; + /* background-position: center; */ + background-repeat: no-repeat; + padding: 2vw; + position: relative; +} + +.chip-agent-section h2{ + width: 90%; + font-size: 4vw; + color: #1F599B; + margin-top: 1vh; + letter-spacing: 0.6vw; + font-weight: 300; + padding-left: 5vw; + z-index: 2; +} + +.chip-agent-underline { + position: absolute; + top: 6vw; + left: 1vw; + width: 90%; + height: 2vw; + margin: 0.5vw 0 0 0; + background: linear-gradient( + 90deg, + #f7fcfe 8%, + #e3f6fd 20%, + #e3f6fd 30%, + #f7fcfe 50% + ); + z-index: -1; +} +.desc{ + width: 70%; + font-size: 1.68vw; + margin-top: 1vh; + letter-spacing: 0.1vw; + margin: 0 auto; + margin-top: 6vw; + color:rgba(0, 0, 0, 0.8); + line-height: 3.2vw; +} + + +/* --------------------芯片代理区滚动图区-------------------------------- */ + + +.brand-carousel-section { + width: 100%; + display: flex; + justify-content: center; + margin: 40px 0; + + +} +.brand-carousel-bg { + position: relative; + width: 92vw; + border-radius: 24px; + box-shadow: 0 4px 24px rgba(54,198,240,0.10); + display: flex; + align-items: center; + padding: 0; + overflow: hidden; + background: linear-gradient( + 90deg, + #f3f2fa 0%, + #FCFCFC 12%, + #FCFCFC 88%, + #f3f2fa 99% + ); + height: 8vw; + +} +.brand-carousel-container { + overflow-x: hidden; + white-space: nowrap; + flex: 1; + scrollbar-width: none; + -ms-overflow-style: none; + /* 稍微增加边距,确保不被按钮遮挡 */ + padding-left: 2vw; + padding-right: 2vw; +} +.brand-carousel-container::-webkit-scrollbar { + display: none; +} +.brand-carousel-list, +.brand-carousel-list-clone { + display: inline-flex !important; + align-items: center; + vertical-align: top; + padding-right: 3vw; +} +.brand-item { + display: flex; + flex-direction: column; + align-items: center; + min-width: 160px; + max-width: 180px; + /* background: palegoldenrod; */ + margin-right: 2vw; + box-sizing: border-box; /* 确保尺寸计算包含内边距和边框 */ +} +.brand-item:first-child { + margin-left: 2vw; +} +.brand-item img { + height: 1.5vw; + object-fit: contain; + margin-bottom: 12px; +} +.brand-name { + font-size: 1rem; + color: rgba(0, 0, 0, 0.8); + text-align: center; + font-weight: 500; + letter-spacing: 1px; + +} + +/* 按钮样式 */ +.brand-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 5; + width: 2vw; + min-width: 32px; + height: 100%; + border: none; + background: #fff; + font-size: 1.5rem; + cursor: pointer; + box-shadow: 0 2px 8px rgba(54,198,240,0.10); + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s, color 0.2s; + outline: none; + margin-left: 0; + color: #00A0D2; + text-align: center; + background: rgba(255,255,255,0.9); /* 半透明背景 */ +} +.brand-btn.left { left: 0px; } +.brand-btn.right { right: 0px; } + +.brand-btn:focus, +.brand-btn:hover { /* background: #F4F3FA; */ + color: #000; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); +} + + +.section-btn-box{ + width: 100%; + + text-align: right; + padding-right: 5vw; + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 3vw; +} +.section-btn{ + display: inline-block; + width: 13vw; + height: 4vw; + background: #00A0D2; + color: #fff; + font-size: 1vw; + border-radius: 40px; + display: flex; + align-items: center; + justify-content: right; + padding: 0 0.8vw; +} +.section-btn-arrow{ + width: 3vw; + height: 3vw; + background: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-left: 2vw; +} +.section-btn-arrow img{ + width: 1vw; +} +.section-btn:hover { + background: #fff; + color: #00A0D2; + transform: translateX(5px); + transition: all 0.3s ease; +} + +.section-btn:hover .section-btn-arrow { + background: #00A0D2; + transform: translateX(5px); + transition: all 0.3s ease; +} + +.section-btn:hover .section-btn-arrow img { + filter: brightness(0) invert(1); /* 让箭头图标变成白色 */ + transition: all 0.3s ease; +} + +/* ------------------------------电子产品设计生产制造服务区-------------------------------- */ + +.product-design-section{ + width: 100%; + height: 120vh; + /* background: palegoldenrod; */ + position: relative; +} + +.product-design-bg{ + width: 90vw; + height: 120vh; + margin: 0 auto; + background-image: url(../imgs/home/electronicProductbg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + border-radius: 20px; + position: relative; + box-sizing: border-box; + padding-top: 5vw; +} + +.product-design-bg h2{ + width: 90%; + font-size: 4vw; + color: #1F599B; + margin-top: 1vh; + letter-spacing: 0.6vw; + font-weight: 300; + padding-left: 5vw; + z-index: 2; + position: absolute; + top: -4.6vw; + left: 0vw; + +} + +.product-design-bg .desc{ + + width: 70%; + font-size: 1.55vw; + margin-top: 1vh; + letter-spacing: 0.1vw; + + +} +.card-carousel-section{ + margin-top: 10vh; + padding-left: 5vw; + +} + + +.card-carousel-container { + overflow-x: hidden; + white-space: nowrap; + width: 100%; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.card-carousel-container::-webkit-scrollbar { + display: none; +} + +.card-carousel-list { + display: inline-flex; + align-items: center; + vertical-align: top; +} + + + + +.card-list{ + width: 90%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-around; + /* background: palegoldenrod; */ + margin-top: 5vw; +} +.card{ + width: 25vw; + height: 25vw; + border-radius: 20px 20px 40px 20px; + /* overflow: hidden; */ + box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1); + background: #F0F1F6; + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + white-space: normal; /* 允许卡片内容换行 */ + /* justify-content: center; */ + flex-shrink: 0; + margin-right: 2vw; + +} + +.card:first-child { + margin-left: 2vw; +} +.card img{ + width: 100%; + height:auto; + +} +.card-title{ + font-size: 0.9vw; + color: rgba(0, 0, 0, 0.8); + margin-top: 2vh; + letter-spacing: 0.1vw; +} + +.electronicProduct-btn{ + position: absolute; + bottom: 4vw; + right: 5vw; + + +} + +/* ------------------------------云计算服务器设计生产制造销售区-------------------------------- */ + +.cloud-server-section{ + width: 100%; + height: 130vh; + /* background: palegoldenrod; */ + position: relative; +} +.cloud-server-card-list{ + padding: 0px 5vw; +} + +.cloud-server-btn{ + position: absolute; + bottom: 2vw; + right: 5vw; +} + +/* ------------------------------服务案例区-------------------------------- */ +.service-case-section{ + width: 100%; + height: 130vh; + /* background: palegoldenrod; */ + background: #fbfbfb; + border-radius: 0px 0px 80px 80px; + z-index: 2; +} +.service-case-bg{ + background-image: url(../imgs/home/casebg.png); + background-size: 100%; + background-repeat: no-repeat; + /* background-position: center; */ + padding-top: 2vw; + position: relative; +} +.service-case-bg h2{ + position: absolute; + top: -4vw; + left: 0vw; +} + + +.service-case-card{ + width: 22vw; + height: 30vw; + padding: 20PX; + transition: all 0.3s ease; +} +.card-title{ + font-size: 1.2vw; + color: rgba(0, 0, 0, 0.8); + margin-top: 2vh; + letter-spacing: 0.1vw; +} + +.card-content{ + width: 95%; + height: 18vh; +} + +.card-content h4{ + color: #00A0D2; + margin-top: 2vh; + letter-spacing: 0.1vw; + font-size: 1vw; + font-weight: 400; +} + +.card-content ul{ + + padding: 0; + margin: 0; + margin-left: 1.5vw; + margin-top: 1.5vh; +} + +.card-content ul li{ + font-size: 0.9vw; + color: rgba(0, 0, 0, 0.8); + list-style: disc; + margin-top: 1vh; +} +.card-btn{ + width: 100%; + + display: flex; + align-items: center; + justify-content: right; +} +.card-btn a { + width: 3vw; + height: 3vw; + background: #00A0D2; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.card-btn a img{ + width: 1.2vw; +} + +.service-case-card:hover{ + background: #00A0D2; +} +.card-content-title{ + display: inline-block; + padding: 5px 10px; + border-radius: 20px; + } + + +.service-case-card:hover .card-content-title{ + + background: #fff; + + } + + .service-case-card:hover .card-btn a{ + + background: #fff; + + } + + .service-case-card:hover .card-btn a img { + filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%); + transition: all 0.3s ease; +} + +.service-case-card:hover ul li{ + + color: #fff; + + } + + .service-case-card:hover .card-title{ + + color: #fff; + + } + + + .service-case-btn{ + position: absolute; + bottom: 13vw; + right: 5vw; + } + + + diff --git a/css/serviceCases.css b/css/serviceCases.css new file mode 100644 index 0000000..6ee122b --- /dev/null +++ b/css/serviceCases.css @@ -0,0 +1,221 @@ +.chipAgent-section{ + width: 100%; + height: 70vh; + background: #fbfbfb; +} + +.chipAgent-section-bg{ + width: 98%; + height: 100%; + background-image: url(../imgs/case/casebg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + margin: 0 auto; + background-position: top center; +} + +.chipAgent-section-content{ + width: 43%; + height: 80%; + padding-top: 6vw; + padding-left: 10vw; +} + +.chipAgent-section-content h3{ + font-size: 4vw; + font-weight: 300; + color: #fff; + letter-spacing: 0.15vw; +} + +.chipAgent-section-content p{ + font-size: 1.58vw; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + line-height: 3vw; + letter-spacing: 0.1vw; + margin-top: 2vw; + text-align: justify; +} + +/* -------------------服务案例 */ + +.case-section { + position: relative; + width: 100%; + min-height: 150vh; + background: #fff; + overflow: hidden; + z-index: 5; + border-radius: 0 0 80px 80px; + } + .case-section-bg { + width: 100%; + height: 100%; + position: absolute; + left: 0; top: 0; right: 0; bottom: 0; + background: url('../imgs/case/bg.png') no-repeat center center; + background-size: cover; + + } + .case-container { + position: relative; + z-index: 1; + display: flex; + justify-content: left; + align-items: flex-start; + padding: 5vw; + width: 80%; + margin: 0 auto; + /* background: palegoldenrod; */ + height: 150vh; + padding-left: 8vw; + + + + } + .case-list { + display: flex; + flex-direction: column; + align-items: center; + gap: 80px; + margin-right: 5vw; + width: 20%; + height: 100%; + } + .case-btn { + width: 18vw; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 32px 0 24px; + height: 5vw; + border: 2px solid #00A0D2; + border-radius: 77px; + background: #fff; + font-size: 1vw; + font-weight: 500; + cursor: pointer; + transition: background 0.2s, color 0.2s; + outline: none; + position: relative; + } + .case-btn-arrow{ + width: 3vw; + height: 3vw; + background: #00A0D2; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s; + } + + + .case-btn-arrow img{ + width: 50%; + height: auto; + transition: all 0.3s; + } + + .case-btn:hover{ + background: #00A0D2; + color: #fff; + } + + + .case-btn:hover .case-btn-arrow { + background: #fff; + } + + .case-btn:hover .case-btn-arrow img{ + filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%); + } + + .case-btn.active { + background: #00A0D2; + color: #fff; + } + + .case-btn.active .case-btn-arrow { + background: #fff; + } + + .case-btn.active .case-btn-arrow img { + filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%); + } + + + + + .case-detail { + background: #F0F1F6; + border-radius: 20px; + box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.08); + padding: 40px 36px 36px 36px; + width: 40vw; + height: 120vh; + display: flex; + flex-direction: column; + align-items: center; + margin-left: 10vw; + + } + .case-detail-img{ + width: 85%; + height: 40%; + background: #fff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 20px 20px 0 0; + } + .case-detail-img img { + width: 70%; + height: auto; + + } + .case-detail-title { + font-size: 1.5vw; + font-weight: 600; + margin-bottom: 18px; + text-align: center; + margin-top: 3vh; + font-weight: 400; + } + .case-detail-section { + margin-bottom: 12px; + width: 85%; + } + .case-detail-section p { + color: #00A0D2; + font-weight: 600; + margin-right: 8px; + font-size: 1.2vw; + font-weight: 400; + } + .case-detail-section span { + display: inline-block; + font-size: 0.9vw; + color: rgba(0, 0, 0, 0.8); + font-weight: 400; + margin-top: 2vh; + line-height: 1.5vw; + } + .case-detail-section ul { + margin: 0 0 0 18px; + padding: 0; + list-style: disc; + margin-left: 2vw; + } + .case-detail-section ul li { + font-size: 0.9vw; + color: rgba(0, 0, 0, 0.8); + font-weight: 400; + line-height: 1.5vw; + list-style: disc; + margin-top: 1vh; + + } + + diff --git a/css/technicalSupport.css b/css/technicalSupport.css new file mode 100644 index 0000000..68b3a23 --- /dev/null +++ b/css/technicalSupport.css @@ -0,0 +1,164 @@ +.chipAgent-section{ + width: 100%; + height: 70vh; + background: #fbfbfb; +} + +.chipAgent-section-bg{ + width: 98%; + height: 100%; + background-image: url(../imgs/case/casebg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + margin: 0 auto; + background-position: top center; +} + +.chipAgent-section-content{ + width: 43%; + height: 80%; + padding-top: 6vw; + padding-left: 10vw; +} + +.chipAgent-section-content h3{ + font-size: 4vw; + font-weight: 300; + color: #fff; + letter-spacing: 0.15vw; +} + +.chipAgent-section-content p{ + font-size: 1.58vw; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + line-height: 3vw; + letter-spacing: 0.1vw; + margin-top: 2vw; + text-align: justify; +} + +/* ----------------技术支持 */ + +.case-section { + position: relative; + width: 100%; + min-height: 110vh; + background: #fff; + overflow: hidden; + z-index: 5; + border-radius: 0 0 80px 80px; + } + .case-section-bg { + width: 100%; + height: 100%; + position: absolute; + left: 0; top: 0; right: 0; bottom: 0; + background: url('../imgs/case/bg.png') no-repeat center center; + background-size: cover; + + } + + .case-list{ + margin: 0 auto; + width: 85%; + height: 100%; + display: flex; + justify-content: space-around; + padding-top: 8vw; + + } + + .case-item{ + width: 24vw; + height: 30vw; + background: #F0F1F6; + border-radius: 20px 20px 40px 20px; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.3); + padding: 1vw; + } + + .case-item-img{ + width: 100%; + height: 50%; + /* background: palegoldenrod; */ + display: flex; + align-items: center; + justify-content: center; + } + + .case-item-img img{ + width: 8vw; + height: auto; + } + + .case-item-title{ + width: 100%; + height: 45%; + } + + .case-item-title h4{ + font-size: 1.5vw; + font-weight: 400; + color: #00A0D2; + text-align: center; + } + + .case-item-title p{ + margin: 0 auto; + width: 81%; + font-size: 1vw; + font-weight: 400; + color: #333; + text-align: left; + margin-top: 2vh; + text-align: justify; + + } + + .arrow-box{ + width: 100%; + /* height: 10vh; */ + /* background: palegoldenrod; */ + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 1.5vw; + margin-bottom: 2vh; + } + + .arrow2{ + width: 3vw; + height: 3vw; + background: #00A0D2; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + + } + + + .arrow2 img{ + width: 1vw; + height: auto; + } + + + .arrow2:hover{ + background: #fff; + border: 1px solid #00A0D2; + } + + .arrow2:hover img{ + filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%); + transition: all 0.3s ease; + + } + + diff --git a/html/aboutYuxin.html b/html/aboutYuxin.html new file mode 100644 index 0000000..431b8cd --- /dev/null +++ b/html/aboutYuxin.html @@ -0,0 +1,244 @@ + + + +
+ + +我们公司始终致力于为客户提供创新、高效、稳定的产品与服务,凭借先进的技术和丰富的行业经验,帮助客户在市场中取得成功。
+Philosophy
+科技具有改变人们生活、社会和文明的力量。
+我们仍然相信,人能激发科技潜力,并创造美好未来的可能也是无限的。
+ +Target
+聚焦芯片代理服务、芯片进出口服务、云计算服务器设备研发、生成、销售。
+形成有持续盈利能力的产品线。
+value
+我们根据收集的数据、假设检验、反复论证,并做出的科学判断。
+ +建立信任和尊重的文化氛围,共享信息和知识、创造解决方案并加以实施。
+ +通过协作、分享资源、共创价值,实现企业和客户利益的最大化,共创美好未来。
+ +深圳驭鑫科技有限公司
+2021年1月
+销售代理,芯片进出口,云计算服务器设备研发生产销售
+广东省深圳市南山区高新中三道2号软件园一期7栋303室
+我们代理多家国际知名芯片厂商的高性能芯片,涵盖通信、嵌入式、汽车电子等多个领域,提供全系列的芯片选型与供应服务,确保为客户提供最佳的解决方案。
+意法 ST
+德州仪器 TI
+恩智浦
+ON 安森美
+ADI 亚德诺
+OMRON 欧姆龙
+ALLIANCE 联盟
+HRS 广濑
+HTC 泰进
+KDS 大真空
+LEC 长弘
+Nordic
+ShinDengen 新电元
+SMC
+SNA 世纳
+台半
+UTC 友顺
+大唐微电子 DTT
+富芯森美
+高云
+广和通 Fibocom
+HDSC 华大
+捷捷微电
+Dragonchip 龙芯
+Panjit强茂
+Tenx 十速
+顺络电子 SunLord
+芯奥微 NeoMEMS
+芯洲 SCT
+英联
+Nuvoton 新唐
+我们为客户提供专业的芯片选型服务,根据客户需求推荐最合适的芯片,并提供应用支持,帮助客户快速实现产品研发。
+我们提供从云计算服务器的设计、生产到销售的全方位服务,致力于为数据中心、企业客户及云计算平台提供高效、稳定、可扩展的服务器解决方案。
+根据客户的计算、存储、带宽等需求 + 提供个性化的服务器配置和选型建议。
+提供针对性硬件设计服务,确保服务器 + 满足客户的高效能和可靠性要求。
+我们为高性能计算需求提供专门的水冷 + 服务器设计和生产服务,确保高密度服 + 务器在极限负载下依然能够稳定运行。
+提供专业的服务器整机组装服务,确保 + 产品在交付前经过严格的测试与调试。
+为客户提供完善的售后服务,包括产品 + 升级、技术支持及定期维护。
+根据不同客户的需求,我们可以为客户量身定制云计算服务器,包括处理器、存储、内存、网络接口等方面的配置,确保服务器在特定环境下的最佳性能。
+我们公司提供全方位的电子产品设计与制造服务,涵盖从需求分析、产品设计、样机开发、生产制造到产品交付的全过程。我们依托先进的技术和工艺,致力于为客户提供高性能、高质量的电子产品解决方案。
+通过与客户的深入沟通,明确产品功能需求、市场需求和技术要求。
+基于电子电路设计原理,进行精确的原理图设计和PCB布局设计,确保电路高效稳定。
+针对客户需求开发定制化的嵌入式系统,确保产品性能与可靠性。
+提供从外观设计到结构设计的全方位服务,确保产品的美观与耐用性。
+在设计完成后,进行样机制作、性能测试及反馈改进,确保产品的成熟度和稳定性。
+我们与多家先进制造厂合作,提供从小批量试产到大规模量产的服务,确保生产质量和交货时效。
+实施严格的质量管理体系,进行多项质量测试,确保每一个出厂产品都符合行业标准。
+从产品设计到量产交付,提供从概念到成品的全流程服务。
+拥有先进的生产设施和高效的生产线,确保产品按时交付。
+根据客户需求提供多样化的电子产品设计解决方案,满足不同领域的需求。
+我们为客户提供差异化的产品服务
+您需要哪方面的支持? 无论您是寻求复杂设计方面的帮助还是寻求快速建议,我们提供各种支持选项,满足您的需求
+p>C1v5c%3KgZZ*7Uerxp*W>BhaxBgH)4}~
zBQ5X#r^5Y6z FYY@)u$f%1whZbME7WQD0Hqo!ph)CmT%C8MV}V|b7X*|s5<A$fhz2DrvOD>_~QTUP$IlUuq(K2-eGtB=;N>YSm~pI
zSq3C~s~Q_KAw}8@g!XzN3IU9yd0$5+0HvJPDLO;(_+#G0hCuJ$}U(g_5W=^%-_wFAs8%#}IE>iDMT4
zCu|;lJDP06W0;g?aiyG~h+qLUtdq!4;7N$jU)Oh!nz>^%x6nxzDGx$&0Jx5uj-xL&*ZHkm7NE)Fl`(ZSzuO)u-#wAg4*gH
zG_Q6lZG@&+&JhK%t-?Ql!XMt&P@Z4OFF2xILw*SRT@nlt`-0`6OaD#sc&MZRyHU>j
zV4+U56XrvrmRf!xlZ7hWQi!xi(7~7+<*@GD7So04H9*HV?Fnu*4WHf?d
a?eMbe
zN#!<0Pk1Wkht7@Coy!76>oLyzJBWX)^T`Ff*orjqUouT`kQ$&Es?Eua=HHZFIIZ~p
z&x?yz2>moH6HxtsPp+gz1et#~=D@{8)9&h{U)mX`I#=8;CK~TBBE$i7)Iz%M@m4%1
z{g#B+qrH45z|6dNy;}_54yddX_#rlYJZXap>yT&9>}1>4+}UNIgzoXNkiPp?+F6z?
zhZD*hhWV*lAKDNq8y2OPp*KL8&pNf6LtG)lWd36MsCaJL{*t$7i@rF;D(&XlH%?kR
zmyQ{B5DIMvX9t@I(Wjnw(Dk6!x}N8+FA5zV