所有项目提交
This commit is contained in:
367
giantElephant/css/software.css
Normal file
367
giantElephant/css/software.css
Normal file
@@ -0,0 +1,367 @@
|
||||
.ABtitleBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
background-image: url(../imgs/PNG/软件开发.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 90%;
|
||||
background-position: 0% 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ABtitle{
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 13%;
|
||||
font-size: 35px;
|
||||
}
|
||||
.ABtitle h1{
|
||||
letter-spacing: 8px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.ABtitle p{
|
||||
font-weight: 500;
|
||||
color: #91A7BC;
|
||||
font-size: 35px;
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
|
||||
.ABtitleBox .content{
|
||||
position: absolute;
|
||||
top: 55%;
|
||||
left: 6%;
|
||||
width: 714px;
|
||||
font-size: 25px;
|
||||
letter-spacing: 3px;
|
||||
line-height: 55px;
|
||||
}
|
||||
.ourServicesBox{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* background-color: #F5F5F5; */
|
||||
padding: 50px 0;
|
||||
|
||||
}
|
||||
.ourServicesTitle{
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.ourServicesTitle h1{
|
||||
font-size: 35px;
|
||||
letter-spacing: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
.ourServicesTitle p{
|
||||
font-size: 23px;
|
||||
|
||||
margin-top: 18px;
|
||||
color: #92A8BD;
|
||||
padding: 0;
|
||||
}
|
||||
.ourServicesContent{
|
||||
width: 80%;
|
||||
height: 85%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.ourServicesContent div{
|
||||
width: 40%;
|
||||
margin-top: 50px;
|
||||
box-shadow: 0px 0px 10px 0px #87adfc;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.left,.right{
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left img{
|
||||
width: 88%;
|
||||
height: 58%;
|
||||
box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.left h1{
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
font-size: 30px;
|
||||
color: #376DF2;
|
||||
|
||||
}
|
||||
.left p{
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
margin-top: 3%;
|
||||
font-size: 1.2rem;
|
||||
line-height: 35px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.right img{
|
||||
width: 90%;
|
||||
height: 58%;
|
||||
box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.right h1{
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
font-size: 30px;
|
||||
color: #376DF2;
|
||||
|
||||
}
|
||||
.right p{
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
margin-top: 3%;
|
||||
font-size: 1.2rem;
|
||||
line-height: 35px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ourWorksBox{
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
margin-top: 100px;
|
||||
background-image: url(../imgs/PNG/首页-弧形线条\(BJF\).svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 140%;
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
|
||||
.ourWorksBox h1{
|
||||
margin-top: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.ourWorksBox ul{
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
padding: 0px;
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
|
||||
.ourWorksBox ul li{
|
||||
width: calc(100% / 5);
|
||||
height: 35%;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.ourWorksBox ul li .left2{
|
||||
width:60%;
|
||||
height: 94%;
|
||||
background-color: #E0EDF5;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
li .right2{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
li .right2 img{
|
||||
width: 50px;
|
||||
}
|
||||
.ourWorksBox ul .last{
|
||||
width: 14% !important;
|
||||
background-color: #E0EDF5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.ourWorksBox ul .last .content{
|
||||
padding: 10px;
|
||||
}
|
||||
.title{
|
||||
margin-top: 10px;
|
||||
font-size: 23px;
|
||||
color: #376DF2;
|
||||
margin-top: 15%;
|
||||
}
|
||||
.text{
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.softwareProduct{
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
|
||||
.softwareProduct h1{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
.softwareProduct p{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #92A8BD;
|
||||
}
|
||||
|
||||
.CarouselBox{
|
||||
width: 60%;
|
||||
height: 80%;
|
||||
box-shadow: 0px 0px 10px 0px #87adfc;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* 轮播图容器 */
|
||||
.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-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 箭头按钮样式 */
|
||||
.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;
|
||||
user-select: none;
|
||||
/* 确保基线对齐 */
|
||||
line-height: 1;
|
||||
/* 移除任何可能的内边距 */
|
||||
padding: 0;
|
||||
/* 确保盒模型一致 */
|
||||
box-sizing: border-box;
|
||||
/* 强制相同的文本基线 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.carousel-arrow:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.carousel-arrow-left {
|
||||
left: 20px;
|
||||
top: 48.7%;
|
||||
|
||||
}
|
||||
|
||||
.carousel-arrow-right {
|
||||
right: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.footerBox{
|
||||
width: 100%;
|
||||
height: 930px;
|
||||
background-image: url(../imgs/PNG/背景下.png);
|
||||
background-repeat: no-repeat; /* 添加这行 */
|
||||
background-position: 0% 100%; /* 添加这行 */
|
||||
background-size: 100% 149%;
|
||||
position: relative; /* 添加这行 */
|
||||
margin-top: 0;
|
||||
/* 添加这行 */
|
||||
}
|
||||
.Flogo{
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.FlogoImg{
|
||||
width: 130px;
|
||||
}
|
||||
Reference in New Issue
Block a user