重写驭鑫网站 当前已完成 首页、关于驭鑫页面
This commit is contained in:
parent
4b4ecee679
commit
c7dec1cf35
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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: 80%;
|
||||||
|
}
|
||||||
|
.footer-links-list{
|
||||||
|
width: 80%;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom .record{
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom .record:hover{
|
||||||
|
color: #00A0D2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,260 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,648 @@
|
||||||
|
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 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;
|
||||||
|
padding: 1vw 0;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
.brand-carousel-container::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.brand-carousel-list,
|
||||||
|
.brand-carousel-list-clone {
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.brand-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 160px;
|
||||||
|
max-width: 180px;
|
||||||
|
/* background: palegoldenrod; */
|
||||||
|
margin-right: 2vw;
|
||||||
|
}
|
||||||
|
.brand-item:first-child {
|
||||||
|
margin-left: 2vw;
|
||||||
|
}
|
||||||
|
.brand-item img {
|
||||||
|
height: 1.8vw;
|
||||||
|
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: 2;
|
||||||
|
width: 2vw;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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: 1vw;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,243 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>YXSILICON</title>
|
||||||
|
<link rel="icon" href="../imgs/home/logo.png">
|
||||||
|
<link rel="stylesheet" href="../css/base.css">
|
||||||
|
<link rel="stylesheet" href="../css/header.css">
|
||||||
|
<link rel="stylesheet" href="../css/footer.css">
|
||||||
|
<link rel="stylesheet" href="../css/aboutYuxin.css">
|
||||||
|
<script src="../js/header.js"></script>
|
||||||
|
<!-- 在 head 标签中确保正确引入 -->
|
||||||
|
<script>
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: 'd7d163684cbe3ea85f182a42cd1b8880',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="https://webapi.amap.com/maps?v=2.0&key=d8d0391f0356497ccdc1c0f13d4a8c33&plugin=AMap.Geocoder,AMap.ToolBar,AMap.Scale"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="../js/aboutYuxin.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="../imgs/home/logo.png" alt="logo">
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="../index.html" class="nav-link ">
|
||||||
|
首页
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#" class="nav-link active">
|
||||||
|
关于驭鑫
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item nav-dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<a href="../html/mainBusiness.html" class="nav-link ">
|
||||||
|
主营业务 <span class="arrow" aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-label="主营业务下拉菜单">
|
||||||
|
<li><a href="../html/chipAgent.html">芯片代理 <div class="dropdown-item"><img
|
||||||
|
src="../imgs/home/arrow2.svg" class="dropdown-arrow" alt="arrow"></div></a></li>
|
||||||
|
<li><a href="../html/electronicProduct.html">电子产品设计生产制造服务 <div class="dropdown-item"><img
|
||||||
|
src="../imgs/home/arrow2.svg" class="dropdown-arrow" alt="arrow"></div></a></li>
|
||||||
|
<li><a href="../html/cloudServer.html">云计算服务器设计生产制造销售 <div class="dropdown-item"><img
|
||||||
|
src="../imgs/home/arrow2.svg" class="dropdown-arrow" alt="arrow"></div></a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="../html/serviceCase.html" class="nav-link">
|
||||||
|
服务案例
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="../html/technicalSupport.html" class="nav-link">
|
||||||
|
技术支持
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item contactUs">
|
||||||
|
<a href="mailto:zmz@yxsilicon.com" class="nav-link emailBox">
|
||||||
|
<span>联系我们</span>
|
||||||
|
<div class="contactUs-email">
|
||||||
|
<img src="../imgs/home/email.svg" alt="email">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="dropdown-mask" tabindex="0" aria-label="下拉菜单遮罩层"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="about-us-section">
|
||||||
|
<div class="about-us-bg">
|
||||||
|
<div class="about-us-content">
|
||||||
|
<h2>关于驭鑫</h2>
|
||||||
|
<p>我们公司始终致力于为客户提供创新、高效、稳定的产品与服务，凭借先进的技术和丰富的行业经验，帮助客户在市场中取得成功。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="about-us-section2">
|
||||||
|
<div class="about-us-section2-bg">
|
||||||
|
<ul class="about-us-section2-list">
|
||||||
|
<li>
|
||||||
|
<div class="section2-list-item1">
|
||||||
|
<h2>经营理念</h2>
|
||||||
|
</div>
|
||||||
|
<div class="section2-list-item2">
|
||||||
|
<p class="p1">Philosophy</p>
|
||||||
|
<h3>相信人和科技的无限潜力</h3>
|
||||||
|
<p class="p2">科技具有改变人们生活、社会和文明的力量。</p>
|
||||||
|
<p class="p2">我们仍然相信，人能激发科技潜力，并创造美好未来的可能也是无限的。</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="section2-list-item1">
|
||||||
|
<h2>发展目标</h2>
|
||||||
|
</div>
|
||||||
|
<div class="section2-list-item2">
|
||||||
|
<p class="p1">Target</p>
|
||||||
|
<h3>成为行业领先的芯片代理商</h3>
|
||||||
|
<p class="p2">聚焦芯片代理服务、芯片进出口服务、云计算服务器设备研发、生成、销售。</p>
|
||||||
|
<p class="p2">形成有持续盈利能力的产品线。</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="section2-list-item1">
|
||||||
|
<h2>价值观</h2>
|
||||||
|
</div>
|
||||||
|
<div class="section2-list-item2">
|
||||||
|
<p class="p1">value</p>
|
||||||
|
<h3>科学</h3>
|
||||||
|
<p class="p2">我们根据收集的数据、假设检验、反复论证，并做出的科学判断。</p>
|
||||||
|
|
||||||
|
<h3>合作</h3>
|
||||||
|
<p class="p2">建立信任和尊重的文化氛围，共享信息和知识、创造解决方案并加以实施。</p>
|
||||||
|
|
||||||
|
<h3>共赢</h3>
|
||||||
|
<p class="p2">通过协作、分享资源、共创价值，实现企业和客户利益的最大化，共创美好未来。</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="about-us-section3">
|
||||||
|
<div class="about-us-section3-bg">
|
||||||
|
<div class="section3-item1">
|
||||||
|
<h3>公司简介</h3>
|
||||||
|
</div>
|
||||||
|
<div class="section3-item2">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<h4>公司名称</h4>
|
||||||
|
<p>深圳驭鑫科技有限公司</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>成立</h4>
|
||||||
|
<p>2021年1月</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>主营业务</h4>
|
||||||
|
<p>销售代理，芯片进出口，云计算服务器设备研发生产销售</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h4>地址</h4>
|
||||||
|
<p>广东省深圳市南山区高新中三道2号软件园一期7栋303室</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="map">
|
||||||
|
<div class="addressBox-bottom">
|
||||||
|
<div id="mapContainer"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 6. 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-main">
|
||||||
|
<div class="footer-logo">
|
||||||
|
<img src="../imgs/home/logo2.png" alt="logo">
|
||||||
|
<div>广东省深圳市南山区高新中三道2号软件园一期7栋303室</div>
|
||||||
|
<div><a href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a></div>
|
||||||
|
<div>工作时间: 9:30-18:00</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<div>
|
||||||
|
<h4>产品与服务</h4>
|
||||||
|
<ul class="footer-links-list">
|
||||||
|
<li><a href="./chipAgent.html"> <img src="../imgs/home/arrow3.svg" alt="arrow">芯片代理</a></li>
|
||||||
|
<li><a href="./electronicProduct.html"> <img src="../imgs/home/arrow3.svg"
|
||||||
|
alt="arrow">电子产品设计生产制造服务</a></li>
|
||||||
|
<li><a href="./cloudServer.html"> <img src="../imgs/home/arrow3.svg"
|
||||||
|
alt="arrow">云计算服务器设计生产制造销售</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>解决方案</h4>
|
||||||
|
<ul class="footer-links-list">
|
||||||
|
<li><a href="./serviceCases.html"> <img src="../imgs/home/arrow3.svg" alt="arrow">运算加速器
|
||||||
|
H6PRO</a></li>
|
||||||
|
<li><a href="./serviceCases.html"> <img src="../imgs/home/arrow3.svg" alt="arrow">MY100服务器</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="./serviceCases.html"> <img src="../imgs/home/arrow3.svg" alt="arrow">C0040Z-服务器</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="./serviceCases.html"> <img src="../imgs/home/arrow3.svg" alt="arrow">云计算水冷服务器</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>关于我们</h4>
|
||||||
|
<ul class="footer-links-list">
|
||||||
|
<li><a href="./technicalSupport.html"> <img src="../imgs/home/arrow3.svg" alt="arrow">技术咨询</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="./technicalSupport.html"> <img src="../imgs/home/arrow3.svg" alt="arrow">定制化开发</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="./technicalSupport.html"> <img src="../imgs/home/arrow3.svg"
|
||||||
|
alt="arrow">产品维护与升级</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>Copyright ©深圳驭鑫科技有限公司 <a class="record"
|
||||||
|
href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2021012067号-2</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="199" height="67.82" viewBox="0 0 199 67.82"><polyline points="55.71 0 55.71 40.68 20.69 0 0 0 0 67.32 20.71 67.31 20.7 26.64 55.72 67.32 76.38 33.66 55.72 0" fill="#f9b500" stroke-width="0"/><path d="m174.54,0h-29.5l-20.67,33.65,20.66,33.66h.01v-14.87s34.91,0,34.91,0c14.65,0,19.04-11.5,19.04-21.53v-7.91C199,9.84,194.24,0,174.54,0m5.16,27.16c0,3.99-1.87,8.59-6.72,8.59h-27.91v-19.04h26.14c6.25,0,8.49,2.59,8.49,7.14v3.32Z" fill="#69ca00" stroke-width="0"/><polygon points="118.11 0 114.33 0 100.38 22.38 86.42 0 82.59 0 61.94 0 82.6 33.66 61.94 67.32 82.63 67.32 86.42 67.32 100.38 44.94 114.33 67.32 118.15 67.32 138.82 67.31 118.15 33.66 138.82 0 118.11 0" fill="#0eafe0" stroke-width="0"/></svg>
|
||||||
|
After Width: | Height: | Size: 797 B |
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
|
y="0px" viewBox="0 0 120 25" style="enable-background:new 0 0 120 25;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#005EB8;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M12.1,19.3c-3.7,0-6.8-2.9-6.8-6.8c0-3.7,2.9-6.8,6.8-6.8c3.7,0,6.8,2.9,6.8,6.8
|
||||||
|
C18.9,16.2,15.9,19.3,12.1,19.3 M12.1,24.1c6.4,0,11.6-5.2,11.6-11.6c0-6.5-5.2-11.6-11.6-11.6C5.7,0.9,0.5,6,0.5,12.5
|
||||||
|
C0.6,18.9,5.8,24.1,12.1,24.1"/>
|
||||||
|
<path class="st0" d="M87.2,24.1c-6.4,0-11.6-5.2-11.6-11.6c0-6.5,5.2-11.6,11.6-11.6c6.5,0,11.6,5.2,11.6,11.6S93.5,24.1,87.2,24.1
|
||||||
|
M87.2,19.3c3.7,0,6.8-2.9,6.8-6.8c0-3.7-2.9-6.8-6.8-6.8c-3.7,0-6.8,2.9-6.8,6.8C80.5,16.2,83.4,19.3,87.2,19.3"/>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M26.2,1.6v21.8H31V5.6h5.3v17.9h4.8V5.6H43c1.9,0,3.3,1.6,3.3,3.3v14.4h4.8V9.1c0-4.3-3.4-7.6-7.6-7.6H31.2
|
||||||
|
C29.5,1.4,27.8,1.5,26.2,1.6z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M101.1,1.6v21.8h4.8V5.6h5.4c1.9,0,3.3,1.6,3.3,3.3v14.4h4.8V9.1c0-4.3-3.4-7.6-7.6-7.6h-6
|
||||||
|
C104.3,1.4,102.6,1.5,101.1,1.6z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M55.1,1.6v21.8h4.8V5.6h5.9c1.9,0,3.3,1.6,3.3,3.3s-1.6,3.3-3.3,3.3h-4.2L69,23.4h6l-5.4-7.9
|
||||||
|
c2.5-1,4.4-3.6,4.4-6.6c0-4.2-3.3-7.5-7.5-7.5H60C58.4,1.4,56.8,1.5,55.1,1.6z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,42 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 432.8 75.6" style="enable-background:new 0 0 432.8 75.6;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#DA7F3A;}
|
||||||
|
.st1{fill:#3A4D54;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M403.5,1.8c0,5.1,0,24.2,0,25.6c0,0,0,0,0,0c2.6-8.4,12.3-26.2,12.8-27.2c0,0,0,0,0,0h-11.1
|
||||||
|
C404.3,0.1,403.5,0.9,403.5,1.8z"/>
|
||||||
|
<path class="st1" d="M278.2,11.5c-7-7.4-15.4-11-25.2-11c-10,0-18.4,3.7-25.4,11c-7,7.4-10.4,16.2-10.4,26.6
|
||||||
|
c0,10.4,3.5,19.1,10.4,26.3c6.9,7.4,15.3,11,25.4,11c7.5,0,14.3-2.2,20.3-6.6c6-4.4,10.3-10.1,12.9-17.1l0.8-2.2
|
||||||
|
c0.3-0.8-0.3-1.6-1.1-1.6H275c-0.5,0-0.9,0.3-1.1,0.7l-0.4,0.9c-2,4.2-4.9,7.5-8.5,9.8c-3.6,2.4-7.6,3.6-12,3.6
|
||||||
|
c-6.5,0-11.9-2.4-16.4-7.3c-3.7-4-6-8.6-6.7-13.9c-0.1-0.7,0.5-1.3,1.2-1.3h56.4c0.6,0,1.2-0.5,1.2-1.2v-1.6
|
||||||
|
C288.7,27.6,285.2,18.8,278.2,11.5z M272.7,28.2h-39.5c-0.9,0-1.4-0.9-1-1.7c1.6-3.2,3.8-6,6.5-8.4c4.2-3.5,8.9-5.2,14.2-5.2
|
||||||
|
c5.3,0,10.1,1.7,14.3,5.2c2.8,2.4,4.9,5.2,6.5,8.4C274.1,27.3,273.5,28.2,272.7,28.2z M208,45.1c-1.3-2.5-3.4-4.8-6.3-6.9
|
||||||
|
c-0.7-0.5-1.4-1-2.2-1.4c-0.8-0.5-1.6-0.9-2.6-1.3c-1.8-0.8-3.3-1.4-4.4-1.8l-5.8-1.9c-6.1-1.7-10.6-3.7-13.4-6
|
||||||
|
c-3.1-2.5-3.8-5.4-2-8.8c0.8-1.5,2.3-2.7,4.3-3.6c2.3-0.9,4.7-1.4,7.3-1.4c3.4,0,6.5,1,9.1,2.9c2.3,1.8,3.4,4,3.4,6.8v1.9
|
||||||
|
c0,0.6,0.5,1,1,1h10.9c0.6,0,1-0.5,1-1v-1.9c0-6.2-2.5-11.3-7.5-15.5c-4.7-4.1-10.6-6.1-17.9-6.1c-5.3,0-10.1,1.2-14.4,3.6
|
||||||
|
c-4.5,2.5-7.6,5.8-9.4,10c-2,4.8-2,9.5,0,13.9c2.3,5.2,6.8,9.3,13.6,12.5l4.1,1.6c1.5,0.5,3.2,1,5,1.6c3.5,1,5.9,1.8,7.1,2.3
|
||||||
|
c5.5,2.4,8.3,5.3,8.3,8.6c0,2.5-1.3,4.6-4,6.4c-3,2-6.5,3-10.4,3c-3.7,0-7.1-1-10.1-3.1c-2.8-2-4.1-4.3-4.1-6.9v-1.7
|
||||||
|
c0-0.6-0.5-1-1-1H157c-0.6,0-1,0.5-1,1v1.7c0,3.3,0.8,6.3,2.3,9c1.4,2.7,3.5,5,6.4,7c5.4,3.8,11.6,5.8,18.4,5.8
|
||||||
|
c6.9,0,13.1-1.9,18.5-5.8c2.9-2.1,5-4.4,6.4-7c1.5-2.8,2.3-5.8,2.3-9C210.2,50.6,209.5,47.7,208,45.1z M148.7,32.5
|
||||||
|
c0.1-5.9-0.9-15.2-9.9-23.8C132.9,3,125,0.1,115.3,0.1c0,0,0,0,0,0c-9.7,0-17.6,2.9-23.5,8.5c-8.8,8.5-10,18-9.9,23.8
|
||||||
|
c0,0.4,0,35.4-0.1,42c0,0.6,0.5,1.1,1.1,1.1h11.8c0.6,0,1.1-0.5,1.1-1.1c0-6.7-0.1-31.8,0-40.1c0-6.4,2.1-12.3,5.6-15.8
|
||||||
|
c0,0,5.6-6.1,13.9-5.9c6.2,0.2,10.3,2.4,14,6c3.1,2.9,5.5,9.7,5.6,16c0,6.3,0,39.6,0,39.6c0,0.6,0.5,1.1,1.1,1.1l11.8,0.1
|
||||||
|
c0.6,0,1.1-0.5,1.1-1.1L148.7,32.5z M70.4,18.3C67.1,12.7,62.7,8.2,57,5c-5.6-3.2-12.1-4.8-19.4-4.8c-7.4,0-13.9,1.6-19.5,4.8
|
||||||
|
C12.5,8.2,8.1,12.7,4.8,18.3C1.6,24,0,30.5,0,38c0,7.3,1.6,13.8,4.8,19.5c3.2,5.7,7.7,10.1,13.3,13.3c5.6,3.2,12.1,4.8,19.5,4.8
|
||||||
|
c7.4,0,13.9-1.6,19.5-4.8c5.6-3.2,10.1-7.6,13.2-13.3c3.2-5.7,4.8-12.1,4.8-19.5C75.2,30.5,73.6,24,70.4,18.3z M58.8,51.1
|
||||||
|
c-2,3.8-4.9,6.8-8.5,9c-3.6,2.2-7.8,3.3-12.6,3.3c-4.7,0-8.9-1.1-12.6-3.3c-3.6-2.2-6.5-5.2-8.6-9c-2.1-3.8-3.1-8.2-3.1-13.2
|
||||||
|
c0-5,1-9.4,3.1-13.2c2.1-3.8,5-6.9,8.6-9c3.6-2.2,7.8-3.3,12.6-3.3c4.7,0,8.9,1.1,12.6,3.3c3.6,2.2,6.5,5.2,8.5,9
|
||||||
|
c2,3.8,3.1,8.3,3.1,13.2C61.8,42.9,60.8,47.3,58.8,51.1z M415.6,75h-10.6c-0.8,0-1.4-0.6-1.3-1.4c1.1-19,4.5-47,13.5-66.2
|
||||||
|
c0.1-0.1,0.3-0.1,0.3,0.1v65.6C417.4,74.2,416.6,75,415.6,75z M396.5,28.4v45c0,1-0.8,1.9-1.9,1.9H385c-1,0-1.9-0.8-1.9-1.9v-45
|
||||||
|
c0-4.2-1.5-7.8-4.5-10.8c-2.9-2.9-6.5-4.4-10.7-4.4c-4.2,0-7.8,1.5-10.7,4.5c-3,2.9-4.5,6.5-4.5,10.7v45c0,1-0.8,1.9-1.9,1.9h-9.4
|
||||||
|
c-1,0-1.9-0.8-1.9-1.9v-45c0-4-1.5-7.7-4.5-10.8c-3.1-2.9-6.7-4.4-10.9-4.4c-4.2,0-7.8,1.5-10.7,4.4c-3,3.2-4.5,6.8-4.5,10.8v45
|
||||||
|
c0,1-0.8,1.9-1.9,1.9h-9.5c-1,0-1.9-0.8-1.9-1.9v-45c0-7.8,2.8-14.5,8.4-20.1S316.2,0,324.1,0c5,0,9.8,1.4,14.2,4.2
|
||||||
|
c2.3,1.5,4.5,3.3,6.4,5.3c0.7,0.8,2,0.8,2.7,0c0.7-0.8,1.5-1.5,2.2-2.2c1.2-1.1,2.6-2.2,4.1-3.2c4.4-2.8,9.2-4.2,14.2-4.2
|
||||||
|
c8,0,14.7,2.8,20.3,8.3C393.7,14,396.5,20.7,396.5,28.4z M423,75.3v-4.9h-1.7v-1.1h4.7v1.1h-1.7v4.9H423z M426.8,75.3v-6.1h1.9
|
||||||
|
l1.1,3.7l1.1-3.7h1.9v6.1h-1.2v-4.8l-1.2,4h-1.2l-1.3-4.1v4.9H426.8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="188" height="101" viewBox="0 0 188 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M186.248 0.630615L50.3029 0.640766C50.3055 0.640766 50.3131 0.651779 50.3131 0.651779C39.9981 0.651779 31.1365 6.8181 27.2817 15.611L0.4473 80.2527C0.374443 80.4221 0.332886 80.6033 0.332886 80.7964C0.332886 81.5706 0.970734 82.1974 1.75673 82.1974L63.1421 82.194C67.5042 82.194 69.4049 77.9928 66.0016 74.642L43.4564 53.5491C31.6083 41.9339 36.6896 15.0011 61.2956 15.0011H181.464C182.085 15.0011 182.621 14.6064 182.81 14.0559L187.566 2.56602C187.633 2.40426 187.667 2.22134 187.667 2.03242C187.667 1.25823 187.037 0.630615 186.248 0.630615Z" fill="#03234B"/>
|
||||||
|
<path d="M172.704 33.5323L149.628 33.5568C148.071 33.5568 146.734 34.4962 146.175 35.842L120.319 98.3196C120.217 98.5127 120.158 98.738 120.158 98.9668C120.158 99.7392 120.795 100.366 121.576 100.366L130.192 100.369L130.188 100.361C140.649 100.361 149.677 94.0252 153.442 85.035C153.442 85.035 153.458 85.0451 153.471 85.0553L174.022 35.4516C174.084 35.2907 174.123 35.1162 174.123 34.9341C174.123 34.1565 173.486 33.5323 172.704 33.5323Z" fill="#03234B"/>
|
||||||
|
<path d="M127.342 34.9341C127.342 34.1565 126.704 33.5323 125.919 33.5323H60.4908C56.9452 33.5323 53.8384 37.8952 57.5949 41.3553L79.2126 61.4704C79.2126 61.4704 87.9673 69.5366 86.0895 81.0777C84.4336 91.2402 77.499 97.4624 72.483 99.7003L72.4695 99.7037C72.3492 99.7646 72.2695 99.8866 72.2695 100.017C72.2695 100.212 72.4254 100.369 72.6253 100.369L97.8406 100.373C99.4009 100.373 100.739 99.4343 101.295 98.0875L127.247 35.433C127.309 35.2738 127.342 35.1085 127.342 34.9341Z" fill="#03234B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.31 27.43"><defs><style>.cls-1{fill:#00a0d1;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path id="Vector_273_Stroke_" data-name="Vector 273 Stroke " class="cls-1" d="M0,15.5V11.94H29.53V15.5Z"/><path id="Vector_274_Stroke_" data-name="Vector 274 Stroke " class="cls-1" d="M30.78,12.46a1.76,1.76,0,0,1,0,2.51L18.33,27.43l-2.52-2.51L27,13.72,15.81,2.52,18.33,0Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 481 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.31 27.43"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path id="Vector_273_Stroke_" data-name="Vector 273 Stroke " class="cls-1" d="M0,15.5V11.94H29.53V15.5Z"/><path id="Vector_274_Stroke_" data-name="Vector 274 Stroke " class="cls-1" d="M30.78,12.46a1.76,1.76,0,0,1,0,2.51L18.33,27.43l-2.52-2.51L27,13.72,15.81,2.52,18.33,0Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 478 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.24 36.58"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.98px;}.cls-2{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><ellipse class="cls-1" cx="18.12" cy="18.29" rx="17.13" ry="17.3"/><path id="Vector_274_Stroke_" data-name="Vector 274 Stroke " class="cls-2" d="M24.19,17.41a1.19,1.19,0,0,1,0,1.66l-8.12,8.2-1.64-1.66,7.3-7.37-7.3-7.38,1.64-1.65Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 507 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 616 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 652 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.73 64.48"><defs><style>.cls-1{fill:#00a0d1;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="Email_email_2" data-name="Email email 2"><g id="email_2" data-name="email 2"><path id="Rectangle_743_Stroke_" data-name="Rectangle 743 Stroke " class="cls-1" d="M0,6.91V57.58a6.9,6.9,0,0,0,6.91,6.9H89.82a6.91,6.91,0,0,0,6.91-6.9V6.91A6.91,6.91,0,0,0,89.82,0H6.91A6.91,6.91,0,0,0,0,6.91Zm6.91-2.3H89.82a2.3,2.3,0,0,1,2.3,2.3V57.58a2.3,2.3,0,0,1-2.3,2.3H6.91a2.3,2.3,0,0,1-2.3-2.3V6.91A2.3,2.3,0,0,1,6.91,4.61Z"/><path id="Vector_1374_Stroke_" data-name="Vector 1374 Stroke " class="cls-1" d="M47.06,36.44a2.3,2.3,0,0,0,2.61,0L93.42,6.5l-2.6-3.8L48.36,31.75,5.91,2.7,3.31,6.5Z"/><path id="Vector_1375_Stroke_" data-name="Vector 1375 Stroke " class="cls-1" d="M61.5,26l-3.25,3.25L92.79,63.81l3.26-3.26Z"/><path id="Vector_1375_Stroke_2" data-name="Vector 1375 Stroke 2" class="cls-1" d="M35.22,26l3.26,3.25L3.93,63.81.68,60.55Z"/></g></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
|
|
@ -0,0 +1,480 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>YXSILICON</title>
|
||||||
|
<link rel="icon" href="./imgs/home/logo.png">
|
||||||
|
<link rel="stylesheet" href="./css/base.css">
|
||||||
|
<link rel="stylesheet" href="./css/header.css">
|
||||||
|
<link rel="stylesheet" href="./css/index.css">
|
||||||
|
<link rel="stylesheet" href="./css/footer.css">
|
||||||
|
<script src="./js/header.js"></script>
|
||||||
|
<script src="./js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="./imgs/home/logo.png" alt="logo">
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#" class="nav-link active ">
|
||||||
|
首页
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./html/aboutYuxin.html" class="nav-link">
|
||||||
|
关于驭鑫
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item nav-dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<a href="./html/mainBusiness.html" class="nav-link ">
|
||||||
|
主营业务 <span class="arrow" aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-label="主营业务下拉菜单">
|
||||||
|
<li><a href="./html/chipAgent.html">芯片代理 <div class="dropdown-item"><img
|
||||||
|
src="./imgs/home/arrow2.svg" class="dropdown-arrow" alt="arrow"></div></a></li>
|
||||||
|
<li><a href="./html/electronicProduct.html">电子产品设计生产制造服务 <div class="dropdown-item"><img
|
||||||
|
src="./imgs/home/arrow2.svg" class="dropdown-arrow" alt="arrow"></div></a></li>
|
||||||
|
<li><a href="./html/cloudServer.html">云计算服务器设计生产制造销售 <div class="dropdown-item"><img
|
||||||
|
src="./imgs/home/arrow2.svg" class="dropdown-arrow" alt="arrow"></div></a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./html/serviceCase.html" class="nav-link">
|
||||||
|
服务案例
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./html/technicalSupport.html" class="nav-link">
|
||||||
|
技术支持
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item contactUs">
|
||||||
|
<a href="mailto:zmz@yxsilicon.com" class="nav-link emailBox">
|
||||||
|
<span>联系我们</span>
|
||||||
|
<div class="contactUs-email">
|
||||||
|
<img src="./imgs/home/email.svg" alt="email">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="dropdown-mask" tabindex="0" aria-label="下拉菜单遮罩层"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ...头部已写好... -->
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- 1. Banner区 -->
|
||||||
|
<section class="banner-section">
|
||||||
|
<div class="banner-bg">
|
||||||
|
<div class="banner-card">
|
||||||
|
<img src="./imgs/home/computationalaccelerator.png" alt="banner-card">
|
||||||
|
<div class="banner-card-content">
|
||||||
|
<h3>运算加速器 H6PRO</h3>
|
||||||
|
<ul>
|
||||||
|
<li>大规模数据处理</li>
|
||||||
|
<li>高性能计算</li>
|
||||||
|
<li>人工智能</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<span class="banner-card-arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrowBox">
|
||||||
|
<img src="./imgs/home/arrow2.svg" alt="arrow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-us">
|
||||||
|
<h3>关于驭鑫</h3>
|
||||||
|
<div class="about-us-arrow" tabindex="0" role="button">
|
||||||
|
<img src="./imgs/home/arrow2.svg" alt="about">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 2. 芯片代理区 -->
|
||||||
|
<section class="chip-agent-section">
|
||||||
|
<h2>芯片代理 </h2>
|
||||||
|
<div class="chip-agent-underline"></div>
|
||||||
|
|
||||||
|
<p class="desc">我们代理多家国际知名芯片厂商的高性能芯片，涵盖通信、嵌入式、A1、汽车电子等多个领域，提供全系列的芯片选型与供应服务，确保为客户提供最佳的解决方案。</p>
|
||||||
|
|
||||||
|
<div class="brand-carousel-section">
|
||||||
|
<div class="brand-carousel-bg">
|
||||||
|
<button class="brand-btn left" aria-label="向左滚动">❮</button>
|
||||||
|
<div class="brand-carousel-container">
|
||||||
|
<div class="brand-carousel-list">
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/st.svg" alt="ST">
|
||||||
|
<div class="brand-name">德意半导体</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/texas.png" alt="TI">
|
||||||
|
<div class="brand-name">德州仪器 TI</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/nxp.svg" alt="NXP">
|
||||||
|
<div class="brand-name">恩智浦</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/onsemi.svg" alt="ONSEMI">
|
||||||
|
<div class="brand-name">ON 安森美</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/adi.png" alt="ADI">
|
||||||
|
<div class="brand-name">ADI 亚德诺</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/omron.svg" alt="OMRON">
|
||||||
|
<div class="brand-name">欧姆龙</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/alliance.svg" alt="OMRON">
|
||||||
|
<div class="brand-name">Alliance</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/hrs.png" alt=" 广濑">
|
||||||
|
<div class="brand-name">广濑</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/htc.png" alt="HTC">
|
||||||
|
<div class="brand-name">HTC</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/kds.png" alt="KDS">
|
||||||
|
<div class="brand-name">KDS</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/lec.png" alt="LEC">
|
||||||
|
<div class="brand-name">LEC</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/nordic.png" alt="NORDIC">
|
||||||
|
<div class="brand-name">NORDIC</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/ShinDengen.svg" alt="ShinDengen">
|
||||||
|
<div class="brand-name">ShinDengen</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/smc.png" alt="SMC">
|
||||||
|
<div class="brand-name">SMC</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/sna.png" alt="世纳">
|
||||||
|
<div class="brand-name">世纳</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/tsc.svg" alt="TSC">
|
||||||
|
<div class="brand-name">TSC</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/utc.png" alt="UTC">
|
||||||
|
<div class="brand-name">UTC</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/dtt.png" alt="大唐">
|
||||||
|
<div class="brand-name">大唐</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/fxsm.jpg" alt="富芯森美">
|
||||||
|
<div class="brand-name">富芯森美</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/gy.png" alt="高云">
|
||||||
|
<div class="brand-name">高云</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/ght.png" alt="广和通">
|
||||||
|
<div class="brand-name">广和通</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/hdsc.png" alt="华大">
|
||||||
|
<div class="brand-name">华大</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/jj.svg" alt="捷捷">
|
||||||
|
<div class="brand-name">捷捷</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/lw.gif" alt="龙微">
|
||||||
|
<div class="brand-name">龙微</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/qm.png" alt="强茂">
|
||||||
|
<div class="brand-name">强茂</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/sskj.png" alt="十速科技">
|
||||||
|
<div class="brand-name">十速科技</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/sl.png" alt="顺络">
|
||||||
|
<div class="brand-name">顺络</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/xaw.png" alt="芯奥微">
|
||||||
|
<div class="brand-name">芯奥微</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/xz.png" alt="芯洲科技">
|
||||||
|
<div class="brand-name">芯洲科技</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-item">
|
||||||
|
<img src="./imgs/home/agent/yl.jpg" alt="英联">
|
||||||
|
<div class="brand-name">英联</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="brand-btn right" aria-label="向右滚动">❯</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-btn-box">
|
||||||
|
<a href="./html/chipAgent.html" class="section-btn">
|
||||||
|
查看更多代理
|
||||||
|
<div class="section-btn-arrow">
|
||||||
|
<img src="./imgs/home/arrow.svg" alt="arrow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 3. 电子产品设计生产制造服务区 -->
|
||||||
|
<section class="product-design-section">
|
||||||
|
|
||||||
|
<div class="product-design-bg">
|
||||||
|
<h2>电子产品设计生产制造服务</h2>
|
||||||
|
<p class="desc">
|
||||||
|
我们提供全方位的电子产品设计与制造服务，涵盖从需求分析、产品设计、样机开发、生产制造到产品交付的全过程。我们依托先进的技术和工艺，致力于为客户提供高性能、高质量的电子产品解决方案。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="card-carousel-section">
|
||||||
|
<div class="card-carousel-container">
|
||||||
|
<div class="card-carousel-list">
|
||||||
|
<div class="card">
|
||||||
|
<img src="imgs/home/demand.png" alt="客户需求分析">
|
||||||
|
<div class="card-title">客户需求分析</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img src="imgs/home/electronicProduct.png" alt="电子产品设计">
|
||||||
|
<div class="card-title">电子产品设计</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img src="imgs/home/prototype.png" alt="样机开发">
|
||||||
|
<div class="card-title">样机开发</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img src="imgs/home/produce.png" alt="生产制造">
|
||||||
|
<div class="card-title">生产制造</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img src="imgs/home/deliver.png" alt="产品交付">
|
||||||
|
<div class="card-title">产品交付</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="section-btn-box electronicProduct-btn">
|
||||||
|
<a href="./html/electronicProduct.html" class="section-btn">
|
||||||
|
查看更多代理
|
||||||
|
<div class="section-btn-arrow">
|
||||||
|
<img src="./imgs/home/arrow.svg" alt="arrow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 4. 云计算服务器设计生产制造销售区 -->
|
||||||
|
<section class="chip-agent-section cloud-server-section">
|
||||||
|
<h2>云计算服务器设计生产制造销售 </h2>
|
||||||
|
<div class="chip-agent-underline"></div>
|
||||||
|
|
||||||
|
<p class="desc">我们提供从云计算服务器的设计、生产到销售的全方位服务，致力于为数据中心、企业客户及云计算平台提供高效、稳定、可扩展的服务器解决方案。</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card-list cloud-server-card-list">
|
||||||
|
<div class="card">
|
||||||
|
<img src="imgs/home/demand.png" alt="客户需求分析">
|
||||||
|
<div class="card-title">客户需求分析</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img src="imgs/home/electronicProduct.png" alt="电子产品设计">
|
||||||
|
<div class="card-title">电子产品设计</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-btn-box cloud-server-btn">
|
||||||
|
<a href="./html/chipAgent.html" class="section-btn">
|
||||||
|
查看更多代理
|
||||||
|
<div class="section-btn-arrow">
|
||||||
|
<img src="./imgs/home/arrow.svg" alt="arrow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 5. 服务案例区 -->
|
||||||
|
<section class="product-design-section service-case-section">
|
||||||
|
|
||||||
|
<div class="product-design-bg service-case-bg">
|
||||||
|
<h2>服务案例</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card-list">
|
||||||
|
<div class="card service-case-card">
|
||||||
|
<img src="imgs/home/h6pro.png" alt="h6pro">
|
||||||
|
<div class="card-title">运算加速器 H6PRO</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h4> <span class="card-content-title">适用于</span></h4>
|
||||||
|
<ul>
|
||||||
|
<li>大规模数据处理</li>
|
||||||
|
<li>高性能计算</li>
|
||||||
|
<li>人工智能</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-btn">
|
||||||
|
<a href="#">
|
||||||
|
<img src="imgs/home/arrow2.svg" alt="arrow">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card service-case-card">
|
||||||
|
<img src="imgs/home/my100.png" alt="my100">
|
||||||
|
<div class="card-title">MY100服务器</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h4> <span class="card-content-title">适用于</span></h4>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>数据中心</li>
|
||||||
|
<li>企业级应用</li>
|
||||||
|
<li>云计算平台</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="card-btn">
|
||||||
|
<a href="#">
|
||||||
|
<img src="imgs/home/arrow2.svg" alt="arrow">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card service-case-card">
|
||||||
|
<img src="imgs/home/coo40z.png" alt="c0040z">
|
||||||
|
<div class="card-title">C0040Z-服务器</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h4> <span class="card-content-title">适用于</span></h4>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>高性能计算</li>
|
||||||
|
<li>AI计算</li>
|
||||||
|
<li>大数据处理</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="card-btn">
|
||||||
|
<a href="#">
|
||||||
|
<img src="imgs/home/arrow2.svg" alt="arrow">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="section-btn-box service-case-btn">
|
||||||
|
<a href="./html/electronicProduct.html" class="section-btn">
|
||||||
|
查看更多代理
|
||||||
|
<div class="section-btn-arrow">
|
||||||
|
<img src="./imgs/home/arrow.svg" alt="arrow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 6. 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-main">
|
||||||
|
<div class="footer-logo">
|
||||||
|
<img src="imgs/home/logo2.png" alt="logo">
|
||||||
|
<div>广东省深圳市南山区高新中三道2号软件园一期7栋303室</div>
|
||||||
|
<div><a href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a></div>
|
||||||
|
<div>工作时间: 9:30-18:00</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<div>
|
||||||
|
<h4>产品与服务</h4>
|
||||||
|
<ul class="footer-links-list">
|
||||||
|
<li><a href="./html/chipAgent.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">芯片代理</a></li>
|
||||||
|
<li><a href="./html/electronicProduct.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">电子产品设计生产制造服务</a></li>
|
||||||
|
<li><a href="./html/cloudServer.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">云计算服务器设计生产制造销售</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>解决方案</h4>
|
||||||
|
<ul class="footer-links-list">
|
||||||
|
<li><a href="/html/serviceCases.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">运算加速器 H6PRO</a></li>
|
||||||
|
<li><a href="/html/serviceCases.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">MY100服务器</a></li>
|
||||||
|
<li><a href="/html/serviceCases.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">C0040Z-服务器</a></li>
|
||||||
|
<li><a href="/html/serviceCases.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">云计算水冷服务器</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>关于我们</h4>
|
||||||
|
<ul class="footer-links-list">
|
||||||
|
<li><a href="./html/technicalSupport.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">技术咨询</a></li>
|
||||||
|
<li><a href="./html/technicalSupport.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">定制化开发</a></li>
|
||||||
|
<li><a href="./html/technicalSupport.html"> <img src="./imgs/home/arrow3.svg" alt="arrow">产品维护与升级</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>Copyright ©深圳驭鑫科技有限公司 <a class="record" href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2021012067号-2</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
// 将地图相关的变量和函数提升到全局作用域
|
||||||
|
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 `
|
||||||
|
<div class="info-content" style="padding: 15px;">
|
||||||
|
<h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${mapData.companyName[lang]}</h4>
|
||||||
|
<p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
|
||||||
|
<strong>${mapData.contactInfo[lang].address}：</strong>${mapData.address[lang]}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
||||||
|
<strong>${mapData.contactInfo[lang].email}：</strong>zmz@yxsilicon.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新地图信息
|
||||||
|
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 =
|
||||||
|
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('地图初始化失败:', error);
|
||||||
|
const mapContainer = document.getElementById('mapContainer');
|
||||||
|
if (mapContainer) {
|
||||||
|
mapContainer.innerHTML =
|
||||||
|
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 在文件末尾添加
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// 确保地图容器存在
|
||||||
|
const mapContainer = document.getElementById('mapContainer');
|
||||||
|
if (mapContainer) {
|
||||||
|
// 初始化地图
|
||||||
|
initAMap();
|
||||||
|
} else {
|
||||||
|
console.error('地图容器不存在');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -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';
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
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';
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** 关于驭鑫箭头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();
|
||||||
|
|
||||||
|
function getItemWidth() {
|
||||||
|
const item = list.querySelector('.brand-item');
|
||||||
|
if (!item) return 200;
|
||||||
|
const style = getComputedStyle(item);
|
||||||
|
return item.offsetWidth + parseFloat(style.marginLeft || 0) + parseFloat(style.marginRight || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollByStep(step) {
|
||||||
|
// 暂停自动滚动一小段时间
|
||||||
|
isHovering = true;
|
||||||
|
if (pauseTimer) clearTimeout(pauseTimer);
|
||||||
|
pauseTimer = setTimeout(() => { isHovering = false; }, 1500);
|
||||||
|
|
||||||
|
let target = container.scrollLeft + step * getItemWidth();
|
||||||
|
if (target < 0) {
|
||||||
|
target = list.scrollWidth + target;
|
||||||
|
}
|
||||||
|
if (target >= list.scrollWidth) {
|
||||||
|
target = target - list.scrollWidth;
|
||||||
|
}
|
||||||
|
container.scrollTo({ left: target, 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue