diff --git a/hanJing/css/aboutUs.css b/hanJing/css/aboutUs.css new file mode 100644 index 0000000..7d4fa56 --- /dev/null +++ b/hanJing/css/aboutUs.css @@ -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; + } + + + +/* ------------------- */ \ No newline at end of file diff --git a/hanJing/css/base.css b/hanJing/css/base.css new file mode 100644 index 0000000..7c1f859 --- /dev/null +++ b/hanJing/css/base.css @@ -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 +} + diff --git a/hanJing/css/footer.css b/hanJing/css/footer.css new file mode 100644 index 0000000..1fe2b7c --- /dev/null +++ b/hanJing/css/footer.css @@ -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; +} + + diff --git a/hanJing/css/header.css b/hanJing/css/header.css new file mode 100644 index 0000000..a6fe293 --- /dev/null +++ b/hanJing/css/header.css @@ -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; +} diff --git a/hanJing/css/index.css b/hanJing/css/index.css new file mode 100644 index 0000000..48244d6 --- /dev/null +++ b/hanJing/css/index.css @@ -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); +} + + diff --git a/hanJing/css/ourProducts.css b/hanJing/css/ourProducts.css new file mode 100644 index 0000000..c7bd620 --- /dev/null +++ b/hanJing/css/ourProducts.css @@ -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; + +} + + diff --git a/hanJing/css/technicalSupport.css b/hanJing/css/technicalSupport.css new file mode 100644 index 0000000..9064a96 --- /dev/null +++ b/hanJing/css/technicalSupport.css @@ -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; +} diff --git a/hanJing/html/aboutUs.html b/hanJing/html/aboutUs.html new file mode 100644 index 0000000..06a1bea --- /dev/null +++ b/hanJing/html/aboutUs.html @@ -0,0 +1,119 @@ + + + + + + + + + + + 汉晶 + + +
+
+ + +
+
+ 背景 +
+
+ +
+
+
+

关于我们

+

我们创造的解决方案不仅仅是产品,更是赋能个人、组织乃至整个世界。 + 我们致力于帮助客户保持竞争优势, + 并拥抱技术革新。

+
+ + +
+ 点纹 + 点纹 + 点纹 + +
+ + + + + + + + \ No newline at end of file diff --git a/hanJing/html/ourProducts.html b/hanJing/html/ourProducts.html new file mode 100644 index 0000000..d3cf42d --- /dev/null +++ b/hanJing/html/ourProducts.html @@ -0,0 +1,119 @@ + + + + + + + + + + + 汉晶 + + +
+
+ + +
+
+ 背景 +
+
+ +
+
+
+

我们的产品

+

我们提供芯片研发、生产和销售，芯片销售代理;以及软件WEB设计服务。

+
+
+ + MAIL TO US + 邮箱 + +
+ +
+ 点纹 + 点纹 + 点纹 + +
+ + + + + + + + \ No newline at end of file diff --git a/hanJing/html/technicalSupport.html b/hanJing/html/technicalSupport.html new file mode 100644 index 0000000..492bde9 --- /dev/null +++ b/hanJing/html/technicalSupport.html @@ -0,0 +1,100 @@ + + + + + + + + + + + 汉晶 + + +
+
+ + +
+
+ 背景 +
+
+
+
+
+

技术支持

+

我们为您的项目提供技术指导。我们的 + 技术销售代表和产品专家可以从技术角 + 度解答您关于产品的问题

+
+ + +
+ 点纹 + 点纹 + 点纹 + +
+ + + + + + + + \ No newline at end of file diff --git a/hanJing/imgs/PNG/WEB设计.png b/hanJing/imgs/PNG/WEB设计.png new file mode 100644 index 0000000..45144b4 Binary files /dev/null and b/hanJing/imgs/PNG/WEB设计.png differ diff --git a/hanJing/imgs/PNG/关于我们.png b/hanJing/imgs/PNG/关于我们.png new file mode 100644 index 0000000..c897383 Binary files /dev/null and b/hanJing/imgs/PNG/关于我们.png differ diff --git a/hanJing/imgs/PNG/我们的产品.png b/hanJing/imgs/PNG/我们的产品.png new file mode 100644 index 0000000..c044ef1 Binary files /dev/null and b/hanJing/imgs/PNG/我们的产品.png differ diff --git a/hanJing/imgs/PNG/我们的产品图.png b/hanJing/imgs/PNG/我们的产品图.png new file mode 100644 index 0000000..000f614 Binary files /dev/null and b/hanJing/imgs/PNG/我们的产品图.png differ diff --git a/hanJing/imgs/PNG/电子商城.png b/hanJing/imgs/PNG/电子商城.png new file mode 100644 index 0000000..1edfe9d Binary files /dev/null and b/hanJing/imgs/PNG/电子商城.png differ diff --git a/hanJing/imgs/PNG/芯片.png b/hanJing/imgs/PNG/芯片.png new file mode 100644 index 0000000..daf4587 Binary files /dev/null and b/hanJing/imgs/PNG/芯片.png differ diff --git a/hanJing/imgs/PNG/芯片1.png b/hanJing/imgs/PNG/芯片1.png new file mode 100644 index 0000000..6c2a7f9 Binary files /dev/null and b/hanJing/imgs/PNG/芯片1.png differ diff --git a/hanJing/imgs/PNG/芯片2.png b/hanJing/imgs/PNG/芯片2.png new file mode 100644 index 0000000..f4c6f89 Binary files /dev/null and b/hanJing/imgs/PNG/芯片2.png differ diff --git a/hanJing/imgs/PNG/首页图.png b/hanJing/imgs/PNG/首页图.png new file mode 100644 index 0000000..a09fecb Binary files /dev/null and b/hanJing/imgs/PNG/首页图.png differ diff --git a/hanJing/imgs/SVG/中英文地球.svg b/hanJing/imgs/SVG/中英文地球.svg new file mode 100644 index 0000000..171c7bf --- /dev/null +++ b/hanJing/imgs/SVG/中英文地球.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/主要功能资源 3.svg b/hanJing/imgs/SVG/主要功能资源 3.svg new file mode 100644 index 0000000..953b707 --- /dev/null +++ b/hanJing/imgs/SVG/主要功能资源 3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/产品安全漏洞.svg b/hanJing/imgs/SVG/产品安全漏洞.svg new file mode 100644 index 0000000..0f89a52 --- /dev/null +++ b/hanJing/imgs/SVG/产品安全漏洞.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/企业文化理念(BJF).svg b/hanJing/imgs/SVG/企业文化理念(BJF).svg new file mode 100644 index 0000000..6227f6d --- /dev/null +++ b/hanJing/imgs/SVG/企业文化理念(BJF).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/关于我们图.svg b/hanJing/imgs/SVG/关于我们图.svg new file mode 100644 index 0000000..c258c6e --- /dev/null +++ b/hanJing/imgs/SVG/关于我们图.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/我们的使命.svg b/hanJing/imgs/SVG/我们的使命.svg new file mode 100644 index 0000000..9743b99 --- /dev/null +++ b/hanJing/imgs/SVG/我们的使命.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/我们的愿景.svg b/hanJing/imgs/SVG/我们的愿景.svg new file mode 100644 index 0000000..be33588 --- /dev/null +++ b/hanJing/imgs/SVG/我们的愿景.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/我们的核心价值观.svg b/hanJing/imgs/SVG/我们的核心价值观.svg new file mode 100644 index 0000000..2569a90 --- /dev/null +++ b/hanJing/imgs/SVG/我们的核心价值观.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/技术支持图.svg b/hanJing/imgs/SVG/技术支持图.svg new file mode 100644 index 0000000..f886539 --- /dev/null +++ b/hanJing/imgs/SVG/技术支持图.svg @@ -0,0 +1 @@ +HELP技术支持 \ No newline at end of file diff --git a/hanJing/imgs/SVG/技术服务帮助.svg b/hanJing/imgs/SVG/技术服务帮助.svg new file mode 100644 index 0000000..2e41c5b --- /dev/null +++ b/hanJing/imgs/SVG/技术服务帮助.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/汉晶LOGO(BJF).svg b/hanJing/imgs/SVG/汉晶LOGO(BJF).svg new file mode 100644 index 0000000..018dc58 --- /dev/null +++ b/hanJing/imgs/SVG/汉晶LOGO(BJF).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/点纹.svg b/hanJing/imgs/SVG/点纹.svg new file mode 100644 index 0000000..fe08e62 --- /dev/null +++ b/hanJing/imgs/SVG/点纹.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/箭头.svg b/hanJing/imgs/SVG/箭头.svg new file mode 100644 index 0000000..a54c1d9 --- /dev/null +++ b/hanJing/imgs/SVG/箭头.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/线纹.svg b/hanJing/imgs/SVG/线纹.svg new file mode 100644 index 0000000..0acde91 --- /dev/null +++ b/hanJing/imgs/SVG/线纹.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/背景纹（大）.svg b/hanJing/imgs/SVG/背景纹（大）.svg new file mode 100644 index 0000000..80c39c5 --- /dev/null +++ b/hanJing/imgs/SVG/背景纹（大）.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/邮箱.svg b/hanJing/imgs/SVG/邮箱.svg new file mode 100644 index 0000000..577465e --- /dev/null +++ b/hanJing/imgs/SVG/邮箱.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/邮箱（白）.svg b/hanJing/imgs/SVG/邮箱（白）.svg new file mode 100644 index 0000000..fe5fd17 --- /dev/null +++ b/hanJing/imgs/SVG/邮箱（白）.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/页尾背景右.svg b/hanJing/imgs/SVG/页尾背景右.svg new file mode 100644 index 0000000..fdac421 --- /dev/null +++ b/hanJing/imgs/SVG/页尾背景右.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/页尾背景左.svg b/hanJing/imgs/SVG/页尾背景左.svg new file mode 100644 index 0000000..581cbf2 --- /dev/null +++ b/hanJing/imgs/SVG/页尾背景左.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/页面底纹.svg b/hanJing/imgs/SVG/页面底纹.svg new file mode 100644 index 0000000..b0f7ed8 --- /dev/null +++ b/hanJing/imgs/SVG/页面底纹.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/imgs/SVG/页面选择图标.svg b/hanJing/imgs/SVG/页面选择图标.svg new file mode 100644 index 0000000..557a1e5 --- /dev/null +++ b/hanJing/imgs/SVG/页面选择图标.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/hanJing/index.html b/hanJing/index.html index e69de29..8326f33 100644 --- a/hanJing/index.html +++ b/hanJing/index.html @@ -0,0 +1,132 @@ + + + + + + + + + + + + + 汉晶 + + +
+
+ + +
+
+ 背景 +
+
+
+
+
+

致力于成为全球领先的

+

电子信息产品与服务供应商

+

Devoted to be the Globalleading Supplier for Electronic Information Products and Services

+
+
+ 联系我们 +
+ +
+ 点纹 + 点纹 + 点纹 + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/hanJing/js/index.js b/hanJing/js/index.js new file mode 100644 index 0000000..ef8632b --- /dev/null +++ b/hanJing/js/index.js @@ -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); + }); +}); \ No newline at end of file