release汉晶网站完成
This commit is contained in:
351
hanJing/css/index.css
Normal file
351
hanJing/css/index.css
Normal file
@@ -0,0 +1,351 @@
|
||||
|
||||
.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; /* 防止水平滚动条 */
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
}
|
||||
|
||||
.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: 330vh;
|
||||
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/png/我们的产品.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: 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 .top{
|
||||
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;
|
||||
|
||||
|
||||
}
|
||||
.top p{
|
||||
width: 60%;
|
||||
font-size: 1vw;
|
||||
line-height: 4.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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user