body { background-color: #f4f4f4; } .w { width: 1170px; } .banner { height: 200px; width: 100%; background: url("/zkjaeduyuncom/images/broke-banner.jpg") no-repeat top center; } .banner .w { position: relative; color: #fefefe; padding-left: 125px; } .banner .w .p1 { font-size: 22px; line-height: 22px; padding: 37px 0 12px 50px; letter-spacing: 2px; background: url("/zkjaeduyuncom/images/400547365.png") no-repeat 8px 25px; } .banner .w .p2 { font-size: 40px; line-height: 40px; padding-bottom: 16px; letter-spacing: 4px; } .banner .w .p3 { font-size: 14px; line-height: 14px; letter-spacing: 1px; } .w .category-grid { background-color: #fff; border-radius: 10px; margin: 0 0 13px; /* overflow: hidden; */ padding: 10px 0; /* .area-category { line-height: 32px; background-color: #fff; padding: 0 110px 0 80px; position: relative; .label { position: absolute; left: 30px; font-size: 16px; padding: 0 15px 0 0; line-height: 32px; color: #333; font-weight: normal; } .btn { font-size: 14px; color: #333; padding: 0 8px; height: 26px; line-height: 26px; vertical-align: baseline; &:hover, &.ac { color: #fff; background-color: @blue; } &.pull-right { position: absolute; right: 38px; top: 50%; margin-top: -18px; } } &.slideUp { height: 32px; overflow: hidden; .moreBtn { position: absolute; top: 0; right: 30px; font-size: 14px; color: @blue; padding: 0 12px; height: 32px; line-height: 32px; vertical-align: baseline; display: inline-block; margin-bottom: 0; text-align: center; white-space: normal; } .slideUpBtn { display: none; } } &.slideDown { height: auto; .moreBtn { display: none; } .slideUpBtn { position: absolute; top: 0; right: 30px; font-size: 14px; color: @blue; padding: 0 12px; height: 32px; line-height: 32px; vertical-align: baseline; display: inline-block; margin-bottom: 0; text-align: center; white-space: normal; } } dl { float: left; dt { .btn {} } dd { display: none; i.triangle {} .btn {} } } } */ } .w .category-grid .broke-category, .w .category-grid .label-category, .w .category-grid .selected-label { line-height: 32px; background-color: #fff; margin: 0; padding: 0 30px 5px 80px; position: relative; } .w .category-grid .broke-category .label, .w .category-grid .label-category .label, .w .category-grid .selected-label .label { position: absolute; left: 30px; font-size: 16px; padding: 0 15px 0 0; line-height: 32px; color: #333; font-weight: normal; } .w .category-grid .broke-category .btn, .w .category-grid .label-category .btn, .w .category-grid .selected-label .btn { font-size: 14px; color: #333; padding: 0 8px; height: 26px; line-height: 26px; vertical-align: baseline; } .w .category-grid .broke-category .btn:hover, .w .category-grid .label-category .btn:hover, .w .category-grid .selected-label .btn:hover, .w .category-grid .broke-category .btn.ac, .w .category-grid .label-category .btn.ac, .w .category-grid .selected-label .btn.ac { color: #fff; background-color: #06978e; } .w .category-grid .broke-category .btn.pull-right, .w .category-grid .label-category .btn.pull-right, .w .category-grid .selected-label .btn.pull-right { position: absolute; right: 38px; top: 50%; margin-top: -18px; } .w .category-grid .label-category dl { float: left; position: relative; z-index: 1; } .w .category-grid .label-category dl dt { height: 32px; line-height: 32px; padding: 0 8px; } .w .category-grid .label-category dl dt p { font-weight: normal; cursor: pointer; position: relative; padding-right: 10px; } .w .category-grid .label-category dl dt p:after { position: absolute; font-weight: 900; width: 10px; height: 14px; text-align: center; top: 50%; margin-top: -7px; font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; content: "\f107"; } .w .category-grid .label-category dl dd { display: none; position: absolute; background-color: #fff; width: 300px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.2); padding: 10px 10px; } .w .category-grid .selected-label { padding-left: 112px; /* display: none; */ } .w .category-grid .selected-label .label { color: #666; } .w .category-grid .selected-label .selected-list .label-box { float: left; margin: 3px 8px; line-height: 26px; padding: 0 8px; border-radius: 4px; border: 1px dashed #06978e; color: #06978e; } .w .category-grid .selected-label .selected-list .label-box .label-del { cursor: pointer; } .w .category-grid .selected-label .selected-list .label-box .label-del:hover { color: #f00; } .w .broke-box { border-radius: 10px; padding: 0 0px 60px 0px; margin-bottom: 26px; } .w .broke-box .left-section { width: 846px; background-color: #fff; border-radius: 10px; padding: 0 30px 30px; position: relative; } .w .broke-box .left-section .search-grid { position: absolute; right: 30px; top: 15px; width: 200px; height: 30px; border: 1px solid #ddd; background-color: #f3f3f3; padding-right: 30px; } .w .broke-box .left-section .search-grid #searchInp { padding: 0 0 0 10px; border: 0; height: 28px; line-height: 28px; width: 100%; background-color: transparent; } .w .broke-box .left-section .search-grid .fa-search { position: absolute; color: #06978e; cursor: pointer; width: 30px; height: 30px; top: 0; right: 0; text-align: center; line-height: 30px; } .w .broke-box .left-section .search-grid .fa-search:hover { font-size: 16px; opacity: 0.8; filter: aplha(opacity=80); } .w .broke-box .left-section .nav-tabs { height: 60px; line-height: 60px; } .w .broke-box .left-section .nav-tabs li { height: 100%; } .w .broke-box .left-section .nav-tabs li a { height: 100%; border: 0; color: #333; font-size: 14px; line-height: 60px; padding: 0 0px; } .w .broke-box .left-section .nav-tabs li.active a { color: #06978e; } .w .broke-box .left-section .nav-tabs li + li { margin-left: 30px; } .w .broke-box .left-section .tab-content .news-list .news-item { /* padding-bottom: 14px; */ border-bottom: 1px solid #ddd; } .w .broke-box .left-section .tab-content .news-list .news-item .news-title { padding: 6px 100px 6px 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } .w .broke-box .left-section .tab-content .news-list .news-item .news-title:before { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; background-color: #999; border-radius: 50%; margin-top: -4px; left: 0; } .w .broke-box .left-section .tab-content .news-list .news-item .news-title a { font-size: 16px; color: #333; line-height: 26px; } .w .broke-box .left-section .tab-content .news-list .news-item .news-title a:hover { text-decoration: underline!important; } .w .broke-box .left-section .tab-content .news-list .news-item .news-title .time { top: 8px; position: absolute; right: 0; color: #999; } .w .broke-box .left-section .tab-content .news-list .news-item .news-content { font-size: 14px; line-height: 26px; color: #888; /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ padding-bottom: 5px; } .w .broke-box .left-section .tab-content .news-list .news-item .figure-grid { margin-right: -10px; } .w .broke-box .left-section .tab-content .news-list .news-item .figure-grid a { display: block; } .w .broke-box .left-section .tab-content .news-list .news-item .figure-grid a .figure { display: none; float: left; width: 189px; height: 123px; margin-right: 10px; padding: 8px 0 15px; } .w .broke-box .left-section .tab-content .news-list .news-item .figure-grid a .figure .figure-img { width: 189px; height: 100px; /* background-color: #369; */ position: relative; overflow: hidden; } .w .broke-box .left-section .tab-content .news-list .news-item .figure-grid a .figure .figure-img img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 100%; /* transition: all 0.3s; */ } .w .broke-box .left-section .tab-content .news-list .news-item .figure-grid a .figure .figure-img img:hover { transform: scale(1.1); } .w .broke-box .left-section .tab-content .news-list .news-item .operate { height: 32px; line-height: 32px; display: none; } .w .broke-box .left-section .tab-content .news-list .news-item .operate .operate-ele { background: no-repeat 10px center; border-radius: 3px; display: inline-block; height: 32px; line-height: 32px; cursor: pointer; font-size: 14px; color: #666; padding-right: 12px; } .w .broke-box .left-section .tab-content .news-list .news-item .operate .operate-ele:hover, .w .broke-box .left-section .tab-content .news-list .news-item .operate .operate-ele.ac { color: #077972; background-color: #d4fdfa; } .w .broke-box .left-section .tab-content .news-list .news-item .operate .operate-ele + .operate-ele { margin-left: 28px; } .w .broke-box .left-section .tab-content .news-list .news-item .operate .praise { padding-left: 30px; background-image: url("/zkjaeduyuncom/images/operate-ele6.png"); } .w .broke-box .left-section .tab-content .news-list .news-item .operate .praise:hover, .w .broke-box .left-section .tab-content .news-list .news-item .operate .praise.ac { background-image: url("/zkjaeduyuncom/images/operate-ele8.png"); } .w .broke-box .left-section .tab-content .news-list .news-item .operate .comment { padding-left: 33px; background-image: url("/zkjaeduyuncom/images/operate-ele7.png"); } .w .broke-box .left-section .tab-content .news-list .news-item .operate .comment:hover, .w .broke-box .left-section .tab-content .news-list .news-item .operate .comment.ac { background-image: url("/zkjaeduyuncom/images/operate-ele1.png"); } .w .broke-box .left-section .tab-content .news-list .news-item .operate .share { padding-left: 35px; background-image: url("/zkjaeduyuncom/images/operate-ele2.png"); } .w .broke-box .left-section .tab-content .news-list .news-item .operate .share:hover, .w .broke-box .left-section .tab-content .news-list .news-item .operate .share.ac { background-image: url("/zkjaeduyuncom/images/operate-ele3.png"); } .w .broke-box .left-section .tab-content .news-list .news-item .operate .collection { padding-left: 33px; background-image: url("/zkjaeduyuncom/images/operate-ele4.png"); } .w .broke-box .left-section .tab-content .news-list .news-item .operate .collection:hover, .w .broke-box .left-section .tab-content .news-list .news-item .operate .collection.ac { background-image: url("/zkjaeduyuncom/images/operate-ele5.png"); } .w .broke-box .right-section { width: 310px; padding: 0 20px; background-color: #fff; border-radius: 10px; } .w .broke-box .right-section h5 { margin: 0; padding: 26px 0 10px 0; border-bottom: 1px solid #ddd; } .w .broke-box .right-section h5 p { height: 20px; line-height: 20px; border-left: 4px solid #06978e; padding-left: 11px; font-size: 14px; color: #333; font-weight: bold; } .w .broke-box .right-section .tj-list .tj-item { border-bottom: 1px solid #ddd; padding: 6px 0 6px 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } .w .broke-box .right-section .tj-list .tj-item:before { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; background-color: #999; border-radius: 50%; margin-top: -4px; left: 0; } .w .broke-box .right-section .tj-list .tj-item a { font-size: 14px; color: #666; line-height: 26px; } .w .broke-box .right-section .tj-list .tj-item a:hover { text-decoration: underline !important; } .w .broke-box .right-section .zkzt h5 { border-bottom: 0; } .w .broke-box .right-section .zkzt #hot-list { width: 100%; } .w .broke-box .right-section .zkzt #hot-list .list-item { width: 100%; height: 280px; margin: 0 0px 10px; background-color: #f2f2f2; overflow: hidden; position: relative; } .w .broke-box .right-section .zkzt #hot-list .list-item .img-box { width: 100%; height: 150px; overflow: hidden; } .w .broke-box .right-section .zkzt #hot-list .list-item .img-box img { width: 100%; height: 100%; transition: all 0.3s; } .w .broke-box .right-section .zkzt #hot-list .list-item .img-box img:hover { transform: scale(1.1); } .w .broke-box .right-section .zkzt #hot-list .list-item .title { padding-top: 25px; } .w .broke-box .right-section .zkzt #hot-list .list-item .title a { display: block; line-height: 20px; font-size: 16px; color: #222; margin: 13px 13px 0; max-height: 40px; overflow: hidden; } .w .broke-box .right-section .zkzt #hot-list .list-item .title a:hover { text-decoration: underline !important; } .w .broke-box .right-section .zkzt #hot-list .list-item .info { position: relative; padding: 0 13px; } .w .broke-box .right-section .zkzt #hot-list .list-item .info .p1, .w .broke-box .right-section .zkzt #hot-list .list-item .info .p2 { font-size: 12px; color: #666; line-height: 20px; max-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .w .broke-box .right-section .zkzt #hot-list .list-item a.btn-a { background: rgba(0, 0, 0, 0.3); width: 70px; height: 70px; left: 50%; margin-left: -35px; top: 150px; margin-top: -35px; border-radius: 50%; position: absolute; color: #fff; padding: 16px 0; font-size: 16px; text-align: center; transition: all 0.7s linear; letter-spacing: 3px; } .w .broke-box .right-section .zkzt #hot-list .list-item a.btn-a:hover { opacity: 0.8; filter: alpha(opacity=80); transform: rotate(360deg); } .w .broke-box .right-section .zt-list .zt-item { padding-top: 12px; } .w .broke-box .right-section .zt-list .zt-item a { display: block; width: 100%; height: 100%; } .w .broke-box .right-section .zt-list .zt-item a img { width: 100%; height: 100px; }