1.重写汉晶网站
2.修改巨象云数网站“软件开发” 改为 “网站服务”
This commit is contained in:
@@ -10,31 +10,31 @@
|
||||
background-image: url(../imgs/svg/关于我们图.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:43vw auto;
|
||||
background-position:51vw 0vw;
|
||||
background-position:46vw 0vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 21%;
|
||||
width: 27%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
left: 16vw;
|
||||
top: 10vh;
|
||||
left: 18vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
font-size: 2.5vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.3vw;
|
||||
font-size: 1.28vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 18px;
|
||||
line-height: 5vh;
|
||||
margin-top: 10px;
|
||||
line-height: 4.2vh;
|
||||
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 112vh;
|
||||
height: 314vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
@@ -133,6 +133,94 @@
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
|
||||
.bannerBottom{
|
||||
width: 100%;
|
||||
/* height: 100vh; */
|
||||
background-color:rgba(3, 0, 69, 0.8);
|
||||
padding-top: 8vh;
|
||||
padding-bottom: 8vh;
|
||||
|
||||
}
|
||||
|
||||
.bannerBottom h1{
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.8vw;
|
||||
|
||||
}
|
||||
.bannerBottomList{
|
||||
width: 80%;
|
||||
height:auto;
|
||||
/* background: palegoldenrod; */
|
||||
margin: 0 auto;
|
||||
margin-top: 8vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.bannerBottomList li{
|
||||
width: 80%;
|
||||
height:35vh;
|
||||
|
||||
margin-top: 10vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.bannerBottomList li p{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: start;
|
||||
padding-bottom: 3vh;
|
||||
font-size: 1.2vw;
|
||||
padding-left: 4vw;
|
||||
}
|
||||
.bannerBottomListOne{
|
||||
background-image: url(../imgs/us/ic.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bannerBottomListTwo{
|
||||
background-image: url(../imgs/us/lowpower.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.bannerBottomListThree{
|
||||
background-image: url(../imgs/us/manufacturer.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bannerBottomListFour{
|
||||
background-image: url(../imgs/us/Tapeout.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ------------------- */
|
||||
/* ------------------- */
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
.topBanner{
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/approaching/prospect.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:80vw auto;
|
||||
background-position:20vw -6vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 50%;
|
||||
height: 80%;
|
||||
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
left: 12vw;
|
||||
}
|
||||
.topBannerLeftTitle{
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 8vh;
|
||||
position: relative;
|
||||
}
|
||||
.lightImg{
|
||||
width: 34vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
position: absolute;
|
||||
top: 0.8vw;
|
||||
left: 1.5vw;
|
||||
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.3vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 18px;
|
||||
line-height: 5vh;
|
||||
|
||||
}
|
||||
|
||||
.top{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
/* --------------------- */
|
||||
.future{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #01326C;
|
||||
color: #fff;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
.futureList{
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
/* background: paleturquoise; */
|
||||
}
|
||||
.futureList li{
|
||||
width: 25%;
|
||||
height: 75%;
|
||||
/* background: palegoldenrod; */
|
||||
border: 4px solid #00EAEB;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
padding: 18px;
|
||||
position: relative;
|
||||
}
|
||||
.futureImg{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
}
|
||||
.futureContent{
|
||||
margin-top: 5vh;
|
||||
}
|
||||
.futureContent p:nth-child(1){
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
.futureContent p:nth-child(2){
|
||||
font-size: 1.2vw;
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vh;
|
||||
text-align: left;
|
||||
line-height: 4vh;
|
||||
|
||||
}
|
||||
|
||||
.futureCircle{
|
||||
width: 8vw;
|
||||
height: 8vw;
|
||||
border: 4px solid #00EAEB;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -3vw;
|
||||
left: -1vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.futureCircleInner{
|
||||
width: 6.8vw;
|
||||
height: 6.8vw;
|
||||
border-radius: 50%;
|
||||
background: #019FCF;
|
||||
color: #fff;
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 35px;
|
||||
|
||||
}
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
|
||||
}
|
||||
.emailBox{
|
||||
width: 80vw;
|
||||
height: 15vh;
|
||||
width: 55vw;
|
||||
height: 12vh;
|
||||
background: #00ECEC;
|
||||
position: absolute;
|
||||
top: -8vh;
|
||||
left: 10vw;
|
||||
top: 18vh;
|
||||
left: 30vw;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
@@ -32,12 +32,12 @@
|
||||
padding-left: 4vw;
|
||||
}
|
||||
.emailLeft p{
|
||||
font-size: 1.8vw;
|
||||
font-size: 1.2vw;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.emailLeft p:nth-child(2){
|
||||
font-size: 1.2vw;
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
.email{
|
||||
width: 38%;
|
||||
width: 50%;
|
||||
height: 48%;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
@@ -65,13 +65,13 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.email span{
|
||||
font-size: 1.2vw;
|
||||
font-size: 1vw;
|
||||
color: #3FB7DC;
|
||||
font-weight: 800;
|
||||
|
||||
}
|
||||
.email img{
|
||||
width: 2vw;
|
||||
width: 1.5vw;
|
||||
height: auto;
|
||||
}
|
||||
.email:hover{
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
.header{
|
||||
width: 100%;
|
||||
height: 26vh;
|
||||
height: 15vh;
|
||||
background-color: #030045;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: -1px;
|
||||
/* background: padding-box; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header .bg{
|
||||
@@ -76,7 +80,7 @@
|
||||
/* .active{
|
||||
background: palegoldenrod;
|
||||
} */
|
||||
.active::before{
|
||||
.actives::before{
|
||||
content:url(../imgs/svg/页面选择图标.svg);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
@@ -25,6 +25,212 @@ body {
|
||||
padding: 0;
|
||||
overflow-x: hidden; /* 防止水平滚动条 */
|
||||
}
|
||||
/* --------轮播------------ */
|
||||
.CarouselBox{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* 轮播图容器 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.carousel-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: palegoldenrod;
|
||||
}
|
||||
|
||||
/* 优化图片渲染 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
/* 添加这些属性以提升性能 */
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
object-fit: cover; /* 保持比例填充整个容器 */
|
||||
display: block; /* 移除图片底部间隙 */
|
||||
}
|
||||
|
||||
/* 优化箭头按钮样式 */
|
||||
.carousel-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.carousel-arrow:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 添加触摸设备支持 */
|
||||
@media (hover: none) {
|
||||
.carousel-arrow {
|
||||
display: none; /* 在触摸设备上隐藏箭头 */
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-arrow-left {
|
||||
left: 2vw;
|
||||
top: 48.7%;
|
||||
|
||||
}
|
||||
|
||||
.carousel-arrow-right {
|
||||
right: 2vw;
|
||||
|
||||
}
|
||||
/* 修正指示器容器样式 */
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 1vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 2vw;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 修正指示器小圆点样式 */
|
||||
.indicator {
|
||||
width: 20px; /* 稍微调小一点 */
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
/* background-color: rgba(255, 255, 255, 0.5); */
|
||||
background-color: #009ECF;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 补充激活状态的指示器样式 */
|
||||
.indicator.active {
|
||||
background-color: #00ECEC; /* 高亮为纯白色 */
|
||||
transform: scale(1.2); /* 稍微放大 */
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加发光效果 */
|
||||
}
|
||||
/* 修正容器结构相关样式 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative; /* 确保是相对定位 */
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.indicator:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
/* 轮播项样式 */
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 产品详情按钮基础样式 */
|
||||
.product-detail-btn {
|
||||
position: absolute;
|
||||
bottom:6vh;
|
||||
padding: 1vw 5vw;
|
||||
background-color:#00ECEC;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
color: #fff !important;
|
||||
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 左侧按钮位置 */
|
||||
.product-detail-btn.left {
|
||||
|
||||
left: 22vw;
|
||||
|
||||
}
|
||||
|
||||
/* 右侧按钮位置 */
|
||||
.product-detail-btn.right {
|
||||
right:22vw;
|
||||
}
|
||||
|
||||
/* 按钮悬停效果 */
|
||||
.product-detail-btn:hover {
|
||||
/* background-color: #ffffff; */
|
||||
/* transform: translateY(-2px); */
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
||||
transform: scale(1.1);
|
||||
color: #fff ;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
.detail-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 箭头图标样式 */
|
||||
.arrow-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 链接悬停时箭头动画 */
|
||||
.detail-link:hover {
|
||||
|
||||
color: #fff ;
|
||||
|
||||
}
|
||||
|
||||
/* 确保轮播项内的图片样式 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* -------------------- */
|
||||
|
||||
.topBannerLeft{
|
||||
width: 43%;
|
||||
@@ -33,7 +239,7 @@ body {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 16vh;
|
||||
left: 13vw;
|
||||
left: 13vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
@@ -84,6 +290,12 @@ body {
|
||||
transform: scale(1.1);
|
||||
|
||||
}
|
||||
.top{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
@@ -122,7 +334,7 @@ body {
|
||||
.bannertop{
|
||||
width: 100%;
|
||||
height:105vh;
|
||||
background-image: url(../imgs/png/ourProducts.png);
|
||||
background-image: url(../imgs/home/mainBusiness.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
@@ -274,7 +486,7 @@ body {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bannerBottomText .top{
|
||||
.bannerBottomText .top2{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
/* background-color: palegoldenrod; */
|
||||
@@ -290,11 +502,12 @@ body {
|
||||
|
||||
|
||||
}
|
||||
.top p{
|
||||
width: 60%;
|
||||
font-size: 1vw;
|
||||
line-height: 4.5vh;
|
||||
.top2 p{
|
||||
width: 80%;
|
||||
font-size: 1.3vw;
|
||||
line-height: 5vh;
|
||||
margin-top: 4vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -309,6 +522,7 @@ body {
|
||||
.bottomRight{
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.perCent{
|
||||
font-size: 2.5vw;
|
||||
font-weight: 600;
|
||||
@@ -348,4 +562,43 @@ body {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* --------------- */
|
||||
.newBottom{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
/* background-color: palegoldenrod; */
|
||||
}
|
||||
.teamImg{
|
||||
width: 12vw;
|
||||
height: 12vw;
|
||||
}
|
||||
.teamBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
margin-top: 4vh;
|
||||
/* align-items: center; */
|
||||
}
|
||||
.teamBox div{
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
margin-left: 3vw;
|
||||
/* background-color: palegoldenrod; */
|
||||
}
|
||||
.teamBox div p{
|
||||
font-size: 2.8vw;
|
||||
font-weight: 600;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
.teamBox div p:nth-child(2){
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
.topBanner{
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
background-color: #030045;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
/* background: palegoldenrod; */
|
||||
overflow: hidden;
|
||||
background-image: url(../imgs/main/mainbusiness.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:55vw auto;
|
||||
background-position:40vw -1vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 24%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 18vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 2.4vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.1vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 10px;
|
||||
line-height: 4.2vh;
|
||||
text-align: justify;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btLeft{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
left: -5.5vw;
|
||||
}
|
||||
.tpRight{
|
||||
width: 17vw;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.btRight{
|
||||
width:70vw;
|
||||
position: absolute;
|
||||
bottom: -1.3vh;
|
||||
right: 0vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
/* ------------------ */
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 255vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
}
|
||||
|
||||
.bannertop{
|
||||
width: 100%;
|
||||
height:115vh;
|
||||
background-image: url(../imgs/main/content.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:40vw;
|
||||
background-position:0vw 50%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding-right: 5vw;
|
||||
/* padding-top: 18vh; */
|
||||
|
||||
}
|
||||
|
||||
.bannerArrow{
|
||||
height:100%;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
.textBox{
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
/* background: peru; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
background-image: url(../imgs/main/arrow.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:4vw 110%;
|
||||
background-position:0vw 50%;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
/* 手风琴容器 */
|
||||
.accordion {
|
||||
width: 100%;
|
||||
max-width: 40vw;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
/* 手风琴项目 */
|
||||
.accordion-item {
|
||||
/* border: 1px solid #e0e0e0; */
|
||||
margin-bottom: 3vh;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
/* background: #fff; */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 手风琴标题 */
|
||||
.accordion-header {
|
||||
padding: 20px;
|
||||
/* background: #f8f8f8; */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
/* .accordion-header:hover {
|
||||
background: #009FD0;
|
||||
} */
|
||||
|
||||
/* 标题文字 */
|
||||
.accordion-header h3 {
|
||||
margin: 0;
|
||||
|
||||
color: #fff;
|
||||
font-size: 1.8vw;
|
||||
|
||||
}
|
||||
.accordion-header h3:hover {
|
||||
margin: 0;
|
||||
font-size: 1.9vw;
|
||||
color: #00E0E4;
|
||||
/* 00E0E4 */
|
||||
}
|
||||
|
||||
/* 展开/收起图标 */
|
||||
.accordion-icon {
|
||||
font-size: 24px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.accordion-content {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
/* 激活状态 */
|
||||
.accordion-item.active .accordion-content {
|
||||
padding: 20px;
|
||||
max-height: 500px; /* 根据实际内容调整 */
|
||||
/* background-color: #009FD0; */
|
||||
}
|
||||
|
||||
.accordion-item.active .accordion-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* 添加激活状态的标题样式 */
|
||||
.accordion-item.active .accordion-header h3 {
|
||||
color: #00E0E4;
|
||||
font-size: 1.9vw;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.accordion-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.accordion-header h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加到现有CSS中 */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-item.active .accordion-content {
|
||||
animation: slideDown 0.3s ease forwards;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bannerBottom{
|
||||
width: 100%;
|
||||
height: 150vh;
|
||||
background-image: url(../imgs/main/advantage.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:42vw 30vw;
|
||||
background-position:50% 55%;
|
||||
background-color: rgba(3, 0, 69, 0.8);
|
||||
padding: 10vh 0;
|
||||
}
|
||||
|
||||
.bannerBottomList{
|
||||
width: 58vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bannerBottomList li{
|
||||
list-style: none;
|
||||
width: 20vw;
|
||||
height: 25vw;
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 8vh;
|
||||
border-radius: 8px;
|
||||
background: #00316B;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
padding-top: 6vh;
|
||||
}
|
||||
.ListImg{
|
||||
width: 6vw;
|
||||
}
|
||||
.list p:nth-of-type(1){
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
.list p:nth-of-type(2){
|
||||
width: 80%;
|
||||
font-size: 1vw;
|
||||
|
||||
color: #009ECF;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vh;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------- */
|
||||
@@ -15,27 +15,31 @@
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 26%;
|
||||
width: 28%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 16vh;
|
||||
top: 20vh;
|
||||
left: 13vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 3vw;
|
||||
font-size: 3.5vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3vw;
|
||||
text-align: left;
|
||||
letter-spacing: 0.5vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.2vw;
|
||||
|
||||
color: #01A0D0;
|
||||
font-size:3.5vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-top: 18px;
|
||||
line-height: 6.5vh;
|
||||
text-align: right;
|
||||
letter-spacing: 0.5vw;
|
||||
|
||||
|
||||
}
|
||||
.topBannerBth{
|
||||
@@ -101,7 +105,7 @@
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 219vh;
|
||||
min-height: 110vh;
|
||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size:160%;
|
||||
@@ -216,4 +220,229 @@
|
||||
|
||||
}
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
/* --------------------------- */
|
||||
|
||||
/* 产品展示区样式 */
|
||||
.case {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
gap: 40px;
|
||||
margin: 0 auto;
|
||||
padding-top: 10vh;
|
||||
align-items: flex-start; /* 确保子元素从顶部开始对齐 */
|
||||
}
|
||||
|
||||
/* 左侧导航样式 */
|
||||
.product-nav {
|
||||
width: 20vw;
|
||||
flex-shrink: 0;
|
||||
border-right: 2px solid #00E0E4;
|
||||
padding-right: 3vw;
|
||||
/* 添加最大高度和滚动 */
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
/* 添加平滑滚动 */
|
||||
scroll-behavior: smooth;
|
||||
/* 固定位置 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
/* 添加滚动条样式 */
|
||||
.product-nav::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.product-nav::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.product-nav::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 224, 228, 0.5);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.product-nav::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 224, 228, 0.8);
|
||||
}
|
||||
|
||||
|
||||
.product-category {
|
||||
margin-bottom: 30px;
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.category-header.active {
|
||||
color: #00E0E4;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.category-header.active .dot {
|
||||
background-color: #00E0E4;
|
||||
}
|
||||
|
||||
.category-header h3 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.category-content {
|
||||
display: none;
|
||||
padding-left: 30px;
|
||||
/* background: palegoldenrod; */
|
||||
position: relative;
|
||||
padding-left: 3vw;
|
||||
|
||||
}
|
||||
.category-content::before{
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 12%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.category-content.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 产品项样式 */
|
||||
.product-item {
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-item:hover,
|
||||
.product-item.active {
|
||||
background-color: rgba(0, 224, 228, 0.1);
|
||||
color: #00E0E4 !important;
|
||||
border: 1px solid #00E0E4;
|
||||
box-shadow: 0 0 8px 1px rgba(0, 224, 228, 0.5),
|
||||
0 5px 8px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.product-item img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-item p {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease; /* 添加颜色过渡效果 */
|
||||
}
|
||||
|
||||
/* 选中状态的文字样式 */
|
||||
.product-item.active p {
|
||||
color: #00E0E4;
|
||||
}
|
||||
|
||||
|
||||
/* 可以添加悬停效果 */
|
||||
.product-item:hover p {
|
||||
color: #00E0E4;
|
||||
}
|
||||
|
||||
/* 右侧详情样式 */
|
||||
.product-detail {
|
||||
/* flex-grow: 1; */
|
||||
/* background-color: rgba(255, 255, 255, 0.05); */
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-left: 8vw;
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 20vw;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #00E0E4;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px 1px rgba(0, 224, 228, 0.5),
|
||||
0 5px 15px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.detail-image img {
|
||||
width: 20vw;
|
||||
border-radius: 12px;
|
||||
object-fit: contain;/* 保持图片比例，确保完整显示 */
|
||||
|
||||
}
|
||||
|
||||
.detail-info h2 {
|
||||
color: #00E0E4;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-list p {
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.6;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------- */
|
||||
|
||||
|
||||
/* 添加平滑滚动效果 */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 添加产品项过渡动画 */
|
||||
.product-item {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 优化active状态的视觉效果 */
|
||||
.product-item.active {
|
||||
background-color: rgba(0, 224, 228, 0.1);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
|
||||
@@ -68,12 +68,21 @@
|
||||
background-position: 54vw -42vw;
|
||||
background-color: #00316B;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bannerBox{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bannerLeft ,.bannerRight{
|
||||
width: 25%;
|
||||
width: 24%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -129,3 +138,11 @@
|
||||
color: #00E0E2;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user