响应式样式
parent
041d4f1626
commit
ccb51db43e
113
css/style.css
113
css/style.css
|
@ -518,7 +518,7 @@
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
.index-about-right img{
|
.index-about-right img{
|
||||||
height: 197px;
|
width: 85%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-about-bottom{
|
.index-about-bottom{
|
||||||
|
@ -1628,6 +1628,7 @@
|
||||||
.information-content{
|
.information-content{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
margin-bottom: 45px;
|
margin-bottom: 45px;
|
||||||
}
|
}
|
||||||
.information-txt{
|
.information-txt{
|
||||||
|
@ -1847,6 +1848,29 @@ textarea::-webkit-input-placeholder {
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width:1580px){
|
||||||
|
.banner-swiper{
|
||||||
|
height: 580px;
|
||||||
|
}
|
||||||
|
.banner-title h2{
|
||||||
|
font-size: 90px;
|
||||||
|
}
|
||||||
|
.banner-title p{
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
.banner-title span{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.pull-swiper{
|
||||||
|
height: 430px;
|
||||||
|
}
|
||||||
|
.pull-banner-title h2{
|
||||||
|
font-size: 78px;
|
||||||
|
}
|
||||||
|
.pull-banner-title p{
|
||||||
|
font-size: 29px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media screen and (max-width:1440px){
|
@media screen and (max-width:1440px){
|
||||||
.logo h1{
|
.logo h1{
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
@ -1861,6 +1885,27 @@ textarea::-webkit-input-placeholder {
|
||||||
.w1280{
|
.w1280{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
.banner-swiper{
|
||||||
|
height: 545px;
|
||||||
|
}
|
||||||
|
.banner-title h2{
|
||||||
|
font-size: 87px;
|
||||||
|
}
|
||||||
|
.banner-title p{
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
.banner-title span{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.pull-swiper{
|
||||||
|
height: 405px;
|
||||||
|
}
|
||||||
|
.pull-banner-title h2{
|
||||||
|
font-size: 76px;
|
||||||
|
}
|
||||||
|
.pull-banner-title p{
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width:1280px){
|
@media screen and (max-width:1280px){
|
||||||
|
@ -1874,9 +1919,73 @@ textarea::-webkit-input-placeholder {
|
||||||
.nav li.active>a{
|
.nav li.active>a{
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
.banner-swiper{
|
||||||
|
height: 530px;
|
||||||
|
}
|
||||||
|
.banner-title h2{
|
||||||
|
font-size: 84px;
|
||||||
|
}
|
||||||
|
.banner-title p{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.banner-title span{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.pull-swiper{
|
||||||
|
height: 390px;
|
||||||
|
}
|
||||||
|
.pull-banner-title h2{
|
||||||
|
font-size: 74px;
|
||||||
|
}
|
||||||
|
.pull-banner-title p{
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width:1180px){
|
@media screen and (max-width:1180px){
|
||||||
|
.preview .swiper-slide{
|
||||||
|
height: 134px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.preview .swiper-slide img{
|
||||||
|
min-height: 134px;
|
||||||
|
}
|
||||||
|
.preview .swiper-slide-thumb-active img{
|
||||||
|
min-height: 120px;
|
||||||
|
}
|
||||||
|
.enterprise-txt{
|
||||||
|
height: 280px;
|
||||||
|
padding-top: 45px;
|
||||||
|
}
|
||||||
|
.enterprise-img{
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
.enterprise-img img{
|
||||||
|
min-height: 280px;
|
||||||
|
}
|
||||||
|
.team-style-swiper .swiper-slide p{
|
||||||
|
padding: 5px 15px;
|
||||||
|
}
|
||||||
|
.banner-swiper{
|
||||||
|
height: 520px;
|
||||||
|
}
|
||||||
|
.banner-title h2{
|
||||||
|
font-size: 80px;
|
||||||
|
}
|
||||||
|
.banner-title p{
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.banner-title span{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.pull-swiper{
|
||||||
|
height: 380px;
|
||||||
|
}
|
||||||
|
.pull-banner-title h2{
|
||||||
|
font-size: 70px;
|
||||||
|
}
|
||||||
|
.pull-banner-title p{
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width:1080px){
|
@media screen and (max-width:1080px){
|
||||||
|
|
||||||
|
|
|
@ -237,6 +237,37 @@ jQuery(function($){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}else if(screen.width > 860 & screen.width <= 1280){
|
||||||
|
var teamStyleSwiper = new Swiper('.team-style-swiper', {
|
||||||
|
// paginationClickable: true,
|
||||||
|
observer: true,
|
||||||
|
observeParents: true,
|
||||||
|
// initialSlide: swipIndex,
|
||||||
|
effect: 'coverflow',
|
||||||
|
centeredSlides: true,
|
||||||
|
spaceBetween: '1%',
|
||||||
|
slidesPerView: 2,
|
||||||
|
loop: true,
|
||||||
|
autoplay:true,
|
||||||
|
// autoplay: {
|
||||||
|
// disableOnInteraction: false,
|
||||||
|
// },
|
||||||
|
navigation: {
|
||||||
|
//
|
||||||
|
},
|
||||||
|
coverflowEffect: {
|
||||||
|
rotate: 0, //slide做3d旋转时Y轴的旋转角度
|
||||||
|
stretch: 100, //每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比
|
||||||
|
depth: 40, //slide的位置深度。值越大z轴距离越远,看起来越小。
|
||||||
|
modifier: 1, //depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。
|
||||||
|
slideShadows: false,
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
transitionEnd: function () {
|
||||||
|
this.activeIndex
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
}else{
|
}else{
|
||||||
var teamStyleSwiper = new Swiper('.team-style-swiper', {
|
var teamStyleSwiper = new Swiper('.team-style-swiper', {
|
||||||
// paginationClickable: true,
|
// paginationClickable: true,
|
||||||
|
|
Loading…
Reference in New Issue