@charset "UTF-8"; /* scss中可以用mixin来扩展 */ @media screen and (min-width: 768px) { .main .container.news-list .title { font-size: 34px; text-align: center; margin: 80px 0; } .main .container.news-list .new { display: block; -webkit-transition: all 0.4s; transition: all 0.4s; margin-bottom: 40px; } .main .container.news-list .new .cover { width: 290px; height: 190px; } .main .container.news-list .new .cover img { display: block; width: 100%; height: 100%; } .main .container.news-list .new:hover { -webkit-box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2); box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2); } .main .container.news-list .new:hover .name { color: #0688d2; } .main .container.news-list .new .content { width: 780px; margin-left: 49px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 32px 0; } .main .container.news-list .new .content .name { font-size: 20px; -webkit-transition: all 0.4s; transition: all 0.4s; } .main .container.news-list .new .content .date { font-size: 16px; color: #999999; margin-top: 14px; } .main .container.news-list .new .content .line { width: 100%; height: 1px; background: #e8e8e8; margin: 18px 0; } .main .container.news-list .new .content .desc { font-size: 16px; color: #505050; } .main .container .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 25px; } .main .container .pagination li { background: #e8e8e8; margin: 0 8px; } .main .container .pagination li.active { background: #0688d2; } .main .container .pagination li.active a { color: #fff; } .main .container .pagination li.more { background: transparent !important; } .main .container .pagination li.more a { color: #505050 !important; min-width: unset !important; padding: 0 !important; } .main .container .pagination li:hover { background: #0688d2; } .main .container .pagination li:hover a { color: #fff; } .main .container .pagination li a { display: block; height: 32px; line-height: 32px; padding: 0 10px; font-size: 12px; color: #505050; min-width: 32px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .footer { margin-top: 40px; } } @media screen and (max-width: 768px) { .main .container.news-list { padding: 0 0.32rem; } .main .container.news-list .title { font-size: 0.34rem; text-align: center; margin-top: 1.2rem; } .main .container.news-list .new { display: block; margin: 0.4rem 0; width: 7.06rem; } .main .container.news-list .new .cover { width: 2.9rem; height: 1.9rem; } .main .container.news-list .new .cover img { display: block; width: 100%; height: 100%; } .main .container.news-list .new .content { width: 3.96rem; height: 1.9rem; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0.24rem; border: 1px solid #e8e8e8; border-left: 0; } .main .container.news-list .new .content .name { font-size: 0.3rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .main .container.news-list .new .content .date { font-size: 0.24rem; color: #999999; margin-top: 0.06rem; } .main .container.news-list .new .content .line { width: 100%; height: 0.01rem; background: #e8e8e8; margin: 0.16rem 0; } .main .container.news-list .new .content .desc { font-size: 0.24rem; color: #505050; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .main .container .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 0.8rem; } .main .container .pagination li { background: #e8e8e8; margin: 0 0.12rem; } .main .container .pagination li.active { background: #0688d2; } .main .container .pagination li.active a { color: #fff; } .main .container .pagination li.more { background: transparent !important; } .main .container .pagination li.more a { color: #505050 !important; min-width: unset !important; padding: 0 !important; } .main .container .pagination li:hover { background: #0688d2; } .main .container .pagination li:hover a { color: #fff; } .main .container .pagination li a { display: block; height: 0.56rem; line-height: 0.56rem; padding: 0 0.18rem; font-size: 0.2rem; color: #505050; min-width: 0.56rem; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .footer { margin-top: 40px; } }