release汉晶网站完成

This commit is contained in:
yaoqin 2025-04-18 14:16:06 +08:00
parent 640eb204d9
commit 64f104ffad
42 changed files with 1647 additions and 0 deletions

138
hanJing/css/aboutUs.css Normal file
View File

@ -0,0 +1,138 @@
.topBanner{
width: 100%;
height: 68vh;
background-color: #030045;
display: flex;
justify-content: center;
align-items: start;
/* background: palegoldenrod; */
overflow: hidden;
background-image: url(../imgs/svg/关于我们图.svg);
background-repeat: no-repeat;
background-size:43vw auto;
background-position:51vw 0vw;
position: relative;
}
.topBannerLeft{
width: 21%;
height: 80%;
/* background: #00316B; */
color: #fff;
position: absolute;
top: 5vh;
left: 16vw;
}
.topBannerLeft p:nth-child(1){
font-size: 3vw;
font-weight: 600;
letter-spacing: 0.5vw;
}
.topBannerLeft p:nth-child(2){
font-size: 1.3vw;
color: #01A0D0;
margin-top: 18px;
line-height: 5vh;
}
.btLeft{
width: 20vw;
position: absolute;
bottom: 15vh;
left: -5.5vw;
}
.tpRight{
width: 17vw;
position: absolute;
top: 10vh;
right: -6vw;
}
.btRight{
width:70vw;
position: absolute;
bottom: -1.3vh;
right: 0vw;
}
/* ------------------- */
.banner{
width: 100%;
height: 112vh;
background-image: url(../imgs/SVG/背景纹.svg);
background-repeat: no-repeat;
background-size:160%;
background-position: 54vw -42vw;
background-color: #00316B;
}
/* .bannerLeft{
width: 100%;
height: 30%;
background-color: rgba(3, 0, 69, 0.5);
} */
.bannertop{
width: 100%;
height:105vh;
background-image: url(../imgs/svg/企业文化理念\(BJF\).svg);
background-repeat: no-repeat;
background-size:40vw;
background-position:0vw 50%;
display: flex;
align-items: center;
justify-content: end;
padding-right: 5vw;
padding-top: 18vh;
}
.textBox{
width: 45vw;
height: 100%;
color: #fff;
/* background: peru; */
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
}
.textOne,.textTwo,.textThree{
width: 100%;
height: 30%;
/* background-color: rgba(3, 0, 69, 0.5); */
display: flex;
align-items: center;
justify-content: start;
margin-top: 3vh;
}
.Left{
width: 15%;
height: 100%;
}
.Left img{
width: 5vw;
height: auto;
}
.Right{
width: 80%;
height: 100%;
}
.Right p:nth-child(1){
font-size: 1.9vw;
font-weight: 600;
/* letter-spacing: 0.3vw; */
}
.Right p:nth-child(2){
font-size: 1.25vw;
margin-top: 2vh;
}
/* ------------------- */

70
hanJing/css/base.css Normal file
View File

@ -0,0 +1,70 @@
/* 所有标签的内外边距清零 */
* {
margin: 0px;
padding: 0px;
/* css3盒子模型 */
box-sizing: border-box;
font-family:DFKai-SB;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
/* li {
list-style: none
} */
/* ul{
list-style: none;
} */
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle;
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 默认有灰色边框我们需要手动去掉 */
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
/* background-color: #fff; */
/* font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; */
/* color: #666 */
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix::after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}

116
hanJing/css/footer.css Normal file
View File

@ -0,0 +1,116 @@
.footer{
width: 100%;
height: 60vh;
/* background-color: #030045; */
position: relative;
background:
url(../imgs/svg/页尾背景左.svg) 2vw 28vh/400px auto no-repeat,
url(../imgs/SVG/页尾背景右.svg) 78vw 19vh/400px auto no-repeat,
hsl(243, 100%, 14%); /* 背景色放在最后 */
}
.emailBox{
width: 80vw;
height: 15vh;
background: #00ECEC;
position: absolute;
top: -8vh;
left: 10vw;
border-radius: 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
.emailLeft{
width: 50%;
height: 100%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
padding-left: 4vw;
}
.emailLeft p{
font-size: 1.8vw;
color: #fff;
font-weight: 600;
}
.emailLeft p:nth-child(2){
font-size: 1.2vw;
color: #fff;
font-weight: 400;
}
.emailRight{
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.email{
width: 38%;
height: 48%;
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 3px solid #3FB7DC;
display: flex;
align-items: center;
justify-content: space-around;
cursor: pointer;
transition: all 0.3s ease;
}
.email span{
font-size: 1.2vw;
color: #3FB7DC;
font-weight: 800;
}
.email img{
width: 2vw;
height: auto;
}
.email:hover{
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
/* --------------------------------------- */
.footerBox{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.footerBoxLeft{
width: 30vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.footerBoxLeft img{
width: 8vw;
height:auto;
}
.footerBoxRight{
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: end;
justify-content: end;
padding-bottom: 2vh;
padding-right: 5vw;
color: #fff;
}
.footerBoxRight p{
font-size: 1.2vw;
font-weight: 400;
}

86
hanJing/css/header.css Normal file
View File

@ -0,0 +1,86 @@
.header{
width: 100%;
height: 26vh;
background-color: #030045;
position: relative;
margin-bottom: 0;
margin-bottom: -1px;
}
.header .bg{
width: 20vw;
height: 35%;
/* background: palegoldenrod; */
position: absolute;
bottom: 0;
left: 24vw;
}
.header .bg img{
width: 100%;
height:auto;
}
.header .container{
width: 100%;
height: 65%;
display: flex;
align-items: start;
justify-content: space-between;
/* background: palegoldenrod; */
}
.logo{
width: 20%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.logo img{
width: 3.5vw;
height: auto;
}
.header ul{
width: 45%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* background: palevioletred; */
margin-left: 5vw;
padding-right: 10vw;
}
.header ul li{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9vw;
}
.header ul li a{
display: inline-block;
color: #009FD1;
transition: all 0.2s ease;
font-weight: 600;
font-size: 1vw;
position: relative;
padding-bottom: 2vh;
}
.header ul li a:hover{
font-size: 1vw;
color: #fff;
text-shadow: 0 0 10px rgba(41, 111, 216, 0.5);
}
/* .active{
background: palegoldenrod;
} */
.active::before{
content:url(../imgs/SVG/页面选择图标.svg);
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
}

351
hanJing/css/index.css Normal file
View File

@ -0,0 +1,351 @@
.topBanner{
width: 100%;
height: 100vh;
background-color: #030045;
display: flex;
justify-content: center;
align-items: start;
/* background: palegoldenrod; */
overflow: hidden;
background-image: url(../imgs/PNG/首页图.png);
background-repeat: no-repeat;
background-size:68vw auto;
background-position:35vw -4vw;
position: relative;
margin-top: 0;
background-color: #030045;
}
* {
box-sizing: border-box; /* 确保所有元素使用相同的盒模型 */
}
body {
margin: 0;
padding: 0;
overflow-x: hidden; /* 防止水平滚动条 */
}
.topBannerLeft{
width: 43%;
height: 80%;
/* background: #00316B; */
color: #fff;
position: absolute;
top: 16vh;
left: 13vw;
}
.topBannerLeft p:nth-child(1){
font-size: 3vw;
font-weight: 600;
letter-spacing: 0.3vw;
}
.topBannerLeft p:nth-child(2){
font-size: 3vw;
font-weight: 600;
letter-spacing: 0.3vw;
}
.topBannerLeft p:nth-child(3){
font-size: 1.2vw;
font-weight: 600;
color: #01A0D0;
margin-top: 18px;
}
.topBannerBth{
width: 100%;
padding-left: 5vw;
margin-top: 30vh;
}
.topBannerBth a{
display: block;
width: 15vw;
height: 4vw;
font-size: 1.4vw;
font-weight: 600;
color: #fff;
text-decoration: none;
background: #00ECEC;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
transition: all 0.3s ease;
}
.topBannerBth a:hover{
color: #fff;
/* background: #00A0D0;
*/
transform: scale(1.1);
}
.btLeft{
width: 20vw;
position: absolute;
bottom: 8vh;
left: -5.5vw;
}
.tpRight{
width: 17vw;
position: absolute;
top: 16vh;
right: -6vw;
}
.btRight{
width:70vw;
position: absolute;
bottom: -1.3vh;
right: 0vw;
}
/* ----------------------------- */
.banner{
width: 100%;
height: 330vh;
background-image: url(../imgs/SVG/背景纹.svg);
background-repeat: no-repeat;
background-size:160%;
background-position: 54vw -42vw;
background-color: #00316B;
}
/* .bannerLeft{
width: 100%;
height: 30%;
background-color: rgba(3, 0, 69, 0.5);
} */
.bannertop{
width: 100%;
height:105vh;
background-image: url(../imgs/png/我们的产品.png);
background-repeat: no-repeat;
background-size:40vw;
background-position:0vw 50%;
display: flex;
align-items: center;
justify-content: end;
padding-right: 22vw;
padding-top: 18vh;
}
.textBox{
width: 29vw;
height: 50%;
color: #fff;
/* background: peru; */
}
.textBox h1{
font-size: 2vw;
font-weight: 600;
letter-spacing: 0.3vw;
}
.textBox p{
font-size: 1.2vw;
line-height: 6vh;
margin-top: 5vh;
}
/* ------------------------- */
.bannerMid{
width: 100%;
height: 105vh;
background-color: rgba(3, 0, 69, 0.8);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.bannerMidImg{
width: auto;
height: 118vh;
position: absolute;
top: -5vh;
right: 5vw;
}
.bannerletf{
width: 35%;
height: 50%;
background: palegreen;
z-index: 10;
background-color: #00316B;
margin-right: 5vw;
border-radius: 20px;
position: relative;
}
.bannerletf img{
width: 30vw;
height: auto;
position: absolute;
top: -8vh;
left: 2.5vw;
}
.bannerletfText{
width: 100%;
height: 35%;
position: absolute;
bottom:2vh;
left: 0;
color: #fff;
text-align: center;
}
.bannerletfText p{
font-size: 1.2vw;
font-weight: 600;
}
.bannerletfText a{
width: 17vw;
height: 3vw;
display: block;
font-size: 1.2vw;
color: #00EDEF;
border: 1px solid #00EDEF;
border-radius: 10px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 18px;
}
.bannerletfText a:hover{
color: #00A0D0;
/* background: #00A0D0; */
}
.bannerRight{
width: 35%;
height: 50%;
z-index: 10;
background-color: #00316B;
margin-left: 5vw;
border-radius: 20px;
position: relative;
}
.bannerRight img{
width: 30vw;
height: auto;
position: absolute;
top: -8vh;
left: 2.5vw;
}
/* ----------------- */
.bannerBottom{
width: 100%;
height: 108vh;
position: relative;
background-image: url(../imgs/png/关于我们.png);
background-repeat: no-repeat;
background-size:40vw;
background-position:0vw 50%;
display: flex;
justify-content: right;
padding-right: 10vw;
}
.bannerBottomText{
width: 40%;
height: 100%;
/* background-color: palegoldenrod; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: #fff;
}
.bannerBottomText .top{
width: 100%;
height: 40%;
/* background-color: palegoldenrod; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding-top: 8vh;
}
.bannerBottomText h1{
font-size: 2vw;
font-weight: 600;
}
.top p{
width: 60%;
font-size: 1vw;
line-height: 4.5vh;
margin-top: 4vh;
}
.bannerBottomText .bottom{
width: 100%;
height: 50%;
/* background-color: peachpuff; */
display: flex;
align-items: start;
justify-content: left;
}
.bottomRight{
margin-left: 10vw;
}
.perCent{
font-size: 2.5vw;
font-weight: 600;
position: relative;
padding-bottom: 4vh;
}
.perCent::before{
content: '';
width: 70%;
height: 1.5vh;
background-color: #00EBEC;
position: absolute;
bottom: 0;
left: 10%;
border-radius: 20px;
}
.characters{
font-size: 1.5vw;
font-weight: 600;
margin-top: 2vh;
}
/*
.bannerBottomText p{
font-size: 1.2vw;
line-height: 6vh;
margin-top: 5vh;
} */
.perCent {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.perCent.visible {
opacity: 1;
transform: translateY(0);
}

219
hanJing/css/ourProducts.css Normal file
View File

@ -0,0 +1,219 @@
.topBanner{
width: 100%;
height: 100vh;
background-color: #030045;
display: flex;
justify-content: center;
align-items: start;
/* background: palegoldenrod; */
overflow: hidden;
background-image: url(../imgs/PNG/我们的产品图.png);
background-repeat: no-repeat;
background-size:65vw auto;
background-position:35vw 0vw;
position: relative;
}
.topBannerLeft{
width: 26%;
height: 80%;
/* background: #00316B; */
color: #fff;
position: absolute;
top: 16vh;
left: 13vw;
}
.topBannerLeft p:nth-child(1){
font-size: 3vw;
font-weight: 600;
letter-spacing: 0.3vw;
}
.topBannerLeft p:nth-child(2){
font-size: 1.2vw;
color: #01A0D0;
margin-top: 18px;
line-height: 6.5vh;
}
.topBannerBth{
width: 100%;
padding-left: 2vw;
margin-top: 13vh;
}
.topBannerBth a{
display: block;
width: 15vw;
height: 4vw;
font-size: 1.4vw;
font-weight: 600;
color: #fff;
text-decoration: none;
background: #00ECEC;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
transition: all 0.3s ease;
}
.topBannerBth span{
font-size: 1.2vw;
margin-right: 1vw;
}
.topBannerBth img{
width: 1.5vw;
height: auto;
}
.topBannerBth a:hover{
color: #fff;
transform: scale(1.1); /* 放大到原尺寸的1.1倍 */
transition: all 0.3s ease; /* 添加过渡动画 */
}
.btLeft{
width: 20vw;
position: absolute;
bottom: 8vh;
left: -5.5vw;
}
.tpRight{
width: 17vw;
position: absolute;
top: 16vh;
right: -6vw;
}
.btRight{
width:70vw;
position: absolute;
bottom: -1.3vh;
right: 0vw;
}
/* ----------------------------- */
.banner{
width: 100%;
height: 219vh;
background-image: url(../imgs/SVG/背景纹.svg);
background-repeat: no-repeat;
background-size:160%;
background-position: 54vw -42vw;
background-color: #00316B;
}
/* .bannerLeft{
width: 100%;
height: 30%;
background-color: rgba(3, 0, 69, 0.5);
} */
.bannertop{
width: 100%;
height:105vh;
display: flex;
align-items: center;
justify-content: left;
}
.imgBox{
width: 50%;
height: 100%;
/* background: palegreen; */
position: relative;
}
.imgBox .imgBox1{
width: 20vw;
height: auto;
/* background: palegoldenrod; */
position: absolute;
top: 5vw;
left:10vw;
}
.imgBox .imgBox2{
width: 20vw;
height: auto;
position: absolute;
top: 19vw;
left: 20vw;
/* background: palegoldenrod; */
}
.imgBox img{
width: 26vw;
height: auto;
}
.textBox{
width: 15vw;
height: 50%;
color: #fff;
margin-left: 5vw;
/* background: peru; */
}
.textBox h1{
font-size: 2vw;
font-weight: 600;
letter-spacing: 0.3vw;
}
.textBox p{
font-size: 1.2vw;
line-height: 6vh;
margin-top: 5vh;
}
/* ------------------------- */
.bannerBottom{
width: 100%;
height: 115vh;
position: relative;
background-image: url(../imgs/png/电子商城.png);
background-repeat: no-repeat;
background-size:40vw;
background-position:0vw 50%;
display: flex;
justify-content: right;
padding-right: 10vw;
background-color: rgba(3, 0, 69, 0.8);
}
.bannerBottomText{
width: 40%;
height: 100%;
/* background-color: palegoldenrod; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
color: #fff;
/* background: peru; */
}
.bannerBottomText .top{
width: 100%;
height: 40%;
/* background-color: palegoldenrod; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
/* padding-top: 3vh; */
}
.top p{
width: 70%;
font-size: 1.5vw;
line-height:7vh;
margin-top: 4vh;
}

View File

@ -0,0 +1,131 @@
.topBanner{
width: 100%;
height: 68vh;
background-color: #030045;
display: flex;
justify-content: center;
align-items: start;
/* background: palegoldenrod; */
overflow: hidden;
background-image: url(../imgs/svg/技术支持图.svg);
background-repeat: no-repeat;
background-size:38vw auto;
background-position:50vw 0vw;
position: relative;
}
.topBannerLeft{
width: 23%;
height: 80%;
/* background: #00316B; */
color: #fff;
position: absolute;
top: 5vh;
left: 16vw;
}
.topBannerLeft p:nth-child(1){
font-size: 3vw;
font-weight: 600;
letter-spacing: 0.5vw;
}
.topBannerLeft p:nth-child(2){
font-size: 1.3vw;
color: #01A0D0;
margin-top: 18px;
line-height: 5vh;
}
.btLeft{
width: 20vw;
position: absolute;
bottom: 15vh;
left: -5.5vw;
}
.tpRight{
width: 17vw;
position: absolute;
top: 10vh;
right: -6vw;
}
.btRight{
width:70vw;
position: absolute;
bottom: -1.3vh;
right: 0vw;
}
/* ------------------- */
.banner{
width: 100%;
height: 90vh;
background-image: url(../imgs/SVG/背景纹.svg);
background-repeat: no-repeat;
background-size:160%;
background-position: 54vw -42vw;
background-color: #00316B;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.bannerLeft ,.bannerRight{
width: 25%;
height: 50%;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
}
.bannerLeft{
margin-right: 3vw;
padding-top: 3%;
}
.LeftImg , .rightImg{
width: 5vw;
height: 5vw;
overflow: hidden;
/* background: palegoldenrod; */
}
.LeftImg img{
height: 100%;
width: 100%;
}
.rightImg img{
height:100%;
width: 100%;
}
.arrow{
width: 0.8vw;
margin-left: 8px;
}
.report:hover{
color: #Ffff;
}
.bannerRight{
margin-left: 3vw;
padding-top: 3%;
}
.title{
font-size: 1.3vw;
font-weight: 600;
margin-top: 3vh;
}
.problem{
font-size: 0.9vw;
color: rgba(255, 255, 255, 0.7);
margin-top: 1vh;
}
.report{
font-size: 0.9vw;
color: #00E0E2;
margin-top: 2vh;
}

119
hanJing/html/aboutUs.html Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).svg">
<link rel="stylesheet" href="../css/aboutUs.css">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="../css/header.css">
<title>汉晶</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<img src="../imgs/SVG/汉晶LOGO(BJF).svg" alt="logo">
</div>
<ul>
<li> <a href="../index.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>
</ul>
</div>
<div class="bg">
<img src="../imgs/SVG/点纹.svg" alt="背景">
</div>
</header>
<section class="topBanner">
<div class="topBannerLeft">
<div class="topBannerLeftTitle">
<p>关于我们</p>
<p>我们创造的解决方案不仅仅是产品,更是赋能个人、组织乃至整个世界。
我们致力于帮助客户保持竞争优势,
并拥抱技术革新。</p>
</div>
</div>
<img class="btLeft" src="../imgs/SVG/点纹.svg" alt="点纹">
<img class="tpRight" src="../imgs/SVG/点纹.svg" alt="点纹">
<img class="btRight" src="../imgs/SVG/线纹.svg" alt="点纹">
</section>
<section class="banner">
<div class="bannertop">
<div class="textBox">
<div class="textOne">
<div class="Left">
<img src="../imgs/SVG/我们的愿景.svg" alt="我们的愿景">
</div>
<div class="Right">
<p>我们的愿景</p>
<p>成为受人尊敬的电子信息科技公司</p>
</div>
</div>
<div class="textTwo">
<div class="Left">
<img src="../imgs/SVG/我们的使命.svg" alt="我们的使命">
</div>
<div class="Right">
<p>我们的使命</p>
<p>通过在集成电路设计、应用解决方案和人工智能技术的持续创新,
我们提供高可靠、智能的产品和服务,为客户创造价值,让人们
我们提供高可靠、
的生活更加美好!</p>
</div>
</div>
<div class="textThree">
<div class="Left">
<img src="../imgs/SVG/我们的核心价值观.svg" alt="我们的核心价值观">
</div>
<div class="Right">
<p>我们的核心价值观</p>
<p>客户至上、艰苦奋斗、创新卓越、合作共赢</p>
</div>
</div>
</div>
</div>
</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(BJF).svg" alt="logo">
</div>
<div class="footerBoxRight">
<p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p>
</div>
</section>
</footer>
</body>
</html>

View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).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">
<title>汉晶</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<img src="../imgs/SVG/汉晶LOGO(BJF).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="./technicalSupport.html"> 技术支持</a></li>
<li> <a href="./aboutUs.html" > 关于我们</a></li>
</ul>
</div>
<div class="bg">
<img src="../imgs/SVG/点纹.svg" alt="背景">
</div>
</header>
<section class="topBanner">
<div class="topBannerLeft">
<div class="topBannerLeftTitle">
<p>我们的产品</p>
<p>我们提供芯片研发、生产和销售,芯片销售代理;以及软件WEB设计服务。</p>
</div>
<div class="topBannerBth">
<a href="mailto:fu.bin@hjsilicon.com">
<span>MAIL TO US</span>
<img src="../imgs/SVG/邮箱(白).svg" alt="邮箱">
</a>
</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>
<section class="banner">
<div class="bannertop">
<div class="imgBox">
<div class="imgBox1">
<img src="../imgs/PNG/芯片2.png" alt="芯片2">
</div>
<div class="imgBox2">
<img src="../imgs/PNG/芯片1.png" alt="芯片1">
</div>
</div>
<div class="textBox">
<h1>定制化芯片</h1>
<p>
团队有丰富的TSMC、SMIC、GF等多个芯片制造商流片成功经验
</p>
</div>
</div>
<div class="bannerBottom">
<div class="bannerBottomText">
<div class="top">
<p>成熟的电子商城及配套软件解决方案,
支持商品后台上下架、在线支付、快
递匹配等多套软件,目前已为超百位
电子商务公司及个人用户提供开发服
务。</p>
<p>适用范围: 电子商务公司及个人</p>
</div>
</div>
</div>
</section>
<footer class="footer" style=" background-color: #020A4C !important; ">
<section class="emailBox">
<div class="emailLeft">
<p>我们准备好了</p>
<p>如果您有更多的需求,请联系我们</p>
</div>
<div class="emailRight">
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
<span>MAIL TO US</span>
<a href="mailto:fu.bin@hjsilicon.com">
<img src="../imgs/SVG/邮箱.svg" alt="邮箱">
</a>
</div>
</div>
</section>
<section class="footerBox" >
<div class="footerBoxLeft">
<img src="../imgs/SVG/汉晶LOGO(BJF).svg" alt="logo">
</div>
<div class="footerBoxRight">
<p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p>
</div>
</section>
</footer>
</body>
</html>

View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../imgs/svg/汉晶LOGO(BJF).svg">
<link rel="stylesheet" href="../css/technicalSupport.css">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="../css/header.css">
<title>汉晶</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<img src="../imgs/SVG/汉晶LOGO(BJF).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="./aboutUs.html"> 关于我们</a></li>
</ul>
</div>
<div class="bg">
<img src="../imgs/SVG/点纹.svg" alt="背景">
</div>
</header>
<section class="topBanner">
<div class="topBannerLeft">
<div class="topBannerLeftTitle">
<p>技术支持</p>
<p>我们为您的项目提供技术指导。我们的
技术销售代表和产品专家可以从技术角
度解答您关于产品的问题</p>
</div>
</div>
<img class="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="bannerLeft">
<div class="LeftImg">
<img src="../imgs/SVG/技术服务帮助.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>
<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>
</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(BJF).svg" alt="logo">
</div>
<div class="footerBoxRight">
<p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p>
</div>
</section>
</footer>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 KiB

BIN
hanJing/imgs/PNG/芯片.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.2 26.2"><defs><style>.cls-1{fill:#009fd0;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="Lang_Select" data-name="Lang Select"><g id="android-globe"><path id="Shape-7" class="cls-1" d="M13.1,26.2A13.1,13.1,0,1,1,26.2,13.1,13.1,13.1,0,0,1,13.1,26.2ZM4.55,5.82a11.23,11.23,0,0,0,7.19,18.43q.16-.37.36-.72c.36-.65.69-1.26.1-1.74s-.95-.83-1.46-1.33a3.26,3.26,0,0,1-.52-1.41,4.17,4.17,0,0,0,.44-1.24c0-.1,0-.21.07-.32.18-.73-.17-.95-.74-1.32l-.1-.06a17,17,0,0,1-1.8-1.36L7.16,14l-.35-.24a2,2,0,0,1-.91-.95c-.05-.16-.08-.32-.12-.49A3.87,3.87,0,0,0,5.31,11a4.46,4.46,0,0,1-.65-3.37c0-.11,0-.22,0-.33a5.21,5.21,0,0,0-.06-1C4.59,6.18,4.57,6,4.55,5.82Zm8.87,9.5a1.19,1.19,0,0,1,.69.18l.43.3a13.49,13.49,0,0,0,2.54,1.55c.39.17,1.46.86,1.65,1.48a.57.57,0,0,1-.05.46l-.09.14a9.67,9.67,0,0,0-.77,1.32,4.7,4.7,0,0,1-1.24,1.53,4.65,4.65,0,0,0-1.37,1.85A11.25,11.25,0,0,0,24,15.87l-.24,0a3.23,3.23,0,0,1-.92-.16,6.17,6.17,0,0,1-1.48-2.81c0-.57-.05-1.09-.05-1.59a10.92,10.92,0,0,0-.13-2,5.29,5.29,0,0,0-1-1.83,7.84,7.84,0,0,1-.71-1.09c-.38-.77-.83-1.68-1.27-2.63l.14.05a1.88,1.88,0,0,1,.3.12h0c.29,0,.57-.08.82-.1A10.92,10.92,0,0,0,14.74,2v.52L15,3.1l-.87.82-.54-.18-.63-.65-.63-.74L11.41,2a11.12,11.12,0,0,0-2.85.83,3.42,3.42,0,0,1,0,.45c.22-.09.46-.17.7-.25L10,2.77h.05a2.12,2.12,0,0,1,.74.43l.19.14a3.57,3.57,0,0,1-.46.4c-.37.31-.85.69-.88.94,0,.07.07.15.17.25s.24.24.24.36,0,.35,0,.52v0c0,.18,0,.36,0,.54a6.11,6.11,0,0,0,.48-.47,8.85,8.85,0,0,1,.9-.83l.18,0a3.15,3.15,0,0,1,2.1,1.61c.09.34-.68,1-1.36,1.55-.26.21-.5.42-.69.59a4.26,4.26,0,0,1-.54.41c-.48.31-.93.6-.7,1.13l.05.11c.16.36.54,1.18.27,1.4a.29.29,0,0,1-.18.07c-.29,0-.64-.47-.83-.72l-.08-.11a1.65,1.65,0,0,0-1.32-.43H7.25v.15a2.67,2.67,0,0,0,.94,2.56l.67.52a11.21,11.21,0,0,0,2.29,1.51,1.3,1.3,0,0,0,.55.09,6.11,6.11,0,0,0,.86-.09,6.27,6.27,0,0,1,.86-.09Z"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 695 1063.45"><defs><style>.cls-1{fill:#009fd0;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="695 0 582.21 0 0 531.72 582.21 1063.45 695 1063.45 112.79 531.72 695 0"/></g></g></svg>

After

Width:  |  Height:  |  Size: 311 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 85"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;}.cls-1{stroke:aqua;stroke-width:3.02px;}.cls-2{stroke:#000;stroke-width:1.02px;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M15.88,14.22H69.12a1.73,1.73,0,0,1,1.74,1.7V68.59a1.73,1.73,0,0,1-1.74,1.7H15.88a1.69,1.69,0,0,1-1.7-1.7V15.92a1.69,1.69,0,0,1,1.7-1.7Z"/><path class="cls-1" d="M42.54,26.69A88,88,0,0,1,28.4,34c1.81,10.48,6.27,18.72,14.4,23.86C51.65,51.35,57.25,43.75,56.57,34a81.52,81.52,0,0,1-14-7.3Z"/><polyline class="cls-1" points="36.03 42.77 40.27 46.96 48.97 37.55"/><line class="cls-2" x1="32.33" x2="32.33" y2="8.89"/><line class="cls-1" x1="32.33" x2="32.33" y2="8.89"/><line class="cls-1" x1="42.5" x2="42.5" y2="8.89"/><line class="cls-1" x1="52.67" x2="52.67" y2="8.89"/><line class="cls-1" x1="32.33" y1="76.15" x2="32.33" y2="85"/><line class="cls-1" x1="42.5" y1="76.15" x2="42.5" y2="85"/><line class="cls-1" x1="52.67" y1="76.15" x2="52.67" y2="85"/><line class="cls-1" y1="52.67" x2="8.89" y2="52.67"/><line class="cls-1" y1="42.5" x2="8.89" y2="42.5"/><line class="cls-1" y1="32.33" x2="8.89" y2="32.33"/><line class="cls-1" x1="76.15" y1="52.67" x2="85" y2="52.67"/><line class="cls-1" x1="76.15" y1="42.5" x2="85" y2="42.5"/><line class="cls-1" x1="76.15" y1="32.33" x2="85" y2="32.33"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.5 98.56"><defs><style>.cls-1{fill:none;stroke:#00a0d1;stroke-miterlimit:10;stroke-width:3.56px;}.cls-2{fill:red;fill-rule:evenodd;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M44.25,96.78c11.53,0,21-21.36,21-47.52s-9.42-47.48-21-47.48S23.3,23.09,23.3,49.26s9.41,47.52,21,47.52Z"/><path class="cls-1" d="M3.09,25.54C8.91,15.48,32,18,54.72,31.12S91.17,63,85.4,73s-28.92,7.52-51.62-5.59S-2.67,35.55,3.09,25.54Z"/><path class="cls-1" d="M3.09,73c-5.76-10,8-28.79,30.69-41.9S79.59,15.48,85.4,25.54,77.47,54.28,54.72,67.43,8.91,83,3.09,73Z"/><path class="cls-2" d="M44.62,57.65a9.44,9.44,0,1,0-9.46-9.41,9.44,9.44,0,0,0,9.46,9.41Z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 769 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.96 96.11"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-width:3.52px;}.cls-1{stroke:#00a0d1;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;}.cls-2,.cls-3,.cls-4{stroke:red;}.cls-3{stroke-linecap:round;}.cls-4{stroke-linejoin:round;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M43,81.39A39.82,39.82,0,1,1,82.79,41.6,39.9,39.9,0,0,1,43,81.39Zm0-15.51A24.31,24.31,0,1,0,18.67,41.6,24.34,24.34,0,0,0,43,65.88ZM71.34,13.7l12.92-12M1.87,82.5,14.75,70.56M1.2,1.4l12.88,12"/><path class="cls-2" d="M43,47a5.42,5.42,0,1,0-5.44-5.39A5.44,5.44,0,0,0,43,47Z"/><line class="cls-3" x1="44.15" y1="42.75" x2="83.28" y2="81.88"/><path class="cls-4" d="M84,82.14l12.17.18c-6.64-6.19-13.5-8.95-20.59-8.6C75.3,80.18,77.53,87,83.28,94.35Z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 871 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.31 103.65"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-width:3.65px;}.cls-1{stroke:red;stroke-linejoin:round;}.cls-2{stroke:#00a0d1;stroke-miterlimit:10;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M42.22,84l.19-17.52a19.26,19.26,0,0,0-7.72-13.95c3.74-2,8.18-1.71,13.31.5a13.66,13.66,0,0,1,12.07.19,17.2,17.2,0,0,0-7.35,13.13l.55,18.16"/><path class="cls-2" d="M59.37,85.72l-25,.18C35.85,67,24.61,66.77,21.05,57.2,15,41,25.54,20.92,44.17,19.07c15-1.53,26.8,8.41,29.72,26.2,1.52,8.14-1.39,15-8.55,22-5.18,5.09-6.15,11-6,18.4Z"/><line class="cls-2" x1="13.2" y1="46.01" x2="1.83" y2="46.01"/><line class="cls-2" x1="93.48" y1="46.01" x2="82.11" y2="46.01"/><line class="cls-2" x1="47.72" y1="1.83" x2="47.72" y2="13.2"/><line class="cls-2" x1="21.93" y1="70.42" x2="13.38" y2="77.91"/><line class="cls-2" x1="80.54" y1="14.77" x2="71.99" y2="22.3"/><line class="cls-2" x1="81.42" y1="78.09" x2="72.87" y2="70.56"/><line class="cls-2" x1="23.69" y1="23" x2="15.14" y2="15.46"/><path class="cls-2" d="M38.2,86.41,38,92.7c-.42,3.28,2.08,8.69,9.1,9.1,5.5.33,7.54-3.09,9.48-8.22L56.74,86"/><line class="cls-2" x1="61.64" y1="93.58" x2="56.6" y2="93.58"/><line class="cls-2" x1="38.02" y1="93.58" x2="32.98" y2="93.58"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.08 80.44"><defs><style>.cls-1{fill:aqua;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M2.66,35.08l65-34.5A5.06,5.06,0,0,1,71.45.21a5.28,5.28,0,0,1,3,2.45l7.15,13.47-1.83,1.08A4.93,4.93,0,0,0,77.52,20a4.52,4.52,0,0,0,3,5.69,4.83,4.83,0,0,0,3.62-.25L86,24.57l7.48,14a5.11,5.11,0,0,1,.33,3.83,4.94,4.94,0,0,1-2.41,3l-65,34.5a5.16,5.16,0,0,1-3.83.33,5,5,0,0,1-2.95-2.41c0-.08-6.48-12.22-7.48-14.13l2.08-1.08a5.15,5.15,0,0,0,2.37-2.83,4.82,4.82,0,0,0-.29-3.62L16.25,56a4.75,4.75,0,0,0-2.7-2.08,5.06,5.06,0,0,0-3.7.37L7.77,55.41C6.82,53.58.58,41.9.58,41.86A5.21,5.21,0,0,1,.21,38a5.14,5.14,0,0,1,2.45-3Zm67-30.63L4.7,39a.61.61,0,0,0-.29.37.6.6,0,0,0,0,.46l5.28,9.89a9.1,9.1,0,0,1,5.07,0,8.85,8.85,0,0,1,5.4,4.41l.25.5v0a8.79,8.79,0,0,1,.38,6.4A9.44,9.44,0,0,1,18,65.3l5.53,10.43a.6.6,0,0,0,.37.29.72.72,0,0,0,.5,0l65-34.46a.6.6,0,0,0,.29-.37.63.63,0,0,0,0-.5L84,30.14a9.05,9.05,0,0,1-4.82-.21A8.93,8.93,0,0,1,74,25.56a9,9,0,0,1,1.87-10.84l-5.32-10a.61.61,0,0,0-.37-.29,1,1,0,0,0-.46,0Z"/><path class="cls-1" d="M25.69,36.33,56.86,19.79H57a3.54,3.54,0,0,1,2,0,3.73,3.73,0,0,1,2,1.7l.25.46h0l8.81,16.62v.13a3.64,3.64,0,0,1,0,2,3.75,3.75,0,0,1-1.71,2L37.7,59a3.59,3.59,0,0,1-2.62.25h0a3.3,3.3,0,0,1-2-1.7L24.23,41A3.46,3.46,0,0,1,24,38.37a3.42,3.42,0,0,1,1.71-2Zm31.88-12-29,15.42L36.49,54.7l29-15.42Z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.59 40.39"><defs><style>.cls-1{fill:#00316a;}.cls-2{fill:#00a0d1;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="105.72 15.45 80.77 40.39 100.96 40.39 125.91 15.45 105.72 15.45"/><polygon class="cls-1" points="24.95 15.45 0 40.39 20.19 40.39 45.14 15.45 24.95 15.45"/><polygon class="cls-1" points="65.33 15.45 40.38 40.39 60.58 40.39 85.52 15.45 65.33 15.45"/><polygon class="cls-1" points="146.1 15.45 121.16 40.39 141.35 40.39 166.29 15.45 146.1 15.45"/><polygon class="cls-1" points="267.25 15.45 242.31 40.39 262.5 40.39 287.45 15.45 267.25 15.45"/><polygon class="cls-1" points="226.87 15.45 201.93 40.39 222.12 40.39 247.06 15.45 226.87 15.45"/><polygon class="cls-1" points="186.49 15.45 161.54 40.39 181.73 40.39 206.68 15.45 186.49 15.45"/><polygon class="cls-2" points="150.85 0 125.91 24.95 146.1 24.95 171.05 0 150.85 0"/><polygon class="cls-2" points="70.08 0 45.14 24.95 65.33 24.95 90.28 0 70.08 0"/><polygon class="cls-2" points="110.47 0 85.52 24.95 105.72 24.95 130.66 0 110.47 0"/><polygon class="cls-2" points="191.24 0 166.29 24.95 186.49 24.95 211.43 0 191.24 0"/><polygon class="cls-2" points="312.39 0 287.45 24.95 307.64 24.95 332.59 0 312.39 0"/><polygon class="cls-2" points="272.01 0 247.06 24.95 267.25 24.95 292.2 0 272.01 0"/><polygon class="cls-2" points="231.62 0 206.68 24.95 226.87 24.95 251.82 0 231.62 0"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.94 12.21"><defs><style>.cls-1{fill:#00eced;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path id="Vector_273_Stroke_" data-name="Vector 273 Stroke " class="cls-1" d="M0,6.9V5.31H13.14V6.9Z"/><path id="Vector_274_Stroke_" data-name="Vector 274 Stroke " class="cls-1" d="M13.7,5.55a.79.79,0,0,1,0,1.12L8.16,12.21,7,11.09l5-5-5-5L8.16,0Z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 456 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1303.67 91.95"><defs><style>.cls-1{fill:#00316a;}.cls-2{fill:#00a0d1;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="773.59 0 172 0 172 8.88 782.47 8.88 773.59 0"/><polygon class="cls-2" points="1303.67 8.88 1303.67 0 773.59 0 782.47 8.88 1303.67 8.88"/><polygon class="cls-2" points="827.94 29.64 1303.67 29.64 1303.67 20.77 819.06 20.77 827.94 29.64"/><polygon class="cls-2" points="744.95 20.77 753.83 29.64 788.09 29.64 779.22 20.77 744.95 20.77"/><polygon class="cls-1" points="779.22 20.77 788.09 29.64 827.94 29.64 819.06 20.77 779.22 20.77"/><polygon class="cls-1" points="116 20.77 116 29.64 753.83 29.64 744.95 20.77 116 20.77"/><polygon class="cls-1" points="59.33 41.54 59.33 50.41 778.58 50.41 769.71 41.54 59.33 41.54"/><polygon class="cls-2" points="778.58 50.41 1303.67 50.41 1303.67 41.54 769.71 41.54 778.58 50.41"/><polygon class="cls-1" points="0 62.3 0 71.18 714.88 71.18 706.01 62.3 0 62.3"/><polygon class="cls-1" points="734.3 62.3 743.17 71.18 792.18 71.18 783.3 62.3 734.3 62.3"/><polygon class="cls-2" points="706.01 62.3 714.88 71.18 743.17 71.18 734.3 62.3 706.01 62.3"/><polygon class="cls-2" points="792.18 71.18 1303.67 71.18 1303.67 62.3 783.3 62.3 792.18 71.18"/><polygon class="cls-2" points="781.47 91.95 1303.67 91.95 1303.67 83.07 772.6 83.07 781.47 91.95"/><polygon class="cls-1" points="772.6 83.07 696.89 83.07 667.41 83.07 172 83.07 172 91.95 676.28 91.95 705.77 91.95 781.47 91.95 772.6 83.07"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 105 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.67 26.13"><defs><style>.cls-1{fill:#009fd0;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="iconixto_linear_mail" data-name="iconixto linear mail"><g id="Group_326" data-name="Group 326"><g id="Vector_20" data-name="Vector 20"><path class="cls-1" d="M6.53,2.45A4.08,4.08,0,0,0,2.45,6.53V19.6a4.08,4.08,0,0,0,4.08,4.08h19.6a4.09,4.09,0,0,0,4.09-4.08V6.53a4.09,4.09,0,0,0-4.09-4.08H6.53M6.53,0h19.6a6.54,6.54,0,0,1,6.54,6.53V19.6a6.53,6.53,0,0,1-6.54,6.53H6.53A6.53,6.53,0,0,1,0,19.6V6.53A6.54,6.54,0,0,1,6.53,0Z"/></g><path class="cls-1" d="M16.35,14.84a8.29,8.29,0,0,1-1.11-.08,7.71,7.71,0,0,1-5.11-3L5.55,5.64A1.24,1.24,0,0,1,5.8,3.92a1.22,1.22,0,0,1,1.71.24l4.58,6.1a5.3,5.3,0,0,0,7.43,1.06,5.32,5.32,0,0,0,1.06-1.06l4.57-6.1a1.23,1.23,0,1,1,2,1.48l-4.57,6.09A7.59,7.59,0,0,1,21,13.28,7.7,7.7,0,0,1,16.35,14.84Z"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 946 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82.82 66.25"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="iconixto_linear_mail" data-name="iconixto linear mail"><g id="Group_326" data-name="Group 326"><g id="Vector_20" data-name="Vector 20"><path class="cls-1" d="M16.56,6.21A10.37,10.37,0,0,0,6.21,16.56V49.69A10.36,10.36,0,0,0,16.56,60H66.25A10.37,10.37,0,0,0,76.61,49.69V16.56A10.37,10.37,0,0,0,66.25,6.21H16.56m0-6.21H66.25A16.57,16.57,0,0,1,82.82,16.56V49.69A16.56,16.56,0,0,1,66.25,66.25H16.56A16.56,16.56,0,0,1,0,49.69V16.56A16.57,16.57,0,0,1,16.56,0Z"/></g><path class="cls-1" d="M41.45,37.61a19.1,19.1,0,0,1-2.82-.2,19.54,19.54,0,0,1-13-7.67L14.08,14.29a3.11,3.11,0,0,1,5-3.73L30.64,26a13.48,13.48,0,0,0,18.84,2.69A13.76,13.76,0,0,0,52.18,26L63.77,10.56a3.11,3.11,0,1,1,5,3.73L57.14,29.74a19.61,19.61,0,0,1-15.69,7.87Z"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 943 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.18 351.06"><defs><style>.cls-1,.cls-2{fill:#fff;isolation:isolate;}.cls-1{opacity:0.05;}.cls-2{opacity:0.05;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="Deco"><path id="Rectangle-3" class="cls-1" d="M10.41,218a40.3,40.3,0,0,1,2.87-56.93l.12-.1L133.66,53.11a40.3,40.3,0,0,1,56.81,3L298.73,175.86a40.31,40.31,0,0,1-2.87,56.93l-.12.11L175.47,340.76a40.3,40.3,0,0,1-56.81-3Z"/><path id="Rectangle-4" class="cls-2" d="M121.71,129.59a24.18,24.18,0,0,1,1.79-34.16h0L222.59,6.21A24.18,24.18,0,0,1,256.74,8h0L346,107.09a24.17,24.17,0,0,1-1.79,34.15h0l-99.08,89.23a24.19,24.19,0,0,1-34.16-1.8h0Z"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 719 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345.46 379.27"><defs><style>.cls-1,.cls-2{fill:#fff;isolation:isolate;}.cls-1{opacity:0.05;}.cls-2{opacity:0.05;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g id="Deco"><path id="Rectangle-5" class="cls-1" d="M46.73,246.23A40.31,40.31,0,0,1,49.6,189.3l.12-.11L170,81.33a40.32,40.32,0,0,1,56.82,3L335.05,204.08A40.3,40.3,0,0,1,332.18,261l-.12.11L211.8,369A40.32,40.32,0,0,1,155,366Z"/><path id="Rectangle-6" class="cls-2" d="M6.21,129.59A24.19,24.19,0,0,1,8,95.43H8L107.09,6.21A24.18,24.18,0,0,1,141.24,8h0l89.23,99.09a24.18,24.18,0,0,1-1.8,34.15h0l-99.08,89.23a24.19,24.19,0,0,1-34.16-1.8h0Z"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 715 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 108 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 81 5.23"><defs><style>.cls-1{fill:url(#未命名的渐变_18);}</style><radialGradient id="未命名的渐变_18" cx="208.4" cy="-5.84" r="43.21" gradientTransform="translate(-132.68 3.03) scale(0.83 0.07)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.1" stop-color="#ededf2"/><stop offset="0.31" stop-color="#bebdcf"/><stop offset="0.61" stop-color="#727097"/><stop offset="0.98" stop-color="#0a074b"/><stop offset="1" stop-color="#040046"/></radialGradient></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><ellipse class="cls-1" cx="40.5" cy="2.61" rx="40.5" ry="2.61"/></g></g></svg>

After

Width:  |  Height:  |  Size: 756 B

View File

@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./imgs/svg/汉晶LOGO(BJF).svg">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/header.css">
<title>汉晶</title>
</head>
<body class="body">
<header class="header">
<div class="container">
<div class="logo">
<img src="./imgs/SVG/汉晶LOGO(BJF).svg" alt="logo">
</div>
<ul>
<li> <a class="active" href="#" style="color: #fff;"> 首页</a></li>
<li> <a href="./html/ourProducts.html"> 产品介绍</a></li>
<li> <a href="./html/technicalSupport.html"> 技术支持</a></li>
<li> <a href="./html/aboutUs.html"> 关于我们</a></li>
</ul>
</div>
<div class="bg">
<img src="./imgs/SVG/点纹.svg" alt="背景">
</div>
</header>
<section class="topBanner">
<div class="topBannerLeft">
<div class="topBannerLeftTitle">
<p>致力于成为全球领先的</p>
<p>电子信息产品与服务供应商</p>
<p>Devoted to be the Globalleading Supplier for Electronic Information Products and Services</p>
</div>
<div class="topBannerBth">
<a href="mailto:fu.bin@hjsilicon.com">联系我们</a>
</div>
</div>
<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>
</div>
</div>
<div class="bannerMid">
<img class="bannerMidImg" src="./imgs/svg/主要功能资源 3.svg" alt="主要功能资源">
<div class="bannerletf">
<img src="./imgs/png/芯片.png" alt="芯片">
<div class="bannerletfText">
<p>定制化芯片</p>
<a href="./html/ourProducts.html">产品详情</a>
</div>
</div>
<div class="bannerRight">
<img src="./imgs/png/WEB设计.png" alt="WEB设计">
<div class="bannerletfText">
<p>电子商场WEB设计</p>
<a href="./html/ourProducts.html">产品详情</a>
</div>
</div>
</div>
<div class="bannerBottom">
<div class="bannerBottomText">
<div class="top">
<h1>我们的目标</h1>
<p>汇聚人才,共同创造突破性技术,为更加智能、更加安全、更有保障的科技世界保驾护航。</p>
</div>
<div class="bottom">
<div class="bottomLeft">
<p class="perCent" data-target="30">0%</p>
<p class="characters">研发投入</p>
</div>
<div class="bottomRight">
<p class="perCent" data-target="70">0%</p>
<p class="characters">研究人员</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<section class="emailBox">
<div class="emailLeft">
<p>我们准备好了</p>
<p>如果您有更多的需求,请联系我们</p>
</div>
<div class="emailRight">
<div class="email" onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
<span>MAIL TO US</span>
<a href="mailto:fu.bin@hjsilicon.com">
<img src="./imgs/SVG/邮箱.svg" alt="邮箱">
</a>
</div>
</div>
</section>
<section class="footerBox">
<div class="footerBoxLeft">
<img src="./imgs/SVG/汉晶LOGO(BJF).svg" alt="logo">
</div>
<div class="footerBoxRight">
<p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p>
</div>
</section>
</footer>
<script src="./js/index.js"></script>
</body>
</html>

45
hanJing/js/index.js Normal file
View File

@ -0,0 +1,45 @@
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.perCent');
const animatePercentage = (element) => {
// 添加可见类触发CSS过渡效果
element.classList.add('visible');
let current = 1;
const target = parseInt(element.getAttribute('data-target'));
// 重置为初始值
element.textContent = '1%';
const timer = setInterval(() => {
current += 1;
element.textContent = `${current}%`;
if (current >= target) {
clearInterval(timer);
}
}, 30);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animatePercentage(entry.target);
} else {
// 当元素离开视口时
entry.target.classList.remove('visible');
entry.target.textContent = '1%'; // 重置为初始值
}
});
}, {
threshold: 0.5,
rootMargin: '0px'
});
elements.forEach(element => {
// 初始状态设置
element.classList.remove('visible');
element.textContent = '1%';
observer.observe(element);
});
});