lizixuan
/
hjsilicon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity
hjsilicon/css/index.css

708 lines
13 KiB
CSS
Raw Normal View History

add project files
2025-04-25 10:24:58 +00:00
.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;
release v1.1.0
2025-05-08 09:53:36 +00:00
background-image: url(../imgs/home/mainBusiness.png);
add project files
2025-04-25 10:24:58 +00:00
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;
release v1.1.0
2025-05-08 09:53:36 +00:00
line-height: 5vh;
add project files
2025-04-25 10:24:58 +00:00
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;
release v1.1.0
2025-05-08 09:53:36 +00:00
background-image: url(../imgs/home/aboutUs.png);
add project files
2025-04-25 10:24:58 +00:00
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;
}
release v1.1.0
2025-05-08 09:53:36 +00:00
/* 英文样式 */
.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;
}
add project files
2025-04-25 10:24:58 +00:00