Compare commits
4 Commits
6fc1b1aa16
...
ded48c0625
| Author | SHA1 | Date |
|---|---|---|
lzx
|
ded48c0625 | |
 yaoqin
|
ea02673740 | |
|
yaoqin
|
6d6f59d7a8 | |
|
lzx
|
f21af39358 |
|
|
@ -31,5 +31,5 @@
|
|||
### 设计技术
|
||||
```
|
||||
html+css+js
|
||||
如有后台服务需求，可使用express
|
||||
如有后台服务需求，可使用express 或 express
|
||||
```
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<ul class="nav">
|
||||
<li><a class="menu " href="../index.html">首页</a> </li>
|
||||
<li><a class="menu" href="software.html">软件开发</a></li>
|
||||
<li><a class="menu" href="software.html">网站服务</a></li>
|
||||
<li><a class="menu" href="bigDataServices.html">大数据服务</a></li>
|
||||
<li><a style="color: black;text-decoration: none;" href="#">关于我们</a></li>
|
||||
<li><a href="mailto:support@betmaysg.com"> <img class="email" src="../imgs/PNG/邮件.png" alt="邮件"></a></li>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<p>About us</p>
|
||||
</div>
|
||||
<p class="content">
|
||||
我们是一家专业的软件开发公司，致力于
|
||||
我们是一家专业的网站服务公司，致力于
|
||||
为您提供全方位的解决方案。无论您需要
|
||||
定制应用程序开发、APP开发或者大数据
|
||||
技术服务，我们的专业团队将为您量身打
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<ul class="nav">
|
||||
<li><a class="menu" href="../index.html">首页</a> </li>
|
||||
<li><a class="menu" href="software.html">软件开发</a></li>
|
||||
<li><a class="menu" href="software.html">网站服务</a></li>
|
||||
<li><a style="color: black;text-decoration: none;" href="#">大数据服务</a></li>
|
||||
<li><a class="menu" href="aboutUs.html">关于我们</a></li>
|
||||
<li><a href="mailto:support@betmaysg.com"> <img class="email" src="../imgs/PNG/邮件.png" alt="邮件"></a></li>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
<ul class="nav">
|
||||
<li>首页</li>
|
||||
<li>软件开发</li>
|
||||
<li>网站服务</li>
|
||||
<li>大数据服务</li>
|
||||
<li>关于我们</li>
|
||||
<li><img class="email" src="../imgs/PNG/邮件.png" alt="邮件"></li>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
<ul class="nav">
|
||||
<li><a class="menu " href="../index.html">首页</a> </li>
|
||||
<li > <a style="color: black;text-decoration: none;" href="#">软件开发</a></li>
|
||||
<li > <a style="color: black;text-decoration: none;" href="#">网站服务</a></li>
|
||||
<li><a class="menu" href="bigDataServices.html">大数据服务</a></li>
|
||||
<li><a class="menu" href="aboutUs.html">关于我们</a></li>
|
||||
<li><a href="mailto:support@betmaysg.com"> <img class="email" src="../imgs/PNG/邮件.png" alt="邮件"></a></li>
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
|
||||
<div class="ABtitleBox">
|
||||
<div class="ABtitle">
|
||||
<h1>软件开发</h1>
|
||||
<p>Software Development</p>
|
||||
<h1>网站服务</h1>
|
||||
<p>Website Services</p>
|
||||
</div>
|
||||
<p class="content">
|
||||
巨象云数为企业提供软件外包、系统设计、开发服务并在预算范围内按质交付项目。我们能够帮助客户确定对应系统或产品的具体需求，并管理和维护其整个生命周期。
|
||||
巨象云数为企业提供软件外包、系统设计、开发服务并在预算范围内按质交付项目。我们能够帮助客户确定对应系统或产品的具体需求，并管理和维护其整个生命周期。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
<ul class="nav">
|
||||
<li><a class=" home" href="#">首页</a> </li>
|
||||
<li><a class="menu" href="html/software.html">软件开发</a></li>
|
||||
<li><a class="menu" href="html/software.html">网站服务</a></li>
|
||||
<li><a class="menu" href="html/bigDataServices.html">大数据服务</a></li>
|
||||
<li><a class="menu" href="html/aboutUs.html">关于我们</a></li>
|
||||
<li><a href="mailto:support@betmaysg.com"> <img class="email" src="./imgs/PNG/邮件.png" alt="邮件"></a></li>
|
||||
|
|
@ -67,11 +67,11 @@
|
|||
<section class="software">
|
||||
<div class="textBox">
|
||||
<div class="text">
|
||||
<div class="Tilte"> <span class="round"></span> <h1 class="textTilte">软件开发
|
||||
<div class="Tilte"> <span class="round"></span> <h1 class="textTilte">网站服务
|
||||
</h1>
|
||||
</div>
|
||||
<p class="introduce">巨象云数科技是一家专门从事“软件开发"
|
||||
服务的企业适用于PC，移动，APP,小程
|
||||
<p class="introduce">巨象云数科技是一家专门从事“网站服务"
|
||||
的企业适用于PC，移动，APP,小程
|
||||
序，微信，wap站等专业的开发技术，产
|
||||
品团队让您的产品快速启动，完美落地。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,31 +10,31 @@
|
|||
background-image: url(../imgs/svg/关于我们图.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:43vw auto;
|
||||
background-position:51vw 0vw;
|
||||
background-position:46vw 0vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 21%;
|
||||
width: 27%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
left: 16vw;
|
||||
top: 10vh;
|
||||
left: 18vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
font-size: 2.5vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.3vw;
|
||||
font-size: 1.28vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 18px;
|
||||
line-height: 5vh;
|
||||
margin-top: 10px;
|
||||
line-height: 4.2vh;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 112vh;
|
||||
height: 314vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
|
|
@ -133,6 +133,94 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -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: 35px;
|
||||
|
||||
}
|
||||
|
|
@ -10,12 +10,12 @@
|
|||
|
||||
}
|
||||
.emailBox{
|
||||
width: 80vw;
|
||||
height: 15vh;
|
||||
width: 55vw;
|
||||
height: 12vh;
|
||||
background: #00ECEC;
|
||||
position: absolute;
|
||||
top: -8vh;
|
||||
left: 10vw;
|
||||
top: 18vh;
|
||||
left: 30vw;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
padding-left: 4vw;
|
||||
}
|
||||
.emailLeft p{
|
||||
font-size: 1.8vw;
|
||||
font-size: 1.2vw;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.emailLeft p:nth-child(2){
|
||||
font-size: 1.2vw;
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.email{
|
||||
width: 38%;
|
||||
width: 50%;
|
||||
height: 48%;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
|
|
@ -65,13 +65,13 @@
|
|||
transition: all 0.3s ease;
|
||||
}
|
||||
.email span{
|
||||
font-size: 1.2vw;
|
||||
font-size: 1vw;
|
||||
color: #3FB7DC;
|
||||
font-weight: 800;
|
||||
|
||||
}
|
||||
.email img{
|
||||
width: 2vw;
|
||||
width: 1.5vw;
|
||||
height: auto;
|
||||
}
|
||||
.email:hover{
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
.header{
|
||||
width: 100%;
|
||||
height: 26vh;
|
||||
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{
|
||||
|
|
@ -76,7 +80,7 @@
|
|||
/* .active{
|
||||
background: palegoldenrod;
|
||||
} */
|
||||
.active::before{
|
||||
.actives::before{
|
||||
content:url(../imgs/svg/页面选择图标.svg);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,212 @@ body {
|
|||
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%;
|
||||
|
|
@ -33,7 +239,7 @@ body {
|
|||
color: #fff;
|
||||
position: absolute;
|
||||
top: 16vh;
|
||||
left: 13vw;
|
||||
left: 13vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
|
|
@ -84,6 +290,12 @@ body {
|
|||
transform: scale(1.1);
|
||||
|
||||
}
|
||||
.top{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
|
|
@ -122,7 +334,7 @@ body {
|
|||
.bannertop{
|
||||
width: 100%;
|
||||
height:105vh;
|
||||
background-image: url(../imgs/png/ourProducts.png);
|
||||
background-image: url(../imgs/home/mainBusiness.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
|
|
@ -274,7 +486,7 @@ body {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.bannerBottomText .top{
|
||||
.bannerBottomText .top2{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
/* background-color: palegoldenrod; */
|
||||
|
|
@ -290,11 +502,12 @@ body {
|
|||
|
||||
|
||||
}
|
||||
.top p{
|
||||
width: 60%;
|
||||
font-size: 1vw;
|
||||
line-height: 4.5vh;
|
||||
.top2 p{
|
||||
width: 80%;
|
||||
font-size: 1.3vw;
|
||||
line-height: 5vh;
|
||||
margin-top: 4vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -309,6 +522,7 @@ body {
|
|||
.bottomRight{
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.perCent{
|
||||
font-size: 2.5vw;
|
||||
font-weight: 600;
|
||||
|
|
@ -348,4 +562,43 @@ body {
|
|||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------- */
|
||||
|
|
@ -15,27 +15,31 @@
|
|||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 26%;
|
||||
width: 28%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 16vh;
|
||||
top: 20vh;
|
||||
left: 13vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
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: 1.2vw;
|
||||
|
||||
color: #01A0D0;
|
||||
font-size:3.5vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-top: 18px;
|
||||
line-height: 6.5vh;
|
||||
text-align: right;
|
||||
letter-spacing: 0.5vw;
|
||||
|
||||
|
||||
}
|
||||
.topBannerBth{
|
||||
|
|
@ -101,7 +105,7 @@
|
|||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 219vh;
|
||||
min-height: 110vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
|
|
@ -216,4 +220,229 @@
|
|||
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,12 +68,21 @@
|
|||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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: 25%;
|
||||
width: 24%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -129,3 +138,11 @@
|
|||
color: #00E0E2;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).svg">
|
||||
<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">
|
||||
|
|
@ -14,34 +14,33 @@
|
|||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/汉晶LOGO(BJF).svg" alt="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="./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="active" href="#" style="color: #fff;"> 关于我们</a></li>
|
||||
<li> <a href="./approaching.html"> 展望未来</a></li>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div>
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>关于我们</p>
|
||||
<p>我们创造的解决方案不仅仅是产品,更是赋能个人、组织乃至整个世界。
|
||||
我们致力于帮助客户保持竞争优势,
|
||||
并拥抱技术革新。</p>
|
||||
<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="点纹">
|
||||
|
|
@ -86,7 +85,29 @@
|
|||
</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>
|
||||
|
||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||
|
|
@ -107,12 +128,11 @@
|
|||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/汉晶LOGO(BJF).svg" alt="logo">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).svg">
|
||||
<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">
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/汉晶LOGO(BJF).svg" alt="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
|
||||
</div>
|
||||
<ul>
|
||||
|
|
@ -22,14 +22,99 @@
|
|||
<li> <a href="./mainBusiness.html"> 主营业务</a></li>
|
||||
<li> <a href="./ourProducts.html"> 产品案例</a></li>
|
||||
<li> <a href="./technicalSupport.html"> 技术支持</a></li>
|
||||
<li> <a class="active" href="#" style="color: #fff;"> 展望未来</a></li>
|
||||
<li> <a class="actives" href="#" style="color: #fff;"> 展望未来</a></li>
|
||||
<li> <a href="./aboutUs.html"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -3,33 +3,192 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).svg">
|
||||
<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(BJF).svg" alt="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a class="active" href="#" style="color: #fff;"> 主营业务</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">
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -3,46 +3,49 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).svg">
|
||||
<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(BJF).svg" alt="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
|
||||
<li> <a class="active" href="#" style="color: #fff;"> 产品介绍</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">
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div>
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>我们的产品</p>
|
||||
<p>我们提供芯片研发、生产和销售，芯片销售代理;以及软件WEB设计服务。</p>
|
||||
<p>成功的工艺</p>
|
||||
<p>与产品案例</p>
|
||||
</div>
|
||||
<div class="topBannerBth">
|
||||
<a href="mailto:fu.bin@hjsilicon.com">
|
||||
<span>MAIL TO US</span>
|
||||
<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="点纹">
|
||||
|
|
@ -50,7 +53,316 @@
|
|||
</section>
|
||||
|
||||
<section class="banner">
|
||||
<div class="bannertop">
|
||||
|
||||
<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>解决方案：在上版芯片的架构基础上进一步优化细节，缩减逻辑资源，节省面积。</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>客户需求：自动识别障碍物与车道线，适配自动驾驶系统。</p> -->
|
||||
<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>解决方案：内置光学传感器接口与指纹模板引擎，支持超低功耗待机。</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>客户需求：升级路由器至 Wi-Fi 6 并支持多设备高速连接。</p> -->
|
||||
<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">
|
||||
|
|
@ -84,7 +396,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</section>
|
||||
|
||||
|
|
@ -106,7 +418,7 @@
|
|||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/汉晶LOGO(BJF).svg" alt="logo">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).svg">
|
||||
<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">
|
||||
|
|
@ -14,19 +14,21 @@
|
|||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/svg/汉晶LOGO(BJF).svg" alt="logo">
|
||||
<img src="../imgs/svg/logo.svg" alt="logo">
|
||||
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="./ourProducts.html"> 产品介绍</a></li>
|
||||
<li> <a class="active" href="#" style="color: #fff;"> 技术支持</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">
|
||||
<!-- <div class="bg">
|
||||
<img src="../imgs/svg/点纹.svg" alt="背景">
|
||||
</div>
|
||||
</div> -->
|
||||
</header>
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
|
|
@ -39,6 +41,7 @@
|
|||
|
||||
|
||||
</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="点纹">
|
||||
|
|
@ -46,26 +49,37 @@
|
|||
</section>
|
||||
|
||||
<section class="banner">
|
||||
<div class="bannerBox">
|
||||
<div class="bannerLeft">
|
||||
<div class="LeftImg">
|
||||
<img src="../imgs/svg/技术服务帮助.svg" alt="技术服务帮助">
|
||||
<img src="../imgs/technology/technicalAdvice.png" alt="技术咨询">
|
||||
</div>
|
||||
<p class="title">技术服务帮助</p>
|
||||
<p class="problem">获取汉晶技术支持专家提供的保密帮助。</p>
|
||||
<p class="title">技术咨询</p>
|
||||
<p class="problem">提供芯片设计前的需求分析、技术选型、系统架构建议。</p>
|
||||
<a class="report" href="mailto:fu.bin@hjsilicon.com">提交服务帮助 <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="mailto:fu.bin@hjsilicon.com">定制需求 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
|
||||
|
||||
</div>
|
||||
<div class="bannerRight">
|
||||
|
||||
<div class="rightImg">
|
||||
<img src="../imgs/svg/产品安全漏洞.svg" alt="产品安全漏洞">
|
||||
<div class="rightImg">
|
||||
<img src="../imgs/technology/upgrade.png" alt="产品维护与升级">
|
||||
</div>
|
||||
<p class="title">产品安全漏洞</p>
|
||||
<p class="problem">发现您的产品存在潜在安全漏洞?</p>
|
||||
<a class="report" href="mailto:fu.bin@hjsilicon.com">立即报告 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
|
||||
<p class="title">产品维护与升级</p>
|
||||
<p class="problem">提供持续的技术支持，定期为客户的芯片产品提供性能优化与功能升级。</p>
|
||||
<a class="report" href="mailto:fu.bin@hjsilicon.com">立即升级 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||
|
|
@ -86,7 +100,7 @@
|
|||
|
||||
<section class="footerBox" >
|
||||
<div class="footerBoxLeft">
|
||||
<img src="../imgs/svg/汉晶LOGO(BJF).svg" alt="logo">
|
||||
<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>
|
||||
|
|
|
|||
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 |
|
Before Width: | Height: | Size: 311 B 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: 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 |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
|
@ -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 |
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="./imgs/svg/汉晶LOGO(BJF).svg">
|
||||
<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">
|
||||
|
|
@ -16,23 +16,28 @@
|
|||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="./imgs/svg/汉晶LOGO(BJF).svg" alt="logo">
|
||||
<img src="./imgs/svg/logo.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a class="active" href="#" style="color: #fff;"> 首页</a></li>
|
||||
<!-- <li> <a href="./html/mainBusiness.html"> 主营业务</a></li> -->
|
||||
<li> <a href="./html/ourProducts.html"> 产品介绍</a></li>
|
||||
<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/approaching.html"> 展望未来</a></li>
|
||||
<li> <a href="./html/aboutUs.html"> 关于我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<!-- <div class="bg">
|
||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||
</div>
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="topBanner">
|
||||
<div class="topBannerLeft">
|
||||
<!-- <div class="topBannerLeft">
|
||||
<div class="topBannerLeftTitle">
|
||||
<p>致力于成为全球领先的</p>
|
||||
<p>电子信息产品与服务供应商</p>
|
||||
|
|
@ -42,47 +47,88 @@
|
|||
<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="btLeft" src="./imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="tpRight" src="./imgs/svg/点纹.svg" alt="点纹">
|
||||
<img class="btRight" src="./imgs/svg/线纹.svg" alt="点纹">
|
||||
|
||||
</section>
|
||||
<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="bannertop">
|
||||
<div class="textBox">
|
||||
<h1>优秀的产品</h1>
|
||||
<p>以我们的优质产品加速技术突破，建设更美好的世界。我们始终坚信，技术创新是推动人类文明的核心动力，我们以突破性研发为引擎，通过与全球合作伙伴协同合作。持续迭代的智能解决方案，加速构建未来生态。</p>
|
||||
<h1>芯片设计技术服务</h1>
|
||||
<p>我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、系统设计、逻辑设计、FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术，确保芯片的性能、功耗、稳定性都能满足客户需求。</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bannerMid">
|
||||
<img class="bannerMidImg" src="/imgs/svg/mainFunctionalResources.svg" alt="主要功能资源">
|
||||
<img class="bannerMidImg" src="./imgs/home/mainFunctionalResources.svg" alt="arrow">
|
||||
|
||||
<div class="bannerletf">
|
||||
<img src="./imgs/png/chip.png" alt="芯片">
|
||||
<div class="bannerletfText">
|
||||
<p>定制化芯片</p>
|
||||
<a href="/html/ourProducts.html">产品详情</a>
|
||||
<p>YX1000 服务器芯片</p>
|
||||
<a href="/html/ourProducts.html?product=YX1000">产品详情</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bannerRight">
|
||||
|
||||
<img src="/imgs/png/WEBdesign.png" alt="WEB设计">
|
||||
<img src="./imgs/home/ks6pro.png" alt="KS6PRO">
|
||||
<div class="bannerletfText">
|
||||
<p>电子商场WEB设计</p>
|
||||
<a href="./html/ourProducts.html">产品详情</a>
|
||||
<p>KS6PRO 运算加速芯片</p>
|
||||
<a href="./html/ourProducts.html?product=KS6PRO">产品详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bannerBottom">
|
||||
|
||||
<div class="bannerBottomText">
|
||||
<div class="top">
|
||||
<div class="top2">
|
||||
<h1>我们的目标</h1>
|
||||
<p>汇聚人才，共同创造突破性技术，为更加智能、更加安全、更有保障的科技世界保驾护航。</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<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>
|
||||
|
|
@ -91,7 +137,7 @@
|
|||
<p class="perCent" data-target="70">0%</p>
|
||||
<p class="characters">研究人员</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -120,7 +166,7 @@
|
|||
|
||||
<section class="footerBox">
|
||||
<div class="footerBoxLeft">
|
||||
<img src="./imgs/svg/汉晶LOGO(BJF).svg" alt="logo">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const elements = document.querySelectorAll('.perCent');
|
||||
const elements = document.querySelectorAll('.perCent2');
|
||||
|
||||
const animatePercentage = (element) => {
|
||||
// 添加可见类，触发CSS过渡效果
|
||||
|
|
@ -42,4 +42,170 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
Loading…
Reference in New Issue