// pc端：
// 设计稿1440*900 所有尺寸基本按px来即可;
// 正文 16px;
// 移动端：
// 设计稿宽800px，按逻辑尺寸的两倍制作。因此真实尺寸需要除2；
// 如设计稿字体大小28px,则实真字体大小为28px/2=14px;
// 或使用vw 字体大小：28/800*10 = 3.5vw
// 正文 14px 或 3.5vw
//pc端样式
.main {
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding-top: 70px;
.content{
width: 1500px;
margin: 0 auto;
.news_title{
text-align: center;
padding-top: 120px;
margin-bottom: 80px;
font-weight: bold;
font-size: 40px;
font-family: Microsoft YaHei;
color: #333333;
}
}
.banner{
width: 100%;
height: 100vh;
.bannerSwiper{
width: 100%;
height: 100%;
img{
width: 100%;
object-fit: cover;
}
.btn-prev,.btn-next{
position: absolute;
top: 50%;
margin-top: -22px;
width: 44px;
height: 44px;
border: 1px solid #000000;
z-index: 2;
text-align: center;
color: #000000;
background: transparent;
transition: all .3s ease-in-out;
cursor: pointer;
span{
font-size: 36px;
display: inline-block;
transform: rotate(90deg);
line-height: 44px;
}
&:hover{
background: #48a038;
border-color: #48a038;
color: #fff;
}
}
.btn-prev{
left: 100px;
transform: rotate(-180deg);
}
.btn-next{
right: 100px;
}
.swiper-button-disabled{
cursor: no-drop;
background: transparent;
color: #979292;
border-color: #979292;
&:hover{
background: transparent;
border-color: #979292;
color: #979292;
}
}
.swiper-pagination{
bottom: 40px;
display: none;
.swiper-pagination-bullet{
background: #ffffff;
opacity:1;
position: relative;
width: 6px;
height: 6px;
margin:0 6px;
&::before{
content: '';
position: absolute;
left: -3px;
top: -3px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #ffffff;
opacity: 0;
transition: all .3s ease-in-out;
}
}
.swiper-pagination-bullet-active{
&::before{
opacity: 1;
}
}
}
}
}
.tabs_box{
width: 1300px;
margin: 0 auto;
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-size: 16px;
color: #000000;
margin-bottom: 60px;
.tabs_li{
border: 1px solid #000000;
padding: 10px 30px;
margin-right: 20px;
cursor: pointer;
transition: all .2s;
span{
display: inline-block;
margin: 0 10px;
font-weight: bold;
}
}
.tabs_lis{
background: #B81C25;
border: 1px solid #B81C25;
color: #fff;
}
}
.article_list{
width: 1300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
.article_li{
width: 406px;
margin-bottom: 62px;
padding-bottom: 62px;
padding-right: 41px;
border-bottom: 1px solid #DDE2E6;
&:nth-of-type(3n){
padding-right: 0;
}
&:nth-of-type(7){
border: 0;
margin: 0;
}
&:nth-of-type(8){
border: 0;
margin: 0;
}
&:nth-of-type(9){
border: 0;
margin: 0;
}
img{
width: 100%;
height: 305px;
object-fit: cover;
margin-bottom: 20px;
}
.txt1{
font-size: 20px;
color: #000000;
display: -webkit-box; /* 使用 Flexbox 布局 */
-webkit-box-orient: vertical; /* 垂直方向排列 */
-webkit-line-clamp: 2; /* 限制显示的行数，这里是3行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis;
line-height: 30px;
margin-bottom: 20px;
}
.txt2{
font-size: 14px;
color: #666666;
}
}
}
.news_paging{
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0 120p x;
.previousPage{
width: 40px;
height: 40px;
color: #B81C25;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #B81C25;
margin-right: 20px;
cursor: pointer;
transition: all 0.2s;
span{
font-size: 26px;
transform: rotate(-90deg);
}
&:hover{
background: #B81C25;
border: 1px solid #B81C25;
color: #fff;
}
}
.nextPage{
width: 40px;
height: 40px;
color: #B81C25;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #B81C25;
margin-left: 20px;
cursor: pointer;
transition: all 0.2s;
span{
font-size: 26px;
transform: rotate(90deg);
}
&:hover{
background: #B81C25;
border: 1px solid #B81C25;
color: #fff;
}
}
.pageNum{
min-width: 40px;
height: 40px;
line-height: 40px;
font-family: Source Han Sans CN;
font-size: 18px;
color: #000;
transition: all 0.2s;
padding: 0 5px;
box-sizing: border-box;
cursor: pointer;
text-align: center;
border: 1px solid #DDE2E6;
border-radius: 2px;
&:hover{
background: #B81C25;
border: 1px solid #B81C25;
color: #fff;
}
}
.pageNums{
pointer-events: none;
}
.pageNum+.pageNum{
margin-left: 10px;
}
.pageNumActive{
color: #041954;
}
.ellipsis{
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 22px;
padding: 10px 15px;
color: #333333;
// cursor: pointer;
transition: all 0.2s;
// &:hover{
// color:#48A038
// }
}
}
.study_box{
width: 100%;
background-color: #F6F6F6;
padding-top: 122px;
padding-bottom: 130px;
.study_head{
width: 1498px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 81px;
.txt{
font-weight: bold;
font-size: 48px;
color: #231F20;
margin-left: 100px;
}
a{
width: 200px;
height: 45px;
background: #B81C25;
border-radius: 8px;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 45px;
margin-right: 100px;
}
}
.bannerSwiper2{
width: 1498px;
margin: 0 auto;
}
}
}
a{
display: inline-block;
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
.main{
}
}
//移动端样式
@media screen and (max-width:800px) {
.main {
width: 100%;
padding-top: 3.5vw;
.content{
width: 92.125vw;
margin: 0 auto;
.news_title{
display: block;
margin-bottom: 10.75vw;
font-size: 6.375vw;
text-align: center;
}
}
.content2{
padding-top: 17.5vw;
.news_title{
font-size: 4.75vw;
padding-top: 0;
}
}
.banner{
width: 100%;
height: auto;
.bannerSwiper{
width: 100%;
height: 100%;
img{
width: 100%;
height: 46.75vw;
object-fit: cover;
}
.btn-prev,.btn-next{
position: absolute;
top: 50%;
margin-top: -22px;
width: 44px;
height: 44px;
border: 1px solid #000000;
z-index: 2;
text-align: center;
color: #000000;
background: transparent;
transition: all .3s ease-in-out;
cursor: pointer;
span{
font-size: 36px;
display: inline-block;
transform: rotate(90deg);
line-height: 44px;
}
&:hover{
background: #48a038;
border-color: #48a038;
color: #fff;
}
}
.btn-prev{
left: 100px;
transform: rotate(-180deg);
}
.btn-next{
right: 100px;
}
.swiper-button-disabled{
cursor: no-drop;
background: transparent;
color: #979292;
border-color: #979292;
&:hover{
background: transparent;
border-color: #979292;
color: #979292;
}
}
.swiper-pagination{
bottom: 40px;
display: none;
.swiper-pagination-bullet{
background: #ffffff;
opacity:1;
position: relative;
width: 6px;
height: 6px;
margin:0 6px;
&::before{
content: '';
position: absolute;
left: -3px;
top: -3px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #ffffff;
opacity: 0;
transition: all .3s ease-in-out;
}
}
.swiper-pagination-bullet-active{
&::before{
opacity: 1;
}
}
}
}
}
.tabs_box{
width: 92.125vw;
flex-wrap: wrap;
margin-bottom: 10.625vw;
font-size: 3.75vw;
.tabs_li{
padding: 1.875vw 3.75vw;
margin-right: 3vw;
margin-bottom: 4vw;
span{
display: inline-block;
margin: 0 3px 0 8px;
font-weight: bold;
}
&:nth-of-type(3n){
margin-right: 0;
}
}
.tabs_lis{
background: #B81C25;
border: 1px solid #B81C25;
color: #fff;
}
}
.article_list{
width: 92.125vw;
margin: 0 auto;
.article_li{
width: 100%;
margin-bottom: 10.5vw;
padding-bottom: 10.5vw;
padding-right: 0;
border-bottom: 1px solid #DDE2E6;
&:nth-of-type(7){
border-bottom: 1px solid #DDE2E6;
}
&:nth-of-type(8){
border-bottom: 1px solid #DDE2E6;
}
&:nth-of-type(9){
border-bottom: 1px solid #DDE2E6;
}
&:last-child{
border: 0;
}
img{
height: 69.125vw;
margin-bottom: 5.125vw;
}
.txt1{
font-size: 3.75vw;
}
}
}
.news_paging{
padding-top: 16vw;
.previousPage{
width: 40px;
height: 40px;
margin-right: 20px;
box-sizing: border-box;
}
.nextPage{
width: 40px;
height: 40px;
margin-left: 3.25vw;
transition: all 0.2s;
box-sizing: border-box;
}
.pageNum{
font-size: 3.5vw;
}
.ellipsis{
font-size: 3.5vw;
padding: 1.875vw 2.5vw;
// &:hover{
// color:#48A038
// }
}
}
.study_box{
padding-top: 13.75vw;
padding-bottom: 35.875vw;
position: relative;
.study_head{
width: 92.125vw;
margin-bottom: 10.5vw;
.txt{
width: 100%;
font-size: 4.75vw;
margin-left: 0;
text-align: center;
}
a{
position: absolute;
bottom:15vw;
left: 50%;
margin-left: -25%;
}
}
.bannerSwiper2{
width: 92.125vw;
margin: 0 auto;
}
}
}
}