Compare commits

...

2 Commits

Author SHA1 Message Date
yaoqin 01fbdf71a6 更新汉晶新需求 2025-04-25 18:03:20 +08:00
yaoqin d64ed43221 汉晶删除3个产品案例、添加地图组件 2025-04-25 17:18:01 +08:00
7 changed files with 316 additions and 23 deletions

View File

@ -62,7 +62,7 @@
.banner{
width: 100%;
height: 314vh;
height: 205vh;
background-image: url(../imgs/svg/背景纹.svg);
background-repeat: no-repeat;
background-size:160%;
@ -223,4 +223,47 @@
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;
}

View File

@ -319,13 +319,97 @@ body {
.banner{
width: 100%;
height: 330vh;
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%;

View File

@ -8,6 +8,13 @@
<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>
@ -85,7 +92,7 @@
</div>
</div>
</div>
<div class="bannerBottom">
<!-- <div class="bannerBottom">
<h1>为什么选择汉晶?</h1>
<ul class="bannerBottomList">
<li class="bannerBottomListOne">
@ -107,9 +114,27 @@
</ul>
</div>
</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">

View File

@ -89,22 +89,22 @@
<img src="../imgs/products/XYV2.png" alt="KS6PRO运算加速芯片">
<p>XYV2 红外图像处理芯片</p>
</div>
<div class="product-item" data-product="NAVT1">
<!-- <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">
</div> -->
<!-- <div class="product-item" data-product="BIOX1">
<img src="../imgs/products/BIOX1.png" alt="KS6PRO运算加速芯片">
<p>BIOX1 指纹识别芯片</p>
</div>
</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">
<!-- <div class="product-item" data-product="WIFI6-UC">
<img src="../imgs/products/WIFI6-UC.png" alt="KS6PRO运算加速芯片">
<p>WIFI6-UC 通信协议芯片</p>
</div>
</div> -->
<div class="product-item" data-product="AGRO1">
<img src="../imgs/products/AGRO1.png" alt="KS6PRO运算加速芯片">
<p>AGRO1 农业环境监测芯片</p>
@ -226,34 +226,34 @@
</div>
</div>
</div>
<div class="detail-content" id="NAVT1" style="display: none;">
<!-- <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> -->
<!-- <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> -->
<div class="detail-content" id="SND32" style="display: none;">
<div class="detail-image">
<img src="../imgs/products/SND32.png" alt="SND32">
@ -268,20 +268,20 @@
</div>
</div>
</div>
<div class="detail-content" id="WIFI6-UC" style="display: none;">
<!-- <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> -->
<div class="detail-content" id="AGRO1" style="display: none;">
<div class="detail-image">
<img src="../imgs/products/AGRO1.png" alt="AGRO1">

View File

@ -56,7 +56,7 @@
</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>
<a class="report" href="aboutUs.html#contact-map">提交服务帮助 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
</div>
@ -66,7 +66,7 @@
</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>
<a class="report" href="aboutUs.html#contact-map">定制需求 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
</div>
<div class="bannerRight">
@ -76,7 +76,7 @@
</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>
<a class="report" href="aboutUs.html#contact-map">立即升级 <img class="arrow" src="../imgs/svg/箭头.svg" alt="箭头"></a>
</div>
</div>

View File

@ -83,6 +83,33 @@
<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>

114
hanJing/js/aboutUs.js Normal file
View File

@ -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();
}
};