// PC版 @media screen and (min-width: 768px) { .phone { display: none !important; } .banner { padding-top: 30px; background: #f5f5f5; padding-bottom: 30px; .left { background-color:#000100; display: block; width: 77.8%; height: 580px; img{ height: 100%; width: 100%; object-fit: contain; } } .right { width: 22.2%; height:580px; .item { cursor: pointer; background: url("../../img/banner_bg_01.jpg")#3e3e3e; width: 100%; height: 90.8px; display: flex; justify-content: flex-start; align-items: center; padding: 18px 24px; a{ color: #fff; font-size: 16px; text-decoration: none; &:nth-child(2){ color: red; } } } .active { background: #C90000; } .type { width:100%; height: 126px; display: flex; &-txt{ flex: 1; background: url("../../img/banner_bg_03.jpg"); display: flex; justify-content: center; align-items: center; flex-flow: column; a{ font-size: 24px; color: #FFFFFF; line-height: 56px; } } } } } .nav-titles { padding-top: 56px; .item { display: block; color: #000; text-decoration: none; margin-left: 4px; cursor: pointer; padding: 0 46px; width: 190px; height: 50px; padding-top: 10px; text-align: justify; border-radius: 3px; background: #dfdfdf; font-size: 23px; i { display: inline-block; width: 100%; } &:nth-child(1) { margin-left: 0; } } .active { color: #fff; background: #C90000; } } .title-border { &::before { content: ""; width: 100%; height: 3px; background: #dfdfdf; position: absolute; bottom: 0; left: 0; } } .body-list { padding-top: 34px; &>div{ display: none; } .item { margin-bottom: 22px; display: inline-block; width: 19%; background: #f8f8f8; position: relative; color: #000; text-decoration: none; .img{ width: 100%; height: 206px; overflow: hidden; &::after { content: ""; width: 48px; height: 48px; background: url("../../img/play.png") no-repeat center center; background-size: 100% 100%; position: absolute; bottom: 10px; left: 10px; z-index: 1; } } img { background-color: #000; width: 100%; height: 100%; object-fit: scale-down; } &:hover { .img{ img{ transform: scale(1.1); } } } margin-right: 0.5%; &:nth-child(5n) { margin-right: 0; } &:nth-child(5n+1) { margin-left: 0.66%; } .title { // padding: 0 20px; // font-size: 16px; // text-overflow: ellipsis; width: 100%; overflow: hidden; text-overflow: ellipsis; // display: -webkit-box; white-space: nowrap; // -webkit-line-clamp: 1; // -webkit-box-orient: vertical; padding: 0 20px; font-size: 17px; margin-top: 12px; } .time { padding: 8px 19px 19px 19px; .left { color: #a7a7a7; font-size: 14px; } .right { display: flex; justify-content: center; align-items: center; img { // width: 20px; width: auto; height: 10px; object-fit: fill; margin-right: 4px; } font-size: 16px; color: #ff680b; } } } } .list04{ display: block !important; .item{ position: relative; .img{ width: 100%; height: 206px; overflow: hidden; &::after { display: none; } } img { width: 100%; height: 100%; object-fit: cover; } &:hover { img{ transform: scale(1.1); } } } } } // 手机 @media screen and (max-width: 768px) { .banner { height: 304px; background: #000000; padding: 10px 0; .swiper-container { height: 186px; .swiper-slide { width: 332px; position: relative; border-radius: 4px; overflow: hidden; .item{ display: block; } img { width: 100%; } .title { position: absolute; left: 10px; bottom: 10px; z-index: 10; font-size: 14px; color: #fff; } .page { position: absolute; bottom: 10px; right: 30px; color: #fff; span { font-size: 18px; color: red; } font-size: 9px; } } } .type { margin: 10px 24px; padding-bottom: 12px; height: 97px; display: flex; &-txt{ flex: 1; background-color: #800000; display: flex; border-top: 2px solid #da0300; justify-content: center; align-items: center; a{ padding: 0 12px; height: 51px; display: flex; justify-content: center; align-items: center; font-size: 21px; color: #FFFFFF; line-height: 33px; background-color: #DA0300; text-decoration: none; &:last-child{ margin-left: 12px; } } } img{ height: 100%; } } } .body-list { padding: 12px; background: #f8f8f8; display: flex; flex-direction: column; align-items: center; .item { font-size: 18px; width: 100%; background-color: #fff; margin-top: 17px; margin-left: auto; margin-right: auto; display: block; box-shadow: 0 0 10px 0 #aaaaaa; position: relative; overflow: hidden; border-radius: 5px; color: #000; text-decoration: none; .img{ width: 100%; height: 206px; overflow: hidden; &::after { content: ""; width: 59px; height: 59px; background: url("../../img/play.png") no-repeat center center; background-size: 100% 100%; // background-color: #000; position: absolute; top: 130px; left: 9px; z-index: 1; } } img { width: 100%; height: 100%; object-fit: cover; } &:hover { img{ transform: scale(1); } } .title { padding: 0 20px; font-size: 17px; margin-top: 12px; text-overflow: ellipsis; -moz-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .time { padding: 0 20px; padding-bottom: 10px; .left { font-size: 14px; color: #a7a7a7; } .tag { width: 59px; height: 21px; font-size: 13px; color: #fff; text-align: center; line-height: 21px; background: #bf0614; border-radius: 3px; } } } } .zx { font-size: 18px; padding: 22px; padding-bottom: 0; background: #f8f8f8; } .spzt { background: none; height: 180px; } }

map