add project files
This commit is contained in:
lzx
269
css/aboutUs.css
Normal file
269
css/aboutUs.css
Normal file
@@ -0,0 +1,269 @@
|
||||
.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:46vw 0vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topBannerLeft{
|
||||
width: 27%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 18vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
font-size: 2.5vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(2){
|
||||
font-size: 1.28vw;
|
||||
color: #01A0D0;
|
||||
margin-top: 10px;
|
||||
line-height: 4.2vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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: 205vh;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* --------------- */
|
||||
.map{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background: palegoldenrod; */
|
||||
background-color:rgba(3, 0, 69, 0.8);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.addressBox-bottom{
|
||||
width: 55vw;
|
||||
height: 55vh;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: 10vh;
|
||||
|
||||
}
|
||||
|
||||
#mapContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px; /* 确保地图有最小高度 */
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth; /* 添加平滑滚动效果 */
|
||||
}
|
||||
|
||||
#contact-map {
|
||||
scroll-margin-top: 10vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
154
css/approaching.css
Normal file
154
css/approaching.css
Normal file
@@ -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: 1.2vw;
|
||||
|
||||
}
|
||||
70
css/base.css
Normal file
70
css/base.css
Normal file
@@ -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
|
||||
}
|
||||
|
||||
127
css/footer.css
Normal file
127
css/footer.css
Normal file
@@ -0,0 +1,127 @@
|
||||
.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: 55vw;
|
||||
height: 12vh;
|
||||
background: #00ECEC;
|
||||
position: absolute;
|
||||
top: 18vh;
|
||||
left: 30vw;
|
||||
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.2vw;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.emailLeft p:nth-child(2){
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.emailRight{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.email{
|
||||
width: 50%;
|
||||
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: 1vw;
|
||||
color: #3FB7DC;
|
||||
font-weight: 800;
|
||||
|
||||
}
|
||||
.email img{
|
||||
width: 1.5vw;
|
||||
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: 1vw;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.record{
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
|
||||
}
|
||||
.record:hover{
|
||||
color: #009FD0;
|
||||
font-size: 1vw;
|
||||
|
||||
}
|
||||
|
||||
|
||||
90
css/header.css
Normal file
90
css/header.css
Normal file
@@ -0,0 +1,90 @@
|
||||
.header{
|
||||
width: 100%;
|
||||
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{
|
||||
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;
|
||||
} */
|
||||
.actives::before{
|
||||
content:url(../imgs/svg/页面选择图标.svg);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
688
css/index.css
Normal file
688
css/index.css
Normal file
@@ -0,0 +1,688 @@
|
||||
|
||||
.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.svg);
|
||||
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 .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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
290
css/mainBusiness.css
Normal file
290
css/mainBusiness.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------- */
|
||||
448
css/ourProducts.css
Normal file
448
css/ourProducts.css
Normal file
@@ -0,0 +1,448 @@
|
||||
.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: 28%;
|
||||
height: 80%;
|
||||
/* background: #00316B; */
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 20vh;
|
||||
left: 13vw;
|
||||
}
|
||||
|
||||
.topBannerLeft p:nth-child(1){
|
||||
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:3.5vw;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-top: 18px;
|
||||
text-align: right;
|
||||
letter-spacing: 0.5vw;
|
||||
|
||||
|
||||
}
|
||||
.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%;
|
||||
min-height: 110vh;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
148
css/technicalSupport.css
Normal file
148
css/technicalSupport.css
Normal file
@@ -0,0 +1,148 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.bannerBox{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bannerLeft ,.bannerRight{
|
||||
width: 24%;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.top3{
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
}
|
||||
Reference in New Issue
Block a user