@media screen and (max-width: 990px) { .infoBody { width: 100%; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } .infoBody .infoclassify { margin: 15px 0; } .infoBody .infoclassify .classifyList { background: #f5f5f5; line-height: 35px; padding: 0 15px; margin-right: 20px; margin-bottom: 20px; font-size: 13px; border-bottom: 1px solid #DBDBDB; cursor: pointer; display: inline-block; border-radius: 5px; } .infoBody .infoclassify .classifyList:last-child { border-bottom: none; margin-bottom: 0; } .infoBody .infoclassify .classifyAction { color: #fff; background: #259F57; } .listBox { width: 100%; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } .listBox .newsItem { padding: 30px 0; display: flex; border-bottom: 1px solid #E1E1E1; cursor: pointer; } .listBox .newsItem:hover { background: #F5F7FE; } .listBox .newsItem .newsImg { width: 80px; height: 80px; overflow: hidden; flex-shrink: 0; background-color: #f5f5f5; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .listBox .newsItem .newsImg p { font-size: 22px; font-weight: bold; color: #333333; margin-bottom: 10px; } .listBox .newsItem:hover .newsImg p { color: #259F57; } .listBox .newsItem .newsImg span { font-size: 14px; font-weight: 400; color: #333333; } .listBox .newsItem:hover .newsImg span { color: #259F57; } .listBox .newsItem .newsInfo { width: calc(100% - 80px); padding-left: 15px; padding-right: 15px; box-sizing: border-box; height: 80px; display: flex; flex-direction: column; justify-content: space-between; } .listBox .newsItem .newsInfo .newsTitle { font-size: 16px; font-weight: 400; color: #333333; overflow: hidden; white-space: nowrap; /* 防止文字换行 */ text-overflow: ellipsis; width: 100%; } .listBox .newsItem:hover .newsInfo .newsTitle { color: #259F57; } .listBox .newsItem .newsInfo .newsText { font-size: 14px; font-weight: 400; color: #999999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; width: 100%; } .timeBox span { display: inline-block; font-size: 12px; font-weight: 400; color: #999999; } .pageCount { display: flex; justify-content: center; padding: 30px 0; } .pageCount .pageNum { display: flex; } .pageCount .pageBtn { width: 30px; height: 30px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; margin: 0 5px; border: 1px solid #efefef; box-sizing: border-box; } .pageCount .pageNum div { width: 30px; height: 30px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; border: 1px solid #efefef; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #999999; margin: 0 5px; cursor: pointer; } .pageCount .pageNum .activePgae { border: 0; background-color: #259f57; color: #fff; } .pageCount .disable { background-color: #efefef; } } @media screen and (min-width:991px) { .listBox { width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .infoBody { width: 960px; margin: 0 auto; box-sizing: border-box; display: flex; } .infoBody .infoclassify { width: 180px; margin-right: 10px; margin-top: 50px; } .infoBody .infoclassify .classifyList { background: #f5f5f5; line-height: 45px; padding: 0 15px; font-size: 13px; border-bottom: 1px solid #DBDBDB; cursor: pointer; } .infoBody .infoclassify .classifyList:last-child { border-bottom: none; } .infoBody .infoclassify .classifyAction { color: #fff; background: #259F57; } .infoContent { flex: 1; } .listBox { width: 100%; } .listBox .newsItem { padding: 50px 0; display: flex; border-bottom: 1px solid #E1E1E1; cursor: pointer; } .listBox .newsItem:hover { background: #F5F7FE; } .listBox .newsItem .newsImg { width: 160px; height: 160px; overflow: hidden; flex-shrink: 0; background-color: #f5f5f5; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .listBox .newsItem .newsImg p { font-size: 42px; font-weight: bold; color: #333333; margin-bottom: 10px; } .listBox .newsItem:hover .newsImg p { color: #259F57; } .listBox .newsItem .newsImg span { font-size: 24px; font-weight: 400; color: #333333; } .listBox .newsItem:hover .newsImg span { color: #259F57; } .listBox .newsItem .newsInfo { width: calc(100% - 160px); padding-left: 40px; padding-right: 15px; box-sizing: border-box; height: 160px; display: flex; flex-direction: column; justify-content: space-between; } .listBox .newsItem .newsInfo .newsTitle { font-size: 22px; font-weight: 400; color: #333333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; width: 100%; } .listBox .newsItem:hover .newsInfo .newsTitle { color: #259F57; } .listBox .newsItem .newsInfo .newsText { font-size: 16px; font-weight: 400; color: #999999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%; } .timeBox span { display: inline-block; font-size: 16px; font-weight: 400; color: #999999; } .pageCount { display: flex; justify-content: center; padding: 60px; } .pageCount .pageNum { display: flex; } .pageCount .pageBtn { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; margin: 0 5px; border: 1px solid #efefef; box-sizing: border-box; } .pageCount .pageNum div { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; border: 1px solid #efefef; box-sizing: border-box; font-size: 16px; font-weight: 400; color: #999999; margin: 0 5px; cursor: pointer; } .pageCount .pageNum .activePgae { border: 0; background-color: #259f57; color: #fff; } .pageCount .disable { background-color: #efefef; } } @media screen and (min-width:1200px) { .infoBody { width: 1140px; margin: 0 auto; display: flex; } .infoBody .infoclassify { width: 180px; margin-right: 10px; margin-top: 50px; } .infoBody .infoclassify .classifyList { background: #f5f5f5; line-height: 50px; padding: 0 15px; font-size: 13px; border-bottom: 1px solid #DBDBDB; cursor: pointer; } .infoBody .infoclassify .classifyList:last-child { border-bottom: none; } .infoBody .infoclassify .classifyAction { color: #fff; background: #259F57; } .infoContent { flex: 1; } .listBox { width: 100%; } .listBox .newsItem { padding: 50px 0; display: flex; border-bottom: 1px solid #E1E1E1; cursor: pointer; } .listBox .newsItem:hover { background: #F5F7FE; } .listBox .newsItem .newsImg { width: 160px; height: 160px; overflow: hidden; flex-shrink: 0; background-color: #f5f5f5; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .listBox .newsItem .newsImg p { font-size: 42px; font-weight: bold; color: #333333; margin-bottom: 10px; } .listBox .newsItem:hover .newsImg p { color: #259F57; } .listBox .newsItem .newsImg span { font-size: 24px; font-weight: 400; color: #333333; } .listBox .newsItem:hover .newsImg span { color: #259F57; } .listBox .newsItem .newsInfo { width: calc(100% - 160px); padding-left: 40px; padding-right: 15px; box-sizing: border-box; height: 160px; display: flex; flex-direction: column; justify-content: space-between; } .listBox .newsItem .newsInfo .newsTitle { font-size: 22px; font-weight: 400; color: #333333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; width: 100%; } .listBox .newsItem:hover .newsInfo .newsTitle { color: #259F57; } .listBox .newsItem .newsInfo .newsText { font-size: 16px; font-weight: 400; color: #999999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%; } .timeBox span { display: inline-block; margin-right: 120px; font-size: 16px; font-weight: 400; color: #999999; } .pageCount { display: flex; justify-content: center; padding: 60px; } .pageCount .pageNum { display: flex; } .pageCount .pageBtn { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; margin: 0 5px; border: 1px solid #efefef; box-sizing: border-box; } .pageCount .pageNum div { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; border: 1px solid #efefef; box-sizing: border-box; font-size: 16px; font-weight: 400; color: #999999; margin: 0 5px; cursor: pointer; } .pageCount .pageNum .activePgae { border: 0; background-color: #259f57; color: #fff; } .pageCount .disable { background-color: #efefef; } } @media screen and (min-width:1501px) { .infoBody { width: 1440px; margin: 0 auto; display: flex; } .infoBody .infoclassify { width: 200px; margin-right: 10px; margin-top: 50px; } .infoBody .infoclassify .classifyList { background: #f5f5f5; line-height: 55px; padding: 0 20px; font-size: 14px; border-bottom: 1px solid #DBDBDB; cursor: pointer; } .infoBody .infoclassify .classifyList:last-child { border-bottom: none; } .infoBody .infoclassify .classifyAction { color: #fff; background: #259F57; } .infoContent { flex: 1; } .listBox { width: 100%; } .listBox .newsItem { padding: 50px 0; display: flex; border-bottom: 1px solid #E1E1E1; cursor: pointer; } .listBox .newsItem:hover { background: #F5F7FE; } .listBox .newsItem .newsImg { width: 160px; height: 160px; overflow: hidden; flex-shrink: 0; background-color: #f5f5f5; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .listBox .newsItem .newsImg p { font-size: 42px; font-weight: bold; color: #333333; margin-bottom: 10px; } .listBox .newsItem:hover .newsImg p { color: #259F57; } .listBox .newsItem .newsImg span { font-size: 24px; font-weight: 400; color: #333333; } .listBox .newsItem:hover .newsImg span { color: #259F57; } .listBox .newsItem .newsInfo { width: calc(100% - 160px); padding-left: 40px; padding-right: 15px; box-sizing: border-box; height: 160px; display: flex; flex-direction: column; justify-content: space-between; } .listBox .newsItem .newsInfo .newsTitle { font-size: 22px; font-weight: 400; color: #333333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; width: 100%; } .listBox .newsItem:hover .newsInfo .newsTitle { color: #259F57; } .listBox .newsItem .newsInfo .newsText { font-size: 16px; font-weight: 400; color: #999999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%; } .timeBox span { display: inline-block; margin-right: 120px; font-size: 16px; font-weight: 400; color: #999999; } .pageCount { display: flex; justify-content: center; padding: 60px; } .pageCount .pageNum { display: flex; } .pageCount .pageBtn { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; margin: 0 5px; border: 1px solid #efefef; box-sizing: border-box; } .pageCount .pageNum div { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; border: 1px solid #efefef; box-sizing: border-box; font-size: 16px; font-weight: 400; color: #999999; margin: 0 5px; cursor: pointer; } .pageCount .pageNum .activePgae { border: 0; background-color: #259f57; color: #fff; } .pageCount .disable { background-color: #efefef; } }