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 @@ + + + + + + + 深圳驭鑫科技有限公司 + + + + + + + + + + + + + + + + + + +
+ + + + +
+ +
+
+
+

关于驭鑫

+

我们公司始终致力于为客户提供创新、高效、稳定的产品与服务,凭借先进的技术和丰富的行业经验,帮助客户在市场中取得成功。

+
+
+
+ +
+
+ + + +
+
+ + +
+
+
+

公司简介

+
+
+
    +
  • +

    公司名称

    +

    深圳驭鑫科技有限公司

    +
  • +
  • +

    成立

    +

    2021年1月

    +
  • +
  • +

    主营业务

    +

    销售代理,芯片进出口,云计算服务器设备研发生产销售

    +
  • +
  • +

    地址

    +

    广东省深圳市南山区高新中三道2号软件园一期7栋303室

    +
  • +
+ + +
+
+
+
+
+
+
+ + +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/html/chipAgent.html b/html/chipAgent.html new file mode 100644 index 0000000..8dbc2e4 --- /dev/null +++ b/html/chipAgent.html @@ -0,0 +1,672 @@ + + + + + + + 深圳驭鑫科技有限公司 + + + + + + + + + + + + +
+ + + + +
+ +
+
+ +
+

芯片代理

+

我们代理多家国际知名芯片厂商的高性能芯片,涵盖通信、嵌入式、汽车电子等多个领域,提供全系列的芯片选型与供应服务,确保为客户提供最佳的解决方案。

+
+ +
+
+ +
+
+ 以下是我们在国内外代理的常用芯片品牌,涵盖了从控制器、电源、分立器件、传感器到存储器等多个领域,满足不同应用场景的需求。 +
+
+ +
+
+ +
+ +
+ +

芯片选型与支持

+
+
+
+ +
+ +
+

我们为客户提供专业的芯片选型服务,根据客户需求推荐最合适的芯片,并提供应用支持,帮助客户快速实现产品研发。

+ + +
+
+ +
+ +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/html/cloudComputingServer.html b/html/cloudComputingServer.html new file mode 100644 index 0000000..bf14911 --- /dev/null +++ b/html/cloudComputingServer.html @@ -0,0 +1,229 @@ + + + + + + + 深圳驭鑫科技有限公司 + + + + + + + + + + + + + +
+ + + + +
+ +
+
+ +
+

云计算服务器设计生产制造销售

+

我们提供从云计算服务器的设计、生产到销售的全方位服务,致力于为数据中心、企业客户及云计算平台提供高效、稳定、可扩展的服务器解决方案。

+
+ +
+
+ +
+
+

服务内容

+ +
+
+ + +
+ +
+ +

服务器定制化服务

+
+
+
+ +
+ +
+

根据不同客户的需求,我们可以为客户量身定制云计算服务器,包括处理器、存储、内存、网络接口等方面的配置,确保服务器在特定环境下的最佳性能。

+ + +
+
+ +
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/html/electronicProduct.html b/html/electronicProduct.html new file mode 100644 index 0000000..1430cb4 --- /dev/null +++ b/html/electronicProduct.html @@ -0,0 +1,240 @@ + + + + + + + 深圳驭鑫科技有限公司 + + + + + + + + + + + + +
+ + + + +
+ +
+
+ +
+

电子产品设计生产制造服务

+

我们公司提供全方位的电子产品设计与制造服务,涵盖从需求分析、产品设计、样机开发、生产制造到产品交付的全过程。我们依托先进的技术和工艺,致力于为客户提供高性能、高质量的电子产品解决方案。

+
+ +
+
+ +
+
+

服务内容

+ +
+
+ + +
+ +
+ +

服务优势

+
+ + +
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/html/serviceCases.html b/html/serviceCases.html new file mode 100644 index 0000000..386ff9c --- /dev/null +++ b/html/serviceCases.html @@ -0,0 +1,190 @@ + + + + + + + 深圳驭鑫科技有限公司 + + + + + + + + + + + + +
+ + + + +
+ +
+
+ +
+

服务案例

+

我们为客户提供差异化的产品服务

+
+ +
+
+ +
+
+
+
+ + + + +
+
+ +
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/html/technicalSupport.html b/html/technicalSupport.html new file mode 100644 index 0000000..fc694c6 --- /dev/null +++ b/html/technicalSupport.html @@ -0,0 +1,206 @@ + + + + + + + 深圳驭鑫科技有限公司 + + + + + + + + + + + + +
+ + + + +
+ +
+
+ +
+

技术支持

+

您需要哪方面的支持? 无论您是寻求复杂设计方面的帮助还是寻求快速建议,我们提供各种支持选项,满足您的需求

+
+ +
+
+ +
+
+ + +
+ +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/imgs/about/bg.png b/imgs/about/bg.png new file mode 100644 index 0000000..6e7eba8 Binary files /dev/null and b/imgs/about/bg.png differ diff --git a/imgs/case/bg.png b/imgs/case/bg.png new file mode 100644 index 0000000..0614f4b Binary files /dev/null and b/imgs/case/bg.png differ diff --git a/imgs/case/c0040z.png b/imgs/case/c0040z.png new file mode 100644 index 0000000..8573b7b Binary files /dev/null and b/imgs/case/c0040z.png differ diff --git a/imgs/case/casebg.png b/imgs/case/casebg.png new file mode 100644 index 0000000..0683280 Binary files /dev/null and b/imgs/case/casebg.png differ diff --git a/imgs/case/h6pro.png b/imgs/case/h6pro.png new file mode 100644 index 0000000..19062bd Binary files /dev/null and b/imgs/case/h6pro.png differ diff --git a/imgs/case/my100.png b/imgs/case/my100.png new file mode 100644 index 0000000..815148e Binary files /dev/null and b/imgs/case/my100.png differ diff --git a/imgs/case/watercool.png b/imgs/case/watercool.png new file mode 100644 index 0000000..eaf39b2 Binary files /dev/null and b/imgs/case/watercool.png differ diff --git a/imgs/chip/bg.png b/imgs/chip/bg.png new file mode 100644 index 0000000..0614f4b Binary files /dev/null and b/imgs/chip/bg.png differ diff --git a/imgs/chip/chipbg.png b/imgs/chip/chipbg.png new file mode 100644 index 0000000..77c6122 Binary files /dev/null and b/imgs/chip/chipbg.png differ diff --git a/imgs/chip/modelSelection.png b/imgs/chip/modelSelection.png new file mode 100644 index 0000000..8e5468f Binary files /dev/null and b/imgs/chip/modelSelection.png differ diff --git a/imgs/cloud/cloundbg.png b/imgs/cloud/cloundbg.png new file mode 100644 index 0000000..8d30a80 Binary files /dev/null and b/imgs/cloud/cloundbg.png differ diff --git a/imgs/cloud/customization.png b/imgs/cloud/customization.png new file mode 100644 index 0000000..28309db Binary files /dev/null and b/imgs/cloud/customization.png differ diff --git a/imgs/cloud/list1.png b/imgs/cloud/list1.png new file mode 100644 index 0000000..fa3d8fc Binary files /dev/null and b/imgs/cloud/list1.png differ diff --git a/imgs/cloud/list2.png b/imgs/cloud/list2.png new file mode 100644 index 0000000..f86ad25 Binary files /dev/null and b/imgs/cloud/list2.png differ diff --git a/imgs/cloud/list3.png b/imgs/cloud/list3.png new file mode 100644 index 0000000..ca90e8a Binary files /dev/null and b/imgs/cloud/list3.png differ diff --git a/imgs/cloud/list4.png b/imgs/cloud/list4.png new file mode 100644 index 0000000..3d75f75 Binary files /dev/null and b/imgs/cloud/list4.png differ diff --git a/imgs/cloud/list5.png b/imgs/cloud/list5.png new file mode 100644 index 0000000..dddfb36 Binary files /dev/null and b/imgs/cloud/list5.png differ diff --git a/imgs/cloud/topbg.png b/imgs/cloud/topbg.png new file mode 100644 index 0000000..bfffcb0 Binary files /dev/null and b/imgs/cloud/topbg.png differ diff --git a/imgs/electronicproduct/diversification.png b/imgs/electronicproduct/diversification.png new file mode 100644 index 0000000..e8a8a78 Binary files /dev/null and b/imgs/electronicproduct/diversification.png differ diff --git a/imgs/electronicproduct/efficient.png b/imgs/electronicproduct/efficient.png new file mode 100644 index 0000000..55ffd3d Binary files /dev/null and b/imgs/electronicproduct/efficient.png differ diff --git a/imgs/electronicproduct/list1.png b/imgs/electronicproduct/list1.png new file mode 100644 index 0000000..70e9aed Binary files /dev/null and b/imgs/electronicproduct/list1.png differ diff --git a/imgs/electronicproduct/list2.png b/imgs/electronicproduct/list2.png new file mode 100644 index 0000000..ed8a617 Binary files /dev/null and b/imgs/electronicproduct/list2.png differ diff --git a/imgs/electronicproduct/list3.png b/imgs/electronicproduct/list3.png new file mode 100644 index 0000000..5e6e424 Binary files /dev/null and b/imgs/electronicproduct/list3.png differ diff --git a/imgs/electronicproduct/list4.png b/imgs/electronicproduct/list4.png new file mode 100644 index 0000000..f6a385e Binary files /dev/null and b/imgs/electronicproduct/list4.png differ diff --git a/imgs/electronicproduct/list5.png b/imgs/electronicproduct/list5.png new file mode 100644 index 0000000..c83f669 Binary files /dev/null and b/imgs/electronicproduct/list5.png differ diff --git a/imgs/electronicproduct/list6.png b/imgs/electronicproduct/list6.png new file mode 100644 index 0000000..89243ef Binary files /dev/null and b/imgs/electronicproduct/list6.png differ diff --git a/imgs/electronicproduct/list7.png b/imgs/electronicproduct/list7.png new file mode 100644 index 0000000..5be7e5f Binary files /dev/null and b/imgs/electronicproduct/list7.png differ diff --git a/imgs/electronicproduct/topbg.png b/imgs/electronicproduct/topbg.png new file mode 100644 index 0000000..8992807 Binary files /dev/null and b/imgs/electronicproduct/topbg.png differ diff --git a/imgs/electronicproduct/wholeprocess.png b/imgs/electronicproduct/wholeprocess.png new file mode 100644 index 0000000..ce4c671 Binary files /dev/null and b/imgs/electronicproduct/wholeprocess.png differ diff --git a/imgs/home/agent/ShinDengen.svg b/imgs/home/agent/ShinDengen.svg new file mode 100644 index 0000000..f0eb118 --- /dev/null +++ b/imgs/home/agent/ShinDengen.svg @@ -0,0 +1,3 @@ + + + diff --git a/imgs/home/agent/adi.png b/imgs/home/agent/adi.png new file mode 100644 index 0000000..bcdca7e Binary files /dev/null and b/imgs/home/agent/adi.png differ diff --git a/imgs/home/agent/alliance.svg b/imgs/home/agent/alliance.svg new file mode 100644 index 0000000..bc9e8e4 --- /dev/null +++ b/imgs/home/agent/alliance.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imgs/home/agent/dtt.png b/imgs/home/agent/dtt.png new file mode 100644 index 0000000..d72839d Binary files /dev/null and b/imgs/home/agent/dtt.png differ diff --git a/imgs/home/agent/fxsm.jpg b/imgs/home/agent/fxsm.jpg new file mode 100644 index 0000000..4daf161 Binary files /dev/null and b/imgs/home/agent/fxsm.jpg differ diff --git a/imgs/home/agent/ght.png b/imgs/home/agent/ght.png new file mode 100644 index 0000000..9ac07b0 Binary files /dev/null and b/imgs/home/agent/ght.png differ diff --git a/imgs/home/agent/gy.png b/imgs/home/agent/gy.png new file mode 100644 index 0000000..6044834 Binary files /dev/null and b/imgs/home/agent/gy.png differ diff --git a/imgs/home/agent/hdsc.png b/imgs/home/agent/hdsc.png new file mode 100644 index 0000000..7fd0bb9 Binary files /dev/null and b/imgs/home/agent/hdsc.png differ diff --git a/imgs/home/agent/hrs.png b/imgs/home/agent/hrs.png new file mode 100644 index 0000000..0c3310f Binary files /dev/null and b/imgs/home/agent/hrs.png differ diff --git a/imgs/home/agent/htc.png b/imgs/home/agent/htc.png new file mode 100644 index 0000000..7807e71 Binary files /dev/null and b/imgs/home/agent/htc.png differ diff --git a/imgs/home/agent/jj.svg b/imgs/home/agent/jj.svg new file mode 100644 index 0000000..41a017e --- /dev/null +++ b/imgs/home/agent/jj.svg @@ -0,0 +1 @@ +logo \ No newline at end of file diff --git a/imgs/home/agent/kds.png b/imgs/home/agent/kds.png new file mode 100644 index 0000000..8c02a9a Binary files /dev/null and b/imgs/home/agent/kds.png differ diff --git a/imgs/home/agent/lec.png b/imgs/home/agent/lec.png new file mode 100644 index 0000000..c3724be Binary files /dev/null and b/imgs/home/agent/lec.png differ diff --git a/imgs/home/agent/lw.gif b/imgs/home/agent/lw.gif new file mode 100644 index 0000000..9501ac4 Binary files /dev/null and b/imgs/home/agent/lw.gif differ diff --git a/imgs/home/agent/nordic.png b/imgs/home/agent/nordic.png new file mode 100644 index 0000000..bd974b5 Binary files /dev/null and b/imgs/home/agent/nordic.png differ diff --git a/imgs/home/agent/nxp.svg b/imgs/home/agent/nxp.svg new file mode 100644 index 0000000..8913457 --- /dev/null +++ b/imgs/home/agent/nxp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/agent/omron.svg b/imgs/home/agent/omron.svg new file mode 100644 index 0000000..9803e19 --- /dev/null +++ b/imgs/home/agent/omron.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + diff --git a/imgs/home/agent/onsemi.svg b/imgs/home/agent/onsemi.svg new file mode 100644 index 0000000..352628c --- /dev/null +++ b/imgs/home/agent/onsemi.svg @@ -0,0 +1,42 @@ + + + diff --git a/imgs/home/agent/qm.png b/imgs/home/agent/qm.png new file mode 100644 index 0000000..753922b Binary files /dev/null and b/imgs/home/agent/qm.png differ diff --git a/imgs/home/agent/sl.png b/imgs/home/agent/sl.png new file mode 100644 index 0000000..47443bc Binary files /dev/null and b/imgs/home/agent/sl.png differ diff --git a/imgs/home/agent/smc.png b/imgs/home/agent/smc.png new file mode 100644 index 0000000..ed13ca8 Binary files /dev/null and b/imgs/home/agent/smc.png differ diff --git a/imgs/home/agent/sna.png b/imgs/home/agent/sna.png new file mode 100644 index 0000000..f18544c Binary files /dev/null and b/imgs/home/agent/sna.png differ diff --git a/imgs/home/agent/sskj.png b/imgs/home/agent/sskj.png new file mode 100644 index 0000000..be3896e Binary files /dev/null and b/imgs/home/agent/sskj.png differ diff --git a/imgs/home/agent/st.svg b/imgs/home/agent/st.svg new file mode 100644 index 0000000..a082f49 --- /dev/null +++ b/imgs/home/agent/st.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/imgs/home/agent/texas.png b/imgs/home/agent/texas.png new file mode 100644 index 0000000..db7c78c Binary files /dev/null and b/imgs/home/agent/texas.png differ diff --git a/imgs/home/agent/tsc.svg b/imgs/home/agent/tsc.svg new file mode 100644 index 0000000..8ba8626 --- /dev/null +++ b/imgs/home/agent/tsc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/agent/utc.png b/imgs/home/agent/utc.png new file mode 100644 index 0000000..2349a97 Binary files /dev/null and b/imgs/home/agent/utc.png differ diff --git a/imgs/home/agent/xaw.png b/imgs/home/agent/xaw.png new file mode 100644 index 0000000..7846064 Binary files /dev/null and b/imgs/home/agent/xaw.png differ diff --git a/imgs/home/agent/xt.jpg b/imgs/home/agent/xt.jpg new file mode 100644 index 0000000..374fad2 Binary files /dev/null and b/imgs/home/agent/xt.jpg differ diff --git a/imgs/home/agent/xz.png b/imgs/home/agent/xz.png new file mode 100644 index 0000000..42a9a74 Binary files /dev/null and b/imgs/home/agent/xz.png differ diff --git a/imgs/home/agent/yl.jpg b/imgs/home/agent/yl.jpg new file mode 100644 index 0000000..50481b0 Binary files /dev/null and b/imgs/home/agent/yl.jpg differ diff --git a/imgs/home/arrow.svg b/imgs/home/arrow.svg new file mode 100644 index 0000000..98535d9 --- /dev/null +++ b/imgs/home/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/arrow2.svg b/imgs/home/arrow2.svg new file mode 100644 index 0000000..fd2d7fb --- /dev/null +++ b/imgs/home/arrow2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/arrow3.svg b/imgs/home/arrow3.svg new file mode 100644 index 0000000..5956d0a --- /dev/null +++ b/imgs/home/arrow3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/bannerbg.png b/imgs/home/bannerbg.png new file mode 100644 index 0000000..f6b7581 Binary files /dev/null and b/imgs/home/bannerbg.png differ diff --git a/imgs/home/casebg.png b/imgs/home/casebg.png new file mode 100644 index 0000000..2d92f41 Binary files /dev/null and b/imgs/home/casebg.png differ diff --git a/imgs/home/chipAgentbg.png b/imgs/home/chipAgentbg.png new file mode 100644 index 0000000..0614f4b Binary files /dev/null and b/imgs/home/chipAgentbg.png differ diff --git a/imgs/home/computationalaccelerator.png b/imgs/home/computationalaccelerator.png new file mode 100644 index 0000000..e0ee5c7 Binary files /dev/null and b/imgs/home/computationalaccelerator.png differ diff --git a/imgs/home/coo40z.png b/imgs/home/coo40z.png new file mode 100644 index 0000000..8573b7b Binary files /dev/null and b/imgs/home/coo40z.png differ diff --git a/imgs/home/customized.png b/imgs/home/customized.png new file mode 100644 index 0000000..4079363 Binary files /dev/null and b/imgs/home/customized.png differ diff --git a/imgs/home/deliver.png b/imgs/home/deliver.png new file mode 100644 index 0000000..c370229 Binary files /dev/null and b/imgs/home/deliver.png differ diff --git a/imgs/home/demand.png b/imgs/home/demand.png new file mode 100644 index 0000000..5be7e5f Binary files /dev/null and b/imgs/home/demand.png differ diff --git a/imgs/home/electronicProduct.png b/imgs/home/electronicProduct.png new file mode 100644 index 0000000..d4db3bd Binary files /dev/null and b/imgs/home/electronicProduct.png differ diff --git a/imgs/home/electronicProductbg.png b/imgs/home/electronicProductbg.png new file mode 100644 index 0000000..4988278 Binary files /dev/null and b/imgs/home/electronicProductbg.png differ diff --git a/imgs/home/email.svg b/imgs/home/email.svg new file mode 100644 index 0000000..43179a5 --- /dev/null +++ b/imgs/home/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/home/h6pro.png b/imgs/home/h6pro.png new file mode 100644 index 0000000..19062bd Binary files /dev/null and b/imgs/home/h6pro.png differ diff --git a/imgs/home/logo.png b/imgs/home/logo.png new file mode 100644 index 0000000..6c97a8b Binary files /dev/null and b/imgs/home/logo.png differ diff --git a/imgs/home/logo2.png b/imgs/home/logo2.png new file mode 100644 index 0000000..cbb5cf0 Binary files /dev/null and b/imgs/home/logo2.png differ diff --git a/imgs/home/my100.png b/imgs/home/my100.png new file mode 100644 index 0000000..815148e Binary files /dev/null and b/imgs/home/my100.png differ diff --git a/imgs/home/performance.png b/imgs/home/performance.png new file mode 100644 index 0000000..cd53b28 Binary files /dev/null and b/imgs/home/performance.png differ diff --git a/imgs/home/produce.png b/imgs/home/produce.png new file mode 100644 index 0000000..60c3308 Binary files /dev/null and b/imgs/home/produce.png differ diff --git a/imgs/home/prototype.png b/imgs/home/prototype.png new file mode 100644 index 0000000..20d9347 Binary files /dev/null and b/imgs/home/prototype.png differ diff --git a/imgs/technology/consulting.png b/imgs/technology/consulting.png new file mode 100644 index 0000000..b0d9568 Binary files /dev/null and b/imgs/technology/consulting.png differ diff --git a/imgs/technology/customization.png b/imgs/technology/customization.png new file mode 100644 index 0000000..5d4d5bd Binary files /dev/null and b/imgs/technology/customization.png differ diff --git a/imgs/technology/product.png b/imgs/technology/product.png new file mode 100644 index 0000000..aa2e327 Binary files /dev/null and b/imgs/technology/product.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..73b34f3 --- /dev/null +++ b/index.html @@ -0,0 +1,485 @@ + + + + + + + 深圳驭鑫科技有限公司 + + + + + + + + + + + + +
+ + + + +
+ + + + +
+ + + + +
+

芯片代理

+
+ +

我们代理多家国际知名芯片厂商的高性能芯片,涵盖通信、嵌入式、汽车电子等多个领域,提供全系列的芯片选型与供应服务,确保为客户提供最佳的解决方案。

+ + + + + +
+ + +
+ +
+

电子产品设计生产制造服务

+

+ 我们提供全方位的电子产品设计与制造服务,涵盖从需求分析、产品设计、样机开发、生产制造到产品交付的全过程。我们依托先进的技术和工艺,致力于为客户提供高性能、高质量的电子产品解决方案。 +

+ + +
+ + + +
+ + +
+

云计算服务器设计生产制造销售

+
+ +

我们提供从云计算服务器的设计、生产到销售的全方位服务,致力于为数据中心、企业客户及云计算平台提供高效、稳定、可扩展的服务器解决方案。

+ + +
+
+ 量身定制云计算服务器 +
量身定制云计算服务器
+
+
+ 电子产品设计 +
性能稳定高效
+
+ +
+ + + +
+ + + +
+ +
+

服务案例

+ + +
+
+ h6pro +
运算加速器 H6PRO
+
+

适用于

+
    +
  • 大规模数据处理
  • +
  • 高性能计算
  • + +
+
+ +
+ + arrow + +
+
+
+ my100 +
MY100服务器
+
+

适用于

+ +
    +
  • 数据中心
  • +
  • 企业级应用
  • +
  • 云计算平台
  • +
+
+
+ + arrow + +
+
+
+ c0040z +
C0040Z-服务器
+
+

适用于

+ +
    +
  • 高性能计算
  • + +
  • 大数据处理
  • +
+
+
+ + arrow + +
+
+ +
+ + + +
+ + + +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/js/aboutYuxin.js b/js/aboutYuxin.js new file mode 100644 index 0000000..05b5f90 --- /dev/null +++ b/js/aboutYuxin.js @@ -0,0 +1,176 @@ +// 将地图相关的变量和函数提升到全局作用域 +let map = null; +let marker = null; +let infoWindow = null; + +// 地图数据配置 +const mapData = { + address: { + zh: '广东省深圳市南山区高新中三道2号软件园一期7栋303室', + en: '' + }, + companyName: { + zh: '深圳驭鑫科技有限公司', + en: '' + }, + phone:{ + zh: '13420976989', + en: '+86 13420976989' + }, + + contactInfo: { + zh: { + address: '地址', + phone: '电话', + email: '邮箱' + }, + en: { + address: 'Address', + phone: 'Phone', + email: 'Email' + } + } +}; + +// 创建信息窗体内容 +function createInfoWindowContent(lang) { + return ` +
+

${mapData.companyName[lang]}

+

+ ${mapData.contactInfo[lang].address}:${mapData.address[lang]} +

+ +

+ ${mapData.contactInfo[lang].email}:zmz@yxsilicon.com +

+
+ `; +} + +// 更新地图信息 +function updateMapInfo(lang) { + if (marker && infoWindow) { + // 更新标记标题 + marker.setTitle(mapData.companyName[lang]); + + // 更新信息窗体内容 + infoWindow.setContent(createInfoWindowContent(lang)); + + // 如果信息窗体是打开状态,重新打开以更新内容 + if (infoWindow.getIsOpen()) { + infoWindow.open(map, marker.getPosition()); + } + } +} + +// 初始化地图 +function initAMap() { + try { + // 获取当前语言 + const currentLang = window.currentLang || localStorage.getItem('siteLang') || "zh"; + + // 先加载所需插件 + AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], function() { + const geocoder = new AMap.Geocoder({ + city: "深圳", + radius: 1000 + }); + + geocoder.getLocation(mapData.address.zh, function(status, result) { + if (status === 'complete' && result.info === 'OK') { + const lnglat = result.geocodes[0].location; + + // 创建地图实例 + map = new AMap.Map('mapContainer', { + zoom: 16, + center: [lnglat.lng, lnglat.lat], + viewMode: '3D', + resizeEnable: true, + pitch: 40, + mapStyle: 'amap://styles/normal' + }); + + // 创建标记 + marker = new AMap.Marker({ + position: [lnglat.lng, lnglat.lat], + title: mapData.companyName[currentLang], + animation: 'AMAP_ANIMATION_DROP', + offset: new AMap.Pixel(-13, -30) + }); + + map.add(marker); + + // 创建信息窗体 + infoWindow = new AMap.InfoWindow({ + content: createInfoWindowContent(currentLang), + offset: new AMap.Pixel(0, -30), + closeWhenClickMap: true + }); + + // 地图加载完成后打开信息窗体 + map.on('complete', function() { + infoWindow.open(map, [lnglat.lng, lnglat.lat]); + }); + + // 点击标记时打开信息窗体 + marker.on('click', function() { + infoWindow.open(map, marker.getPosition()); + }); + + // 添加控件 + map.addControl(new AMap.ToolBar({ + position: 'RB' + })); + + map.addControl(new AMap.Scale()); + + // 确保标记点居中显示 + map.setFitView([marker]); + + // 响应式处理 + window.addEventListener('resize', function() { + map.resize(); + map.setCenter([lnglat.lng, lnglat.lat]); + }); + } else { + console.error('地址解析失败:', result); + const mapContainer = document.getElementById('mapContainer'); + if (mapContainer) { + mapContainer.innerHTML = + '
地址定位失败,请刷新重试
'; + } + } + }); + }); + } catch (error) { + console.error('地图初始化失败:', error); + const mapContainer = document.getElementById('mapContainer'); + if (mapContainer) { + mapContainer.innerHTML = + '
地图加载失败,请刷新重试
'; + } + } +} + + +// 在文件末尾添加 +document.addEventListener('DOMContentLoaded', function() { + // 确保地图容器存在 + const mapContainer = document.getElementById('mapContainer'); + if (mapContainer) { + // 初始化地图 + initAMap(); + } else { + console.error('地图容器不存在'); + } + if (window.location.hash === '#address-li') { + const addressLi = document.getElementById('address-li'); + if (addressLi) { + addressLi.scrollIntoView({ behavior: 'smooth', block: 'start' }); + + } + } + + +}); \ No newline at end of file diff --git a/js/footer.js b/js/footer.js new file mode 100644 index 0000000..3bffd7a --- /dev/null +++ b/js/footer.js @@ -0,0 +1,9 @@ +document.addEventListener('DOMContentLoaded', function() { + document.querySelectorAll('.footer-case-link').forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + window.name = this.dataset.index + '|scroll'; + window.location.href = this.href; + }); + }); + }); \ No newline at end of file diff --git a/js/header.js b/js/header.js new file mode 100644 index 0000000..1d30d49 --- /dev/null +++ b/js/header.js @@ -0,0 +1,63 @@ +document.addEventListener('DOMContentLoaded', function () { + /** 主营业务下拉菜单与遮罩层交互 */ + const dropdown = document.querySelector('.nav-dropdown'); + const mask = document.querySelector('.dropdown-mask'); + const navLink = dropdown?.querySelector('.nav-link'); + + if (dropdown || mask || navLink) { + const handleToggleDropdown = (e) => { + e.preventDefault(); + const isOpen = dropdown.classList.contains('open'); + if (isOpen) { + dropdown.classList.remove('open'); + dropdown.setAttribute('aria-expanded', 'false'); + mask.classList.remove('active'); + } else { + dropdown.classList.add('open'); + dropdown.setAttribute('aria-expanded', 'true'); + mask.classList.add('active'); + } + }; + + const handleCloseDropdown = () => { + dropdown.classList.remove('open'); + dropdown.setAttribute('aria-expanded', 'false'); + mask.classList.remove('active'); + }; + + // 点击“主营业务”切换下拉 + navLink.addEventListener('click', handleToggleDropdown); + + // 遮罩层点击关闭 + mask.addEventListener('click', handleCloseDropdown); + + // 键盘无障碍支持(Enter/Space) + dropdown.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleToggleDropdown(e); + } + if (e.key === 'Escape') { + handleCloseDropdown(); + } + }); + + } + + + + /** 下拉菜单箭头hover切换图片 */ + // const dropdownMenuItems = document.querySelectorAll('.dropdown-menu li'); + // if (dropdownMenuItems.length) { + // dropdownMenuItems.forEach((li) => { + // li.addEventListener('mouseenter', () => { + // const img = li.querySelector('.dropdown-item img'); + // if (img) img.src = './imgs/home/arrow.svg'; + // }); + // li.addEventListener('mouseleave', () => { + // const img = li.querySelector('.dropdown-item img'); + // if (img) img.src = './imgs/home/arrow2.svg'; + // }); + // }); + // } +}); \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..e58a765 --- /dev/null +++ b/js/index.js @@ -0,0 +1,218 @@ +document.addEventListener('DOMContentLoaded', function () { + + + + + /** 关于驭鑫箭头hover切换图片 */ + const aboutArrow = document.querySelector('.about-us-arrow img'); + const aboutArrowBox = document.querySelector('.about-us-arrow'); + if (aboutArrow || aboutArrowBox) { + aboutArrowBox.addEventListener('click', () => { + window.location.href = './html/aboutYuxin.html'; + }); + aboutArrowBox.addEventListener('mouseenter', () => { + aboutArrow.src = './imgs/home/arrow.svg'; + }); + aboutArrowBox.addEventListener('mouseleave', () => { + aboutArrow.src = './imgs/home/arrow2.svg'; + }); + } + + + // arrowBox hover 切换图片和背景 + const arrowBox = document.querySelector('.arrowBox'); + const arrowImg = arrowBox?.querySelector('img'); + if (arrowBox && arrowImg) { + arrowBox.addEventListener('mouseenter', () => { + arrowImg.src = './imgs/home/arrow.svg'; + }); + arrowBox.addEventListener('mouseleave', () => { + arrowImg.src = './imgs/home/arrow2.svg'; + }); + } + + // ------------------------芯片代理区滚动图区-------------------------------- + const container = document.querySelector('.brand-carousel-container'); + const list = document.querySelector('.brand-carousel-list'); + const btnLeft = document.querySelector('.brand-btn.left'); + const btnRight = document.querySelector('.brand-btn.right'); + + if (container && list) { + const clone = list.cloneNode(true); + clone.classList.add('brand-carousel-list-clone'); + list.parentNode.appendChild(clone); + + list.style.display = 'inline-flex'; + clone.style.display = 'inline-flex'; + container.style.whiteSpace = 'nowrap'; + + let scrollSpeed = 1; + let isHovering = false; + let pauseTimer = null; + + container.addEventListener('mouseenter', () => { isHovering = true; }); + container.addEventListener('mouseleave', () => { isHovering = false; }); + + function loopScroll() { + if (!isHovering) { + if (container.scrollLeft >= list.scrollWidth) { + container.scrollLeft -= list.scrollWidth; + } else { + container.scrollLeft += scrollSpeed; + } + } + requestAnimationFrame(loopScroll); + } + loopScroll(); + + // 动态获取单个brand-item的宽度(含margin) + function getItemWidth() { + const item = list.querySelector('.brand-item'); + if (!item) return 200; + const style = getComputedStyle(item); + // 只加margin-right,因为只有右间隔 + return item.offsetWidth + parseFloat(style.marginRight || 0); + } + + // 修改后的滚动逻辑 + function scrollByStep(step) { + isHovering = true; + if (pauseTimer) clearTimeout(pauseTimer); + pauseTimer = setTimeout(() => { isHovering = false; }, 1500); + + const items = list.querySelectorAll('.brand-item'); + if (items.length === 0) return; + + // 动态计算每个项目的宽度(包括margin) + const itemWidths = Array.from(items).map(item => { + const style = getComputedStyle(item); + return item.offsetWidth + parseFloat(style.marginRight || 0); + }); + + // 计算当前第一个完整显示的项目的索引 + let currentScroll = container.scrollLeft; + let currentIndex = 0; + let accumulatedWidth = 0; + + for (let i = 0; i < itemWidths.length; i++) { + accumulatedWidth += itemWidths[i]; + if (accumulatedWidth > currentScroll) { + currentIndex = i; + break; + } + } + + // 计算目标索引,每次滑动3个项目 + let targetIndex = currentIndex + step * 3; + targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1)); + + // 计算目标滚动位置 + let targetScroll = 0; + for (let i = 0; i < targetIndex; i++) { + targetScroll += itemWidths[i]; + } + + // 限制最大滚动距离 + const maxScroll = list.scrollWidth - container.offsetWidth; + targetScroll = Math.min(targetScroll, maxScroll); + + // 应用滚动 + container.scrollTo({ + left: targetScroll, + behavior: 'smooth' + }); + } + + // 绑定左右按钮事件 + if (btnLeft) { + btnLeft.addEventListener('click', () => { + scrollByStep(-1); + }); + } + if (btnRight) { + btnRight.addEventListener('click', () => { + scrollByStep(1); + }); + } + } + + + // -----------------------------电子产品设计生产制造服务区卡片轮播-------------------------------- + const cardContainer = document.querySelector('.card-carousel-container'); + const cardList = document.querySelector('.card-carousel-list'); + + if (cardContainer && cardList) { + // 克隆列表实现无缝滚动 + const clone = cardList.cloneNode(true); + clone.classList.add('card-carousel-list-clone'); + cardList.parentNode.appendChild(clone); + + // 设置样式 + cardList.style.display = 'inline-flex'; + clone.style.display = 'inline-flex'; + cardContainer.style.whiteSpace = 'nowrap'; + + let scrollSpeed = 1; // 增加滚动速度 + let isHovering = false; + + // 鼠标悬停暂停 + cardContainer.addEventListener('mouseenter', () => { + console.log('Mouse enter - pausing scroll'); + isHovering = true; + }); + cardContainer.addEventListener('mouseleave', () => { + console.log('Mouse leave - resuming scroll'); + isHovering = false; + }); + + function loopScroll() { + if (!isHovering) { + if (cardContainer.scrollLeft >= cardList.scrollWidth) { + console.log('Resetting scroll position'); + cardContainer.scrollLeft = 0; + } else { + cardContainer.scrollLeft += scrollSpeed; + } + } + requestAnimationFrame(loopScroll); + } + + // 启动滚动 + console.log('Starting scroll animation'); + loopScroll(); + + // 调试信息 + console.log('Container width:', cardContainer.offsetWidth); + console.log('List width:', cardList.scrollWidth); + console.log('Clone width:', clone.scrollWidth); + console.log('Initial scroll position:', cardContainer.scrollLeft); + + + } + + + + // -----------------------点击跳转服务案例页面对应项目-------------------------------- + document.querySelectorAll('.service-case-link').forEach(link => { + link.addEventListener('click', function (e) { + e.preventDefault(); + // 传递 index 和 scroll 标记 + window.name = this.dataset.index + '|scroll'; + window.location.href = this.href; + }); + }); + + // -------绑定banner箭头跳转-------------- + function handleCaseJump(selector) { + document.querySelectorAll(selector).forEach(link => { + link.addEventListener('click', function (e) { + e.preventDefault(); + window.name = this.dataset.index + '|scroll'; + window.location.href = this.href; + }); + }); + } + + // 绑定banner箭头跳转 + handleCaseJump('.arrowBox[data-index]'); +}); \ No newline at end of file diff --git a/js/serviceCases.js b/js/serviceCases.js new file mode 100644 index 0000000..f16b63c --- /dev/null +++ b/js/serviceCases.js @@ -0,0 +1,114 @@ +// 假设放在