.newsList { position: relative; margin-top: 30px; display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; .listItem { position: relative; width: 33.3%; padding-left: 15px; padding-right: 15px; margin-bottom: 30px; text-decoration: none; .itemInfo{ background: #FFFFFF; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.05); } .picBox { position: relative; overflow: hidden; .pic { width: 100%; display: block; } .mask { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.5; background-image: linear-gradient(180deg, rgba(230, 0, 18, 0.30) 0%, rgba(230, 0, 18, 0.00) 100%); } } .infoBox { padding: 25px 30px; .title { font-weight: bold; font-size: 18px; color: #333436; line-height: 26px; min-height: 52px; } .bar { height: 1px; background: #EAECEE; margin-top: 20px; } .timeBox { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; .time { font-weight: 300; font-size: 13px; color: #8A8D92; line-height: 20px; } .arrow { width: 20px; height: 20px; margin-right: -7px; } } } } .swiper-button-next { right: 0; width: 40px; height: 120px; background: url(../images/r.png); background-size: 100%; margin-top: -90px; } .swiper-button-prev { left: 0; width: 40px; height: 120px; background: url(../images/l.png); background-size: 100%; margin-top: -90px; } } @media (max-width: 767px) { .newsList{ margin: 0; margin-top: 15px; .listItem{ width: 100%; padding: 0; margin-bottom: 15px; .infoBox{ padding: 20px 25px; .title{ min-height: auto; font-size: 15px; line-height: 22px; } .bar{ margin-top: 15px; } .timeBox{ margin-top: 12px; } .time{ font-size: 12px; line-height: 18px; } } } } }