body{ background:#f5f7fb; } /* 横幅 */ .pageBaner{ position: relative; } .pageBaner img{ display:block; max-width:100%; } /* 分类 */ .classify{ position:relative; text-align:center; border-bottom:1px solid #eee; background:#fff; height:65px; display:flex; align-items:stretch; } .classify .main{ display:flex; justify-content:center; align-items:stretch; } .classify .list{ display:flex; align-items:center; justify-content:center; white-space: nowrap; overflow:auto; } .classify .list::-webkit-scrollbar{ width: 6px; height: 6px; } .classify .list a{ color:#333; font-size:15px; padding:4px 15px; border-radius:5px; margin:0 5px; } .classify .list a:hover{ background:#0f69fd; color:#fff; } .classify .list a:focus{ outline:none; } .classify .list a.on{ background:#0f69fd; color:#fff; } .classify .listPop{ padding-left:10px; border-left:1px solid #eee; align-items:center; display:none; } .classify .listPop i{ font-size:22px; } .classify .listPop-content{ position:fixed; top:0px; right:-100%; z-index:9999; height:100%; width:75%; background:#fff; display:flex; align-items:center; max-width:300px; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; opacity:0; } .classify .listPop-content .pop-main{ width:100%; max-height:100%; overflow:auto; padding:15px; } .classify .listPop-content a{ display:block; text-align:left; height:40px; line-height:40px; border-bottom:1px solid #eee; padding:0 10px; } .classify .listPop-content a:hover{ color:#0f69fd; } .classify .listPop-content a.on{ background:#0f69fd; color:#fff; } .classify .listPop-content .close{ position:absolute; top:10px; right:10px; z-index:999999; opacity:1; color:#666; height:50px; width:50px; text-align:center; line-height:50px; border-radius:50px; background:rgba(255,255,255,0.3); } .classify .listPop-bg{ position:fixed; width:100%; height:100%; top:0px; left:0px; background:#000; opacity:0.3; z-index:1000; display:none; } @media screen and (max-width:768px){ .classify{height:55px;} .classify .list{justify-content:left;} .classify .list a{padding:4px 10px;} } /* 列表 */ .art-list { margin-top:40px; } .art-list .item{ padding:10px; position:relative; margin-bottom:10px; box-shadow:0 0 0px #ddd; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; background:#fff; border-radius: 3px; overflow:hidden; } .art-list .item:hover{ box-shadow:0 0 10px #ddd; } .art-list .item .imgbox{ margin-right:15px; max-width:260px; float:left; max-width:30%; } .art-list .item a{ display:block; } .art-list .item img{ display:block; width:100%; } .art-list .item .text h3{ font-size:22px; color:#333; margin:20px 0; word-break:break-all; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .art-list .item .text .desc{ font-size:14px; line-height:24px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#666; margin:20px 0; } .art-list .item .text .info i{ position:relative; top:1px; margin-right:5px; } .art-list .item .text .date{ color:#666; margin-right:15px; } .art-list .item .text .hit{ color:#666; } .rec{ background: #fff; box-shadow: rgb(53 64 82 / 4%) 0 2px 4px 0; padding:20px 20px 10px 20px; border-radius: 3px; overflow:hidden; } .rec-title{ margin-bottom: 15px; border-bottom:1px solid #eee; height:32px; } .rec .rec-title span{ display:inline-block; height:32px; line-height:32px; border-bottom:1px solid #0f69fd; } .rec ul li a h3{ font-size:14px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; padding:2px 0; } .rec ul li a h3:hover{ color:#0f69fd; } @media screen and (max-width:768px){ .art-list { margin-top:20px; } .art-list .item .text h3{ font-size:18px; margin-top:5px; margin-bottom:5px; } .art-list .item .text .desc{ -webkit-line-clamp:1; margin:4px 0; } }