软件开发
+ 网站服务
-
网站服务
巨象云数科技是一家专门从事“软件开发" - 服务的企业适用于PC，移动，APP,小程 +
巨象云数科技是一家专门从事“网站服务" + 的企业适用于PC，移动，APP,小程 序，微信，wap站等专业的开发技术，产 品团队让您的产品快速启动，完美落地。 diff --git a/hanJing/css/aboutUs.css b/hanJing/css/aboutUs.css index 524d447..4c06023 100644 --- a/hanJing/css/aboutUs.css +++ b/hanJing/css/aboutUs.css @@ -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%; + } + + -/* ------------------- */ \ No newline at end of file +/* ------------------- */ + + +.top3{ + width: 20vw; + position: absolute; + top: 0vh; + left: 20vw; +} \ No newline at end of file diff --git a/hanJing/css/approaching.css b/hanJing/css/approaching.css index e69de29..f195494 100644 --- a/hanJing/css/approaching.css +++ b/hanJing/css/approaching.css @@ -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; + +} diff --git a/hanJing/css/footer.css b/hanJing/css/footer.css index f11bc7d..b6f6342 100644 --- a/hanJing/css/footer.css +++ b/hanJing/css/footer.css @@ -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{ diff --git a/hanJing/css/header.css b/hanJing/css/header.css index 2cdf816..56b0a8c 100644 --- a/hanJing/css/header.css +++ b/hanJing/css/header.css @@ -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; diff --git a/hanJing/css/index.css b/hanJing/css/index.css index af3393b..cdcc175 100644 --- a/hanJing/css/index.css +++ b/hanJing/css/index.css @@ -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; + +} + + + + + + diff --git a/hanJing/css/mainBusiness.css b/hanJing/css/mainBusiness.css index e69de29..810e6f1 100644 --- a/hanJing/css/mainBusiness.css +++ b/hanJing/css/mainBusiness.css @@ -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; +} + + + +/* ----------------- */ \ No newline at end of file diff --git a/hanJing/css/ourProducts.css b/hanJing/css/ourProducts.css index 4c93e3d..d1b8d54 100644 --- a/hanJing/css/ourProducts.css +++ b/hanJing/css/ourProducts.css @@ -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); +} diff --git a/hanJing/css/technicalSupport.css b/hanJing/css/technicalSupport.css index e41ea40..8c2f7da 100644 --- a/hanJing/css/technicalSupport.css +++ b/hanJing/css/technicalSupport.css @@ -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; +} diff --git a/hanJing/html/aboutUs.html b/hanJing/html/aboutUs.html index a0b119e..3287b29 100644 --- a/hanJing/html/aboutUs.html +++ b/hanJing/html/aboutUs.html @@ -3,7 +3,7 @@
- + @@ -14,34 +14,33 @@.svg)
+ 
关于我们
-我们创造的解决方案不仅仅是产品,更是赋能个人、组织乃至整个世界。 - 我们致力于帮助客户保持竞争优势, - 并拥抱技术革新。
+公司介绍
+我们是一家专注于集成电路设计的高科技公司,致力于为客户提供从芯片设计到量产的全流程服务。我们的团队拥有丰富的行业经验，采用最先进的工具和技术，为客户提供高品质的芯片解决方案。我们始终坚持以客户为中心，以技术为驱动，致力于推动集成电路行业的创新与发展。
@@ -86,7 +85,29 @@
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+