add project files
This commit is contained in:
lzx
parent
86d38149e6
commit
5913f0b886
|
|
@ -0,0 +1,269 @@
|
|||
.topBanner{
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/svg/关于我们图.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:43vw auto;
|
||||
background-position:46vw 0vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 27%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 18vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 2.5vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.28vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 10px;
|
||||
line-height: 4.2vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
|
||||
/* ------------------- */
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 205vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
}
|
||||
/* .bannerLeft{
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background-color: rgba(3, 0, 69, 0.5);
|
||||
} */
|
||||
.bannertop{
|
||||
width: 100%;
|
||||
height:105vh;
|
||||
background-image: url(../imgs/svg/企业文化理念\(BJF\).svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding-right: 5vw;
|
||||
padding-top: 18vh;
|
||||
|
||||
|
||||
}
|
||||
.textBox{
|
||||
width: 45vw;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
/* background: peru; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
}
|
||||
.textOne,.textTwo,.textThree{
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
/* background-color: rgba(3, 0, 69, 0.5); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
.Left{
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.Left img{
|
||||
width: 5vw;
|
||||
height: auto;
|
||||
}
|
||||
.Right{
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.Right p:nth-child(1){
|
||||
font-size: 1.9vw;
|
||||
font-weight: 600;
|
||||
/* letter-spacing: 0.3vw; */
|
||||
}
|
||||
.Right p:nth-child(2){
|
||||
font-size: 1.25vw;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
|
||||
.bannerBottom{
|
||||
width: 100%;
|
||||
/* height: 100vh; */
|
||||
background-color:rgba(3, 0, 69, 0.8);
|
||||
padding-top: 8vh;
|
||||
padding-bottom: 8vh;
|
||||
|
||||
}
|
||||
|
||||
.bannerBottom h1{
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.8vw;
|
||||
|
||||
}
|
||||
.bannerBottomList{
|
||||
width: 80%;
|
||||
height:auto;
|
||||
/* background: palegoldenrod; */
|
||||
margin: 0 auto;
|
||||
margin-top: 8vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.bannerBottomList li{
|
||||
width: 80%;
|
||||
height:35vh;
|
||||
|
||||
margin-top: 10vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.bannerBottomList li p{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: start;
|
||||
padding-bottom: 3vh;
|
||||
font-size: 1.2vw;
|
||||
padding-left: 4vw;
|
||||
}
|
||||
.bannerBottomListOne{
|
||||
background-image: url(../imgs/us/ic.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bannerBottomListTwo{
|
||||
background-image: url(../imgs/us/lowpower.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bannerBottomListThree{
|
||||
background-image: url(../imgs/us/manufacturer.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bannerBottomListFour{
|
||||
background-image: url(../imgs/us/Tapeout.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ------------------- */
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
/* --------------- */
|
||||
.map{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background: palegoldenrod; */
|
||||
background-color:rgba(3, 0, 69, 0.8);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.addressBox-bottom{
|
||||
width: 55vw;
|
||||
height: 55vh;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: 10vh;
|
||||
|
||||
}
|
||||
|
||||
#mapContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px; /* 确保地图有最小高度 */
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth; /* 添加平滑滚动效果 */
|
||||
}
|
||||
|
||||
#contact-map {
|
||||
scroll-margin-top: 10vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
.topBanner{
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/approaching/prospect.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:80vw auto;
|
||||
background-position:20vw -6vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 50%;
|
||||
height: 80%;
|
||||
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
left: 12vw;
|
||||
}
|
||||
.topBannerLeftTitle{
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 8vh;
|
||||
position: relative;
|
||||
}
|
||||
.lightImg{
|
||||
width: 34vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
position: absolute;
|
||||
top: 0.8vw;
|
||||
left: 1.5vw;
|
||||
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.3vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 18px;
|
||||
line-height: 5vh;
|
||||
|
||||
}
|
||||
|
||||
.top{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
/* --------------------- */
|
||||
.future{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #01326C;
|
||||
color: #fff;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
.futureList{
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
/* background: paleturquoise; */
|
||||
}
|
||||
.futureList li{
|
||||
width: 25%;
|
||||
height: 75%;
|
||||
/* background: palegoldenrod; */
|
||||
border: 4px solid #00EAEB;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
padding: 18px;
|
||||
position: relative;
|
||||
}
|
||||
.futureImg{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
}
|
||||
.futureContent{
|
||||
margin-top: 5vh;
|
||||
}
|
||||
.futureContent p:nth-child(1){
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
.futureContent p:nth-child(2){
|
||||
font-size: 1.2vw;
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vh;
|
||||
text-align: left;
|
||||
line-height: 4vh;
|
||||
|
||||
}
|
||||
|
||||
.futureCircle{
|
||||
width: 8vw;
|
||||
height: 8vw;
|
||||
border: 4px solid #00EAEB;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -3vw;
|
||||
left: -1vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.futureCircleInner{
|
||||
width: 6.8vw;
|
||||
height: 6.8vw;
|
||||
border-radius: 50%;
|
||||
background: #019FCF;
|
||||
color: #fff;
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1.2vw;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/* 所有标签的内外边距清零 */
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/* css3盒子模型 */
|
||||
box-sizing: border-box;
|
||||
font-family:DFKai-SB;
|
||||
}
|
||||
/* em 和 i 斜体的文字不倾斜 */
|
||||
em,
|
||||
i {
|
||||
font-style: normal
|
||||
}
|
||||
/* 去掉li 的小圆点 */
|
||||
/* li {
|
||||
list-style: none
|
||||
} */
|
||||
/* ul{
|
||||
list-style: none;
|
||||
} */
|
||||
|
||||
img {
|
||||
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
|
||||
border: 0;
|
||||
/* 取消图片底侧有空白缝隙的问题 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button {
|
||||
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #c81623
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
|
||||
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
/* 默认有灰色边框我们需要手动去掉 */
|
||||
}
|
||||
|
||||
body {
|
||||
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* background-color: #fff; */
|
||||
/* font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; */
|
||||
/* color: #666 */
|
||||
}
|
||||
|
||||
.hide,
|
||||
.none {
|
||||
display: none
|
||||
}
|
||||
/* 清除浮动 */
|
||||
.clearfix::after {
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: ".";
|
||||
height: 0
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
.footer{
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
/* background-color: #030045; */
|
||||
position: relative;
|
||||
background:
|
||||
url(../imgs/svg/页尾背景左.svg) 2vw 28vh/400px auto no-repeat,
|
||||
url(../imgs/svg/页尾背景右.svg) 78vw 19vh/400px auto no-repeat,
|
||||
hsl(243, 100%, 14%); /* 背景色放在最后 */
|
||||
|
||||
}
|
||||
.emailBox{
|
||||
width: 55vw;
|
||||
height: 12vh;
|
||||
background: #00ECEC;
|
||||
position: absolute;
|
||||
top: 18vh;
|
||||
left: 30vw;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.emailLeft{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-left: 4vw;
|
||||
}
|
||||
.emailLeft p{
|
||||
font-size: 1.2vw;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.emailLeft p:nth-child(2){
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.emailRight{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.email{
|
||||
width: 50%;
|
||||
height: 48%;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 3px solid #3FB7DC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.email span{
|
||||
font-size: 1vw;
|
||||
color: #3FB7DC;
|
||||
font-weight: 800;
|
||||
|
||||
}
|
||||
.email img{
|
||||
width: 1.5vw;
|
||||
height: auto;
|
||||
}
|
||||
.email:hover{
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* --------------------------------------- */
|
||||
.footerBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footerBoxLeft{
|
||||
width: 30vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.footerBoxLeft img{
|
||||
width: 8vw;
|
||||
height:auto;
|
||||
}
|
||||
.footerBoxRight{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
padding-bottom: 2vh;
|
||||
padding-right: 5vw;
|
||||
color: #fff;
|
||||
}
|
||||
.footerBoxRight p{
|
||||
font-size: 1vw;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.record{
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
|
||||
}
|
||||
.record:hover{
|
||||
color: #009FD0;
|
||||
font-size: 1vw;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
.header{
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
background-color: #030045;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: -1px;
|
||||
/* background: padding-box; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header .bg{
|
||||
width: 20vw;
|
||||
height: 35%;
|
||||
/* background: palegoldenrod; */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 24vw;
|
||||
}
|
||||
.header .bg img{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
|
||||
}
|
||||
.header .container{
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
.logo{
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo img{
|
||||
width: 3.5vw;
|
||||
height: auto;
|
||||
}
|
||||
.header ul{
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background: palevioletred; */
|
||||
margin-left: 5vw;
|
||||
padding-right: 10vw;
|
||||
}
|
||||
.header ul li{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9vw;
|
||||
|
||||
|
||||
}
|
||||
.header ul li a{
|
||||
display: inline-block;
|
||||
color: #009FD1;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 600;
|
||||
font-size: 1vw;
|
||||
position: relative;
|
||||
padding-bottom: 2vh;
|
||||
}
|
||||
.header ul li a:hover{
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(41, 111, 216, 0.5);
|
||||
}
|
||||
/* .active{
|
||||
background: palegoldenrod;
|
||||
} */
|
||||
.actives::before{
|
||||
content:url(../imgs/svg/页面选择图标.svg);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,688 @@
|
|||
|
||||
.topBanner{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/png/首页图.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:68vw auto;
|
||||
background-position:35vw -4vw;
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
background-color: #030045;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box; /* 确保所有元素使用相同的盒模型 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden; /* 防止水平滚动条 */
|
||||
}
|
||||
/* --------轮播------------ */
|
||||
.CarouselBox{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* 轮播图容器 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.carousel-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: palegoldenrod;
|
||||
}
|
||||
|
||||
/* 优化图片渲染 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
/* 添加这些属性以提升性能 */
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
object-fit: cover; /* 保持比例填充整个容器 */
|
||||
display: block; /* 移除图片底部间隙 */
|
||||
}
|
||||
|
||||
/* 优化箭头按钮样式 */
|
||||
.carousel-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.carousel-arrow:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 添加触摸设备支持 */
|
||||
@media (hover: none) {
|
||||
.carousel-arrow {
|
||||
display: none; /* 在触摸设备上隐藏箭头 */
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-arrow-left {
|
||||
left: 2vw;
|
||||
top: 48.7%;
|
||||
|
||||
}
|
||||
|
||||
.carousel-arrow-right {
|
||||
right: 2vw;
|
||||
|
||||
}
|
||||
/* 修正指示器容器样式 */
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 1vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 2vw;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 修正指示器小圆点样式 */
|
||||
.indicator {
|
||||
width: 20px; /* 稍微调小一点 */
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
/* background-color: rgba(255, 255, 255, 0.5); */
|
||||
background-color: #009ECF;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 补充激活状态的指示器样式 */
|
||||
.indicator.active {
|
||||
background-color: #00ECEC; /* 高亮为纯白色 */
|
||||
transform: scale(1.2); /* 稍微放大 */
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加发光效果 */
|
||||
}
|
||||
/* 修正容器结构相关样式 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative; /* 确保是相对定位 */
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.indicator:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
/* 轮播项样式 */
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 产品详情按钮基础样式 */
|
||||
.product-detail-btn {
|
||||
position: absolute;
|
||||
bottom:6vh;
|
||||
padding: 1vw 5vw;
|
||||
background-color:#00ECEC;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
color: #fff !important;
|
||||
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 左侧按钮位置 */
|
||||
.product-detail-btn.left {
|
||||
|
||||
left: 22vw;
|
||||
|
||||
}
|
||||
|
||||
/* 右侧按钮位置 */
|
||||
.product-detail-btn.right {
|
||||
right:22vw;
|
||||
}
|
||||
|
||||
/* 按钮悬停效果 */
|
||||
.product-detail-btn:hover {
|
||||
/* background-color: #ffffff; */
|
||||
/* transform: translateY(-2px); */
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
||||
transform: scale(1.1);
|
||||
color: #fff ;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
.detail-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 箭头图标样式 */
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 链接悬停时箭头动画 */
|
||||
.detail-link:hover {
|
||||
|
||||
color: #fff ;
|
||||
|
||||
}
|
||||
|
||||
/* 确保轮播项内的图片样式 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* -------------------- */
|
||||
|
||||
.topBannerLeft{
|
||||
width: 43%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 16vh;
|
||||
left: 13vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(3){
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
color: #01A0D0;
|
||||
margin-top: 18px;
|
||||
|
||||
}
|
||||
.topBannerBth{
|
||||
width: 100%;
|
||||
padding-left: 5vw;
|
||||
margin-top: 30vh;
|
||||
}
|
||||
|
||||
.topBannerBth a{
|
||||
display: block;
|
||||
width: 15vw;
|
||||
height: 4vw;
|
||||
font-size: 1.4vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background: #00ECEC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
}
|
||||
.topBannerBth a:hover{
|
||||
color: #fff;
|
||||
/* background: #00A0D0;
|
||||
*/
|
||||
transform: scale(1.1);
|
||||
|
||||
}
|
||||
.top{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 8vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 16vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
/* ----------------------------- */
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 520vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bannerBottom2{
|
||||
width: 100%;
|
||||
height: 190vh;
|
||||
background-color:rgba(3, 0, 69, 0.8);
|
||||
padding-top: 8vh;
|
||||
padding-bottom: 8vh;
|
||||
/* background: palegoldenrod; */
|
||||
|
||||
}
|
||||
|
||||
.bannerBottom2 h1{
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.8vw;
|
||||
|
||||
}
|
||||
.bannerBottomList{
|
||||
width: 72vw;
|
||||
height:150vh;
|
||||
/* background: palegoldenrod; */
|
||||
margin: 0 auto;
|
||||
margin-top: 8vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.bannerBottomList li{
|
||||
width: 70%;
|
||||
height:60vh;
|
||||
margin-top: 10vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.bannerBottomList li p{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: start;
|
||||
padding-bottom: 3vh;
|
||||
font-size: 1.2vw;
|
||||
padding-left: 4vw;
|
||||
}
|
||||
.bannerBottomListOne{
|
||||
background-image: url(../imgs/us/ic.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
.bannerBottomListTwo{
|
||||
background-image: url(../imgs/us/lowpower.png);
|
||||
background-repeat: no-repeat;
|
||||
/* background-size: 100% 100%; */
|
||||
background-size: contain; /* 改为 contain 保持图片比例 */
|
||||
background-position: center; /* 居中显示 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bannerBottomListThree{
|
||||
background-image: url(../imgs/us/manufacturer.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bannerBottomListFour{
|
||||
background-image: url(../imgs/us/Tapeout.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* .bannerLeft{
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background-color: rgba(3, 0, 69, 0.5);
|
||||
} */
|
||||
.bannertop{
|
||||
width: 100%;
|
||||
height:105vh;
|
||||
background-image: url(../imgs/home/mainBusiness.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding-right: 22vw;
|
||||
padding-top: 18vh;
|
||||
|
||||
|
||||
}
|
||||
.textBox{
|
||||
width: 29vw;
|
||||
height: 50%;
|
||||
color: #fff;
|
||||
/* background: peru; */
|
||||
}
|
||||
.textBox h1{
|
||||
font-size: 2vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3vw;
|
||||
}
|
||||
.textBox p{
|
||||
font-size: 1.2vw;
|
||||
line-height: 6vh;
|
||||
margin-top: 5vh;
|
||||
|
||||
}
|
||||
|
||||
/* ------------------------- */
|
||||
.bannerMid{
|
||||
width: 100%;
|
||||
height: 105vh;
|
||||
background-color: rgba(3, 0, 69, 0.8);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bannerMidImg{
|
||||
width: auto;
|
||||
height: 118vh;
|
||||
|
||||
position: absolute;
|
||||
top: -5vh;
|
||||
right: 5vw;
|
||||
|
||||
}
|
||||
.bannerletf{
|
||||
width: 35%;
|
||||
height: 50%;
|
||||
background: palegreen;
|
||||
z-index: 10;
|
||||
background-color: #00316B;
|
||||
margin-right: 5vw;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bannerletf img{
|
||||
width: 30vw;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: -8vh;
|
||||
left: 2.5vw;
|
||||
|
||||
}
|
||||
.bannerletfText{
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
|
||||
position: absolute;
|
||||
bottom:2vh;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.bannerletfText p{
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
.bannerletfText a{
|
||||
width: 17vw;
|
||||
height: 3vw;
|
||||
display: block;
|
||||
font-size: 1.2vw;
|
||||
|
||||
color: #00EDEF;
|
||||
border: 1px solid #00EDEF;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.bannerletfText a:hover{
|
||||
color: #00A0D0;
|
||||
/* background: #00A0D0; */
|
||||
|
||||
}
|
||||
|
||||
.bannerRight{
|
||||
width: 35%;
|
||||
height: 50%;
|
||||
z-index: 10;
|
||||
background-color: #00316B;
|
||||
margin-left: 5vw;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bannerRight img{
|
||||
width: 30vw;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: -8vh;
|
||||
left: 2.5vw;
|
||||
|
||||
}
|
||||
|
||||
/* ----------------- */
|
||||
.bannerBottom{
|
||||
width: 100%;
|
||||
height: 108vh;
|
||||
position: relative;
|
||||
background-image: url(../imgs/png/关于我们.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
padding-right: 10vw;
|
||||
|
||||
}
|
||||
|
||||
.bannerBottomText{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
/* background-color: palegoldenrod; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bannerBottomText .top2{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
/* background-color: palegoldenrod; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
padding-top: 8vh;
|
||||
}
|
||||
.bannerBottomText h1{
|
||||
font-size: 2vw;
|
||||
font-weight: 600;
|
||||
|
||||
|
||||
}
|
||||
.top2 p{
|
||||
width: 80%;
|
||||
font-size: 1.3vw;
|
||||
line-height: 5vh;
|
||||
margin-top: 4vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.bannerBottomText .bottom{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
/* background-color: peachpuff; */
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: left;
|
||||
}
|
||||
.bottomRight{
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.perCent{
|
||||
font-size: 2.5vw;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-bottom: 4vh;
|
||||
}
|
||||
.perCent::before{
|
||||
content: '';
|
||||
width: 70%;
|
||||
height: 1.5vh;
|
||||
background-color: #00EBEC;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 10%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.characters{
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
/*
|
||||
.bannerBottomText p{
|
||||
font-size: 1.2vw;
|
||||
line-height: 6vh;
|
||||
margin-top: 5vh;
|
||||
} */
|
||||
.perCent {
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.perCent.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* --------------- */
|
||||
.newBottom{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
/* background-color: palegoldenrod; */
|
||||
}
|
||||
.teamImg{
|
||||
width: 12vw;
|
||||
height: 12vw;
|
||||
}
|
||||
.teamBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
margin-top: 4vh;
|
||||
/* align-items: center; */
|
||||
}
|
||||
.teamBox div{
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
margin-left: 3vw;
|
||||
/* background-color: palegoldenrod; */
|
||||
}
|
||||
.teamBox div p{
|
||||
font-size: 2.8vw;
|
||||
font-weight: 600;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
.teamBox div p:nth-child(2){
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
.topBanner{
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/main/mainbusiness.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:55vw auto;
|
||||
background-position:40vw -1vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 24%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 18vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 2.4vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.1vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 10px;
|
||||
line-height: 4.2vh;
|
||||
text-align: justify;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
/* ------------------ */
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 255vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
}
|
||||
|
||||
.bannertop{
|
||||
width: 100%;
|
||||
height:115vh;
|
||||
background-image: url(../imgs/main/content.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding-right: 5vw;
|
||||
/* padding-top: 18vh; */
|
||||
|
||||
}
|
||||
|
||||
.bannerArrow{
|
||||
height:100%;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
.textBox{
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
/* background: peru; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
background-image: url(../imgs/main/arrow.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:4vw 110%;
|
||||
background-position:0vw 50%;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
/* 手风琴容器 */
|
||||
.accordion {
|
||||
width: 100%;
|
||||
max-width: 40vw;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
/* 手风琴项目 */
|
||||
.accordion-item {
|
||||
/* border: 1px solid #e0e0e0; */
|
||||
margin-bottom: 3vh;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
/* background: #fff; */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 手风琴标题 */
|
||||
.accordion-header {
|
||||
padding: 20px;
|
||||
/* background: #f8f8f8; */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
/* .accordion-header:hover {
|
||||
background: #009FD0;
|
||||
} */
|
||||
|
||||
/* 标题文字 */
|
||||
.accordion-header h3 {
|
||||
margin: 0;
|
||||
|
||||
color: #fff;
|
||||
font-size: 1.8vw;
|
||||
|
||||
}
|
||||
.accordion-header h3:hover {
|
||||
margin: 0;
|
||||
font-size: 1.9vw;
|
||||
color: #00E0E4;
|
||||
/* 00E0E4 */
|
||||
}
|
||||
|
||||
/* 展开/收起图标 */
|
||||
.accordion-icon {
|
||||
font-size: 24px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.accordion-content {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
/* 激活状态 */
|
||||
.accordion-item.active .accordion-content {
|
||||
padding: 20px;
|
||||
max-height: 500px; /* 根据实际内容调整 */
|
||||
/* background-color: #009FD0; */
|
||||
}
|
||||
|
||||
.accordion-item.active .accordion-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* 添加激活状态的标题样式 */
|
||||
.accordion-item.active .accordion-header h3 {
|
||||
color: #00E0E4;
|
||||
font-size: 1.9vw;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.accordion-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.accordion-header h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加到现有CSS中 */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-item.active .accordion-content {
|
||||
animation: slideDown 0.3s ease forwards;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bannerBottom{
|
||||
width: 100%;
|
||||
height: 150vh;
|
||||
background-image: url(../imgs/main/advantage.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:42vw 30vw;
|
||||
background-position:50% 55%;
|
||||
background-color: rgba(3, 0, 69, 0.8);
|
||||
padding: 10vh 0;
|
||||
}
|
||||
|
||||
.bannerBottomList{
|
||||
width: 58vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bannerBottomList li{
|
||||
list-style: none;
|
||||
width: 20vw;
|
||||
height: 25vw;
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 8vh;
|
||||
border-radius: 8px;
|
||||
background: #00316B;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
padding-top: 6vh;
|
||||
}
|
||||
.ListImg{
|
||||
width: 6vw;
|
||||
}
|
||||
.list p:nth-of-type(1){
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
.list p:nth-of-type(2){
|
||||
width: 80%;
|
||||
font-size: 1vw;
|
||||
|
||||
color: #009ECF;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vh;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------- */
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
.topBanner{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/png/我们的产品图.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:65vw auto;
|
||||
background-position:35vw 0vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 28%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 20vh;
|
||||
left: 13vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3.5vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3vw;
|
||||
text-align: left;
|
||||
letter-spacing: 0.5vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size:3.5vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-top: 18px;
|
||||
text-align: right;
|
||||
letter-spacing: 0.5vw;
|
||||
|
||||
|
||||
}
|
||||
.topBannerBth{
|
||||
width: 100%;
|
||||
padding-left: 2vw;
|
||||
margin-top: 13vh;
|
||||
|
||||
}
|
||||
|
||||
.topBannerBth a{
|
||||
display: block;
|
||||
width: 15vw;
|
||||
height: 4vw;
|
||||
font-size: 1.4vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background: #00ECEC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
}
|
||||
.topBannerBth span{
|
||||
font-size: 1.2vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
.topBannerBth img{
|
||||
width: 1.5vw;
|
||||
height: auto;
|
||||
}
|
||||
.topBannerBth a:hover{
|
||||
color: #fff;
|
||||
transform: scale(1.1); /* 放大到原尺寸的1.1倍 */
|
||||
transition: all 0.3s ease; /* 添加过渡动画 */
|
||||
|
||||
}
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 8vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 16vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
min-height: 110vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
}
|
||||
/* .bannerLeft{
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background-color: rgba(3, 0, 69, 0.5);
|
||||
} */
|
||||
.bannertop{
|
||||
width: 100%;
|
||||
height:105vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.imgBox{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
/* background: palegreen; */
|
||||
position: relative;
|
||||
}
|
||||
.imgBox .imgBox1{
|
||||
width: 20vw;
|
||||
height: auto;
|
||||
/* background: palegoldenrod; */
|
||||
position: absolute;
|
||||
top: 5vw;
|
||||
left:10vw;
|
||||
}
|
||||
.imgBox .imgBox2{
|
||||
width: 20vw;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 19vw;
|
||||
left: 20vw;
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
.imgBox img{
|
||||
width: 26vw;
|
||||
height: auto;
|
||||
}
|
||||
.textBox{
|
||||
width: 15vw;
|
||||
height: 50%;
|
||||
color: #fff;
|
||||
margin-left: 5vw;
|
||||
/* background: peru; */
|
||||
}
|
||||
.textBox h1{
|
||||
font-size: 2vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3vw;
|
||||
}
|
||||
.textBox p{
|
||||
font-size: 1.2vw;
|
||||
line-height: 6vh;
|
||||
margin-top: 5vh;
|
||||
|
||||
}
|
||||
|
||||
/* ------------------------- */
|
||||
.bannerBottom{
|
||||
width: 100%;
|
||||
height: 115vh;
|
||||
position: relative;
|
||||
background-image: url(../imgs/png/电子商城.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
padding-right: 10vw;
|
||||
background-color: rgba(3, 0, 69, 0.8);
|
||||
|
||||
}
|
||||
|
||||
.bannerBottomText{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
/* background-color: palegoldenrod; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
/* background: peru; */
|
||||
}
|
||||
|
||||
.bannerBottomText .top{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
/* background-color: palegoldenrod; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
/* padding-top: 3vh; */
|
||||
}
|
||||
|
||||
.top p{
|
||||
width: 70%;
|
||||
font-size: 1.5vw;
|
||||
line-height:7vh;
|
||||
margin-top: 4vh;
|
||||
|
||||
}
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
/* --------------------------- */
|
||||
|
||||
/* 产品展示区样式 */
|
||||
.case {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
gap: 40px;
|
||||
margin: 0 auto;
|
||||
padding-top: 10vh;
|
||||
align-items: flex-start; /* 确保子元素从顶部开始对齐 */
|
||||
}
|
||||
|
||||
/* 左侧导航样式 */
|
||||
.product-nav {
|
||||
width: 20vw;
|
||||
flex-shrink: 0;
|
||||
border-right: 2px solid #00E0E4;
|
||||
padding-right: 3vw;
|
||||
/* 添加最大高度和滚动 */
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
/* 添加平滑滚动 */
|
||||
scroll-behavior: smooth;
|
||||
/* 固定位置 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
/* 添加滚动条样式 */
|
||||
.product-nav::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.product-nav::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.product-nav::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 224, 228, 0.5);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.product-nav::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 224, 228, 0.8);
|
||||
}
|
||||
|
||||
|
||||
.product-category {
|
||||
margin-bottom: 30px;
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.category-header.active {
|
||||
color: #00E0E4;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.category-header.active .dot {
|
||||
background-color: #00E0E4;
|
||||
}
|
||||
|
||||
.category-header h3 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.category-content {
|
||||
display: none;
|
||||
padding-left: 30px;
|
||||
/* background: palegoldenrod; */
|
||||
position: relative;
|
||||
padding-left: 3vw;
|
||||
|
||||
}
|
||||
.category-content::before{
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 12%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.category-content.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 产品项样式 */
|
||||
.product-item {
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-item:hover,
|
||||
.product-item.active {
|
||||
background-color: rgba(0, 224, 228, 0.1);
|
||||
color: #00E0E4 !important;
|
||||
border: 1px solid #00E0E4;
|
||||
box-shadow: 0 0 8px 1px rgba(0, 224, 228, 0.5),
|
||||
0 5px 8px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.product-item img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-item p {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease; /* 添加颜色过渡效果 */
|
||||
}
|
||||
|
||||
/* 选中状态的文字样式 */
|
||||
.product-item.active p {
|
||||
color: #00E0E4;
|
||||
}
|
||||
|
||||
|
||||
/* 可以添加悬停效果 */
|
||||
.product-item:hover p {
|
||||
color: #00E0E4;
|
||||
}
|
||||
|
||||
/* 右侧详情样式 */
|
||||
.product-detail {
|
||||
/* flex-grow: 1; */
|
||||
/* background-color: rgba(255, 255, 255, 0.05); */
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-left: 8vw;
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 20vw;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #00E0E4;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px 1px rgba(0, 224, 228, 0.5),
|
||||
0 5px 15px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.detail-image img {
|
||||
width: 20vw;
|
||||
border-radius: 12px;
|
||||
object-fit: contain;/* 保持图片比例，确保完整显示 */
|
||||
|
||||
}
|
||||
|
||||
.detail-info h2 {
|
||||
color: #00E0E4;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-list p {
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.6;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------- */
|
||||
|
||||
|
||||
/* 添加平滑滚动效果 */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 添加产品项过渡动画 */
|
||||
.product-item {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 优化active状态的视觉效果 */
|
||||
.product-item.active {
|
||||
background-color: rgba(0, 224, 228, 0.1);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
.topBanner{
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/svg/技术支持图.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:38vw auto;
|
||||
background-position:50vw 0vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 23%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
left: 16vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.3vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 18px;
|
||||
line-height: 5vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
|
||||
/* ------------------- */
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bannerBox{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bannerLeft ,.bannerRight{
|
||||
width: 24%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
|
||||
|
||||
}
|
||||
.bannerLeft{
|
||||
margin-right: 3vw;
|
||||
padding-top: 3%;
|
||||
}
|
||||
.LeftImg , .rightImg{
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
overflow: hidden;
|
||||
/* background: palegoldenrod; */
|
||||
|
||||
}
|
||||
.LeftImg img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.rightImg img{
|
||||
height:100%;
|
||||
width: 100%;
|
||||
}
|
||||
.arrow{
|
||||
width: 0.8vw;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.report:hover{
|
||||
color: #Ffff;
|
||||
|
||||
}
|
||||
.bannerRight{
|
||||
margin-left: 3vw;
|
||||
padding-top: 3%;
|
||||
}
|
||||
.title{
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
margin-top: 3vh;
|
||||
|
||||
}
|
||||
.problem{
|
||||
font-size: 0.9vw;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 1vh;
|
||||
}
|
||||
.report{
|
||||
font-size: 0.9vw;
|
||||
color: #00E0E2;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/logo.svg">
|
||||
<link rel="stylesheet" href="../css/aboutUs.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<script>
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: 'd7d163684cbe3ea85f182a42cd1b8880',
|
||||
}
|
||||
</script>
|
||||
<script src="https://webapi.amap.com/maps?v=2.0&key=d8d0391f0356497ccdc1c0f13d4a8c33&callback=initMap"></script>
|
||||
<script src="../js/aboutUs.js"></script>
|
||||
<title>深圳汉晶电子信息有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="./mainBusiness.html"> 主营业务</a></li>
|
||||
<li> <a href="./ourProducts.html"> 产品案例</a></li>
|
||||
<li> <a href="./technicalSupport.html"> 技术支持</a></li>
|
||||
<li> <a href="./approaching.html"> 展望未来</a></li>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>公司介绍</p>
|
||||
<p>我们是一家专注于集成电路设计的高科技公司,致力于为客户提供从芯片设计到量产的全流程服务。我们的团队拥有丰富的行业经验，采用最先进的工具和技术，为客户提供高品质的芯片解决方案。我们始终坚持以客户为中心，以技术为驱动，致力于推动集成电路行业的创新与发展。</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<img class="top3" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btLeft" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="tpRight" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btRight" src="../imgs/svg/线纹.svg" alt="点纹">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="banner">
|
||||
<div class="bannertop">
|
||||
<div class="textBox">
|
||||
|
||||
<div class="textOne">
|
||||
<div class="Left">
|
||||
<img src="../imgs/svg/我们的愿景.svg" alt="我们的愿景">
|
||||
</div>
|
||||
<div class="Right">
|
||||
<p>我们的愿景</p>
|
||||
<p>成为受人尊敬的电子信息科技公司</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="textTwo">
|
||||
<div class="Left">
|
||||
<img src="../imgs/svg/我们的使命.svg" alt="我们的使命">
|
||||
</div>
|
||||
<div class="Right">
|
||||
<p>我们的使命</p>
|
||||
<p>通过在集成电路设计、应用解决方案和人工智能技术的持续创新,
|
||||
我们提供高可靠、智能的产品和服务，为客户创造价值，让人们
|
||||
我们提供高可靠、
|
||||
的生活更加美好!</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="textThree">
|
||||
<div class="Left">
|
||||
<img src="../imgs/svg/我们的核心价值观.svg" alt="我们的核心价值观">
|
||||
</div>
|
||||
<div class="Right">
|
||||
<p>我们的核心价值观</p>
|
||||
<p>客户至上、艰苦奋斗、创新卓越、合作共赢</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bannerBottom">
|
||||
<h1>为什么选择汉晶?</h1>
|
||||
<ul class="bannerBottomList">
|
||||
<li class="bannerBottomListOne">
|
||||
<p></p>
|
||||
<p> IC设计全生命周期一站式覆盖 </p>
|
||||
</li>
|
||||
<li class="bannerBottomListTwo">
|
||||
<p>独特的低功耗设计，让芯片更有竞争力</p>
|
||||
<p></p>
|
||||
</li>
|
||||
<li class="bannerBottomListThree">
|
||||
<p></p>
|
||||
<p>有稳定的芯片制造商合作关系</p>
|
||||
</li>
|
||||
<li class="bannerBottomListFour">
|
||||
<p>流片均一版成功，即流片成功率100%,助力客户赢得市场</p>
|
||||
<p></p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div> -->
|
||||
|
||||
|
||||
<section class="map">
|
||||
|
||||
<div class="addressBox-bottom" id="contact-map">
|
||||
<div id="mapContainer"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||
<section class="emailBox">
|
||||
<div class="emailLeft">
|
||||
<p>我们准备好了</p>
|
||||
<p>如果您有更多的需求，请联系我们</p>
|
||||
</div>
|
||||
<div class="emailRight">
|
||||
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
|
||||
<span>MAIL TO US</span>
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<img src="../imgs/svg/邮箱.svg" alt="邮箱">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<div class="footerBoxRight">
|
||||
<p>Copyright ©深圳汉晶电子信息有限公司 <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/logo.svg">
|
||||
<link rel="stylesheet" href="../css/approaching.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<title>深圳汉晶电子信息有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="./mainBusiness.html"> 主营业务</a></li>
|
||||
<li> <a href="./ourProducts.html"> 产品案例</a></li>
|
||||
<li> <a href="./technicalSupport.html"> 技术支持</a></li>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 展望未来</a></li>
|
||||
<li> <a href="./aboutUs.html"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>未来发展与技术趋势</p>
|
||||
<img class="lightImg" src="../imgs/approaching/light.png" alt="未来发展与技术趋势">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<img class="top" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btLeft" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="tpRight" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btRight" src="../imgs/svg/线纹.svg" alt="点纹">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="future">
|
||||
<ul class="futureList">
|
||||
<li>
|
||||
<img class="futureImg" src="../imgs/approaching/ai.png" alt="AI加速芯片">
|
||||
<div class="futureContent">
|
||||
<p>AI加速芯片</p>
|
||||
<p>AI芯片在智能硬件、自动驾驶工业互联网、智慧医疗等领域的需求越来越大。我们正在研发支持深度学习加速的定制芯片，助力AI技术的商业化应用。</p>
|
||||
</div>
|
||||
<div class="futureCircle">
|
||||
<div class="futureCircleInner">
|
||||
应用领域
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img class="futureImg" src="../imgs/approaching/quantum.png" alt="量子计算芯片">
|
||||
<div class="futureContent" >
|
||||
<p>量子计算芯片</p>
|
||||
<p>随着量子计算的不断发展，我们的研发团队正在探索量子计算芯片的设计，致力于开发具有突破性的量子计算硬件平台，为未来的计算革命奠定基础。</p>
|
||||
</div>
|
||||
<div class="futureCircle">
|
||||
<div class="futureCircleInner">
|
||||
技术方向
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img class="futureImg" src="../imgs/approaching/6g.png" alt="5G/6G通信芯片">
|
||||
<div class="futureContent">
|
||||
<p>5G/6G通信芯片</p>
|
||||
<p>5G、6G通信技术的普及将进一步推动通信芯片的革新。我 们计划设计更高效、低延迟更强抗干扰能力的通信芯片，支持全球网络的高速连接。</p>
|
||||
</div>
|
||||
<div class="futureCircle">
|
||||
<div class="futureCircleInner">
|
||||
未来规划
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||
<section class="emailBox">
|
||||
<div class="emailLeft">
|
||||
<p>我们准备好了</p>
|
||||
<p>如果您有更多的需求，请联系我们</p>
|
||||
</div>
|
||||
<div class="emailRight">
|
||||
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
|
||||
<span>MAIL TO US</span>
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<img src="../imgs/svg/邮箱.svg" alt="邮箱">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<div class="footerBoxRight">
|
||||
<p>Copyright ©深圳汉晶电子信息有限公司 <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
|
||||
<!-- <p>Copyright ©深圳汉晶电子信息有限公司 版权所有</p> -->
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/logo.svg">
|
||||
<link rel="stylesheet" href="../css/mainBusiness.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<script src="../js/mainBusiness.js"></script>
|
||||
<title>深圳汉晶电子信息有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 主营业务</a></li>
|
||||
<li> <a href="./ourProducts.html"> 产品案例</a></li>
|
||||
<li> <a href="./technicalSupport.html"> 技术支持</a></li>
|
||||
<li> <a href="./approaching.html"> 展望未来</a></li>
|
||||
<li> <a href="./aboutUs.html"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>芯片设计技术服务</p>
|
||||
<p>我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、 系统设计、 逻辑设计、 FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术,确保芯片的性能、功耗、稳定性都能满足客户需求。</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<img class="top3" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btLeft" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="tpRight" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btRight" src="../imgs/svg/线纹.svg" alt="点纹">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="banner">
|
||||
|
||||
<div class="bannertop">
|
||||
<div class="textBox">
|
||||
<div class="accordion">
|
||||
<!-- 第1项 - 默认展开 -->
|
||||
<div class="accordion-item active">
|
||||
<div class="accordion-header">
|
||||
<h3>1.需求分析与规划</h3>
|
||||
<span class="accordion-icon"></span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>根据客户的应用场景，进行深度调研，分析产品需求，输出系统方案。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第2项 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<h3>2.芯片架构设计</h3>
|
||||
<span class="accordion-icon"></span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>从芯片框架设计到芯片核心模块设计，包括接口定义等，确保基于此架构就可以正常进行逻辑设计。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第3项 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<h3>3.逻辑设计与验证</h3>
|
||||
<span class="accordion-icon"></span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>使用先进的设计工具（如 Verilog）进行芯片逻辑设计，并通过仿真与验证工具（如 systemverilog）确保功能和性能的正确性。通过后仿确定芯片功耗、面积符合客户需求。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第4项 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<h3>4.硬件设计与原理图</h3>
|
||||
<span class="accordion-icon"></span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>在芯片封装设计时充分考虑到PCB板设计，不仅仅是考虑芯片本身，在芯片设计时就考虑产品的可靠性和稳定性。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第5项 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<h3>5.制程与工艺</h3>
|
||||
<span class="accordion-icon"></span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>团队与先进半导体制造厂有着长期的合作，对工艺细节了解充分，确保芯片生产过程中的质量控制与工艺优化，工艺良率达到业界领先水平。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第6项 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<h3>6.测试与验证</h3>
|
||||
<span class="accordion-icon"></span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>针对刚出厂的芯片，能对应设计开发测试板，提供包括功能测试、性能测试、功耗测试、热测试等全面的验证服务，保证客户收到的芯片都是合格产品。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第7项 -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<h3>7.量产与交付</h3>
|
||||
<span class="accordion-icon"></span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>根据客户需求，我们提供从小批量试产到大规模量产的全程技术支持，并确保交付时效与质量。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bannerBottom">
|
||||
<ul class="bannerBottomList">
|
||||
<li class="list bannerBottomListOne">
|
||||
<img class="ListImg" src="../imgs/main/process.png" alt="优势">
|
||||
<p>全流程技术服务</p>
|
||||
<p>从芯从客户需求沟通到量产交付，提供端到端的技术服务，确保客户需求得到全方位满足。</p>
|
||||
</li>
|
||||
<li class="list bannerBottomListTwo">
|
||||
<img class="ListImg" src="../imgs/main/experience.png" alt="优势">
|
||||
<p>行业经验</p>
|
||||
<p>我们的团队拥有多年芯片前后端设计经验，所设计的芯片均流片成功，能够应对复杂的设计挑战，提供个性化解决方案，在低功耗方面有独到的设计方法学。</p>
|
||||
</li>
|
||||
<li class="list bannerBottomListThree">
|
||||
<img class="ListImg" src="../imgs/main/tool.png" alt="优势">
|
||||
<p>技术工具</p>
|
||||
<p>采用业界公认的可靠的EDA工具链，保证设计功能正确和功耗、面积的准确性。</p>
|
||||
</li>
|
||||
<li class="list bannerBottomListFour">
|
||||
<img class="ListImg" src="../imgs/main/workmanship.png" alt="优势">
|
||||
<p>稳定的芯片制造商合作关系</p>
|
||||
<p>团队与SMIC、GF等芯片制造商有着良好的合作关系,在12nm、22nm等先进制程上均有流片并都是一版流片成功。</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||
<section class="emailBox">
|
||||
<div class="emailLeft">
|
||||
<p>我们准备好了</p>
|
||||
<p>如果您有更多的需求，请联系我们</p>
|
||||
</div>
|
||||
<div class="emailRight">
|
||||
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
|
||||
<span>MAIL TO US</span>
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<img src="../imgs/svg/邮箱.svg" alt="邮箱">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<div class="footerBoxRight">
|
||||
<p>Copyright ©深圳汉晶电子信息有限公司 <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/logo.svg">
|
||||
<link rel="stylesheet" href="../css/ourProducts.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<script src="../js/ourProducts.js"></script>
|
||||
<title>深圳汉晶电子信息有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="./mainBusiness.html"> 主营业务</a></li>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 产品案例</a></li>
|
||||
<li> <a href="./technicalSupport.html"> 技术支持</a></li>
|
||||
<li> <a href="./approaching.html"> 展望未来</a></li>
|
||||
<li> <a href="./aboutUs.html" > 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>成功的工艺</p>
|
||||
<p>与产品案例</p>
|
||||
</div>
|
||||
<div class="topBannerBth">
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<span>联系我们</span>
|
||||
<img src="../imgs/svg/邮箱（白）.svg" alt="邮箱">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<img class="top3" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btLeft" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="tpRight" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btRight" src="../imgs/svg/线纹.svg" alt="点纹">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="banner">
|
||||
|
||||
<div class="case">
|
||||
<!-- 左侧导航菜单 -->
|
||||
<div class="product-nav">
|
||||
<!-- 芯片产品分类 -->
|
||||
<div class="product-category">
|
||||
|
||||
<div class="category-header active">
|
||||
<span class="dot"></span>
|
||||
<h3>芯片产品</h3>
|
||||
</div>
|
||||
<div class="category-content show">
|
||||
<div class="product-item " data-product="YX1000">
|
||||
<img src="../imgs/products/YX1000.png" alt="YX1000服务器芯片">
|
||||
<p>YX1000 服务器芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="KS6PRO">
|
||||
<img src="../imgs/products/K6PRO.png" alt="KS6PRO运算加速芯片">
|
||||
<p>KS6PRO 运算加速芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="KS1PRO">
|
||||
<img src="../imgs/products/KS1PRO.png" alt="KS6PRO运算加速芯片">
|
||||
<p>KS1PRO 运算加速芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="VV10">
|
||||
<img src="../imgs/products/VV10.png" alt="KS6PRO运算加速芯片">
|
||||
<p>VV10 信息安全芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="FX100">
|
||||
<img src="../imgs/products/FX100.png" alt="KS6PRO运算加速芯片">
|
||||
<p>FX100 MCU芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="XYV2">
|
||||
<img src="../imgs/products/XYV2.png" alt="KS6PRO运算加速芯片">
|
||||
<p>XYV2 红外图像处理芯片</p>
|
||||
</div>
|
||||
<!-- <div class="product-item" data-product="NAVT1">
|
||||
<img src="../imgs/products/NAVT1.png" alt="KS6PRO运算加速芯片">
|
||||
<p>NAVT1 自动驾驶视觉处理芯片</p>
|
||||
</div> -->
|
||||
<!-- <div class="product-item" data-product="BIOX1">
|
||||
<img src="../imgs/products/BIOX1.png" alt="KS6PRO运算加速芯片">
|
||||
<p>BIOX1 指纹识别芯片</p>
|
||||
</div> -->
|
||||
<div class="product-item" data-product="SND32">
|
||||
<img src="../imgs/products/SND32.png" alt="KS6PRO运算加速芯片">
|
||||
<p>SND32 高保真音频处理芯片</p>
|
||||
</div>
|
||||
<!-- <div class="product-item" data-product="WIFI6-UC">
|
||||
<img src="../imgs/products/WIFI6-UC.png" alt="KS6PRO运算加速芯片">
|
||||
<p>WIFI6-UC 通信协议芯片</p>
|
||||
</div> -->
|
||||
<div class="product-item" data-product="AGRO1">
|
||||
<img src="../imgs/products/AGRO1.png" alt="KS6PRO运算加速芯片">
|
||||
<p>AGRO1 农业环境监测芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="HEALX2">
|
||||
<img src="../imgs/products/HEALX2.png" alt="KS6PRO运算加速芯片">
|
||||
<p>HEALX2 医疗级心电检测芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="INDT5">
|
||||
<img src="../imgs/products/INDT5.png" alt="KS6PRO运算加速芯片">
|
||||
<p>INDT5 工业机器人控制芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="GSEC8">
|
||||
<img src="../imgs/products/GSEC8.png" alt="KS6PRO运算加速芯片">
|
||||
<p>GSEC8 安全加密芯片</p>
|
||||
</div>
|
||||
<div class="product-item" data-product="VIDA-M">
|
||||
<img src="../imgs/products/VIDA-M.png" alt="KS6PRO运算加速芯片">
|
||||
<p>VIDA-M 微型AI识别芯片</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他产品分类 -->
|
||||
<div class="product-category">
|
||||
<div class="category-header">
|
||||
<span class="dot"></span>
|
||||
<h3>其它产品</h3>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<!-- 其他产品内容 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧产品详情 -->
|
||||
<div class="product-detail">
|
||||
<div class="detail-content" id="YX1000">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/YX1000.png" alt="YX1000服务器芯片">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>YX1000 服务器芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：客户要求为复杂计算且数据安全设计一款高性能低功耗芯片，能够在复杂环境下稳定工作。</p> -->
|
||||
<p>解决方案：我们通过对客户需求的深度研究，设计了一款集成了高速计算、信号处理单元和数据传输功能的芯片。</p>
|
||||
<p>技术亮点：采用了定制化的22nm工艺，低功耗设计。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="KS6PRO" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/K6PRO.png" alt="KS6PRO运算加速芯片">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>KS6PRO 运算加速芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：由于客户业务的急剧扩大，客户希望在KS1PRO基础上出一个性能更强、功耗更低的芯片。</p> -->
|
||||
<p>解决方案：在KS1PRO芯片的架构基础上进一步优化细节，缩减逻辑资源，节省面积。</p>
|
||||
<p>技术亮点：使用了定制化的12nm工艺，集成了多个核心模块，并通过自研AI算法加速模块，提升了AI运算能力。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="KS1PRO" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/KS1PRO.png" alt="KS1PRO">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>KS1PRO 运算加速芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：客户需要为云计算服务器设计一款高性能低功耗的SoC，支持AI加速处理。</p> -->
|
||||
<p>解决方案：我们根据客户的需求设计了一个集成soc和特定加速模块的系统级芯片。通过先进的架构和特定的低功耗设计，确保芯片在性能和功耗上的平衡。</p>
|
||||
<p>技术亮点：使用了定制化的22nm工艺，集成了多个核心模块，并通过自研AI算法加速模块，提升了AI运算能力。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-content" id="VV10" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/VV10.png" alt="VV10">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>VV10 信息安全芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：客户需要为云计算服务器设计一款高性能低功耗的加密芯片，支持常规RSA加密算法。</p> -->
|
||||
<p>解决方案：我们根据客户的需求设计了一个由CPU核心处理器连接外部存储并通过私有总线扩展外设接口，内部包含两个RAM，具备ITCM和DTCM用于指令和数据存储。</p>
|
||||
<p>技术亮点：EAI协处理器接口和AES算法核支持高效加解密运算，RSA算法核由控制、模乘和寄存器堆组成，实现高效RSA算法运算。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="FX100" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/FX100.png" alt="FX100 MCU芯片">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>FX100 MCU芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：客户需要为医疗器械设计一款低功耗、多功能MCU芯片。</p> -->
|
||||
<p>解决方案：我们根据客户的需求设计了一个由两个Master和三个Slave组成，其中，两个Master分别是CPU内核和DMA控制器，三个Slave为内部SRAM，NVM和外设。</p>
|
||||
<p>技术亮点：FX100采用超低功耗休眠模式（μA级别），使得搭载该芯片的医疗器械在外部断电时依然可以通过内置电池继续工作。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="XYV2" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/XYV2.png" alt="XYV2">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>XYV2 红外图像处理芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：客户需要为自己品牌的安防系统设计一款高性能、低功耗的红外图像处理芯片。 </p> -->
|
||||
<p>解决方案：我们根据客户的需求设计了一个红外成像器件接收红外辐射生成图像数据；图像增强模块优化图像质量；CPU协调系统运作；DSPs进行图像处理；ROM存储程序代码；通用IO连接外部设备；图像处理加速器完成非均匀校正等；DDR3存储数据；FLASH接口存储系统信息；视频输出显示图像；调试接口用于系统维护。</p>
|
||||
<p>技术亮点：超低功耗可由内置电池供电，支持多种红外成像器件，图像处理速度快，功耗低，支持多种视频输出格式。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="detail-content" id="NAVT1" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/NAVT1.png" alt="NAVT1">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>NAVT1 自动驾驶视觉处理芯片</h2>
|
||||
<div class="info-list">
|
||||
|
||||
<p>解决方案：内置神经网络引擎、图像识别模块，支持 CAN 通信。</p>
|
||||
<p>技术亮点：支持 YOLOv5，识别延迟低，集成 IMU 实现高精度导航。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="detail-content" id="BIOX1" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/BIOX1.png" alt="BIOX1">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>BIOX1 指纹识别芯片</h2>
|
||||
<div class="info-list">
|
||||
|
||||
<p>解决方案：内置光学传感器接口与指纹模板引擎，支持超低功耗待机。</p>
|
||||
<p>技术亮点：活体检测支持，0.3s 识别时间，极低误识率。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="detail-content" id="SND32" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/SND32.png" alt="SND32">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>SND32 高保真音频处理芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：提升耳机或音响设备的音质体验。</p> -->
|
||||
<p>解决方案：集成 DAC/ADC、3D 音效引擎，兼容蓝牙音频协议。</p>
|
||||
<p>技术亮点：支持 192kHz/24bit，低失真率，音频处理延迟极低。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="detail-content" id="WIFI6-UC" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/WIFI6-UC.png" alt="WIFI6-UC">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>WIFI6-UC 通信协议芯片</h2>
|
||||
<div class="info-list">
|
||||
|
||||
<p>解决方案：实现 OFDMA、MU-MIMO 与 BSS Coloring，优化多终端通信。</p>
|
||||
<p>技术亮点：支持双频并发，吞吐率达 9.6Gbps，节能设计优秀。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="detail-content" id="AGRO1" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/AGRO1.png" alt="AGRO1">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>AGRO1 农业环境监测芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：远程采集农田温湿光等环境信息。</p> -->
|
||||
<p>解决方案：集成多种传感器与 LoRa 通信模块，太阳能供电支持。</p>
|
||||
<p>技术亮点：超低功耗，传输距离远达 30km，工业级防护设计。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="HEALX2" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/HEALX2.png" alt="HEALX2">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>HEALX2 医疗级心电检测芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：便携心电检测仪实时采集和远程上传数据。</p> -->
|
||||
<p>解决方案：支持12导联采集、蓝牙传输与噪声滤除处理。</p>
|
||||
<p>技术亮点：高精度ADC，安卓/iOS SDK支持，内置实时预警机制。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="INDT5" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/INDT5.png" alt="INDT5">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>INDT5 工业机器人控制芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：实现高精度机械臂多轴运动控制。</p> -->
|
||||
<p>解决方案：内置PWM控制、编码器接口与路径预测引擎。</p>
|
||||
<p>技术亮点：控制精度达0.01度，5us 指令周期，支持 EtherCAT。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="GSEC8" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/GSEC8.png" alt="GSEC8">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>GSEC8 安全加密芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：保障金融终端和智能设备数据安全。</p> -->
|
||||
<p>解决方案：集成 RSA/ECC 加速器，支持安全启动与防物理攻击。</p>
|
||||
<p>技术亮点：支持国密算法，具备 CC EAL5+ 认证与 TRNG。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" id="VIDA-M" style="display: none;">
|
||||
<div class="detail-image">
|
||||
<img src="../imgs/products/VIDA-M.png" alt="VIDA-M">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>VIDA-M 微型AI识别芯片</h2>
|
||||
<div class="info-list">
|
||||
<!-- <p>客户需求：摄像头内嵌芯片进行边缘端人脸与车辆识别。</p> -->
|
||||
<p>解决方案：集成 CNN 加速器，支持模型压缩和 OTA 升级。</p>
|
||||
<p>技术亮点：边缘推理延迟低，功耗仅 100mW，支持多对象识别。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bannertop">
|
||||
<div class="imgBox">
|
||||
<div class="imgBox1">
|
||||
<img src="../imgs/png/芯片2.png" alt="芯片2">
|
||||
</div>
|
||||
<div class="imgBox2">
|
||||
|
||||
<img src="../imgs/png/芯片1.png" alt="芯片1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="textBox">
|
||||
<h1>定制化芯片</h1>
|
||||
<p>
|
||||
团队有丰富的TSMC、SMIC、GF等多个芯片制造商流片成功经验
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bannerBottom">
|
||||
|
||||
<div class="bannerBottomText">
|
||||
<div class="top">
|
||||
<p>成熟的电子商城及配套软件解决方案,
|
||||
支持商品后台上下架、在线支付、快
|
||||
递匹配等多套软件，目前已为超百位
|
||||
电子商务公司及个人用户提供开发服
|
||||
务。</p>
|
||||
<p>适用范围: 电子商务公司及个人</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div> -->
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||
<section class="emailBox">
|
||||
<div class="emailLeft">
|
||||
<p>我们准备好了</p>
|
||||
<p>如果您有更多的需求，请联系我们</p>
|
||||
</div>
|
||||
<div class="emailRight">
|
||||
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
|
||||
<span>MAIL TO US</span>
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<img src="../imgs/svg/邮箱.svg" alt="邮箱">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<div class="footerBoxRight">
|
||||
<p>Copyright ©深圳汉晶电子信息有限公司 <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
|
||||
|
||||
<!-- <p>Copyright ©深圳汉晶电子信息有限公司 版权所有</p> -->
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/logo.svg">
|
||||
<link rel="stylesheet" href="../css/technicalSupport.css">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<title>深圳汉晶电子信息有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="./mainBusiness.html"> 主营业务</a></li>
|
||||
<li> <a href="./ourProducts.html"> 产品案例</a></li>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 技术支持</a></li>
|
||||
<li> <a href="./approaching.html"> 展望未来</a></li>
|
||||
<li> <a href="./aboutUs.html"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div> -->
|
||||
</header>
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>技术支持</p>
|
||||
<p>我们为您的项目提供技术指导。我们的
|
||||
技术销售代表和产品专家可以从技术角
|
||||
度解答您关于产品的问题</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<img class="top3" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btLeft" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="tpRight" src="../imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btRight" src="../imgs/svg/线纹.svg" alt="点纹">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="banner">
|
||||
<div class="bannerBox">
|
||||
<div class="bannerLeft">
|
||||
<div class="LeftImg">
|
||||
<img src="../imgs/technology/technicalAdvice.png" alt="技术咨询">
|
||||
</div>
|
||||
<p class="title">技术咨询</p>
|
||||
<p class="problem">提供芯片设计前的需求分析、技术选型、系统架构建议。</p>
|
||||
<a class="report" href="aboutUs.html#contact-map">提交服务帮助 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bannerLeft">
|
||||
<div class="LeftImg">
|
||||
<img src="../imgs/technology/customization.svg" alt="定制化开发">
|
||||
</div>
|
||||
<p class="title">定制化开发</p>
|
||||
<p class="problem">根据客户的特定需求，提供个性化定制的芯片设计服务，确保项目的高效实施。</p>
|
||||
<a class="report" href="aboutUs.html#contact-map">定制需求 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
|
||||
|
||||
</div>
|
||||
<div class="bannerRight">
|
||||
|
||||
<div class="rightImg">
|
||||
<img src="../imgs/technology/upgrade.png" alt="产品维护与升级">
|
||||
</div>
|
||||
<p class="title">产品维护与升级</p>
|
||||
<p class="problem">提供持续的技术支持，定期为客户的芯片产品提供性能优化与功能升级。</p>
|
||||
<a class="report" href="aboutUs.html#contact-map">立即升级 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||
<section class="emailBox">
|
||||
<div class="emailLeft">
|
||||
<p>我们准备好了</p>
|
||||
<p>如果您有更多的需求，请联系我们</p>
|
||||
</div>
|
||||
<div class="emailRight">
|
||||
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
|
||||
<span>MAIL TO US</span>
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<img src="../imgs/svg/邮箱.svg" alt="邮箱">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<div class="footerBoxRight">
|
||||
<p>Copyright ©深圳汉晶电子信息有限公司 <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
|
||||
<!-- <p>Copyright ©深圳汉晶电子信息有限公司 版权所有</p> -->
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 479 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 565 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 557 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 695 1063.45"><defs><style>.cls-1{fill:#009fd0;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="695 0 582.21 0 0 531.72 582.21 1063.45 695 1063.45 112.79 531.72 695 0"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 311 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.2 26.2"><defs><style>.cls-1{fill:#009fd0;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="Lang_Select" data-name="Lang Select"><g id="android-globe"><path id="Shape-7" class="cls-1" d="M13.1,26.2A13.1,13.1,0,1,1,26.2,13.1,13.1,13.1,0,0,1,13.1,26.2ZM4.55,5.82a11.23,11.23,0,0,0,7.19,18.43q.16-.37.36-.72c.36-.65.69-1.26.1-1.74s-.95-.83-1.46-1.33a3.26,3.26,0,0,1-.52-1.41,4.17,4.17,0,0,0,.44-1.24c0-.1,0-.21.07-.32.18-.73-.17-.95-.74-1.32l-.1-.06a17,17,0,0,1-1.8-1.36L7.16,14l-.35-.24a2,2,0,0,1-.91-.95c-.05-.16-.08-.32-.12-.49A3.87,3.87,0,0,0,5.31,11a4.46,4.46,0,0,1-.65-3.37c0-.11,0-.22,0-.33a5.21,5.21,0,0,0-.06-1C4.59,6.18,4.57,6,4.55,5.82Zm8.87,9.5a1.19,1.19,0,0,1,.69.18l.43.3a13.49,13.49,0,0,0,2.54,1.55c.39.17,1.46.86,1.65,1.48a.57.57,0,0,1-.05.46l-.09.14a9.67,9.67,0,0,0-.77,1.32,4.7,4.7,0,0,1-1.24,1.53,4.65,4.65,0,0,0-1.37,1.85A11.25,11.25,0,0,0,24,15.87l-.24,0a3.23,3.23,0,0,1-.92-.16,6.17,6.17,0,0,1-1.48-2.81c0-.57-.05-1.09-.05-1.59a10.92,10.92,0,0,0-.13-2,5.29,5.29,0,0,0-1-1.83,7.84,7.84,0,0,1-.71-1.09c-.38-.77-.83-1.68-1.27-2.63l.14.05a1.88,1.88,0,0,1,.3.12h0c.29,0,.57-.08.82-.1A10.92,10.92,0,0,0,14.74,2v.52L15,3.1l-.87.82-.54-.18-.63-.65-.63-.74L11.41,2a11.12,11.12,0,0,0-2.85.83,3.42,3.42,0,0,1,0,.45c.22-.09.46-.17.7-.25L10,2.77h.05a2.12,2.12,0,0,1,.74.43l.19.14a3.57,3.57,0,0,1-.46.4c-.37.31-.85.69-.88.94,0,.07.07.15.17.25s.24.24.24.36,0,.35,0,.52v0c0,.18,0,.36,0,.54a6.11,6.11,0,0,0,.48-.47,8.85,8.85,0,0,1,.9-.83l.18,0a3.15,3.15,0,0,1,2.1,1.61c.09.34-.68,1-1.36,1.55-.26.21-.5.42-.69.59a4.26,4.26,0,0,1-.54.41c-.48.31-.93.6-.7,1.13l.05.11c.16.36.54,1.18.27,1.4a.29.29,0,0,1-.18.07c-.29,0-.64-.47-.83-.72l-.08-.11a1.65,1.65,0,0,0-1.32-.43H7.25v.15a2.67,2.67,0,0,0,.94,2.56l.67.52a11.21,11.21,0,0,0,2.29,1.51,1.3,1.3,0,0,0,.55.09,6.11,6.11,0,0,0,.86-.09,6.27,6.27,0,0,1,.86-.09Z"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 85"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;}.cls-1{stroke:aqua;stroke-width:3.02px;}.cls-2{stroke:#000;stroke-width:1.02px;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M15.88,14.22H69.12a1.73,1.73,0,0,1,1.74,1.7V68.59a1.73,1.73,0,0,1-1.74,1.7H15.88a1.69,1.69,0,0,1-1.7-1.7V15.92a1.69,1.69,0,0,1,1.7-1.7Z"/><path class="cls-1" d="M42.54,26.69A88,88,0,0,1,28.4,34c1.81,10.48,6.27,18.72,14.4,23.86C51.65,51.35,57.25,43.75,56.57,34a81.52,81.52,0,0,1-14-7.3Z"/><polyline class="cls-1" points="36.03 42.77 40.27 46.96 48.97 37.55"/><line class="cls-2" x1="32.33" x2="32.33" y2="8.89"/><line class="cls-1" x1="32.33" x2="32.33" y2="8.89"/><line class="cls-1" x1="42.5" x2="42.5" y2="8.89"/><line class="cls-1" x1="52.67" x2="52.67" y2="8.89"/><line class="cls-1" x1="32.33" y1="76.15" x2="32.33" y2="85"/><line class="cls-1" x1="42.5" y1="76.15" x2="42.5" y2="85"/><line class="cls-1" x1="52.67" y1="76.15" x2="52.67" y2="85"/><line class="cls-1" y1="52.67" x2="8.89" y2="52.67"/><line class="cls-1" y1="42.5" x2="8.89" y2="42.5"/><line class="cls-1" y1="32.33" x2="8.89" y2="32.33"/><line class="cls-1" x1="76.15" y1="52.67" x2="85" y2="52.67"/><line class="cls-1" x1="76.15" y1="42.5" x2="85" y2="42.5"/><line class="cls-1" x1="76.15" y1="32.33" x2="85" y2="32.33"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.5 98.56"><defs><style>.cls-1{fill:none;stroke:#00a0d1;stroke-miterlimit:10;stroke-width:3.56px;}.cls-2{fill:red;fill-rule:evenodd;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M44.25,96.78c11.53,0,21-21.36,21-47.52s-9.42-47.48-21-47.48S23.3,23.09,23.3,49.26s9.41,47.52,21,47.52Z"/><path class="cls-1" d="M3.09,25.54C8.91,15.48,32,18,54.72,31.12S91.17,63,85.4,73s-28.92,7.52-51.62-5.59S-2.67,35.55,3.09,25.54Z"/><path class="cls-1" d="M3.09,73c-5.76-10,8-28.79,30.69-41.9S79.59,15.48,85.4,25.54,77.47,54.28,54.72,67.43,8.91,83,3.09,73Z"/><path class="cls-2" d="M44.62,57.65a9.44,9.44,0,1,0-9.46-9.41,9.44,9.44,0,0,0,9.46,9.41Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 769 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.96 96.11"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-width:3.52px;}.cls-1{stroke:#00a0d1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;}.cls-2,.cls-3,.cls-4{stroke:red;}.cls-3{stroke-linecap:round;}.cls-4{stroke-linejoin:round;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M43,81.39A39.82,39.82,0,1,1,82.79,41.6,39.9,39.9,0,0,1,43,81.39Zm0-15.51A24.31,24.31,0,1,0,18.67,41.6,24.34,24.34,0,0,0,43,65.88ZM71.34,13.7l12.92-12M1.87,82.5,14.75,70.56M1.2,1.4l12.88,12"/><path class="cls-2" d="M43,47a5.42,5.42,0,1,0-5.44-5.39A5.44,5.44,0,0,0,43,47Z"/><line class="cls-3" x1="44.15" y1="42.75" x2="83.28" y2="81.88"/><path class="cls-4" d="M84,82.14l12.17.18c-6.64-6.19-13.5-8.95-20.59-8.6C75.3,80.18,77.53,87,83.28,94.35Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 871 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.31 103.65"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-width:3.65px;}.cls-1{stroke:red;stroke-linejoin:round;}.cls-2{stroke:#00a0d1;stroke-miterlimit:10;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M42.22,84l.19-17.52a19.26,19.26,0,0,0-7.72-13.95c3.74-2,8.18-1.71,13.31.5a13.66,13.66,0,0,1,12.07.19,17.2,17.2,0,0,0-7.35,13.13l.55,18.16"/><path class="cls-2" d="M59.37,85.72l-25,.18C35.85,67,24.61,66.77,21.05,57.2,15,41,25.54,20.92,44.17,19.07c15-1.53,26.8,8.41,29.72,26.2,1.52,8.14-1.39,15-8.55,22-5.18,5.09-6.15,11-6,18.4Z"/><line class="cls-2" x1="13.2" y1="46.01" x2="1.83" y2="46.01"/><line class="cls-2" x1="93.48" y1="46.01" x2="82.11" y2="46.01"/><line class="cls-2" x1="47.72" y1="1.83" x2="47.72" y2="13.2"/><line class="cls-2" x1="21.93" y1="70.42" x2="13.38" y2="77.91"/><line class="cls-2" x1="80.54" y1="14.77" x2="71.99" y2="22.3"/><line class="cls-2" x1="81.42" y1="78.09" x2="72.87" y2="70.56"/><line class="cls-2" x1="23.69" y1="23" x2="15.14" y2="15.46"/><path class="cls-2" d="M38.2,86.41,38,92.7c-.42,3.28,2.08,8.69,9.1,9.1,5.5.33,7.54-3.09,9.48-8.22L56.74,86"/><line class="cls-2" x1="61.64" y1="93.58" x2="56.6" y2="93.58"/><line class="cls-2" x1="38.02" y1="93.58" x2="32.98" y2="93.58"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 46 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.08 80.44"><defs><style>.cls-1{fill:aqua;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M2.66,35.08l65-34.5A5.06,5.06,0,0,1,71.45.21a5.28,5.28,0,0,1,3,2.45l7.15,13.47-1.83,1.08A4.93,4.93,0,0,0,77.52,20a4.52,4.52,0,0,0,3,5.69,4.83,4.83,0,0,0,3.62-.25L86,24.57l7.48,14a5.11,5.11,0,0,1,.33,3.83,4.94,4.94,0,0,1-2.41,3l-65,34.5a5.16,5.16,0,0,1-3.83.33,5,5,0,0,1-2.95-2.41c0-.08-6.48-12.22-7.48-14.13l2.08-1.08a5.15,5.15,0,0,0,2.37-2.83,4.82,4.82,0,0,0-.29-3.62L16.25,56a4.75,4.75,0,0,0-2.7-2.08,5.06,5.06,0,0,0-3.7.37L7.77,55.41C6.82,53.58.58,41.9.58,41.86A5.21,5.21,0,0,1,.21,38a5.14,5.14,0,0,1,2.45-3Zm67-30.63L4.7,39a.61.61,0,0,0-.29.37.6.6,0,0,0,0,.46l5.28,9.89a9.1,9.1,0,0,1,5.07,0,8.85,8.85,0,0,1,5.4,4.41l.25.5v0a8.79,8.79,0,0,1,.38,6.4A9.44,9.44,0,0,1,18,65.3l5.53,10.43a.6.6,0,0,0,.37.29.72.72,0,0,0,.5,0l65-34.46a.6.6,0,0,0,.29-.37.63.63,0,0,0,0-.5L84,30.14a9.05,9.05,0,0,1-4.82-.21A8.93,8.93,0,0,1,74,25.56a9,9,0,0,1,1.87-10.84l-5.32-10a.61.61,0,0,0-.37-.29,1,1,0,0,0-.46,0Z"/><path class="cls-1" d="M25.69,36.33,56.86,19.79H57a3.54,3.54,0,0,1,2,0,3.73,3.73,0,0,1,2,1.7l.25.46h0l8.81,16.62v.13a3.64,3.64,0,0,1,0,2,3.75,3.75,0,0,1-1.71,2L37.7,59a3.59,3.59,0,0,1-2.62.25h0a3.3,3.3,0,0,1-2-1.7L24.23,41A3.46,3.46,0,0,1,24,38.37a3.42,3.42,0,0,1,1.71-2Zm31.88-12-29,15.42L36.49,54.7l29-15.42Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.59 40.39"><defs><style>.cls-1{fill:#00316a;}.cls-2{fill:#00a0d1;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="105.72 15.45 80.77 40.39 100.96 40.39 125.91 15.45 105.72 15.45"/><polygon class="cls-1" points="24.95 15.45 0 40.39 20.19 40.39 45.14 15.45 24.95 15.45"/><polygon class="cls-1" points="65.33 15.45 40.38 40.39 60.58 40.39 85.52 15.45 65.33 15.45"/><polygon class="cls-1" points="146.1 15.45 121.16 40.39 141.35 40.39 166.29 15.45 146.1 15.45"/><polygon class="cls-1" points="267.25 15.45 242.31 40.39 262.5 40.39 287.45 15.45 267.25 15.45"/><polygon class="cls-1" points="226.87 15.45 201.93 40.39 222.12 40.39 247.06 15.45 226.87 15.45"/><polygon class="cls-1" points="186.49 15.45 161.54 40.39 181.73 40.39 206.68 15.45 186.49 15.45"/><polygon class="cls-2" points="150.85 0 125.91 24.95 146.1 24.95 171.05 0 150.85 0"/><polygon class="cls-2" points="70.08 0 45.14 24.95 65.33 24.95 90.28 0 70.08 0"/><polygon class="cls-2" points="110.47 0 85.52 24.95 105.72 24.95 130.66 0 110.47 0"/><polygon class="cls-2" points="191.24 0 166.29 24.95 186.49 24.95 211.43 0 191.24 0"/><polygon class="cls-2" points="312.39 0 287.45 24.95 307.64 24.95 332.59 0 312.39 0"/><polygon class="cls-2" points="272.01 0 247.06 24.95 267.25 24.95 292.2 0 272.01 0"/><polygon class="cls-2" points="231.62 0 206.68 24.95 226.87 24.95 251.82 0 231.62 0"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.94 12.21"><defs><style>.cls-1{fill:#00eced;}</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,6.9V5.31H13.14V6.9Z"/><path id="Vector_274_Stroke_" data-name="Vector 274 Stroke " class="cls-1" d="M13.7,5.55a.79.79,0,0,1,0,1.12L8.16,12.21,7,11.09l5-5-5-5L8.16,0Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 456 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1303.67 91.95"><defs><style>.cls-1{fill:#00316a;}.cls-2{fill:#00a0d1;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="773.59 0 172 0 172 8.88 782.47 8.88 773.59 0"/><polygon class="cls-2" points="1303.67 8.88 1303.67 0 773.59 0 782.47 8.88 1303.67 8.88"/><polygon class="cls-2" points="827.94 29.64 1303.67 29.64 1303.67 20.77 819.06 20.77 827.94 29.64"/><polygon class="cls-2" points="744.95 20.77 753.83 29.64 788.09 29.64 779.22 20.77 744.95 20.77"/><polygon class="cls-1" points="779.22 20.77 788.09 29.64 827.94 29.64 819.06 20.77 779.22 20.77"/><polygon class="cls-1" points="116 20.77 116 29.64 753.83 29.64 744.95 20.77 116 20.77"/><polygon class="cls-1" points="59.33 41.54 59.33 50.41 778.58 50.41 769.71 41.54 59.33 41.54"/><polygon class="cls-2" points="778.58 50.41 1303.67 50.41 1303.67 41.54 769.71 41.54 778.58 50.41"/><polygon class="cls-1" points="0 62.3 0 71.18 714.88 71.18 706.01 62.3 0 62.3"/><polygon class="cls-1" points="734.3 62.3 743.17 71.18 792.18 71.18 783.3 62.3 734.3 62.3"/><polygon class="cls-2" points="706.01 62.3 714.88 71.18 743.17 71.18 734.3 62.3 706.01 62.3"/><polygon class="cls-2" points="792.18 71.18 1303.67 71.18 1303.67 62.3 783.3 62.3 792.18 71.18"/><polygon class="cls-2" points="781.47 91.95 1303.67 91.95 1303.67 83.07 772.6 83.07 781.47 91.95"/><polygon class="cls-1" points="772.6 83.07 696.89 83.07 667.41 83.07 172 83.07 172 91.95 676.28 91.95 705.77 91.95 781.47 91.95 772.6 83.07"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 105 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.67 26.13"><defs><style>.cls-1{fill:#009fd0;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="iconixto_linear_mail" data-name="iconixto linear mail"><g id="Group_326" data-name="Group 326"><g id="Vector_20" data-name="Vector 20"><path class="cls-1" d="M6.53,2.45A4.08,4.08,0,0,0,2.45,6.53V19.6a4.08,4.08,0,0,0,4.08,4.08h19.6a4.09,4.09,0,0,0,4.09-4.08V6.53a4.09,4.09,0,0,0-4.09-4.08H6.53M6.53,0h19.6a6.54,6.54,0,0,1,6.54,6.53V19.6a6.53,6.53,0,0,1-6.54,6.53H6.53A6.53,6.53,0,0,1,0,19.6V6.53A6.54,6.54,0,0,1,6.53,0Z"/></g><path class="cls-1" d="M16.35,14.84a8.29,8.29,0,0,1-1.11-.08,7.71,7.71,0,0,1-5.11-3L5.55,5.64A1.24,1.24,0,0,1,5.8,3.92a1.22,1.22,0,0,1,1.71.24l4.58,6.1a5.3,5.3,0,0,0,7.43,1.06,5.32,5.32,0,0,0,1.06-1.06l4.57-6.1a1.23,1.23,0,1,1,2,1.48l-4.57,6.09A7.59,7.59,0,0,1,21,13.28,7.7,7.7,0,0,1,16.35,14.84Z"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 946 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82.82 66.25"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="iconixto_linear_mail" data-name="iconixto linear mail"><g id="Group_326" data-name="Group 326"><g id="Vector_20" data-name="Vector 20"><path class="cls-1" d="M16.56,6.21A10.37,10.37,0,0,0,6.21,16.56V49.69A10.36,10.36,0,0,0,16.56,60H66.25A10.37,10.37,0,0,0,76.61,49.69V16.56A10.37,10.37,0,0,0,66.25,6.21H16.56m0-6.21H66.25A16.57,16.57,0,0,1,82.82,16.56V49.69A16.56,16.56,0,0,1,66.25,66.25H16.56A16.56,16.56,0,0,1,0,49.69V16.56A16.57,16.57,0,0,1,16.56,0Z"/></g><path class="cls-1" d="M41.45,37.61a19.1,19.1,0,0,1-2.82-.2,19.54,19.54,0,0,1-13-7.67L14.08,14.29a3.11,3.11,0,0,1,5-3.73L30.64,26a13.48,13.48,0,0,0,18.84,2.69A13.76,13.76,0,0,0,52.18,26L63.77,10.56a3.11,3.11,0,1,1,5,3.73L57.14,29.74a19.61,19.61,0,0,1-15.69,7.87Z"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 943 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.18 351.06"><defs><style>.cls-1,.cls-2{fill:#fff;isolation:isolate;}.cls-1{opacity:0.05;}.cls-2{opacity:0.05;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="Deco"><path id="Rectangle-3" class="cls-1" d="M10.41,218a40.3,40.3,0,0,1,2.87-56.93l.12-.1L133.66,53.11a40.3,40.3,0,0,1,56.81,3L298.73,175.86a40.31,40.31,0,0,1-2.87,56.93l-.12.11L175.47,340.76a40.3,40.3,0,0,1-56.81-3Z"/><path id="Rectangle-4" class="cls-2" d="M121.71,129.59a24.18,24.18,0,0,1,1.79-34.16h0L222.59,6.21A24.18,24.18,0,0,1,256.74,8h0L346,107.09a24.17,24.17,0,0,1-1.79,34.15h0l-99.08,89.23a24.19,24.19,0,0,1-34.16-1.8h0Z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 719 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345.46 379.27"><defs><style>.cls-1,.cls-2{fill:#fff;isolation:isolate;}.cls-1{opacity:0.05;}.cls-2{opacity:0.05;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="Deco"><path id="Rectangle-5" class="cls-1" d="M46.73,246.23A40.31,40.31,0,0,1,49.6,189.3l.12-.11L170,81.33a40.32,40.32,0,0,1,56.82,3L335.05,204.08A40.3,40.3,0,0,1,332.18,261l-.12.11L211.8,369A40.32,40.32,0,0,1,155,366Z"/><path id="Rectangle-6" class="cls-2" d="M6.21,129.59A24.19,24.19,0,0,1,8,95.43H8L107.09,6.21A24.18,24.18,0,0,1,141.24,8h0l89.23,99.09a24.18,24.18,0,0,1-1.8,34.15h0l-99.08,89.23a24.19,24.19,0,0,1-34.16-1.8h0Z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 715 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 108 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 81 5.23"><defs><style>.cls-1{fill:url(#未命名的渐变_18);}</style><radialGradient id="未命名的渐变_18" cx="208.4" cy="-5.84" r="43.21" gradientTransform="translate(-132.68 3.03) scale(0.83 0.07)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.1" stop-color="#ededf2"/><stop offset="0.31" stop-color="#bebdcf"/><stop offset="0.61" stop-color="#727097"/><stop offset="0.98" stop-color="#0a074b"/><stop offset="1" stop-color="#040046"/></radialGradient></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><ellipse class="cls-1" cx="40.5" cy="2.61" rx="40.5" ry="2.61"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 756 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.19 74.54"><defs><style>.cls-1{fill:none;stroke:#00ebec;stroke-miterlimit:10;stroke-width:2.5px;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M29.36,64.3,1.94,72.64l8.55-25.83L52.65,4.52C56.37.84,59.83.1,63,3.16l8.43,8.43c4,3.5,2.87,7.18-.74,11Z"/><line class="cls-1" x1="47.17" y1="10.12" x2="64.99" y2="27.93"/><line class="cls-1" x1="14.59" y1="43.22" x2="32.42" y2="61.05"/><path class="cls-1" d="M16.92,31.84,3.52,18.44,17.65,4.31c2.44-2.88,5.47-3.55,9.38-1l9.28,9.28"/><line class="cls-1" x1="14.91" y1="29.72" x2="23.76" y2="20.87"/><line class="cls-1" x1="9.64" y1="24.14" x2="15.75" y2="18.02"/><path class="cls-1" d="M43.56,58.9,57,72.28,71.07,58.16c2.9-2.43,3.56-5.48,1.06-9.39L62.85,39.5"/><line class="cls-1" x1="45.66" y1="60.9" x2="54.53" y2="52.04"/><line class="cls-1" x1="51.26" y1="66.18" x2="57.36" y2="60.05"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 971 B |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
|
|
@ -0,0 +1,208 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/imgs/svg/logo.svg">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<link rel="stylesheet" href="./css/base.css">
|
||||
<link rel="stylesheet" href="./css/footer.css">
|
||||
<link rel="stylesheet" href="./css/header.css">
|
||||
|
||||
|
||||
<title>深圳汉晶电子信息有限公司</title>
|
||||
</head>
|
||||
<body class="body">
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="./imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 首页</a></li>
|
||||
<li> <a href="./html/mainBusiness.html"> 主营业务</a></li>
|
||||
<li> <a href="./html/ourProducts.html"> 产品案例</a></li>
|
||||
<li> <a href="./html/technicalSupport.html"> 技术支持</a></li>
|
||||
<li> <a href="./html/approaching.html"> 展望未来</a></li>
|
||||
<li> <a href="./html/aboutUs.html"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="bg">
|
||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="topBanner">
|
||||
<!-- <div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>致力于成为全球领先的</p>
|
||||
<p>电子信息产品与服务供应商</p>
|
||||
<p>Devoted to be the Globalleading Supplier for Electronic Information Products and Services</p>
|
||||
</div>
|
||||
<div class="topBannerBth">
|
||||
<a href="mailto:fu.bin@hjsilicon.com">联系我们</a>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
<div class="CarouselBox">
|
||||
<div class="carousel-container">
|
||||
<div class="carousel-list">
|
||||
<!-- 第一张图片 - 左侧按钮 -->
|
||||
<div class="carousel-item">
|
||||
<img src="./imgs/home/YX1000.jpg" alt="YX1000">
|
||||
<div class="product-detail-btn left">
|
||||
<a href="./html/ourProducts.html" class="detail-link">
|
||||
<span>产品详情</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二张图片 - 右侧按钮 -->
|
||||
<div class="carousel-item">
|
||||
<img src="./imgs/home/KS6PRO.jpg" alt="KS6PRO">
|
||||
<div class="product-detail-btn right">
|
||||
<a href="./html/ourProducts.html" class="detail-link">
|
||||
<span>产品详情</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-indicators">
|
||||
<span class="indicator active"></span>
|
||||
<span class="indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="top" src="./imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btLeft" src="./imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="tpRight" src="./imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btRight" src="./imgs/svg/线纹.svg" alt="点纹">
|
||||
</section>
|
||||
<section class="banner">
|
||||
|
||||
<div class="bannerBottom2">
|
||||
<h1>为什么选择汉晶?</h1>
|
||||
<ul class="bannerBottomList">
|
||||
<li class="bannerBottomListOne">
|
||||
<p></p>
|
||||
<p> IC设计全生命周期一站式覆盖 </p>
|
||||
</li>
|
||||
<li class="bannerBottomListTwo">
|
||||
<p>独特的低功耗设计，让芯片更有竞争力</p>
|
||||
<p></p>
|
||||
</li>
|
||||
<li class="bannerBottomListThree">
|
||||
<p></p>
|
||||
<p>有稳定的芯片制造商合作关系</p>
|
||||
</li>
|
||||
<li class="bannerBottomListFour">
|
||||
<p>流片均一版成功，即流片成功率100%,助力客户赢得市场</p>
|
||||
<p></p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bannertop">
|
||||
<div class="textBox">
|
||||
<h1>芯片设计技术服务</h1>
|
||||
<p>我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、系统设计、逻辑设计、FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术，确保芯片的性能、功耗、稳定性都能满足客户需求。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bannerMid">
|
||||
<img class="bannerMidImg" src="./imgs/home/mainFunctionalResources.svg" alt="arrow">
|
||||
|
||||
<div class="bannerletf">
|
||||
<img src="./imgs/png/chip.png" alt="芯片">
|
||||
<div class="bannerletfText">
|
||||
<p>YX1000 服务器芯片</p>
|
||||
<a href="/html/ourProducts.html?product=YX1000">产品详情</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bannerRight">
|
||||
|
||||
<img src="./imgs/home/KS6PRO.png" alt="KS6PRO">
|
||||
<div class="bannerletfText">
|
||||
<p>KS6PRO 运算加速芯片</p>
|
||||
<a href="./html/ourProducts.html?product=KS6PRO">产品详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bannerBottom">
|
||||
|
||||
<div class="bannerBottomText">
|
||||
<div class="top2">
|
||||
<h1>我们的目标</h1>
|
||||
<p>汇聚人才，共同创造突破性技术，为更加智能、更加安全、更有保障的科技世界保驾护航。</p>
|
||||
</div>
|
||||
<div class="newBottom">
|
||||
<h1>研发团队</h1>
|
||||
<div class="teamBox">
|
||||
<img class="teamImg" src="./imgs/home/team.png" alt="团队">
|
||||
<div>
|
||||
<!-- <p class="perCent2" data-target="100">0%</p> -->
|
||||
<p>100%</p>
|
||||
<p>研究生学历</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<p class="perCent" data-target="30">0%</p>
|
||||
<p class="characters">研发投入</p>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<p class="perCent" data-target="70">0%</p>
|
||||
<p class="characters">研究人员</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<section class="emailBox">
|
||||
<div class="emailLeft">
|
||||
<p>我们准备好了</p>
|
||||
<p>如果您有更多的需求，请联系我们</p>
|
||||
</div>
|
||||
<div class="emailRight">
|
||||
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
|
||||
<span>MAIL TO US</span>
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<img src="./imgs/svg/邮箱.svg" alt="邮箱">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footerBox">
|
||||
<div class="footerBoxLeft">
|
||||
<img src="./imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<div class="footerBoxRight">
|
||||
<p>Copyright ©深圳汉晶电子信息有限公司 <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
|
||||
|
||||
<!-- <p>Copyright ©深圳汉晶电子信息有限公司 版权所有</p> -->
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<script src="./js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
function initAMap() {
|
||||
try {
|
||||
// 更新为完整地址
|
||||
const address = '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010';
|
||||
const companyName = '深圳汉晶电子信息有限公司';
|
||||
|
||||
// 创建地图实例
|
||||
let map = null;
|
||||
|
||||
// 地址解析
|
||||
AMap.plugin('AMap.Geocoder', function() {
|
||||
const geocoder = new AMap.Geocoder({
|
||||
city: "深圳",
|
||||
radius: 1000
|
||||
});
|
||||
|
||||
geocoder.getLocation(address, function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
const lnglat = result.geocodes[0].location;
|
||||
|
||||
map = new AMap.Map('mapContainer', {
|
||||
zoom: 16,
|
||||
center: [lnglat.lng, lnglat.lat],
|
||||
viewMode: '3D',
|
||||
resizeEnable: true,
|
||||
pitch: 40,
|
||||
mapStyle: 'amap://styles/normal'
|
||||
});
|
||||
|
||||
// 更新标记信息
|
||||
const marker = new AMap.Marker({
|
||||
position: [lnglat.lng, lnglat.lat],
|
||||
title: companyName,
|
||||
animation: 'AMAP_ANIMATION_DROP',
|
||||
offset: new AMap.Pixel(-13, -30)
|
||||
});
|
||||
|
||||
map.add(marker);
|
||||
|
||||
// 更新信息窗体内容
|
||||
const content = `
|
||||
<div class="info-content" style="padding: 15px;">
|
||||
<h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${companyName}</h4>
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
|
||||
<strong>地址：</strong>${address}
|
||||
</p>
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
|
||||
<strong>电话：</strong>13420976989
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
||||
<strong>Email：</strong>fu.bin@hjsilicon.com
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 创建信息窗体
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content: content,
|
||||
offset: new AMap.Pixel(0, -30),
|
||||
closeWhenClickMap: true
|
||||
});
|
||||
|
||||
// 地图加载完成后打开信息窗体
|
||||
map.on('complete', function() {
|
||||
infoWindow.open(map, [lnglat.lng, lnglat.lat]);
|
||||
});
|
||||
|
||||
// 点击标记时打开信息窗体
|
||||
marker.on('click', function() {
|
||||
infoWindow.open(map, marker.getPosition());
|
||||
});
|
||||
|
||||
// 添加控件
|
||||
map.addControl(new AMap.ToolBar({
|
||||
position: 'RB'
|
||||
}));
|
||||
|
||||
map.addControl(new AMap.Scale());
|
||||
|
||||
// 确保标记点居中显示
|
||||
map.setFitView([marker]);
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', function() {
|
||||
map.resize();
|
||||
map.setCenter([lnglat.lng, lnglat.lat]);
|
||||
});
|
||||
} else {
|
||||
console.error('地址解析失败:', result);
|
||||
document.getElementById('mapContainer').innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error);
|
||||
document.getElementById('mapContainer').innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// DOM加载完成时初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
});
|
||||
|
||||
// 回调函数
|
||||
window.initMap = function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const elements = document.querySelectorAll('.perCent2');
|
||||
|
||||
const animatePercentage = (element) => {
|
||||
// 添加可见类，触发CSS过渡效果
|
||||
element.classList.add('visible');
|
||||
|
||||
let current = 1;
|
||||
const target = parseInt(element.getAttribute('data-target'));
|
||||
|
||||
// 重置为初始值
|
||||
element.textContent = '1%';
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += 1;
|
||||
element.textContent = `${current}%`;
|
||||
|
||||
if (current >= target) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 30);
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
animatePercentage(entry.target);
|
||||
} else {
|
||||
// 当元素离开视口时
|
||||
entry.target.classList.remove('visible');
|
||||
entry.target.textContent = '1%'; // 重置为初始值
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5,
|
||||
rootMargin: '0px'
|
||||
});
|
||||
|
||||
elements.forEach(element => {
|
||||
// 初始状态设置
|
||||
element.classList.remove('visible');
|
||||
element.textContent = '1%';
|
||||
observer.observe(element);
|
||||
});
|
||||
|
||||
// ------------------------------
|
||||
// 获取所需的DOM元素
|
||||
const container = document.querySelector('.carousel-container');
|
||||
const list = document.querySelector('.carousel-list');
|
||||
const items = document.querySelectorAll('.carousel-item');
|
||||
const prevBtn = document.querySelector('.carousel-arrow-left');
|
||||
const nextBtn = document.querySelector('.carousel-arrow-right');
|
||||
const indicators = document.querySelectorAll('.indicator');
|
||||
|
||||
// 如果元素不存在，直接返回
|
||||
if (!container || !list || !items.length) {
|
||||
console.error('轮播图元素不存在，初始化失败');
|
||||
return;
|
||||
}
|
||||
|
||||
// 克隆第一个和最后一个项目
|
||||
const firstClone = items[0].cloneNode(true);
|
||||
const lastClone = items[items.length - 1].cloneNode(true);
|
||||
|
||||
// 将克隆的元素添加到列表中
|
||||
list.appendChild(firstClone);
|
||||
list.insertBefore(lastClone, list.firstChild);
|
||||
|
||||
// 设置初始位置，因为添加了一个项目在前面，所以从1开始
|
||||
let currentIndex = 1;
|
||||
let interval = null;
|
||||
let isTransitioning = false;
|
||||
|
||||
// 初始化位置
|
||||
updatePosition(false);
|
||||
|
||||
// 更新位置的函数
|
||||
function updatePosition(withTransition = true) {
|
||||
// 如果需要过渡动画
|
||||
if (withTransition) {
|
||||
list.style.transition = 'transform 0.5s ease';
|
||||
} else {
|
||||
list.style.transition = 'none';
|
||||
}
|
||||
|
||||
// 计算位置并应用变换
|
||||
const position = -currentIndex * 100;
|
||||
list.style.transform = `translateX(${position}%)`;
|
||||
|
||||
// 更新指示器状态，注意要减去1因为我们添加了克隆项目
|
||||
updateIndicators();
|
||||
}
|
||||
|
||||
// 更新指示器状态
|
||||
function updateIndicators() {
|
||||
// 考虑循环，将currentIndex转换回真实索引
|
||||
const realIndex = currentIndex - 1;
|
||||
// 使用模运算确保索引在有效范围内
|
||||
const activeIndex = (realIndex + items.length) % items.length;
|
||||
|
||||
indicators.forEach((indicator, i) => {
|
||||
indicator.classList.toggle('active', i === activeIndex);
|
||||
});
|
||||
}
|
||||
|
||||
// 自动播放函数
|
||||
function startAutoPlay() {
|
||||
if (interval) clearInterval(interval);
|
||||
interval = setInterval(nextSlide, 3000);
|
||||
}
|
||||
|
||||
// 暂停自动播放
|
||||
function stopAutoPlay() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
// 下一张函数
|
||||
function nextSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex++;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 上一张函数
|
||||
function prevSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex--;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 处理过渡结束事件
|
||||
list.addEventListener('transitionend', () => {
|
||||
isTransitioning = false;
|
||||
|
||||
// 如果到达了最后一个克隆项
|
||||
if (currentIndex >= items.length + 1) {
|
||||
currentIndex = 1;
|
||||
updatePosition(false);
|
||||
}
|
||||
|
||||
// 如果到达了第一个克隆项
|
||||
if (currentIndex <= 0) {
|
||||
currentIndex = items.length;
|
||||
updatePosition(false);
|
||||
}
|
||||
});
|
||||
|
||||
// // 绑定按钮事件
|
||||
// prevBtn.addEventListener('click', () => {
|
||||
// prevSlide();
|
||||
// stopAutoPlay();
|
||||
// startAutoPlay();
|
||||
// });
|
||||
|
||||
// nextBtn.addEventListener('click', () => {
|
||||
// nextSlide();
|
||||
// stopAutoPlay();
|
||||
// startAutoPlay();
|
||||
// });
|
||||
|
||||
// 绑定指示器点击事件
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('click', () => {
|
||||
currentIndex = index + 1; // +1因为我们添加了克隆项目
|
||||
updatePosition();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
});
|
||||
|
||||
// 鼠标悬停暂停
|
||||
container.addEventListener('mouseenter', stopAutoPlay);
|
||||
container.addEventListener('mouseleave', startAutoPlay);
|
||||
|
||||
// 添加触摸滑动支持
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
container.addEventListener('touchstart', (e) => {
|
||||
touchStartX = e.touches[0].clientX;
|
||||
stopAutoPlay();
|
||||
});
|
||||
|
||||
container.addEventListener('touchend', (e) => {
|
||||
touchEndX = e.changedTouches[0].clientX;
|
||||
const difference = touchStartX - touchEndX;
|
||||
|
||||
if (Math.abs(difference) > 50) {
|
||||
if (difference > 0) {
|
||||
nextSlide();
|
||||
} else {
|
||||
prevSlide();
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay();
|
||||
});
|
||||
|
||||
// 开始自动播放
|
||||
startAutoPlay();
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const accordionItems = document.querySelectorAll('.accordion-item');
|
||||
|
||||
// 为每个手风琴项添加点击事件
|
||||
accordionItems.forEach((item, index) => {
|
||||
const header = item.querySelector('.accordion-header');
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
// 获取当前是否激活
|
||||
const isActive = item.classList.contains('active');
|
||||
|
||||
// 关闭所有项
|
||||
accordionItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// 如果点击的不是当前激活项，则展开它
|
||||
if (!isActive) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 默认展开第一项
|
||||
if (index === 0) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取URL参数中的产品ID
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const productId = urlParams.get('product');
|
||||
|
||||
// 显示产品的函数
|
||||
function showProduct(productId, shouldScroll = false) { // 默认不滚动
|
||||
console.log('Showing product:', productId);
|
||||
|
||||
// 移除所有产品项的active类
|
||||
const productItems = document.querySelectorAll('.product-item');
|
||||
productItems.forEach(p => {
|
||||
p.classList.remove('active');
|
||||
});
|
||||
|
||||
// 找到对应的产品项并添加active类
|
||||
const targetItem = document.querySelector(`[data-product="${productId}"]`);
|
||||
if (targetItem) {
|
||||
targetItem.classList.add('active');
|
||||
|
||||
// 确保产品所在的分类是展开的
|
||||
const category = targetItem.closest('.category-content');
|
||||
if (category) {
|
||||
// 先移除所有分类的show类
|
||||
document.querySelectorAll('.category-content').forEach(c => {
|
||||
c.classList.remove('show');
|
||||
});
|
||||
document.querySelectorAll('.category-header').forEach(h => {
|
||||
h.classList.remove('active');
|
||||
});
|
||||
|
||||
// 展开当前分类
|
||||
category.classList.add('show');
|
||||
const categoryHeader = category.previousElementSibling;
|
||||
if (categoryHeader) {
|
||||
categoryHeader.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏所有详情内容
|
||||
document.querySelectorAll('.detail-content').forEach(content => {
|
||||
if (content) {
|
||||
content.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 显示目标产品详情
|
||||
const targetContent = document.getElementById(productId);
|
||||
if (targetContent) {
|
||||
targetContent.style.display = 'block';
|
||||
}
|
||||
|
||||
// 只在指定需要滚动时才滚动
|
||||
if (shouldScroll) {
|
||||
setTimeout(() => {
|
||||
targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化：根据URL参数决定行为
|
||||
if (productId) {
|
||||
// 如果有产品ID参数，则显示对应产品并滚动
|
||||
showProduct(productId, true); // 有参数时滚动
|
||||
} else {
|
||||
// 没有参数时，显示第一个产品但不滚动
|
||||
const firstProduct = document.querySelector('.product-item');
|
||||
if (firstProduct) {
|
||||
showProduct(firstProduct.dataset.product, false); // 无参数时不滚动
|
||||
}
|
||||
}
|
||||
|
||||
// 产品项点击处理
|
||||
const productItems = document.querySelectorAll('.product-item');
|
||||
productItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const productId = this.dataset.product;
|
||||
// 点击产品项时需要滚动
|
||||
showProduct(productId, true);
|
||||
updateURL(productId);
|
||||
});
|
||||
});
|
||||
|
||||
// 更新URL函数
|
||||
function updateURL(productId) {
|
||||
const newURL = new URL(window.location.href);
|
||||
newURL.searchParams.set('product', productId);
|
||||
window.history.pushState({ productId }, '', newURL);
|
||||
}
|
||||
|
||||
// 处理浏览器后退/前进
|
||||
window.addEventListener('popstate', function(event) {
|
||||
if (event.state && event.state.productId) {
|
||||
showProduct(event.state.productId, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue