708 lines
13 KiB
CSS
708 lines
13 KiB
CSS
|
|
.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; /* 防止水平滚动条 */
|
|
}
|
|
/* --------轮播------------ */
|
|
.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%;
|
|
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);
|
|
|
|
}
|
|
.top{
|
|
width: 20vw;
|
|
position: absolute;
|
|
top: 0vh;
|
|
left: 20vw;
|
|
}
|
|
|
|
.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: 520vh;
|
|
background-image: url(../imgs/svg/背景纹（大）.svg);
|
|
background-repeat: no-repeat;
|
|
background-size:160%;
|
|
background-position: 54vw -42vw;
|
|
background-color: #00316B;
|
|
}
|
|
|
|
|
|
|
|
.bannerBottom2{
|
|
width: 100%;
|
|
height: 190vh;
|
|
background-color:rgba(3, 0, 69, 0.8);
|
|
padding-top: 8vh;
|
|
padding-bottom: 8vh;
|
|
/* background: palegoldenrod; */
|
|
|
|
}
|
|
|
|
.bannerBottom2 h1{
|
|
font-size: 3vw;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.8vw;
|
|
|
|
}
|
|
.bannerBottomList{
|
|
width: 72vw;
|
|
height:150vh;
|
|
/* background: palegoldenrod; */
|
|
margin: 0 auto;
|
|
margin-top: 8vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.bannerBottomList li{
|
|
width: 70%;
|
|
height:60vh;
|
|
margin-top: 10vh;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.bannerBottomList li p{
|
|
width: 40%;
|
|
height: 100%;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: end;
|
|
align-items: start;
|
|
padding-bottom: 3vh;
|
|
font-size: 1.2vw;
|
|
padding-left: 4vw;
|
|
}
|
|
.bannerBottomListOne{
|
|
background-image: url(../imgs/us/ic.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: auto;
|
|
height: 100%;
|
|
/* background: palegoldenrod; */
|
|
}
|
|
.bannerBottomListTwo{
|
|
background-image: url(../imgs/us/lowpower.png);
|
|
background-repeat: no-repeat;
|
|
/* background-size: 100% 100%; */
|
|
background-size: contain; /* 改为 contain 保持图片比例 */
|
|
background-position: center; /* 居中显示 */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.bannerBottomListThree{
|
|
background-image: url(../imgs/us/manufacturer.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bannerBottomListFour{
|
|
background-image: url(../imgs/us/Tapeout.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* .bannerLeft{
|
|
width: 100%;
|
|
height: 30%;
|
|
background-color: rgba(3, 0, 69, 0.5);
|
|
} */
|
|
.bannertop{
|
|
width: 100%;
|
|
height:105vh;
|
|
background-image: url(../imgs/home/mainBusiness.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: 5vh;
|
|
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/home/aboutUs.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 .top2{
|
|
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;
|
|
|
|
|
|
}
|
|
.top2 p{
|
|
width: 80%;
|
|
font-size: 1.3vw;
|
|
line-height: 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);
|
|
}
|
|
|
|
/* --------------- */
|
|
.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;
|
|
|
|
}
|
|
|
|
/* 英文样式 */
|
|
.textBox.en {
|
|
width: 32vw;
|
|
font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
|
|
|
|
}
|
|
.textBox.en h1{
|
|
font-size: 1.3vw;
|
|
font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
|
|
|
|
}
|
|
|
|
.textBox.en p{
|
|
font-size: 1.3vw;
|
|
font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|